diff options
| author |  RaNaN <Mast3rRaNaN@hotmail.de>
| 2013-05-01 12:20:00 +0200 |
|---|---|---|
| committer | RaNaN <Mast3rRaNaN@hotmail.de>
| 2013-05-01 12:20:00 +0200 |
| commit | ff42a75912c0492ce7770a4c681bf453f4b990d3 (patch) | |
| tree | fff1972ea1cd09025721be0fcda0b6e2543842f3 | |
| parent | cleaned header + more responsive (diff) | |
| download | pyload-ff42a75912c0492ce7770a4c681bf453f4b990d3.tar.xz | |
improved header alignment
| -rw-r--r-- | module/web/static/css/default/style.less | 51 | ||||
| -rw-r--r-- | module/web/templates/default/base.html | 13 |
2 files changed, 44 insertions, 20 deletions
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 9357ba83a..5eaafdaaf 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -24,6 +24,14 @@ header { // background-color: @greyDark; }
+@header-inner-height: @header-height - 16px;
+
+// centered header element
+.centered {
+ height: @header-inner-height;
+ margin: 8px 0;
+}
+
header:before {
position: absolute;
content: ' ';
@@ -55,22 +63,31 @@ header .logo { }
.header-block {
+ .centered;
float: left;
- line-height: 18px;
+ line-height: @header-inner-height / 3; // 3 rows
font-size: small;
- margin-top: 6px;
}
.status-block {
- float: right !important;
+ min-width: 15%;
}
-// Right left buttons
-.pull-right .btn {
- margin-top: 6px;
+.header-btn {
+ float: right;
+ position: relative;
+ .centered;
+
+ .btn-success {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ }
}
#progress-area {
+ .centered;
position: relative;
margin-top: 8px;
line-height: 16px;
@@ -154,17 +171,23 @@ header .logo { width: 100%;
.stripes(@yellowLighter, @yellowDark);
}
-
}
-
}
-#speedgraph {
- float: right;
- width: 40%;
- height: @header-height - 16px;
- margin: 8px 8px 0 8px;
- font-family: sans-serif
+.speedgraph-container {
+ // Allows speedgraph to take up remaining space
+ display: block;
+ overflow: hidden;
+ padding: 0 8px;
+
+ #speedgraph {
+ float: right;
+ width: 100%;
+ .centered;
+// height: @header-height - 16px;
+// margin: 8px 0;
+ font-family: sans-serif;
+ }
}
.header-area {
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index 50269d4c7..ee7eb1e97 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -146,7 +146,9 @@ <i class="icon-refresh icon-white"></i> Reconnect:<br>
</div>
- <div class="pull-right">
+ <div class="header-block status-block"></div>
+
+ <div class="header-btn">
<div class="btn-group">
<a class="btn btn-blue btn-small" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-blue btn-small dropdown-toggle" data-toggle="dropdown" href="#"><span
@@ -161,14 +163,13 @@ </ul>
</div>
- <a class="btn btn-success btn-grabber btn-small btn-block" href="#">
+ <a class="btn btn-success btn-grabber btn-small" href="#">
<i class="icon-plus icon-white"></i> Add
</a>
</div>
-
- <div id="speedgraph" class="visible-desktop"></div>
-
- <div class="header-block status-block"></div>
+ <span class="visible-desktop speedgraph-container">
+ <div id="speedgraph"></div>
+ </span>
</div>
{% endif %}
</div>
|