Skip to content

Commit 2a9ff61

Browse files
nicolas-grekasnicolas-grekas
committed
minor symfony#61886 [WebProfilerBundle] Simplify toolbar CSS (MatTheCat)
This PR was merged into the 7.4 branch. Discussion ---------- [WebProfilerBundle] Simplify toolbar CSS | Q | A | ------------- | --- | Branch? | 7.4 | Bug fix? | no | New feature? | no | Deprecations? | no | Issues | N/A | License | MIT When working on the toolbar I saw “status” were not aligned with other “info pieces”. Before: <img width="347" height="242" alt="toolbar-info-before" src="https://github.com/user-attachments/assets/eaca8f04-80ff-40a8-a5b3-0926f16fb124" /> After: <img width="331" height="242" alt="toolbar-info-after" src="https://github.com/user-attachments/assets/35103610-7c4a-45d3-9c6b-0fe58fe24240" /> When looking into it I also noticed some obsolete rules which this PR removes/updates. Commits ------- 3d0db16 [WebProfilerBundle] Simplify toolbar CSS
2 parents d95fb96 + 3d0db16 commit 2a9ff61

File tree

3 files changed

+14
-60
lines changed

3 files changed

+14
-60
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,13 +125,15 @@
125125

126126
<div class="sf-toolbar-info-piece sf-toolbar-info-php-ext">
127127
<b>PHP Extensions</b>
128-
{% if collector.hasXdebugInfo %}
129-
<a href="{{ path('_profiler_xdebug') }}" title="View xdebug_info()">
130-
{% endif %}
131-
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasXdebug ? 'green' : 'gray' }}">Xdebug {{ collector.hasXdebug ? '✓' : '✗' }}</span>
132-
{% if collector.hasXdebugInfo %}
133-
</a>
134-
{% endif %}
128+
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasXdebug ? 'green' : 'gray' }}">
129+
{% if collector.hasXdebugInfo %}
130+
<a href="{{ path('_profiler_xdebug') }}" title="View xdebug_info()">
131+
{% endif %}
132+
Xdebug {{ collector.hasXdebug ? '✓' : '✗' }}
133+
{% if collector.hasXdebugInfo %}
134+
</a>
135+
{% endif %}
136+
</span>
135137
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.hasapcu ? 'green' : 'gray' }}">APCu {{ collector.hasapcu ? '✓' : '✗' }}</span>
136138
<span class="sf-toolbar-status sf-toolbar-status-{{ collector.haszendopcache ? 'green' : 'red' }}">OPcache {{ collector.haszendopcache ? '✓' : '✗' }}</span>
137139
</div>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
<div class="sf-toolbar-info-group">
9393
<div class="sf-toolbar-info-piece">
9494
<b>
95-
<span class="sf-toolbar-redirection-status sf-toolbar-status-yellow">{{ collector.redirect.status_code }}</span>
95+
<span class="sf-toolbar-status sf-toolbar-status-yellow">{{ collector.redirect.status_code }}</span>
9696
Redirect from
9797
</b>
9898
<span>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig‎

Lines changed: 4 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,6 @@
162162
color: inherit;
163163
}
164164

165-
.sf-toolbar-block span {
166-
display: inline-block;
167-
}
168165
.sf-toolbar-block .sf-toolbar-value {
169166
color: var(--sf-toolbar-gray-100);
170167
font-size: 13px;
@@ -217,10 +214,6 @@
217214
margin-left: 4px;
218215
}
219216

220-
.sf-toolbar-block .sf-toolbar-info-piece:last-child {
221-
margin-bottom: 0;
222-
}
223-
224217
div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece a {
225218
color: #99CDD8;
226219
text-decoration: underline;
@@ -270,16 +263,12 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
270263
color: var(--sf-toolbar-white);
271264
background-color: var(--sf-toolbar-gray-600);
272265
padding: 3px 6px;
273-
margin: 0 4px;
274266
min-width: 15px;
275-
min-height: 13px;
276267
text-align: center;
277268
}
278269

279-
.sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-green,
280-
.sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-green {
270+
.sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-green {
281271
background-color: #059669;
282-
color: var(--white);
283272
}
284273
.sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-red,
285274
.sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-red {
@@ -317,33 +306,16 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
317306
display: none;
318307
}
319308

309+
.sf-toolbar-block.sf-toolbar-block-request .sf-toolbar-icon {
310+
padding: 0 4px;
311+
}
320312
.sf-toolbar-block-request .sf-toolbar-status {
321313
border-radius: 6px;
322-
color: #fff;
323-
display: inline-block;
324314
flex-shrink: 0;
325315
font-size: 13px;
326316
font-weight: 500;
327317
padding: 4px 8px;
328318
}
329-
.sf-toolbar-block-request .sf-toolbar-info-piece a {
330-
background-color: transparent;
331-
text-decoration: none;
332-
}
333-
.sf-toolbar-block-request .sf-toolbar-info-piece a:hover {
334-
text-decoration: underline;
335-
}
336-
.sf-toolbar-block-request .sf-toolbar-redirection-status {
337-
font-weight: normal;
338-
padding: 2px 4px;
339-
line-height: 18px;
340-
}
341-
.sf-toolbar-block.sf-toolbar-block-request .sf-toolbar-redirection-status.sf-toolbar-status-yellow {
342-
background-color: var(--sf-toolbar-yellow-300);
343-
border-radius: 4px;
344-
color: var(--sf-toolbar-yellow-800);
345-
padding: 1px 4px;
346-
}
347319
.sf-toolbar-block.sf-toolbar-block-request .sf-toolbar-info-piece .sf-toolbar-redirection-method {
348320
background: transparent;
349321
color: var(--sf-toolbar-gray-300);
@@ -392,11 +364,6 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
392364
box-shadow: -1px 0 0 var(--sf-toolbar-black), inset 0 -1px 0 var(--sf-toolbar-black);
393365
}
394366

395-
.sf-toolbar-block-request .sf-toolbar-icon {
396-
padding-left: 0;
397-
padding-right: 0;
398-
}
399-
400367
.sf-toolbar-block .sf-toolbar-icon img,
401368
.sf-toolbar-block .sf-toolbar-icon svg {
402369
border-width: 0;
@@ -575,18 +542,6 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
575542
.sf-toolbar-block .sf-toolbar-icon {
576543
padding: 0 10px;
577544
}
578-
.sf-toolbar-block-time .sf-toolbar-icon {
579-
padding-right: 5px;
580-
}
581-
.sf-toolbar-block-memory .sf-toolbar-icon {
582-
padding-left: 5px;
583-
}
584-
.sf-toolbar-block-request .sf-toolbar-icon {
585-
display: flex;
586-
align-items: center;
587-
padding-left: 0;
588-
padding-right: 0;
589-
}
590545
.sf-toolbar-block-request .sf-toolbar-label {
591546
margin-left: 4px;
592547
margin-right: 1px;
@@ -597,9 +552,6 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
597552
}
598553
.sf-toolbar-block-request .sf-toolbar-icon .sf-toolbar-request-icon + .sf-toolbar-label {
599554
margin-left: 0;
600-
}
601-
.sf-toolbar-block-request .sf-toolbar-label + .sf-toolbar-value {
602-
margin-right: 5px;
603555
}
604556

605557
.sf-toolbar-block-request:hover .sf-toolbar-info {

0 commit comments

Comments
 (0)