diff options
Diffstat (limited to 'module')
| -rw-r--r-- | module/web/static/css/default/style.less | 381 | ||||
| -rw-r--r-- | module/web/templates/default/dashboard.html | 19 |
2 files changed, 217 insertions, 183 deletions
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 180c763a2..a2701bbc7 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -1,7 +1,6 @@ -
/*
- Definitions
- */
+ Definitions
+*/
@min-width: 1000px;
@header-height: 70px;
@@ -15,14 +14,14 @@ @blue: #3a79aa;
@lightblue: lighten(spin(@blue, 5), 10%);
@darkblue: darken(spin(@blue, -5), 10%);
+@darkerblue: darken(spin(@blue, -10), 20%);
@emph: #FF7637;
/*
Mixins
*/
-
-.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
+.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);
@@ -31,7 +30,7 @@ background-image: linear-gradient(@origin, @start, @stop);
}
-.transition (@prop: all, @time: 1s, @ease: linear) {
+.transition(@prop: all, @time: 1s, @ease: linear) {
-webkit-transition: @prop @time @ease;
-moz-transition: @prop @time @ease;
-o-transition: @prop @time @ease;
@@ -39,58 +38,57 @@ transition: @prop @time @ease;
}
-
/*
- General
- */
+ General
+*/
* {
- margin: 0;
+ margin: 0;
}
html, body {
- height: 100%;
+ height: 100%;
}
body {
- margin: 0;
- padding: 0;
- font-family: 'Abel', sans-serif;
- font-size: 16px;
- background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent;
- min-width: @min-width;
+ margin: 0;
+ padding: 0;
+ font-family: 'Abel', sans-serif;
+ font-size: 16px;
+ background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent;
+ min-width: @min-width;
}
h1, h2, h3 {
- margin: 0;
- padding: 0;
- font-weight: normal;
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
}
a {
- text-decoration: none;
- color: @blue;
+ text-decoration: none;
+ color: @blue;
}
a:hover {
- text-decoration: none;
- color: @emph;
+ text-decoration: none;
+ color: @emph;
}
#wrap {
- min-height: 100%;
+ min-height: 100%;
}
#content {
- margin-left: @margin-side;
- margin-right: @margin-side ;
- padding-bottom: @footer-height;
+ margin-left: @margin-side;
+ margin-right: @margin-side;
+ padding-bottom: @footer-height;
}
#content:before {
- display: block;
- content: " ";
- height: @header-height;
+ display: block;
+ content: " ";
+ height: @header-height;
}
/*
@@ -98,213 +96,217 @@ a:hover { */
header {
- background: url("../../img/default/main-wrapper-bg.png") repeat-x;
- height: @header-height;
- position: fixed;
- top: 0;
- vertical-align: top;
- width: 100%;
- z-index: 10;
- min-width: @min-width;
- color: #ffffff;
+ background: url("../../img/default/main-wrapper-bg.png") repeat-x;
+ height: @header-height;
+ position: fixed;
+ top: 0;
+ vertical-align: top;
+ width: 100%;
+ z-index: 10;
+ min-width: @min-width;
+ color: #ffffff;
}
header a {
- color: #ffffff;
+ color: #ffffff;
}
header:before {
- position: absolute;
- content: ' ';
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: transparent;
- box-shadow: 0 0 5px black;
- z-index: -1;
+ position: absolute;
+ content: ' ';
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: transparent;
+ box-shadow: 0 0 5px black;
+ z-index: -1;
}
header div.center {
- position: relative;
- padding-left: 20px;
- padding-right: 20px;
+ position: relative;
+ padding-left: 20px;
+ padding-right: 20px;
}
+
header div.center span.title {
- color: white;
- float: left;
- font-family: SansationRegular, sans-serif;
- font-size: 40px;
- cursor: default;
- margin-top: 24px;
+ color: white;
+ float: left;
+ font-family: SansationRegular, sans-serif;
+ font-size: 40px;
+ cursor: default;
+ margin-top: 24px;
}
+
header .logo {
- float: left;
- margin-right: 10px;
- margin-top: 6px;
- width: 120px;
- height: 120px;
- background: url("../../img/default/logo.png")no-repeat;
+ float: left;
+ margin-right: 10px;
+ margin-top: 6px;
+ width: 120px;
+ height: 120px;
+ background: url("../../img/default/logo.png") no-repeat;
}
.header_block {
- float: right;
- margin: 12px 12px 0;
- font-family: SansationRegular, sans-serif;
+ float: right;
+ margin: 12px 12px 0;
+ font-family: SansationRegular, sans-serif;
}
+
.header_icon {
- padding-top: 2px;
- padding-bottom: 5px;
- padding-left: 25px;
- height: 20px;
+ padding-top: 2px;
+ padding-bottom: 5px;
+ padding-left: 25px;
+ height: 20px;
}
.header_text {
- text-align: center;
+ text-align: center;
}
.icon_info img {
- margin-bottom: -4px;
- padding-right: 5px;
+ margin-bottom: -4px;
+ padding-right: 5px;
}
#notification_div {
- position: absolute;
- left: 50%;
- width: 28%;
- height: 45px;
- margin-left: -14%;
- margin-top: 12px;
- text-align: center;
+ position: absolute;
+ left: 50%;
+ width: 28%;
+ height: 45px;
+ margin-left: -14%;
+ margin-top: 12px;
+ text-align: center;
}
#globalprogress {
- height: 8px;
- margin: 8px 5px 0;
+ height: 8px;
+ margin: 8px 5px 0;
}
#globalprogress .bar {
- background-color: @yellow;
+ background-color: @yellow;
}
#speedgraph {
- float: right;
- height: 45px;
- width: 14%;
- margin-top: 12px;
- font-family: sans-serif
+ float: right;
+ height: 45px;
+ width: 14%;
+ margin-top: 12px;
+ font-family: sans-serif
}
#header_user {
- background: url("../../img/default/icon_user_small_white.png")no-repeat;
+ background: url("../../img/default/icon_user_small_white.png") no-repeat;
}
#header_speed {
- background: url("../../img/default/icon_speed_small_white.png")no-repeat;
+ background: url("../../img/default/icon_speed_small_white.png") no-repeat;
}
#header_qeuue {
- background: url("../../img/default/icon_clock_small_white.png")no-repeat;
+ background: url("../../img/default/icon_clock_small_white.png") no-repeat;
}
/*
Login
*/
.login {
- vertical-align: middle;
- border: 2px solid @dark;
- padding: 15px 50px;
- font-size: 17px;
- border-radius: 15px;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
+ vertical-align: middle;
+ border: 2px solid @dark;
+ padding: 15px 50px;
+ font-size: 17px;
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
}
+
/*
Footer
*/
footer {
- background: url("../../img/default/main-wrapper-bg.png") repeat-x;
- color: @grey;
- height: @footer-height;
- margin-top: -@footer-height;
- position: relative;
- width: 100%;
- line-height: 16px;
- z-index: 10;
+ background: url("../../img/default/main-wrapper-bg.png") repeat-x;
+ color: @grey;
+ height: @footer-height;
+ margin-top: -@footer-height;
+ position: relative;
+ width: 100%;
+ line-height: 16px;
+ z-index: 10;
}
footer .logo {
- background: url(../../img/default/logo_grey.png) no-repeat;
- float: left;
- width: 60px;
- height: 60px;
- margin-top: 12px;
- margin-right: 12px;
+ background: url(../../img/default/logo_grey.png) no-repeat;
+ float: left;
+ width: 60px;
+ height: 60px;
+ margin-top: 12px;
+ margin-right: 12px;
}
footer div.center {
- padding-top: 8px;
- width: 900px;
- margin-left: auto;
- margin-right: auto;
+ padding-top: 8px;
+ width: 900px;
+ margin-left: auto;
+ margin-right: auto;
}
footer:before {
- position: absolute;
- content: ' ';
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: transparent;
- box-shadow: 0 0 5px black;
- z-index: -1;
+ position: absolute;
+ content: ' ';
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: transparent;
+ box-shadow: 0 0 5px black;
+ z-index: -1;
}
footer .block {
- font-size: 12px;
- float: left;
- margin: 0;
- width: 150px;
- padding-top: 6px;
- padding-right: 30px;
+ font-size: 12px;
+ float: left;
+ margin: 0;
+ width: 150px;
+ padding-top: 6px;
+ padding-right: 30px;
}
footer .copyright {
- text-align: center;
- width: auto;
- padding-top: 22px;
+ text-align: center;
+ width: auto;
+ padding-top: 22px;
}
footer h2 {
- background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important;
- color: #FFFFFF;
- font-family: SansationLight, sans-serif;
- font-size: 16px;
- font-weight: normal;
- line-height: 16px;
- margin: 0;
- padding-bottom: 6px;
+ background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important;
+ color: #FFFFFF;
+ font-family: SansationLight, sans-serif;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 16px;
+ margin: 0;
+ padding-bottom: 6px;
}
/*
Modal Overlay
*/
#modal-overlay {
- content: " ";
- height: 100%;
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background: -moz-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%);
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(236,208,66,0)), color-stop(100%,rgba(40,119,171,0.9)));
- background: -webkit-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
- background: -o-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
- background: -ms-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
- background: radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
- z-index: 50;
- opacity: 0;
+ content: " ";
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: -moz-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(236, 208, 66, 0)), color-stop(100%, rgba(40, 119, 171, 0.9)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+ background: -o-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+ background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+ z-index: 50;
+ opacity: 0;
}
/*
@@ -312,38 +314,38 @@ footer h2 { */
.nav > li > a:hover {
- color: @blue;
+ color: @blue;
}
#dash-nav {
- border-bottom: 1px dashed @grey;
- padding-bottom: 2px;
- margin-bottom: 5px;
+ border-bottom: 1px dashed @grey;
+ padding-bottom: 2px;
+ margin-bottom: 5px;
}
#dash-nav > li > a {
- margin-top: 5px;
+ margin-top: 5px;
}
#dash-nav .breadcrumb {
- margin: 0;
- padding-top: 10px;
- padding-bottom: 0;
+ margin: 0;
+ padding-top: 10px;
+ padding-bottom: 0;
- .active {
- color: @grey;
- }
+ .active {
+ color: @grey;
+ }
}
#dash-nav form {
- margin-top: 8px;
- margin-bottom: 0;
+ margin-top: 8px;
+ margin-bottom: 0;
}
#dash-nav input, #dash-nav button {
- padding-top: 2px;
- padding-bottom: 2px;
+ padding-top: 2px;
+ padding-bottom: 2px;
}
#dash-nav .dropdown-menu i {
@@ -351,7 +353,6 @@ footer h2 { padding-right: 5px;
}
-
#dashboard ul {
margin: 0;
list-style: none;
@@ -361,24 +362,48 @@ footer h2 { height: 30px;
width: 100%;
color: @light;
- .gradient(top, @blue, @darkblue);
-// background-color: @blue;
+ .gradient(top, @blue, @lightblue); // background-color: @blue;
font-weight: bold;
border-radius: 5px;
margin-bottom: 3px;
}
+.package-view > div {
+ height: 100%;
+}
+
.package-view:hover {
- .gradient(top, @blue, @lightblue);
+ .gradient(top, @blue, @darkblue);
+}
+
+.package-view .package-row {
+ display: inline-block;
+ height: 100%;
+// padding-top: 4px;
+ padding-left: 8px;
+}
+
+.package-view .first {
+ width: 50%;
}
+// TODO: bad scaling and positioning
+.package-view .second {
+ width: 30%;
+ .gradient(top, @darkblue, @darkerblue);
+
+ span {
+ margin-top: 4px;
+ display: block;
+ }
+}
.package-view a {
color: @light;
}
.package-graph {
- display: inline;
+ display: none;
width: 20px;
height: 20px;
}
\ No newline at end of file diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html index 6a5d18fdd..239ab47be 100644 --- a/module/web/templates/default/dashboard.html +++ b/module/web/templates/default/dashboard.html @@ -10,12 +10,21 @@ {% block head %}
<script type="text/template" id="template-package">
<div>
- Package <%= pid %>: <%= name %>
- <div class="package-graph"></div>
+ <div class="package-row first">
+ Package <%= pid %>: <%= name %>
+ <div class="package-graph"></div>
+ </div>
+ <div class="package-row second">
+ <span>
+ 56 Files (xy Finished, z Active, t Total)
+ </span>
+ </div>
- <a class="load"> Load</a>
- <a class="delete"> Delete</a>
- <a class="show-dialog"> Show</a>
+ <div class="package-row third">
+ <a class="load"> Load</a>
+ <a class="delete"> Delete</a>
+ <a class="show-dialog"> Show</a>
+ </div>
</div>
</script>
{% endblock %}
|