Layout tweaks (!460) · Merge requests · Exosphere / exosphere

Trying to make the app layout look nicer.

Content container to limit horizontal width of content (e.g. text), so it doesn't look too stretched out on a wide viewport
Narrower form container so that form input fields are a generally consistent width throughout the app
Use of page-spanning horizontal lines underneath section headings, outside of content container
Enhanced layout for server details page (see video below). Content fills horizontal space in single-column view, and above a certain viewport width, both columns of dual-column view do the same thing
Small drop shadow beneath top navigation bar
Simplifying model a bit (windowSize doesn't need to be a Maybe type)

Suggestions for reviewer

The diff of this MR looks scary long, but most of it is just code indentation changes in view functions, and GitLab can hide that for you, which makes this much easier to review. Use GitLab's changes browser, hit the gear button, and uncheck "Show whitespace changes".

Look at src/View/Helpers.elm first! Then src/View/Types.elm and src/Types/Types.elm. Then everything else. Maybe go commit-by-commit if it's too much to review at once.

Look around the app and see that it is less ugly than before!

N/A

Edited Jul 09, 2021 by Chris Martin