maximebf / php-debugbar

Debug bar for PHP
phpdebugbar.com
MIT License
4.2k stars 401 forks source link

Improve align of icons in the header on the right side #645

Closed nckrtl closed 7 months ago

nckrtl commented 7 months ago

This PR adds proper alignment of the icons on the right side, before and after: before-after

What I've done:

There was also a line of 1 pixel high separating some elements in header bar from the header bar bottom border div.phpdebugbar-header > div > * this was caused by float: left making the elements being targeted by this css to become 16.31px instead of 16px. Setting a fixed height fixes this.

I also had to adjust the padding on the widgets list item to nicely align them with the close icon:

Screenshot 2024-04-02 at 23 57 19

This PR might come across as being overkill on the spacing and stuff but its part of an extraction of the changes presented here: https://github.com/barryvdh/laravel-debugbar/pull/1601

erikn69 commented 7 months ago

It seems like you would have conflicts with #644

nckrtl commented 7 months ago

Partially I think, as my spacing change are still valid. But indeed best to wait for that one to get merged and I'll update this one.

barryvdh commented 7 months ago

The open buttons looks empty. I think it was missing the viewbox, which I added in https://github.com/maximebf/php-debugbar/commit/100030444436d9f7f549aed29c92def790245035 (You can test this in the demo by enabling the open handler in the demo/bootstrap.php

$debugbar = new StandardDebugBar();
$debugbarRenderer = $debugbar->getJavascriptRenderer()
                             ->setBaseUrl('../src/DebugBar/Resources')
                             ->setAjaxHandlerEnableTab(true)
                             ->setOpenHandlerUrl('/')
                             ->setEnableJqueryNoConflict(false);
barryvdh commented 7 months ago

Followup in https://github.com/barryvdh/laravel-debugbar/pull/1603 which replaces the laravel icons (only change the fill in dark mode)