tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-24 06:14:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve layout behaviour

Browse Source
This commit is contained in:
Thomas Gelf 2014-02-25 10:24:17 +00:00
parent bef3f70992
commit 2f44eca857
1 changed files with 105 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
public/css/icinga/layout-structure.less
View File

@ -1,40 +1,33 @@
#layout { #layout {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
min-width: 19em;
} }
#header { #header {
position: fixed;
top: 0;
left: 0;
right: 0;
} }
#sidebar { #sidebar {
/* position: fixed;
width: 13em; width: 13em;
position: fixed;
left: 0; left: 0;
top: 3em; top: 3.6em;
bottom: 0; bottom: 0;
*/
width: 13em;
float: left;
height: 100%;
} }
#main { #main {
margin-left: 13em;
height: 100%;
/*
position: fixed; position: fixed;
left: 13em; left: 13em;
top: 3em; top: 3.6em;
right: 0; right: 0;
bottom: 0; bottom: 0;
*/
} }
#layout.fullscreen #header { #layout.fullscreen #header {
@ -73,33 +66,6 @@
/* font-size: 0.9em; */ /* font-size: 0.9em; */
} }
/* Not growing larger than 1920px at 1em=16px right now */
@media screen and (min-width: 120em) {
#main {
width: 107em;
}
#header {
width: 120em;
}
/*
.container {
background-color: red;
}
*/
}
@media screen and (min-width: 48em) and (max-width: 62em) {
/* #main > .container { */
#main .container {
font-size: 0.9em;
}
/* TEST
.container {
background-color: blue;
}
*/
}
.container > div { .container > div {
/* padding: 0 1.5% 0 1.5%; */ /* padding: 0 1.5% 0 1.5%; */
padding: 0; padding: 0;
@ -133,7 +99,7 @@
.dashboard > div.container { .dashboard > div.container {
font-size: 0.9em; font-size: 0.9em;
vertical-align: top; vertical-align: top;
width: 48%; width: 48.5%;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin-top: 1em; margin-top: 1em;
@ -142,7 +108,7 @@
.dashboard > div.container td.state { .dashboard > div.container td.state {
font-size: 1em; font-size: 1em;
width: 4em; width: 5em;
} }
.dashboard > div.container h1 { .dashboard > div.container h1 {
@ -152,6 +118,9 @@
background-color: #555; background-color: #555;
color: white; color: white;
border: none; border: none;
border-radius: 0.2em;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
} }
.dashboard > div.container h1 a { .dashboard > div.container h1 a {
@ -168,12 +137,101 @@
margin-left: 2%; margin-left: 2%;
margin-right: 2%; margin-right: 2%;
} }
.content { .content {
padding: 1em; padding: 1em;
} }
#inner-layout {
position: fixed;
height: 100%; /* Not growing larger than 3840px at 1em=16px right now */
width: 100%; @media screen and (min-width: 240em) {
#main {
width: 227em;
} }
#header {
width: 240em;
}
/*
.container {
background-color: red;
}
*/
}
@media screen and (min-width: 100em) {
.dashboard > div.container {
width: 32%;
margin-left: 1%;
margin-right: 0;
}
}
@media screen and (max-width:72em) {
#layout {
font-size: 0.8em;
}
}
@media screen and (max-width: 47em) {
.dashboard > div.container {
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
#layout.twocols {
#main > .container {
width: 99%;
}
#col1 {
display: none;
}
}
}
@media screen and (max-width: 36em) {
#sidebar {
display: none;
}
#logo img {
/* TODO: Quickfix, this needs improvement */
width: 0 !important;
top: -100px;
position: absolute;
}
#main {
left: 0;
}
}
@media screen and (min-width: 24em) and (max-width: 62em) {
/*
#layout .dashboard > div.container {
width: 96%;
margin-left: 2%;
margin-right: 2%;
}
*/
}
@media screen and (min-width: 48em) and (max-width: 62em) {
/* #main > .container { */
/*
#main .container {
font-size: 0.9em;
}
*/
/* TEST
.container {
background-color: blue;
}
*/
}