added some icons, placeholder for left menu

9 files changed, 151 insertions, 80 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index e7e6117da..fd0ebf61e 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -4,46 +4,6 @@
     Dashboard

 */

 

-.nav > li > a:hover {

-  color: @blue;

-}

-

-#dash-nav {

-  border-bottom: 1px dashed @grey;

-  padding-bottom: 2px;

-  margin-bottom: 5px;

-}

-

-#dash-nav > li > a {

-  margin-top: 5px;

-}

-

-#dash-nav .breadcrumb {

-  margin: 0;

-  padding-top: 10px;

-  padding-bottom: 0;

-

-  .active {

-    color: @grey;

-  }

-

-}

-

-#dash-nav form {

-  margin-top: 8px;

-  margin-bottom: 0;

-}

-

-#dash-nav input, #dash-nav button {

-  padding-top: 2px;

-  padding-bottom: 2px;

-}

-

-#dash-nav .dropdown-menu i {

-  margin-top: 4px;

-  padding-right: 5px;

-}

-

 #dashboard ul {

   margin: 0;

   list-style: none;

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index ad84804e5..16eaea6b6 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -297,6 +297,10 @@ header .logo {
    Actionbar

 */

 

+.nav > li > a:hover {

+  color: @blue;

+}

+

 #actionbar-container:before {

   display: block;

   content: " ";

diff --git a/module/web/static/css/fontawesome.css b/module/web/static/css/fontawesome.css
index 6c157dc7e..c6dde169e 100644
--- a/module/web/static/css/fontawesome.css
+++ b/module/web/static/css/fontawesome.css
@@ -1,51 +1,70 @@
-/*  Font Awesome 3.0
-    the iconic font designed for use with Twitter Bootstrap
-    -------------------------------------------------------
-    The full suite of pictographic icons, examples, and documentation
-    can be found at: http://fortawesome.github.com/Font-Awesome/
+/*!
+ *  Font Awesome 3.0.2
+ *  the iconic font designed for use with Twitter Bootstrap
+ *  -------------------------------------------------------
+ *  The full suite of pictographic icons, examples, and documentation
+ *  can be found at: http://fortawesome.github.com/Font-Awesome/
+ *
+ *  License
+ *  -------------------------------------------------------
+ *  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
+ *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+ *    http://opensource.org/licenses/mit-license.html
+ *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
+ *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
 
-    License
-    -------------------------------------------------------
-    • The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
-    • Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
-      http://opensource.org/licenses/mit-license.html
-    • The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
-    • Attribution is no longer required in Font Awesome 3.0, but much appreciated:
-      "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
-
-    Contact
-    -------------------------------------------------------
-    Email: dave@davegandy.com
-    Twitter: http://twitter.com/fortaweso_me
-    Work: Lead Product Designer @ http://kyruus.com
-
-    */
+ *  Contact
+ *  -------------------------------------------------------
+ *  Email: dave@davegandy.com
+ *  Twitter: http://twitter.com/fortaweso_me
+ *  Work: Lead Product Designer @ http://kyruus.com
+ */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/fontawesome-webfont.woff') format('woff'),
-    url('../fonts/fontawesome-webfont.ttf') format('truetype');
+  src: url('../fonts/fontawesome-webfont.eot?v=3.0.1');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
+    url('../fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
+    url('../fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 /*  Font Awesome styles
     ------------------------------------------------------- */
-/* includes sprites.less reset */
 [class^="iconf-"],
 [class*=" iconf-"] {
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+
+  /* sprites.less reset */
   display: inline;
   width: auto;
   height: auto;
   line-height: normal;
   vertical-align: baseline;
-  background-image: none !important;
+  background-image: none;
   background-position: 0% 0%;
   background-repeat: repeat;
+  margin-top: 0;
+}
+/* more sprites.less reset */
+.iconf-white,
+.nav-pills > .active > a > [class^="iconf-"],
+.nav-pills > .active > a > [class*=" iconf-"],
+.nav-list > .active > a > [class^="iconf-"],
+.nav-list > .active > a > [class*=" iconf-"],
+.navbar-inverse .nav > .active > a > [class^="iconf-"],
+.navbar-inverse .nav > .active > a > [class*=" iconf-"],
+.dropdown-menu > li > a:hover > [class^="iconf-"],
+.dropdown-menu > li > a:hover > [class*=" iconf-"],
+.dropdown-menu > .active > a > [class^="iconf-"],
+.dropdown-menu > .active > a > [class*=" iconf-"],
+.dropdown-submenu:hover > a > [class^="iconf-"],
+.dropdown-submenu:hover > a > [class*=" iconf-"] {
+  background-image: none;
 }
 [class^="iconf-"]:before,
 [class*=" iconf-"]:before {
@@ -70,7 +89,12 @@ a [class*=" iconf-"] {
   display: inline;
   /* keeps button heights with and without icons the same */
 
-  line-height: .6em;
+}
+.btn [class^="iconf-"].iconf-large,
+.nav [class^="iconf-"].iconf-large,
+.btn [class*=" iconf-"].iconf-large,
+.nav [class*=" iconf-"].iconf-large {
+  line-height: .9em;
 }
 .btn [class^="iconf-"].iconf-spin,
 .nav [class^="iconf-"].iconf-spin,
@@ -78,14 +102,35 @@ a [class*=" iconf-"] {
 .nav [class*=" iconf-"].iconf-spin {
   display: inline-block;
 }
+.nav-tabs [class^="iconf-"],
+.nav-pills [class^="iconf-"],
+.nav-tabs [class*=" iconf-"],
+.nav-pills [class*=" iconf-"] {
+  /* keeps button heights with and without icons the same */
+
+}
+.nav-tabs [class^="iconf-"],
+.nav-pills [class^="iconf-"],
+.nav-tabs [class*=" iconf-"],
+.nav-pills [class*=" iconf-"],
+.nav-tabs [class^="iconf-"].iconf-large,
+.nav-pills [class^="iconf-"].iconf-large,
+.nav-tabs [class*=" iconf-"].iconf-large,
+.nav-pills [class*=" iconf-"].iconf-large {
+  line-height: .9em;
+}
 li [class^="iconf-"],
-li [class*=" iconf-"] {
+.nav li [class^="iconf-"],
+li [class*=" iconf-"],
+.nav li [class*=" iconf-"] {
   display: inline-block;
   width: 1.25em;
   text-align: center;
 }
 li [class^="iconf-"].iconf-large,
-li [class*=" iconf-"].iconf-large {
+.nav li [class^="iconf-"].iconf-large,
+li [class*=" iconf-"].iconf-large,
+.nav li [class*=" iconf-"].iconf-large {
   /* increased font size for iconf-large */
 
   width: 1.5625em;
@@ -143,33 +188,45 @@ ul.icons li [class*=" iconf-"] {
 }
 [class^="iconf-"].pull-left,
 [class*=" iconf-"].pull-left {
-  margin-right: .35em;
+  margin-right: .3em;
 }
 [class^="iconf-"].pull-right,
 [class*=" iconf-"].pull-right {
-  margin-left: .35em;
+  margin-left: .3em;
 }
 .btn [class^="iconf-"].pull-left.iconf-2x,
 .btn [class*=" iconf-"].pull-left.iconf-2x,
 .btn [class^="iconf-"].pull-right.iconf-2x,
 .btn [class*=" iconf-"].pull-right.iconf-2x {
-  margin-top: .35em;
+  margin-top: .18em;
 }
 .btn [class^="iconf-"].iconf-spin.iconf-large,
 .btn [class*=" iconf-"].iconf-spin.iconf-large {
-  height: .75em;
+  line-height: .8em;
 }
 .btn.btn-small [class^="iconf-"].pull-left.iconf-2x,
 .btn.btn-small [class*=" iconf-"].pull-left.iconf-2x,
 .btn.btn-small [class^="iconf-"].pull-right.iconf-2x,
 .btn.btn-small [class*=" iconf-"].pull-right.iconf-2x {
-  margin-top: .45em;
+  margin-top: .25em;
+}
+.btn.btn-large [class^="iconf-"],
+.btn.btn-large [class*=" iconf-"] {
+  margin-top: 0;
 }
 .btn.btn-large [class^="iconf-"].pull-left.iconf-2x,
 .btn.btn-large [class*=" iconf-"].pull-left.iconf-2x,
 .btn.btn-large [class^="iconf-"].pull-right.iconf-2x,
 .btn.btn-large [class*=" iconf-"].pull-right.iconf-2x {
-  margin-top: .2em;
+  margin-top: .05em;
+}
+.btn.btn-large [class^="iconf-"].pull-left.iconf-2x,
+.btn.btn-large [class*=" iconf-"].pull-left.iconf-2x {
+  margin-right: .2em;
+}
+.btn.btn-large [class^="iconf-"].pull-right.iconf-2x,
+.btn.btn-large [class*=" iconf-"].pull-right.iconf-2x {
+  margin-left: .2em;
 }
 .iconf-spin {
   display: inline-block;
@@ -197,6 +254,26 @@ ul.icons li [class*=" iconf-"] {
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
+}
+@-moz-document url-prefix() {
+  .iconf-spin {
+    height: .9em;
+  }
+  .btn .iconf-spin {
+    height: auto;
+  }
+  .iconf-spin.iconf-large {
+    height: 1.25em;
+  }
+  .btn .iconf-spin.iconf-large {
+    height: .75em;
+  }
 }.iconf-user:before		{ content: "\f007"; }
 .iconf-plus-sign:before		{ content: "\f055"; }
 .iconf-key:before		{ content: "\f084"; }
+.iconf-inbox:before		{ content: "\f01c"; }
+.iconf-share:before		{ content: "\f045"; }
+.iconf-hdd:before		{ content: "\f0a0"; }
+.iconf-group:before		{ content: "\f0c0"; }
+.iconf-cloud:before		{ content: "\f0c2"; }
+.iconf-sitemap:before		{ content: "\f0e8"; }
diff --git a/module/web/static/fonts/fontawesome-webfont.eot b/module/web/static/fonts/fontawesome-webfont.eot
index e2fb87e19..2321edaca 100644
--- a/module/web/static/fonts/fontawesome-webfont.eot
+++ b/module/web/static/fonts/fontawesome-webfont.eot
diff --git a/module/web/static/fonts/fontawesome-webfont.ttf b/module/web/static/fonts/fontawesome-webfont.ttf
index 49b9851eb..eb8c0caaa 100644
--- a/module/web/static/fonts/fontawesome-webfont.ttf
+++ b/module/web/static/fonts/fontawesome-webfont.ttf
diff --git a/module/web/static/fonts/fontawesome-webfont.woff b/module/web/static/fonts/fontawesome-webfont.woff
index 98faed006..442371fd3 100644
--- a/module/web/static/fonts/fontawesome-webfont.woff
+++ b/module/web/static/fonts/fontawesome-webfont.woff
diff --git a/module/web/static/fonts/fontawesome.txt b/module/web/static/fonts/fontawesome.txt
index 74749e4ab..ac89f6e74 100644
--- a/module/web/static/fonts/fontawesome.txt
+++ b/module/web/static/fonts/fontawesome.txt
@@ -2,4 +2,10 @@
 # name, uni from http://icnfnt.com/
 user 007
 plus-sign 055
-key 084
\ No newline at end of file
+key 084
+inbox 01c
+share 045
+hdd 0a0
+group 0c0
+cloud 0c2
+sitemap 0e8
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index bb03eaf81..320732b3f 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -132,7 +132,7 @@
     <div id="actionbar-container" class="container-fluid">

         <div class="row-fluid">

         <div class="span2 offset1">

-            <h5>Notifcations or something</h5>

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

         </div>

         {% block actionbar %}

         {% endblock %}

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

 {% 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 %}

@@ -133,9 +134,32 @@
     <div class="container-fluid">

         <div class="row-fluid">

             <div class="span3">

-                <div class="well">

-                    Packages

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

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

                 </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>

+                <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

+                </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">