added content to progress popover

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">&times;</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 %}