feature #15818 [WebProfilerBundle] Add collapsed sidebar on small screens (hason)

fabpot · fabpot · commit 44091f579cf0 · 2015-09-26T10:11:55.000+02:00
This PR was merged into the 2.8 branch. Discussion ---------- [WebProfilerBundle] Add collapsed sidebar on small screens | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | | License | MIT | Doc PR | Desktop ![Desktop](https://cloud.githubusercontent.com/assets/288535/9927840/1e4eb7fc-5d22-11e5-9833-f1431ed2855d.png) Mobile ![Mobile](https://cloud.githubusercontent.com/assets/288535/9927847/23a5c5c4-5d22-11e5-928a-87b167a079b5.png) ![Mobile touch](https://cloud.githubusercontent.com/assets/288535/9927851/2bb800e2-5d22-11e5-9566-c74a23eb9cb5.png) Commits ------- 184d4f2 [WebProfilerBundle] Added collapsed sidebar on small screens
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/menu.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/menu.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" height="24" viewBox="0 0 24 24" xml:space="preserve">
+<path fill="#AAAAAA" d="m 2.571,17.5 18.859,0 c 0.87,0 1.57,0.7 1.57,1.57 l 0,1.57 c 0,0.87 -0.7,1.57 -1.57,1.57 l -18.859,0 C 1.702,22.21 1,21.51 1,20.64 L 1,19.07 C 1,18.2 1.702,17.5 2.571,17.5 Z M 1,11.21 1,12.79 c 0,0.86 0.702,1.56 1.571,1.56 l 18.859,0 c 0.87,0 1.57,-0.7 1.57,-1.56 l 0,-1.58 C 23,10.35 22.3,9.644 21.43,9.644 l -18.859,0 C 1.702,9.644 1,10.35 1,11.21 Z M 1,3.357 1,4.929 c 0,0.869 0.702,1.572 1.571,1.572 l 18.859,0 C 22.3,6.501 23,5.798 23,4.929 L 23,3.357 C 23,2.489 22.3,1.786 21.43,1.786 l -18.859,0 C 1.702,1.786 1,2.489 1,3.357 Z" />
+</svg>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
@@ -3,6 +3,7 @@
     <head>
         <meta charset="{{ _charset }}" />
         <meta name="robots" content="noindex,nofollow" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Symfony Profiler</title>
         <link rel="icon" type="image/x-icon" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFEUlEQVR4AZVXA4wm2RMf27bXDM/+3/+sYBGfrbVtezc6BWtzfPbYXtvDL9906t6v0vWl05me7q1JzXuvvu4yXnvZgJ9hH6bwZYXLFR739vauUGuDwhq1L1N4Uv/tRYUhFjwcg49hn6aYr1V4TiGp86CoP9Oh1tV414KnM6t9fHymKUZ3DAI0hW4b1AyK3lE8phh5OxWeoJgUGhi5mLm95YzBwcHuhIQEV1JSEoWGhoKWHxYWFmenhJ/B5W0GwZpDt5Ovry9lZWWRyWOu5ORk7JsUpogsq5gnmISTU+HKQoLFQv/qq6/os88+I+EVFRUlSsRZ5oRiVmwlXMWShQkahUdERJCfnx/vd+3aRTU1NXTixAmqrq6mK1eu0PTp05mnrmD+QK6XhLO0XP2O2FJAQICRjjMU4P1PP/1EfX19NGfOHM8Z0N7ezueQkBBXYGAgSWIaQ5Em2T5QzFNSUig9PV3OHOe4uDjZ87p//34C7Nm7x/NcRUUFAX799Vec8Y7m7+8Pz92SfBDXr7VwPYRbxn/MmDG8Tps2jQBd3V30/PPPe35/6qmnaPXq1TR69Gg+h4eHiwwosdLT4dBkQDSXWmJiIq/vv/8+/fvvv3ThwgWqr6+n/Px8oyCmAerq6jy03Nxc2Yv7ySSjQzrmi4i92fVpaWlYOZ79/f2MW7dtpSlTptDp06epo6ODPvroI850ASiGdyZOnEjXrl2jyspKT4XA9cgjkaPL/D8UWG62HokieyQQoKSkRGiMs2bNotraWmprayOBNWvWyO+scGdnp5zF/WYvLEb8TwpRykp1MV7feust6uzqJMD169fpueeeY/rDDz/MKzzgdrsJoGkaffvtt/TFF19wQsIDmzZtssojt+6Fo1CgzKiAvAB3DRs2jAULtLS0eErPGB5Ad3c3lZaWUnFxMfeAd955h5+JjY3FaqXAPwhBnRCNySK4b98+Aoilv/z6i/zGggSk1g0opWupAMvGP91yt96zadWqVdTc3Ezz58/31LOAy+US6zgHBP766y+mDR8+HBUgFWSnQI2EAFnqlpcaGxsJIFkMN8L9AnPnzmX6jRs3SACeAi0vL888JwYPgTEJpauhnADo6/LSgQMHCHD37l2Cp15//XXq7eslgKb+Fi1exM9lZmbaCDclIcpQQhATE4OVsrOzuamg+cyePZuzG64Hrlu3jp9ZuWolCdy+fZueeOIJpkdHR1sLHqgM0Yh0bTRz1m7fvp2KiopYkYKCApo8ebLZIwzlFeXSOXEnsLPe2Ij+p5DbYYdOdOtDQ0rNjFya5sTcsGGDcTDZoXTcNoVBMoxWyzDS2yXmOyeUtGSskmDjx4/nRgPAfBDmMpZtUIbRcsi2GsfSD2QYyd2OcdmyZSSwdu1apuXk5GB16v4bak0yX0imyIUEgwNovFTglhMZGcm0srIy43zAVUxuTLbW4xn17Fci23wly9dngUummrTaixcvMpOtW7fiiBwQpqKYU9efHuxDJE5hC9wvL9TW1RLg+PHjPGTQ8wsLC4WpDC5Y5UR4k5qKMSLT6lqeAiX0nuAaMmSI9sMPP9CZM2foyJEj9O677wpTVIuTjidNp0HibvttoH9E5OMqbWKkSaNSlojldoLF7TEP+nUEmKI62y1kOBINbVaNarcI0PuGGUlHyfYvLHg7/jhFSFYqZh0P8KHSptd5ksOPU3tvqAEUot/hFmOIYJLp87wGe9Dwm95eg5xa/R8G6d8U5EcFhwAAAABJRU5ErkJggg==">
 
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
@@ -52,13 +52,19 @@
 
             <div id="sidebar">
                 <div id="sidebar-shortcuts">
-                    <a class="btn btn-sm" href="{{ path('_profiler_search', { limit: 10 }) }}">Latest profiles</a>
+                    <div class="shortcuts">
+                        <a href="#" class="visible-small" onclick="Sfjs.toggleClass(document.getElementById('sidebar'), 'expanded'); return false;">
+                            <span class="icon">{{ include('@WebProfiler/Icon/menu.svg') }}</span>
+                        </a>
 
-                    <a class="sf-toggle btn btn-sm" data-toggle-selector="#sidebar-search" {% if tokens is defined or about is defined %}data-toggle-initial="display"{% endif %}>
-                        {{ include('@WebProfiler/Icon/search.svg') }} Search
-                    </a>
+                        <a class="btn btn-sm" href="{{ path('_profiler_search', { limit: 10 }) }}">Latest profiles</a>
 
-                    {{ render(path('_profiler_search_bar')) }}
+                        <a class="sf-toggle btn btn-sm" data-toggle-selector="#sidebar-search" {% if tokens is defined or about is defined %}data-toggle-initial="display"{% endif %}>
+                            {{ include('@WebProfiler/Icon/search.svg') }} <span class="hidden-small">Search</span>
+                        </a>
+
+                        {{ render(path('_profiler_search_bar')) }}
+                    </div>
                 </div>
 
                 {% if templates is defined %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -491,6 +491,7 @@ tr.status-warning td {
 }
 #sidebar .module {
     padding: 10px;
+    width: 220px;
 }
 #sidebar .module h3 {
     color: #999;
@@ -504,14 +505,25 @@ tr.status-warning td {
    ------------------------------------------------------------------------- #}
 #sidebar #sidebar-shortcuts {
     background: #333;
-    padding: 16px 10px;
     /* needed to prevent visual issues due to the pure CSS slideToggle() */
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    width: 220px;
+}
+#sidebar #sidebar-shortcuts .shortcuts {
+    position: relative;
+    padding: 16px 10px;
+}
+#sidebar-shortcuts .icon {
+    display: block;
+    float: left;
+    width: 50px;
+    margin: 2px 0 0 -10px;
+    text-align: center;
 }
 #sidebar #sidebar-shortcuts .btn {
     color: #F5F5F5;
@@ -569,6 +581,7 @@ tr.status-warning td {
 #menu-profiler li {
     position: relative;
     margin-bottom: 0;
+    width: 220px;
 }
 #menu-profiler li a {
     border: solid transparent;
@@ -853,3 +866,53 @@ table.logs .metadata strong {
     {{ mixins.sans_serif_font|raw }}
     vertical-align: middle;
 }
+
+{# Small screens
+   ========================================================================= #}
+
+.visible-small {
+    display: none;
+}
+.hidden-small {
+    display: inherit;
+}
+
+@media (max-width: 768px) {
+    #collector-content {
+        margin-left: 50px;
+    }
+
+    #sidebar {
+        width: 50px;
+        overflow-y: hidden;
+        transition: width 200ms ease-out;
+    }
+    #sidebar:hover, #sidebar.expanded {
+        width: 220px;
+    }
+
+    #sidebar-search {
+        display: none;
+    }
+    #sidebar:hover #sidebar-search.sf-toggle-visible, #sidebar.expanded #sidebar-search.sf-toggle-visible {
+        display: block;
+    }
+
+    #sidebar .module {
+        display: none;
+    }
+    #sidebar:hover .module, #sidebar.expanded .module {
+        display: block;
+    }
+
+    .visible-small {
+        display: inherit;
+    }
+    .hidden-small {
+        display: none;
+    }
+
+    .btn-sm svg {
+        margin-left: 2px;
+    }
+}
