Update profiler's layout to use flexbox
This commit is contained in:
parent
2980fb8250
commit
d986ac055c
@ -17,9 +17,15 @@ html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:1
|
||||
|
||||
{# Basic styles
|
||||
========================================================================= #}
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #F9F9F9;
|
||||
color: #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
{{ mixins.sans_serif_font|raw }}
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
@ -401,16 +407,34 @@ tr.status-warning td {
|
||||
max-width: 1300px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
#header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
#header .container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#summary {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
#content {
|
||||
min-height: 1024px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
min-height: 100%;
|
||||
}
|
||||
#sidebar {
|
||||
flex: 0 0 220px;
|
||||
}
|
||||
#collector-wrapper {
|
||||
float: left;
|
||||
width: 100%;
|
||||
flex: 0 1 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
#collector-content {
|
||||
margin: 0 0 30px 220px;
|
||||
margin: 0 0 30px 0;
|
||||
padding: 14px 0 14px 20px;
|
||||
}
|
||||
|
||||
@ -428,7 +452,6 @@ tr.status-warning td {
|
||||
color: #FFF;
|
||||
font-weight: normal;
|
||||
font-size: 21px;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 10px 10px 8px;
|
||||
}
|
||||
@ -445,7 +468,6 @@ tr.status-warning td {
|
||||
fill: #FFF;
|
||||
}
|
||||
#header .search {
|
||||
float: right;
|
||||
padding-top: 11px;
|
||||
}
|
||||
#header .search input {
|
||||
@ -511,10 +533,7 @@ tr.status-warning td {
|
||||
#sidebar {
|
||||
background: #444;
|
||||
color: #CCC;
|
||||
float: left;
|
||||
margin-bottom: -99999px; {# needed for 'same-height columns' trick #}
|
||||
margin-left: -100%;
|
||||
padding-bottom: 99999px; {# needed for 'same-height columns' trick #}
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
width: 220px;
|
||||
z-index: 9999;
|
||||
@ -597,7 +616,6 @@ tr.status-warning td {
|
||||
#menu-profiler li {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
width: 220px;
|
||||
}
|
||||
#menu-profiler li a {
|
||||
border: solid transparent;
|
||||
@ -922,17 +940,13 @@ table.logs .sf-call-stack abbr {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#collector-content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 50px;
|
||||
overflow-y: hidden;
|
||||
transition: width 200ms ease-out;
|
||||
flex-basis: 50px;
|
||||
overflow-x: hidden;
|
||||
transition: flex-basis 200ms ease-out;
|
||||
}
|
||||
#sidebar:hover, #sidebar.expanded {
|
||||
width: 220px;
|
||||
flex-basis: 220px;
|
||||
}
|
||||
|
||||
#sidebar-search {
|
||||
|
Reference in New Issue
Block a user