Improve the CSS #476

Open
aaugustin opened this Issue Nov 24, 2013 · 6 comments

Projects

None yet

6 participants

@aaugustin
Contributor

We're mostly backend people, but I'm pretty sure we can do better...

@rnevius
rnevius commented Dec 18, 2014

On a related note: as this is a package/plugin, all CSS classess should be prefixed to avoid being overridden by other project staticfiles. For example:

<div class="checker">
    <span class="checked">
        <!-- Input -->        
    </span>
</div>

The above checker and checked classes are used often by jQuery plugins and CSS frameworks (for example, both are used by jQuery Uniform). Best case would be renaming all classes with a prefix, such as djDebug_.

@ngzhian
ngzhian commented Jun 10, 2015

I chanced upon rack-mini-profiler [0] while listening to a podcast [1], and checked out a video [2] about how it works. I thought it looked really simple and clean, and would like to suggest updates to the style for debug toolbar in the direction of that project.
Would the maintainers like to take a quick look? Will be happy to work on this if the core team is interested, thanks!

[0] https://github.com/MiniProfiler/rack-mini-profiler
[1] http://bikeshed.fm/17
[2] http://railscasts.com/episodes/368-miniprofiler

@tim-schilling
Contributor

What did you have in mind for style changes? The toolbar currently expects that panels remain exclusive of each other. The rack-mini-profiler shows a general overview that contains data that exists across a few of the toolbars panels.

@bionikspoon

Suggestion:

screen shot 2015-09-18 at 13 52 27

This button is the "go back" button. But it's on the right side, pointing right. In almost every context, that's the convention to go forward, not back. I hope I'm not the only one that ends up clicking "back" on my browser.

The suggestion is that nav could be an ounce more intuitive and conventional.

@aaugustin
Contributor

Regarding namespacing, we try to prefix everything with djdt-.

@j127
j127 commented Jul 10, 2016

I think that the toolbar CSS might get overridden by Bootstrap too. I'm trying it with Bootstrap 4, which contains this:

[hidden],
template {
  display: none;
}

...which causes the Debug Toolbar to disappear, because it contains: <div id="djDebug" hidden="hidden"...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment