q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve UI by having larger modal windows for all modals except torrent and metalink windows.

Browse Source 
+ Show the tip in top of fields in modals.
This commit is contained in:
Florent Viard 2014-02-15 20:37:04 +01:00
parent 447f60c875
commit e006e06507
2 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/modals.css
View File

@ -1,3 +1,13 @@
.modal-adduris textarea { .modal-adduris textarea {
width: 100%; width: 100%;
} }
.modal-large {
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
.modal-body {
padding-bottom: 0px;
margin-bottom: 5px;
}

42
index.html
View File

@ -582,7 +582,7 @@
<div ng-controller="ModalCtrl"> <div ng-controller="ModalCtrl">
<!--{{{ add uri modal --> <!--{{{ add uri modal -->
<div class="modal hide modal-adduris" modal="getUris.shown"> <div class="modal hide modal-adduris modal-large" modal="getUris.shown">
<div class="modal-header"> <div class="modal-header">
<button class="close" ng-click="getUris.close()">x</button> <button class="close" ng-click="getUris.close()">x</button>
<h3>Add Downloads By URIs</h3> <h3>Add Downloads By URIs</h3>
@ -590,19 +590,16 @@
<form class="modal-body"> <form class="modal-body">
<fieldset> <fieldset>
<legend>Download URIs</legend> <legend>Download URIs</legend>
<textarea rows="6" ng-model="getUris.uris"></textarea>
<p class="help-block"> <p class="help-block">
You can add multiple downloads (files) - You can add multiple downloads (files)
at the same time by putting uris for each at the same time by putting uris for each
file on a separate line. file on a separate line. <br>
<br> - You can also add multiple uris (mirrors) for the
You can also add multiple uris (mirrors) for the
*same* file. To do this separate the uris *same* file. To do this separate the uris
by a space. by a space. <br>
<br> - A URI can be HTTP(S)/FTP/BitTorrent Magnet URI.
Aria2 will use multiple uris (or mirrors) to boost - Aria2 will use multiple uris (or mirrors) to boost
the download speed for that file (download). the download speed for that file (download). <br>
<br>
E.g. To add 2 files (downloads) f1.jpg E.g. To add 2 files (downloads) f1.jpg
and f2.mp4 with 2 uris (mirrors) each, and f2.mp4 with 2 uris (mirrors) each,
add uris as following: add uris as following:
@ -612,8 +609,8 @@
http://ex1.com/f1.jpg http://ex2.com/f1.jpg http://ex1.com/f1.jpg http://ex2.com/f1.jpg
http://ex1.com/f2.mp4 http://ex2.com/f2.mp4 http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
</pre> </pre>
A URI can be HTTP(S)/FTP/BitTorrent Magnet URI.
</p> </p>
<textarea rows="6" ng-model="getUris.uris"></textarea>
</fieldset> </fieldset>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
@ -632,14 +629,12 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<form class="modal-body"> <form class="modal-body">
<fieldset> <fieldset>
<legend>Select Torrents</legend> <legend>Select Torrents</legend>
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
<p class="help-block"> <p class="help-block">
Select the torrent from the local filesystem to start the download. - Select the torrent from the local filesystem to start the download. <br>
<br> - You can select multiple torrents to start multiple downloads <br>
You can select multiple torrents to start multiple downloads - To add a magnet torrent url, use the add url option and add it there.
<br>
To add a magnet torrent url, use the add url option and add it there.
</p> </p>
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
</fieldset> </fieldset>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
@ -658,12 +653,11 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<form class="modal-body"> <form class="modal-body">
<fieldset> <fieldset>
<legend>Select Metalinks</legend> <legend>Select Metalinks</legend>
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
<p class="help-block"> <p class="help-block">
Select the metalink from the local filesystem to start the download. - Select the metalink from the local filesystem to start the download. <br>
<br> - You can select multiple metalinks to start multiple downloads
You can select multiple metalinks to start multiple downloads
</p> </p>
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
</fieldset> </fieldset>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
@ -674,7 +668,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<!-- }}} --> <!-- }}} -->
<!-- {{{ settings modal --> <!-- {{{ settings modal -->
<div class="modal hide" modal="settings.shown"> <div class="modal hide modal-large" modal="settings.shown">
<div class="modal-header"> <div class="modal-header">
<button class="close" ng-click="settings.close()">x</button> <button class="close" ng-click="settings.close()">x</button>
<h3>{{settings.title}}</h3> <h3>{{settings.title}}</h3>
@ -709,7 +703,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<!-- }}} --> <!-- }}} -->
<!--{{{ connection modal --> <!--{{{ connection modal -->
<div class="modal hide" modal="connection.shown"> <div class="modal hide modal-large" modal="connection.shown">
<div class="modal-header"> <div class="modal-header">
<button class="close" ng-click="connection.close()">x</button> <button class="close" ng-click="connection.close()">x</button>
<h3>Connection Settings</h3> <h3>Connection Settings</h3>