diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update profiler's layout to use flexbox

Browse Source
This commit is contained in:
Javier Eguiluz 2016-08-30 16:53:54 +02:00 committed by Fabien Potencier
parent 2980fb8250
commit d986ac055c
1 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
View File

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