added actionbar, two-column dashboard

5 files changed, 126 insertions, 88 deletions

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 {

@@ -374,6 +294,60 @@ header .logo {
 }

 

 /*

+   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

 */

 .login {