diff options
Diffstat (limited to 'module')
| -rw-r--r-- | module/web/static/css/default/style.less | 59 | ||||
| -rw-r--r-- | module/web/templates/default/base.html | 48 |
2 files changed, 92 insertions, 15 deletions
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 45770cdbb..9dec0bce4 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -225,10 +225,6 @@ header div.right { padding-right: 20px;
}
-header .pull-right {
- color: #fee267;
-}
-
header span.title {
color: white;
float: left;
@@ -248,13 +244,10 @@ header .logo { }
.header_block {
- float: right;
-// font-family: SansationRegular, sans-serif;
+ float: right; // font-family: SansationRegular, sans-serif;
margin: 10px 8px 0;
line-height: 18px;
- font-size: small;
-
-// i {
+ font-size: small; // i {
// margin-top: 0;
// vertical-align: text-bottom;
// }
@@ -289,6 +282,11 @@ header .logo { .header_block.right-border {
background: url("../../img/default/box-separator.png") repeat-y right;
padding-right: 1%;
+
+ .pull-right {
+ color: @yellow;
+ }
+
}
@media (max-width: @large-screen) {
@@ -299,10 +297,53 @@ header .logo { }
#progress-area {
+ position: relative;
float: right;
width: 26%;
margin-right: 15px;
text-align: left;
+
+ .popover {
+// display: block;
+ width: 120%;
+ left: -60%; // Half of width
+ margin-left: 50%;
+ top: 100%
+ }
+
+ .popover-title, .popover-content {
+ color: @greyDark;
+ }
+
+ .close {
+ line-height: 14px;
+ }
+
+}
+
+.progress-list {
+ list-style: none;
+ margin: 0;
+ font-size: small;
+
+ li {
+
+ &:not(:last-child) {
+ margin-bottom: 5px;
+ padding-bottom: 5px;
+ border-bottom: 1px dashed @greyLight;
+ }
+
+ .progress {
+ height: 8px;
+ margin-bottom: 0;
+
+ .bar {
+ .gradient(bottom, @blue, @blueLight);
+ }
+ }
+ }
+
}
#globalprogress {
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index 8d6ff8c14..a0f7aaa05 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -42,8 +42,8 @@ Notifications
<span class="badge badge-info">88</span>
</div>
-{# <a class="header-link" href="/settings"><i class="icon-cog icon-white"></i> Settings</a>#}
-{# <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>#}
+ {# <a class="header-link" href="/settings"><i class="icon-cog icon-white"></i> Settings</a>#}
+ {# <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>#}
<br/>
<a class="btn btn-success btn-grabber" href="#"><i class="icon-plus icon-white"></i> Add</a>
@@ -83,10 +83,46 @@ <div class="bar" style="width: 48%">downloading... (48%)</div>
</div>
-{# <div>#}
-{# <span class="pull-left">3,65 MB of 5,30 MB</span>#}
-{# <span class="pull-right">420,7 kB / sec</span>#}
-{# </div>#}
+ {# <div>#}
+ {# <span class="pull-left">3,65 MB of 5,30 MB</span>#}
+ {# <span class="pull-right">420,7 kB / sec</span>#}
+ {# </div>#}
+ <div class="popover bottom">
+ <div class="arrow"></div>
+ <div class="popover-inner">
+ <h3 class="popover-title">
+ Running...
+ <button type="button" class="close" data-dismiss="popover"
+ aria-hidden="true">×</button>
+ </h3>
+ <div class="popover-content">
+ <ul class="progress-list">
+ <li>
+ Some Download
+ <span class="pull-right">YouTube</span>
+ <div class="progress">
+ <div class="bar" style="width: 25%"></div>
+ </div>
+ 20 Kb of 23 MB (500 kb/s)
+ <span class="pull-right">
+ 50%
+ </span>
+ </li>
+ <li>
+ Some Download
+ <span class="pull-right">YouTube</span>
+ <div class="progress">
+ <div class="bar" style="width: 25%"></div>
+ </div>
+ 20 Kb of 23 MB (500 kb/s)
+ <span class="pull-right">
+ 50%
+ </span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
</div>
{% endif %}
|