diff options
Diffstat (limited to 'module/web')
| -rw-r--r-- | module/web/static/css/default/admin.less | 2 | ||||
| -rw-r--r-- | module/web/static/css/default/common.less | 67 | ||||
| -rw-r--r-- | module/web/static/css/default/dashboard.less | 4 | ||||
| -rw-r--r-- | module/web/static/css/default/settings.less | 5 | ||||
| -rw-r--r-- | module/web/static/css/default/style.less | 136 | ||||
| -rw-r--r-- | module/web/templates/default/base.html | 9 | ||||
| -rw-r--r-- | module/web/templates/default/dashboard.html | 120 |
7 files changed, 203 insertions, 140 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 {
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> Audio</a></li>
- <li><a><i class="icon-remove"></i> 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> Audio</a></li>
+ <li><a><i class="icon-remove"></i> 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 |