From 40b05174b69de8b0f8366b49d43a3cbc97563fda Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Wed, 30 Jan 2013 22:11:10 +0100
Subject: added actionbar, two-column dashboard

---
 docs/resources/pyload_logo.svg               |  66 ++++++++++++-
 module/web/static/css/default/admin.less     |   2 +-
 module/web/static/css/default/common.less    |  67 +++++++++++++
 module/web/static/css/default/dashboard.less |   4 +-
 module/web/static/css/default/settings.less  |   5 +-
 module/web/static/css/default/style.less     | 136 +++++++++++----------------
 module/web/templates/default/base.html       |   9 ++
 module/web/templates/default/dashboard.html  | 120 +++++++++++++----------
 8 files changed, 265 insertions(+), 144 deletions(-)
 create mode 100644 module/web/static/css/default/common.less

diff --git a/docs/resources/pyload_logo.svg b/docs/resources/pyload_logo.svg
index a6217e79a..9346f09ad 100644
--- a/docs/resources/pyload_logo.svg
+++ b/docs/resources/pyload_logo.svg
@@ -29,7 +29,16 @@
    id="title3794">pyLoad Logo</title><metadata
    id="metadata33"><rdf:RDF><cc:Work
        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>pyLoad Logo</dc:title></cc:Work></rdf:RDF></metadata><defs
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>pyLoad Logo</dc:title><dc:creator><cc:Agent><dc:title>pyLoad Team</dc:title></cc:Agent></dc:creator><cc:license
+         rdf:resource="http://creativecommons.org/licenses/by-nc-sa/3.0/" /><dc:subject><rdf:Bag><rdf:li>pyload logo</rdf:li></rdf:Bag></dc:subject><dc:description>Official pyLoad logo with some optional filters</dc:description></cc:Work><cc:License
+       rdf:about="http://creativecommons.org/licenses/by-nc-sa/3.0/"><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Notice" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Attribution" /><cc:prohibits
+         rdf:resource="http://creativecommons.org/ns#CommercialUse" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#ShareAlike" /></cc:License></rdf:RDF></metadata><defs
    id="defs31"><color-profile
      name="Generic-RGB-Profile"
      xlink:href="/System/Library/ColorSync/Profiles/Generic RGB Profile.icc"
@@ -103,7 +112,7 @@
      color-interpolation-filters="sRGB"><feGaussianBlur
        id="feGaussianBlur3025"
        in="SourceAlpha"
-       stdDeviation="8"
+       stdDeviation="10"
        result="blur" /><feColorMatrix
        id="feColorMatrix3027"
        values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1 "
@@ -122,7 +131,56 @@
        in2="result2"
        in="SourceGraphic"
        result="result3"
-       operator="atop" /></filter></defs><sodipodi:namedview
+       operator="atop" /></filter><filter
+     id="filter3140"
+     inkscape:label="3D Effect"
+     inkscape:menu="Bevels"
+     inkscape:menu-tooltip="Basic specular bevel to use for building textures"
+     color-interpolation-filters="sRGB"><feGaussianBlur
+       id="feGaussianBlur3142"
+       stdDeviation="6"
+       in="SourceGraphic"
+       result="result0" /><feDiffuseLighting
+       id="feDiffuseLighting3144"
+       lighting-color="rgb(255,255,255)"
+       diffuseConstant="1"
+       surfaceScale="4"
+       result="result5"><feDistantLight
+         id="feDistantLight3146"
+         elevation="45"
+         azimuth="235" /></feDiffuseLighting><feComposite
+       id="feComposite3148"
+       in2="SourceGraphic"
+       k1="1.4"
+       in="result5"
+       result="fbSourceGraphic"
+       operator="arithmetic" /><feGaussianBlur
+       id="feGaussianBlur3150"
+       result="result0"
+       in="fbSourceGraphic"
+       stdDeviation="6" /><feSpecularLighting
+       id="feSpecularLighting3152"
+       specularExponent="25"
+       specularConstant="1"
+       surfaceScale="4"
+       lighting-color="rgb(255,255,255)"
+       result="result1"
+       in="result0"><feDistantLight
+         id="feDistantLight3154"
+         azimuth="235"
+         elevation="45" /></feSpecularLighting><feComposite
+       id="feComposite3156"
+       in2="result91"
+       k3="1"
+       k2="1"
+       operator="arithmetic"
+       result="result4"
+       in="fbSourceGraphic" /><feComposite
+       id="feComposite3158"
+       in2="SourceGraphic"
+       operator="in"
+       result="result2"
+       in="result4" /></filter></defs><sodipodi:namedview
    pagecolor="#ffffff"
    bordercolor="#666666"
    borderopacity="1"
@@ -136,7 +194,7 @@
    id="namedview29"
    showgrid="false"
    inkscape:zoom="0.5"
-   inkscape:cx="551.13514"
+   inkscape:cx="556.17192"
    inkscape:cy="487.74566"
    inkscape:window-x="0"
    inkscape:window-y="0"
diff --git a/module/web/static/css/default/admin.less b/module/web/static/css/default/admin.less
index dcd4acda5..604027dda 100644
--- a/module/web/static/css/default/admin.less
+++ b/module/web/static/css/default/admin.less
@@ -1,4 +1,4 @@
-@import "style.less";
+@import "common.less";
 
 /* 
     Admin 
diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less
new file mode 100644
index 000000000..990d665c1
--- /dev/null
+++ b/module/web/static/css/default/common.less
@@ -0,0 +1,67 @@
+/*
+   Definitions
+*/
+
+/*
+  Bootstrap size: Phones to tablets, min value when scrollbar appears
+*/
+@min-width: 767px;
+
+/*
+  Threshold for slightly larger screen
+*/
+@large-screen: 1150px;
+
+@header-height: 75px;
+@actionbar-height: 40px;
+@footer-height: 100px;
+
+@light: #ffffff;
+@dark: #333333;
+
+@grey: #757575;
+@greyLight: #E5E5E5;
+@greyLighter: #F5F5F5;
+@greyDark: #444444;
+@greyDarker: #111113;
+
+@yellow: #ffd856;
+@yellowLighter: lighten(spin(@yellow, 10), 20%);
+@yellowLightest: lighten(spin(@yellow, 15), 30%);
+
+@blue: #3571a2;
+@blueLight: lighten(spin(@blue, 5), 10%);
+@blueLighter: lighten(spin(@blue, 10), 20%);
+@blueLightest: lighten(spin(@blue, 20), 40%);
+@blueDark: darken(spin(@blue, -5), 10%);
+@blueDarker: darken(spin(@blue, -10), 20%);
+
+@green: #468847;
+@greenLight: lighten(spin(@green, 5), 10%);
+
+@red: #b94a48;
+@redLight: lighten(spin(@red, 5), 10%);
+
+@emph: #FF7637;
+
+
+/*
+  Mixins
+*/
+
+.gradient(@origin: left, @start: #ffffff, @stop: #000000) {
+  background-color: @start;
+  background-image: -webkit-linear-gradient(@origin, @start, @stop);
+  background-image: -moz-linear-gradient(@origin, @start, @stop);
+  background-image: -o-linear-gradient(@origin, @start, @stop);
+  background-image: -ms-linear-gradient(@origin, @start, @stop);
+  background-image: linear-gradient(@origin, @start, @stop);
+}
+
+.transition(@prop: all, @time: 0.25s, @ease: linear) {
+  -webkit-transition: @prop @time @ease;
+  -moz-transition: @prop @time @ease;
+  -o-transition: @prop @time @ease;
+  -ms-transition: @prop @time @ease;
+  transition: @prop @time @ease;
+}
\ No newline at end of file
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index 0c749eb36..e7e6117da 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -1,4 +1,4 @@
-@import "style.less";
+@import "common.less";
 
 /*
     Dashboard
@@ -93,7 +93,7 @@
 }
 
 .package-row.first {
-  width: 50%;
+  width: 40%;
   font-weight: bold;
 
   i {
diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 225152da1..4b4efb423 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -1,4 +1,4 @@
-@import "style.less";
+@import "common.less";
 
 /* 
     Settings 
@@ -34,9 +34,6 @@
 }
 
 .setting-box {
-
-  margin-top: 20px;
-
   border: 10px solid @blueDark;
   box-shadow: 0 0 5px @dark;
 //  .gradient(bottom, @yellowLightest, @light);
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index ab79bb89c..ad84804e5 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -1,71 +1,4 @@
-/*
-   Definitions
-*/
-
-/*
-  Bootstrap size: Phones to tablets, min value when scrollbar appears
-*/
-@min-width: 767px;
-
-/*
-  Threshold for slightly larger screen
-*/
-@large-screen: 1150px;
-
-@header-height: 75px;
-@footer-height: 100px;
-
-@margin-side: 100px;
-
-@light: #ffffff;
-@dark: #333333;
-
-@grey: #757575;
-@greyLight: #E5E5E5;
-@greyLighter: #F5F5F5;
-@greyDark: #444444;
-@greyDarker: #111113;
-
-@yellow: #ffd856;
-@yellowLighter: lighten(spin(@yellow, 10), 20%);
-@yellowLightest: lighten(spin(@yellow, 15), 30%);
-
-@blue: #3571a2;
-@blueLight: lighten(spin(@blue, 5), 10%);
-@blueLighter: lighten(spin(@blue, 10), 20%);
-@blueLightest: lighten(spin(@blue, 20), 40%);
-@blueDark: darken(spin(@blue, -5), 10%);
-@blueDarker: darken(spin(@blue, -10), 20%);
-
-@green: #468847;
-@greenLight: lighten(spin(@green, 5), 10%);
-
-@red: #b94a48;
-@redLight: lighten(spin(@red, 5), 10%);
-
-@emph: #FF7637;
-
-/*
-  Mixins
-*/
-
-.gradient(@origin: left, @start: #ffffff, @stop: #000000) {
-  background-color: @start;
-  background-image: -webkit-linear-gradient(@origin, @start, @stop);
-  background-image: -moz-linear-gradient(@origin, @start, @stop);
-  background-image: -o-linear-gradient(@origin, @start, @stop);
-  background-image: -ms-linear-gradient(@origin, @start, @stop);
-  background-image: linear-gradient(@origin, @start, @stop);
-}
-
-.transition(@prop: all, @time: 0.25s, @ease: linear) {
-  -webkit-transition: @prop @time @ease;
-  -moz-transition: @prop @time @ease;
-  -o-transition: @prop @time @ease;
-  -ms-transition: @prop @time @ease;
-  transition: @prop @time @ease;
-}
-
+@import "common.less";
 /*
    General
 */
@@ -108,17 +41,9 @@ a:hover {
 }
 
 #content {
-  margin-left: @margin-side;
-  margin-right: @margin-side;
   padding-bottom: @footer-height;
 }
 
-#content:before {
-  display: block;
-  content: " ";
-  height: @header-height;
-}
-
 /*
   Additional Responsive Class for larger desktop
 */
@@ -131,11 +56,6 @@ a:hover {
   .visible-large-screen {
     display: none !important;
   }
-
-  #content {
-    margin-left: @margin-side / 2;
-    margin-right: @margin-side / 2;
-  }
 }
 
 .btn-blue {
@@ -373,6 +293,60 @@ header .logo {
   font-family: sans-serif
 }
 
+/*
+   Actionbar
+*/
+
+#actionbar-container:before {
+  display: block;
+  content: " ";
+  height: @header-height;
+}
+
+#actionbar-container .row-fluid {
+  height: @actionbar-height;
+
+  padding-top: 2px;
+  margin-bottom: 5px;
+
+}
+
+#actionbar {
+  padding-bottom: 3px;
+  margin-bottom: 0;
+  border-bottom: 1px dashed @grey;
+}
+
+#actionbar > li > a {
+  margin-top: 4px;
+}
+
+#actionbar .breadcrumb {
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 0;
+
+  .active {
+    color: @grey;
+  }
+
+}
+
+#actionbar form {
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+#actionbar input, #actionbar button {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+#actionbar .dropdown-menu i {
+  margin-top: 4px;
+  padding-right: 5px;
+}
+
 /*
     Login
 */
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 3b6cfd07b..bb03eaf81 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -129,6 +129,15 @@
             {% endif %}
         </div>
     </header>
+    <div id="actionbar-container" class="container-fluid">
+        <div class="row-fluid">
+        <div class="span2 offset1">
+            <h5>Notifcations or something</h5>
+        </div>
+        {% block actionbar %}
+        {% endblock %}
+        </div>
+    </div>
     <div id="content">
         {% for msg in messages %}
             <p>{{ msg }}</p>
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 875178931..2400d9bde 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -72,60 +72,76 @@
     </script>
 {% endblock %}
 
-{% block content %}
-    <ul id="dash-nav" class="nav nav-pills">
-        <li>
-            <ul class="breadcrumb">
-                <li><a href="#">{{ _("Home") }}</a> <span class="divider">/</span></li>
-                <li class="active">Data</li>
-            </ul>
-        </li>
+{% 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>
 
-        <li style="float: right;">
-            <form class="form-search">
-                <div class="input-append">
-                    <input type="text" class="span2 search-query">
-                    <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;">
+        <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;">
+        <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>
-    <div id="dashboard">
-        {#  Build up by js #}
+{% endblock %}
+
+
+{% block content %}
+
+    <div class="container-fluid">
+        <div class="row-fluid">
+            <div class="span3">
+                <div class="well">
+                    Packages
+                </div>
+            </div>
+            <div class="span9">
+                <div id="dashboard">
+                    {#  Build up by js #}
+                </div>
+            </div>
+        </div>
     </div>
 {% endblock %}
\ No newline at end of file
-- 
cgit v1.2.3