From df45d256b3c95dd3cd7b5cb386441c0c239bd67d Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sat, 2 Feb 2013 20:03:37 +0100
Subject: added some icons, select2, worked on package-list

---
 module/web/templates/default/base.html      |  34 +++--
 module/web/templates/default/dashboard.html | 206 +++++++++++++++++-----------
 module/web/templates/default/settings.html  |   4 -
 3 files changed, 144 insertions(+), 100 deletions(-)

(limited to 'module/web/templates')

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">
-- 
cgit v1.2.3