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
========================================================================= #}
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 {