added some icons, select2, worked on package-list

3 files changed, 144 insertions, 100 deletions

diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 320732b3f..48b18e368 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -10,7 +10,9 @@
     <!-- TODO Include this font -->

     <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css"/>

     <link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css"/>

+    <link href="/static/css/select2.css" rel="stylesheet" type="text/css"/>

     <link href="/static/css/font.css" rel="stylesheet" type="text/css"/>

+    <link href="static/css/fontawesome.css" rel="stylesheet" type="text/css"/>

     <link href="/static/css/default/style.less" rel="stylesheet/less" type="text/css" media="screen"/>

     {% block css %}

     {% endblock %}

@@ -54,7 +56,7 @@
                                 class="caret"></span></a>

                         <ul class="dropdown-menu" style="right: 0; left: -100%">

                             <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>

-                            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>                          

+                            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>

                             <li class="divider"></li>

                             <li><a href="/admin"><i class="icon-star"></i> Admin</a></li>

                             <li><a href="/settings"><i class="icon-wrench"></i> Settings</a></li>

@@ -81,6 +83,7 @@
                 <div id="progress-area" style="margin-top: 16px">

                     No running tasks

                     <i class="icon-white icon-tasks pull-right"></i>

+

                     <div class="progress" id="globalprogress">

                         <div class="bar" style="width: 48%">48%</div>

                     </div>

@@ -101,6 +104,7 @@
                                     <li>

                                         Some Download

                                         <span class="pull-right">YouTube</span>

+

                                         <div class="progress">

                                             <div class="bar" style="width: 25%"></div>

                                         </div>

@@ -112,6 +116,7 @@
                                     <li>

                                         Some Download

                                         <span class="pull-right">YouTube</span>

+

                                         <div class="progress">

                                             <div class="bar" style="width: 45%"></div>

                                         </div>

@@ -129,23 +134,24 @@
             {% endif %}

         </div>

     </header>

-    <div id="actionbar-container" class="container-fluid">

+    <div id="content-container" class="container-fluid">

         <div class="row-fluid">

-        <div class="span2 offset1">

-            <h5 style="text-align: center">Notifcations or something</h5>

+            <div class="span2 offset1">

+                <h5 style="text-align: center">Notifcations or something</h5>

+            </div>

+            {% block actionbar %}

+            {% endblock %}

         </div>

-        {% block actionbar %}

-        {% endblock %}

+        <div class="row-fluid" id="content">

+{#            TODO: messages #}

+            {% for msg in messages %}

+                <p>{{ msg }}</p>

+            {% endfor %}

+

+            {% block content %}

+            {% endblock content %}

         </div>

     </div>

-    <div id="content">

-        {% for msg in messages %}

-            <p>{{ msg }}</p>

-        {% endfor %}

-

-        {% block content %}

-        {% endblock content %}

-    </div>

 </div>

 <footer>

     <div class="center">

diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 91a221cea..e512a87d8 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -5,7 +5,6 @@
 

 {% block css %}

     <link href="static/css/default/dashboard.less" rel="stylesheet/less" type="text/css" media="screen"/>

-    <link rel="stylesheet" type="text/css" href="static/css/fontawesome.css" />

 {% endblock %}

 

 {% block require %}

@@ -74,98 +73,141 @@
 {% endblock %}

 

 {% block actionbar %}

-    <ul id="actionbar" class="nav nav-pills span9">

-    <li>

-        <ul class="breadcrumb">

-            <li><a href="#">{{ _("Home") }}</a> <span class="divider">/</span></li>

-            <li class="active">Data</li>

-        </ul>

-    </li>

+    <ul class="actionbar nav nav-pills span9">

+        <li>

+            <ul class="breadcrumb">

+                <li><a href="#">{{ _("Home") }}</a> <span class="divider">/</span></li>

+                <li class="active">Data</li>

+            </ul>

+        </li>

 

-    <li style="float: right;">

-        <form class="form-search">

-            <div class="input-append">

-                <input type="text" class="search-query" style="width: 100px">

-                <button type="submit" class="btn">{{ _("Search") }}</button>

-            </div>

-        </form>

-    </li>

-    <li class="dropdown" style="float: right;">

-        <a class="dropdown-toggle"

-           data-toggle="dropdown"

-           href="#">

-            Type

-            <b class="caret"></b>

-        </a>

-        <ul class="dropdown-menu">

-            <li><a><i class="icon-ok"></i>&nbsp;Audio</a></li>

-            <li><a><i class="icon-remove"></i>&nbsp;Video</a></li>

-            <li><a>Archive</a></li>

-        </ul>

-    </li>

-    <li class="dropdown" style="float: right;">

-        <a class="dropdown-toggle"

-           data-toggle="dropdown"

-           href="#">

-            More

-            <b class="caret"></b>

-        </a>

-        <ul class="dropdown-menu">

-            <li><a>Active</a></li>

-            <li><a>Failed</a></li>

-        </ul>

-    </li>

-

-    <li style="float: right;">

-        <a>Failed</a>

-    </li>

-    <li style="float: right;">

-        <a>Unfinished</a>

-    </li>

-    <li class="active" style="float: right;">

-        <a href="#" id="show_active">All</a>

-    </li>

+        <li style="float: right;">

+            <form class="form-search">

+                <div class="input-append">

+                    <input type="text" class="search-query" style="width: 100px">

+                    <button type="submit" class="btn">{{ _("Search") }}</button>

+                </div>

+            </form>

+        </li>

+        <li class="dropdown" style="float: right;">

+            <a class="dropdown-toggle"

+               data-toggle="dropdown"

+               href="#">

+                Type

+                <b class="caret"></b>

+            </a>

+            <ul class="dropdown-menu">

+                <li><a><i class="icon-ok"></i>&nbsp;Audio</a></li>

+                <li><a><i class="icon-remove"></i>&nbsp;Video</a></li>

+                <li><a>Archive</a></li>

+            </ul>

+        </li>

+        <li class="dropdown" style="float: right;">

+            <a class="dropdown-toggle"

+               data-toggle="dropdown"

+               href="#">

+                More

+                <b class="caret"></b>

+            </a>

+            <ul class="dropdown-menu">

+                <li><a>Active</a></li>

+                <li><a>Failed</a></li>

+            </ul>

+        </li>

+

+        <li style="float: right;">

+            <a>Failed</a>

+        </li>

+        <li style="float: right;">

+            <a>Unfinished</a>

+        </li>

+        <li class="active" style="float: right;">

+            <a href="#" id="show_active">All</a>

+        </li>

     </ul>

 {% endblock %}

 

 

 {% block content %}

 

-    <div class="container-fluid">

-        <div class="row-fluid">

-            <div class="span3">

-                <div class="sidebar-header" style="font-size: 2em">

-                    <i class="iconf-hdd"></i> Packages

+    <div class="span3">

+        <div class="sidebar-header">

+            <i class="iconf-hdd"></i> Packages

+            <div class="pull-right" style="font-size: medium; line-height: normal">

+                <i class="iconf-chevron-down" style="font-size: 20px"></i>

+            </div>

+            <div class="clearfix"></div>

+        </div>

+        <ul class="package-list">

+            <li class="package-item">

+                <i class="iconf-folder-close-alt"></i>

+                Package

+                {#                        <div class="package-info">#}

+                {#                            1/2 5MIB 100 MIB#}

+                {#                        </div>#}

+                <div class="package-indicator">

+                    <i class="iconf-check-empty"></i>

+                    <i class="iconf-chevron-down"></i>

                 </div>

-                <ul>

-                    <li>Package</li>

-                    <li>More package</li>

-                    <li>many many More package</li>

-                </ul>

-                <div class="sidebar-header" style="font-size: 2em">

-                    <i class="iconf-group"></i> Shared

+                <div class="progress">

+                    <div class="bar bar-info" style="width: 50%"></div>

+                    <div class="bar bar-danger" style="width: 20%"></div>

                 </div>

-                <ul>

-                    <li>Content from</li>

-                    <li>Other user</li>

-                    <li>which they shared</li>

-                </ul>

-                <div class="sidebar-header" style="font-size: 2em">

-                    <i class="iconf-sitemap"></i> Remote

+            </li>

+            <li class="package-item">

+                <i class="iconf-folder-close-alt"></i>

+                many many More packages with really long names, some

+                even don't fit on the screen

+                <div class="package-indicator">

+                    <i class="iconf-check-empty"></i>

+                    <i class="iconf-list"></i>

                 </div>

-                <ul>

-                    <li>Content from</li>

-                    <li>remote sites</li>

-                    <li>mega</li>

-                    <li>dropbox</li>

-                    <li>other pyloads</li>

-                </ul>

-            </div>

-            <div class="span9">

-                <div id="dashboard">

-                    {#  Build up by js #}

+                <div class="progress">

+                    <div class="bar bar-info" style="width: 50%"></div>

                 </div>

-            </div>

+            </li>

+        </ul>

+        <div class="sidebar-header">

+            <i class="iconf-group"></i> Shared

+        </div>

+        <ul class="package-list">

+            <li>Content from</li>

+            <li>Other user</li>

+            <li>which they shared</li>

+        </ul>

+        <div class="sidebar-header">

+            <i class="iconf-sitemap"></i> Remote

+        </div>

+        <ul>

+            <li>Content from</li>

+            <li>remote sites</li>

+            <li>mega</li>

+            <li>dropbox</li>

+            <li>other pyloads</li>

+        </ul>

+    </div>

+    <div class="span9">

+        <div id="dashboard">

+            {#  Build up by js #}

         </div>

     </div>

+

+    <script src="static/js/libs/jquery-1.9.0.js"></script>

+    <script src="static/js/libs/select2-3.2.js"></script>

+    {#    <script src="static/js/libs/jquery.transit-0.9.9.js"></script>#}

+    <script type="text/javascript">

+        $("#filter").select2({tags: ["red", "green", "blue"]});

+

+        {#        $('.package-indicator').on('mouseenter', function(el) {#}

+        {#            $(this).parent().transition({#}

+        {#                rotateX: '180deg'#}

+        {#            });#}

+        {#        });#}

+        {##}

+        {#        $('.package-item').on('mouseout', function() {#}

+        {#            $(this).transition({rotateX: '0deg'});#}

+        {#        })#}

+

+    </script>

+

 {% endblock %}
\ No newline at end of file
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 4c1a3f295..1f9be3db0 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -28,8 +28,6 @@
 {% endblock %}

 

 {% block content %}

-    <div class="container-fluid">

-        <div class="row-fluid">

             <div class="span2">

                 <ul class="nav nav-list well settings-menu">

                 </ul>

@@ -106,8 +104,6 @@
                     </form>

                 </div>

             </div>

-        </div>

-    </div>

     <script src="static/js/libs/jquery-1.9.0.js"></script>

     {#    <script src="static/js/libs/bootstrap-2.1.1.js"></script>#}

     <script type="text/javascript">