Updated the toolbar with the responsive design (normal-to-large scena…

…rio).
symfony · Apr 13, 2012 · 4a3312b · 4a3312b
1 parent 1eec2a2
commit 4a3312b
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 59 deletions.
diff --git a/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig b/src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig
@@ -1,18 +1,11 @@
 {% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
 
 {% block toolbar %}
-    {% set icon %}
-        <img width="24" height="28" alt="Security" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcCAYAAAB75n/uAAAC70lEQVR42u2V3UtTYRzHu+mFwCwK+gO6CEryPlg7yiYx50vDqUwjFIZDSYUk2ZTmCysHvg9ZVggOQZiRScsR4VwXTjEwdKZWk8o6gd5UOt0mbev7g/PAkLONIOkiBx+25/v89vuc85zn2Q5Fo9F95UDwnwhS5HK5TyqVRv8m1JN6k+AiC+fn54cwbgFNIrTQ/J9IqDcJJDGBHsgDgYBSq9W6ysvLPf39/SSUUU7zsQ1yc3MjmN90OBzfRkZG1umzQqGIxPSTkIBjgdDkaGNjoza2kcFgUCE/QvMsq6io2PV6vQu1tbV8Xl7etkql2qqvr/+MbDE/Pz8s9OP2Cjhwwmw29+4R3Kec1WZnZ4fn5uamc3Jyttra2qbH8ero6JgdHh5+CvFHq9X6JZHgzODgoCVW0NPTY0N+ltU2Nzdv4GqXsYSrPp+vDw80aLFYxru6uhyQ/rDb7a8TCVJDodB1jUazTVlxcXGQ5/mbyE+z2u7u7veY38BVT3Z2djopm5qa6isrK/tQWVn5qb29fSGR4DC4PDAwMEsZHuArjGnyGKutq6v7ajQaF6urq9/MzMz0QuSemJiwQDwGkR0POhhXgILjNTU1TaWlpTxlOp1uyWQyaUjMajMzM8Nut/tJQUHBOpZppbCwkM/KytrBznuL9xDVxBMo8KXHYnu6qKjIivmrbIy67x6Px4Yd58W672ApfzY0NCyNjo7OZmRkiAv8fr+O47iwmABXtoXaG3uykF6vX7bZbF6cgZWqqiqezYkKcNtmjO+CF2AyhufgjsvlMiU7vXEF+4C4ALf9CwdrlVAqlcFkTdRqdQSHLUDgBEeSCrArAsiGwENs0XfJBE6ncxm1D8Aj/B6tigkkJSUlmxSwLYhMDeRsyyUCd+lHrWxtbe2aTCbbZTn1ZD92F0Cr8GBfgnsgDZwDt8EzMBmHMXBLqD0PDMAh9Gql3iRIESQSIAXp4CRIBZeEjIvDFZAm1J4C6UK9ROiZcvCn/+8FvwHtDdJEaRY+oQAAAABJRU5ErkJggg==" />
-        <span class="sf-toolbar-status sf-toolbar-status-{{ collector.enabled and collector.user ? 'green' : 'red' }}">
-            {% if collector.user %}
-                {{ collector.user }}
-            {% elseif collector.enabled %}
-                ?
-            {% else %}
-                X
-            {% endif %}
-        </span>
-    {% endset %}
+    {% if collector.user %}
+        {% set color_code = (collector.enabled and collector.authenticated) ? 'green' : 'yellow'  %}
+    {% else %}
+        {% set color_code = collector.enabled ? 'red' : 'black'  %}
+    {% endif %}
     {% set text %}
         {% if collector.user %}
             You are logged in as {{ collector.user }}{% if not collector.authenticated %} <em>(not yet authenticated)</em>{% endif %}.
@@ -22,6 +15,11 @@
             The security is disabled.
         {% endif %}
     {% endset %}
+    {% set icon %}
+        <img width="24" height="28" alt="Security" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcCAYAAAB75n/uAAAC70lEQVR42u2V3UtTYRzHu+mFwCwK+gO6CEryPlg7yiYx50vDqUwjFIZDSYUk2ZTmCysHvg9ZVggOQZiRScsR4VwXTjEwdKZWk8o6gd5UOt0mbev7g/PAkLONIOkiBx+25/v89vuc85zn2Q5Fo9F95UDwnwhS5HK5TyqVRv8m1JN6k+AiC+fn54cwbgFNIrTQ/J9IqDcJJDGBHsgDgYBSq9W6ysvLPf39/SSUUU7zsQ1yc3MjmN90OBzfRkZG1umzQqGIxPSTkIBjgdDkaGNjoza2kcFgUCE/QvMsq6io2PV6vQu1tbV8Xl7etkql2qqvr/+MbDE/Pz8s9OP2Cjhwwmw29+4R3Kec1WZnZ4fn5uamc3Jyttra2qbH8ero6JgdHh5+CvFHq9X6JZHgzODgoCVW0NPTY0N+ltU2Nzdv4GqXsYSrPp+vDw80aLFYxru6uhyQ/rDb7a8TCVJDodB1jUazTVlxcXGQ5/mbyE+z2u7u7veY38BVT3Z2djopm5qa6isrK/tQWVn5qb29fSGR4DC4PDAwMEsZHuArjGnyGKutq6v7ajQaF6urq9/MzMz0QuSemJiwQDwGkR0POhhXgILjNTU1TaWlpTxlOp1uyWQyaUjMajMzM8Nut/tJQUHBOpZppbCwkM/KytrBznuL9xDVxBMo8KXHYnu6qKjIivmrbIy67x6Px4Yd58W672ApfzY0NCyNjo7OZmRkiAv8fr+O47iwmABXtoXaG3uykF6vX7bZbF6cgZWqqiqezYkKcNtmjO+CF2AyhufgjsvlMiU7vXEF+4C4ALf9CwdrlVAqlcFkTdRqdQSHLUDgBEeSCrArAsiGwENs0XfJBE6ncxm1D8Aj/B6tigkkJSUlmxSwLYhMDeRsyyUCd+lHrWxtbe2aTCbbZTn1ZD92F0Cr8GBfgnsgDZwDt8EzMBmHMXBLqD0PDMAh9Gql3iRIESQSIAXp4CRIBZeEjIvDFZAm1J4C6UK9ROiZcvCn/+8FvwHtDdJEaRY+oQAAAABJRU5ErkJggg==" />
+        <span class="sf-toolbar-status sf-toolbar-status-{{ color_code }}"></span>
+        <div class="sf-toolbar-status sf-toolbar-info-piece-additional">{% if collector.user %}{{ collector.user }}{% endif %}</div>
+    {% endset %}
     {% include 'WebProfilerBundle:Profiler:toolbar_item.html.twig' with { 'link': profiler_url } %}
 {% endblock %}
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/toolbar.css b/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/toolbar.css
@@ -27,7 +27,7 @@ build: 56
     border-bottom: 1px dotted #000000;
     cursor: help;
 }
-    
+
 .sf-toolbar-block {
     white-space: nowrap;
     color: #2f2f2f;
@@ -37,35 +37,35 @@ build: 56
     padding: 0;
     float: left;
 }
-        
+
 .sf-toolbar-block span {
     display: inline-block;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info-piece {
     padding-top: 5px;
 }
 
 .sf-toolbar-block .sf-toolbar-info-piece:first-child {
     padding-top: 0;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info-piece b {
     display: inline-block;
     width: 110px;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info-with-next-pointer:after {
     content: '::';
     color: #999;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info-with-delimiter {
     border-right: 1px solid #ccc;
     padding-right: 5px;
     margin-right: 5px;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info {
     display: none;
     position: absolute;
@@ -76,38 +76,44 @@ build: 56
     padding: 10px 8px;
     margin-left: -1px;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-info:empty {
-    visibility: hidden;
+    display: none !important;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-status {
     display: inline-block;
     color: #fff;
-    background-color: #333;
+    background-color: #666;
     padding: 3px 6px;
     border-radius: 3px;
     margin-bottom: 2px;
     vertical-align: middle;
+    min-width: 6px;
+    min-height: 13px;
 }
-
-.sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status {
-    border-radius: 12px;
-    border-bottom-left-radius: 0px;
-}
-
+
 .sf-toolbar-block .sf-toolbar-status-green {
     background-color: #759e1a;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-status-red {
     background-color: #a33;
 }
-
+
+.sf-toolbar-block .sf-toolbar-status-yellow {
+    background-color: #ffcc00;
+    color: #000;
+}
+
+.sf-toolbar-block .sf-toolbar-status-black {
+    background-color: #000;
+}
+
 .sf-toolbar-block .sf-toolbar-icon {
     display: block;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-icon > a,
 .sf-toolbar-block .sf-toolbar-icon > span {
     display: block;
@@ -116,40 +122,74 @@ build: 56
     padding: 5px 8px;
     min-width: 20px;
     text-align: center;
+    vertical-align: middle;
 }
-
+
+.sf-toolbar-block .sf-toolbar-icon > a,
+.sf-toolbar-block .sf-toolbar-icon > a:link
+.sf-toolbar-block .sf-toolbar-icon > a:hover {
+    color: black !important;
+}
+
 .sf-toolbar-block .sf-toolbar-icon img {
     border-width: 0;
     vertical-align: middle;
 }
-        
+
 .sf-toolbar-block .sf-toolbar-icon img + span {
     margin-left: 5px;
+    margin-top: 2px;
+}
+
+.sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status {
+    border-radius: 12px;
+    border-bottom-left-radius: 0px;
+    margin-top: 0;
+}
+
+.sf-toolbar-block .sf-toolbar-info-piece-additional:empty {
+    display: none;
 }
 
 .sf-toolbar-info-php {}
 .sf-toolbar-info-php-ext {}
-            
+
 .sf-toolbar-info-php-ext .sf-toolbar-status {
     margin-left: 2px;
 }
-            
+
 .sf-toolbar-info-php-ext .sf-toolbar-status:first-child {
     margin-left: 0;
 }
 
+.sf-toolbar-block .sf-toolbar-info-piece-additional {
+    display: inline-block;
+}
+
 .sf-toolbarreset:hover {
     box-shadow: rgba(0, 0, 0, 0.3) 0 0 50px;
 }
-        
+
 .sf-toolbar-block:hover {
     box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
 }
-        
+
 .sf-toolbar-block:hover .sf-toolbar-icon {
     background-color: #fff;
 }
-.sf-toolbar-block:hover .sf-toolbar-icon + .sf-toolbar-info {
+.sf-toolbar-block:hover .sf-toolbar-info {
     display: block;
 }
 
+/***** Media query *****/
+@media screen and (max-width: 700px) {
+    .sf-toolbar-block .sf-toolbar-icon > * :first-child ~ * {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1180px) {
+    .sf-toolbar-block .sf-toolbar-info-piece-additional {
+        display: none;
+    }
+}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig
@@ -1,6 +1,7 @@
 {% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
 
 {% block toolbar %}
+    {# Symfony Logo #}
     {% set icon %}
         <a href="http://symfony.com/">
             <img width="26" height="28" alt="Symfony" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAMAAABIzV/hAAACZFBMVEUwLjL///////////////////////////////////////////////////////////////////+Eg4b///+Ni46Xlpj///////////+op6n///////////////////////////////////////////////////////////9ZWFv///////9qaWz///////+mpaf///////////////9ZWFv///////////////9PTVH///91dHb////////////////////g4OD///9NTE+Ih4r///////+Ni47///////92dHeRkJLk5OTLy8xlY2b///////+cm53///////+5ubr////o6Oj////////U1NT///9DQURsa22rq6ysq61hX2L///+LioxTUVVBP0NEQkZpZ2rGxsf///9ram3////s7O2SkZNfXmFxcHKmpae4uLnKysuXlpiop6l3dXiIh4pYVlmrq6ycm52trK7Nzc48Oj5dW158e36dnJ49Oz/Pz9BiYGPAv8BDQUTQz9BVU1aioaNHRUnBwcJXVVk6ODxJR0t3dnmko6U8Oj6lpKY9Oz+0tLXDwsRQTlF7en1QTlHi4eJhX2LFxcZTUVViYGNwb3J+fX83NTlFQ0dUUlW4t7icm524uLk8Oj5YVlmPjpBLSU2enZ9aWVw/PkFBP0NdW153dnk0MjZQTlE1MzdQT1JdXF9ram15eHqGhYdDQkV5eHo2NThEQkZRUFNFQ0dta244NjpGREhTUVU5NztUUlVhX2JubG9HRUlVU1ZiYGM7OTxIRkk7OT1IR0o8Oj4wLjI9Oz8YdG13AAAAynRSTlMAAAEDBAUGCgsMDQ4QEhMUGRobGx0gISIkJiYnKCktLi8wMjM0NTk6Ozw+P0NFSEpLTE5PUFBTWlteXmBiZGVmaWxtcHBxc3R0dnl5fX+BgoOGi46Pj5CRmZqanZ6eoKeoq6ytsLCwsrO0tbe5urq8vL+/wsTFx8jJycvLy8vM0NHR0tLU1NfX2NnZ2trc3N3d3eHh4uLl5ebm5ubn5+fo6urt7e3u7vDx8/Pz9PT19fX19fX29vf39/j4+fn5+vr6+vv7+/z8/f3+yR5EtwAAAbVJREFUeNpl0mVXVFEYhuF3zhkOFqMjYmCi2MUYYKGIYiJ2YCd2t4IBFqgoKjZ2jg3igI2KyO2f8sTMngGvj/te71r7wyMuk4jofZccAihcMzJKXDYnuYcVotyeYKiktV5LA0faaE7S4s7TyMsBupnMcoH/vO6gmanJaiLV1Py+Xwn5zc0fjCbSi2LI2QdkGdLyFBG+rHwMzz4BD7wyGEfFk8pfsD2TkGmyFNvFHfDj55v02VD6DcteOYylatY8oG7boA2QV4vlklzB8tU3/DIwo+dWv58guY5tRcLMtwSGdi1DkTvAn9Jqsgbu4kafRBqlV4sDFCWuIjdhMsp7yQU49rB28/QPLOu2DuWqLMfmfw6M716GskdGVRMSGDKRsEzpvZ+Qs0lFKDd94s2oArh2F7K3oNQt6ChGr5x6+Dx3J7d2E3Ygqam4PCkngRNnngYIO5cWq4lLb5t+vJ6GiifFR1nbMNqP3fSOCN8PZnQynEW5W/nmHy0PXv79eHpRSjsjtEOtWZcRc9YXlNx7VFKwceGYHjG6s0Ob3iK+X3LqlKnjkvt39rjD6w3W6BhvrCdaVw//ADrWicJIvtkmAAAAAElFTkSuQmCC"/>
@@ -12,6 +13,7 @@
     {% endset %}
     {% include 'WebProfilerBundle:Profiler:toolbar_item.html.twig' with { 'link': false } %}
 
+    {# PHP Information #}
     {% set icon %}
         <span>
             <img width="26" height="28" alt="PHP" src="data:image/png;base64,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"/>
@@ -32,8 +34,10 @@
     {% endset %}
     {% include 'WebProfilerBundle:Profiler:toolbar_item.html.twig' with { 'link': false } %}
 
+    {# Environment #}
     {% set icon %}
         <img width="21" height="28" alt="Environment" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAcCAMAAAC5xgRsAAAAZlBMVEX///////////////////////////////////////////////////////////////////////////////////////////+ZmZmZmZlISEhJSUmdnZ1HR0fR0dFZWVlpaWlfX18/Pz+puygPAAAAIXRSTlMACwwlJygpLzIzNjs8QEtMUmd6e32AucDBw8fIydTm6u5l8MjvAAAAo0lEQVR42r2P2Q6CMBBFL6XsZRGRfZv//0nbDBNEE19MnJeTc5ILKf58ahiUwzy/AJpIWwREwQnEXRdbGCLjrO+djWRvVMiJcigxB7viGogxDdJpSmHEmCVPS7YczJvgUu+CS30IvtbNYZMvsGVo2mVpG/kbm4auiCpdcC3YPCAhSpAdUzaAn6qPKZtUT6ZSzb4bi2hdo9MQ1nX4ASjfV+/4/Z40pyCHrNTbIgAAAABJRU5ErkJggg=="/>
+        <span class="sf-toolbar-status sf-toolbar-info-piece-additional">{{ token }}</span>
     {% endset %}
     {% set text %}
         {% spaceless %}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig
@@ -1,9 +1,25 @@
 {% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
 
 {% block toolbar %}
+    {% set request_handler %}
+        {% if collector.controller.class is defined %}
+            {% set link = collector.controller.file|file_link(collector.controller.line) %}
+            <span class="sf-toolbar-info-class sf-toolbar-info-with-next-pointer">{{ collector.controller.class|abbr_class }}</span>
+            <span class="sf-toolbar-info-method">
+                {% if link %}
+                    <a style="color: #2f2f2f" href="{{ link }}">{{ collector.controller.method }}</a>
+                {% else %}
+                    {{ collector.controller.method }}
+                {% endif %}
+            </span>
+        {% else %}
+            <span class="sf-toolbar-info-class sf-toolbar-info-with-next-pointer">{{ collector.controller }}</span>
+        {% endif %}
+    {% endset %}
     {% set icon %}
         <img width="28" height="28" alt="Request" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAQAAADYBBcfAAACvElEQVR42tVTbUhTYRTerDCnKVoUUr/KCZmypA9Koet0bXNLJ5XazDJ/WFaCUY0pExRZXxYiJgsxWWjkaL+yK+po1gjyR2QfmqWxtBmaBtqWGnabT++c11Fu4l/P4VzOPc95zoHznsNZodIbLDdRcKnc1Bu8DAK45ZsOnykQNMopsNooLxCknb0cDq5vml9FtHiIgpBR0R6iihYyFMTDt2Lg56ObPkI6TMGXSof1EV67IqCwisJSWliFAG/E0CfFIiebdNypcxi/1zgyFiIiZ3sJQr0RQx5frLa6k7SOKRo3oMFNR5t62h2rttKXEOKFqDCxtXNmmBokO2KKTlp3IdWuT2dYRNGKwEXEBCcL172G5FG0aIxC0kR9PBTVH1kkwQn+IqJnCE33EalVzT9GJQS1tAdD3CKicJYFrxqx7W2ejCEdZy1FiC5tZxHhLJKOZaRdQJAyV/YAvDliySALHxmxR4Hqe2iwvaOR/CEuZYJFSgYhVbZRkA8KGdEktrqnqra90NndCdkt77fjIHIhexOrfO6O3bbbOj/rqu5IptgyR3sU93QbOYhquZK4MCDp0Ina/PLsu5JvbCTRaapUdUmIV/RzoMdsk/0hWRNdAvKOmvqlN0drsJbJf1P4YsQ5lGrJeuosiOUgbOC8cto3LfOXTdVd7BqZsQKbse+0jUL6WPcesqs4MNSUTQAxGjwFiC8m3yzmqwHJBWYKBJ9WNqW/dHkpU/osch1Yj5RJfXPfSEe/2UPsN490NPfZG5CKyJmcV5ayHyzy7BMqsXfuHhGK/cjAIeSpR92gehR55D8TcQhDEKJwytBJ4fr4NULvrEM8NszfJPyxDoHYAQ1oPCWmIX4gifmDS/DV2DKeb25FHWr76yEG7/9L4YFPeiQQ4/8LkgJ8Et+NncTCsYqzXAEXa7CWdPZzGWdlyV+vST0JanfPvwAAAABJRU5ErkJggg=="/>
         <span class="sf-toolbar-status sf-toolbar-status-{{ 200 == collector.statuscode ? 'green' : 'red' }}">{{ collector.statuscode }}</span>
+        <div class="sf-toolbar-status sf-toolbar-info-piece-additional">{{ request_handler }}</div>
     {% endset %}
     {% set text %}
         {% spaceless %}
@@ -13,19 +29,7 @@
             </div>
             <div class="sf-toolbar-info-piece">
                 <b>Request handler</b>
-                {% if collector.controller.class is defined %}
-                    {% set link = collector.controller.file|file_link(collector.controller.line) %}
-                    <span class="sf-toolbar-info-class sf-toolbar-info-with-next-pointer">{{ collector.controller.class|abbr_class }}</span>
-                    <span class="sf-toolbar-info-method">
-                        {% if link %}
-                            <a style="color: #2f2f2f" href="{{ link }}">{{ collector.controller.method }}</a>
-                        {% else %}
-                            {{ collector.controller.method }}
-                        {% endif %}
-                    </span>
-                {% else %}
-                    <span class="sf-toolbar-info-class sf-toolbar-info-with-next-pointer">{{ collector.controller }}</span>
-                {% endif %}
+                {{ request_handler }}
             </div>
             <div class="sf-toolbar-info-piece"{{ not collector.route ? ' style="color:#a33"' : '' }}>
                 <b>Route ID</b>