vortex-5 / ddwrt-bwmon

An Individual Bandwidth Monitor For DD-WRT
171 stars 37 forks source link

Fix some minor layout issues introduced with the new dark theme #48

Closed vortex-5 closed 7 years ago

vortex-5 commented 7 years ago

Another user contributed a dark theme.

The only minor problem is on mobile (responsive design) the buttons don't look quite right.

We need to add some wrapping to the layout so the buttons look right.

J3n50m4t commented 7 years ago

I've looked into this "bug" and realised, it's no bug.

Bootstrap just doesn't support fully responsive btn-groups . Bootstrap Issue #7252

We could manipulate the bootstrap or use some extra class as I did in #49.

Also, we could use vertical groups, but it would duplicate allot of content. Little example for the first buttongroup

<div class="btn-group hidden-xs">
    <label class="btn btn-default" ng-model="displayDensity" btn-radio="'Normal'">Normal</label>
    <label class="btn btn-default" ng-model="displayDensity" btn-radio="'Compact'">Compact</label>
</div>
<div class="btn-group-vertical visible-xs">
    <label class="btn btn-default" ng-model="displayDensity" btn-radio="'Normal'">Normal</label>
    <label class="btn btn-default" ng-model="displayDensity" btn-radio="'Compact'">Compact</label>
</div>

vertical made a copy&paste mistake in the gif - sorry

vortex-5 commented 7 years ago

I was just going to change the row to not use bootstrap alignment

I.E. I was going to change the row to

<div style="display: flex; flex-wrap: wrap">
  <item>...
  <item>...
</div>

then fiddle around with it. I wouldn't have to use @media queries.

I use flex at work a lot to compensate when stability is more important vs aesthetics.

(Of course I would put this in proper css classes I just did it inline here for readability)

Anyways your solution is better I just need to test it on my 5 year old android phone with the smallest screen and we'll go with that solution since it's more aesthetically pleasing anyways.

vortex-5 commented 7 years ago

Added some wrapping the whole thing is pretty slick now new version will be drafted.