search

cburschka / cadence

A strophe.js-powered XMPP web client for chatrooms.
6 stars 2 forks source link

Convert the page to a flexbox layout. #421

Open cburschka opened 8 years ago

cburschka commented 8 years ago

Right now, most of the UI elements use absolute positioning and explicit pixel sizes.

This is bad design, and it blocks things like #420 and the page rendering well on mobile or unconventional screen sizes.

It would be better to do away with absolute directives and instead rely on the browser's box model to arrange the elements as much as possible.

cburschka commented 8 years ago

Don't have a good way to layout stuff right now, but basically

[Header Bar] [Message Pane] | [Sidebar] [Text input] [Tray].

Header and Tray have fixed position and height from the top and bottom respectively. Text Pane has a set (changeable) width, and the Message Pane absorbs the available height.

Same deal with the sidebar. Changeable width, message pane absorbs the remainder. Changing to a different sidebar resets the width to the respective sidebar's default (for now).

cburschka commented 7 years ago

It turns out that Boxes Do Not Work That Way. Forget it.

position:absolute on everything it is.

cburschka commented 7 years ago

Actually this might be possible with more effort and a decent front-end framework. Maybe bootstrap or something.

That'd also allow some responsive design and improve the atrocious user experience on mobile.

cburschka commented 7 years ago

... it turns out that while boxes don't work that way, flexboxes do.

This is interesting.

cburschka commented 7 years ago

Aaaaand... done.

cburschka commented 7 years ago

This... isn't really done yet, sadly. More cross-browser testing, and the sidebars are still a mess.