This repository has been archived by the owner on May 10, 2023. It is now read-only.

Improve layout on smaller screens #3

Merged

ChrisBAshton merged 1 commit into gh-pages from improve-tablet

Dec 30, 2020

Commits on Dec 30, 2020

Improve layout on smaller screens

I often have the 2nd line dashboard open on my Macbook, now that
we're no longer in the office and have it on the big screen.
I tend to have it on half my external monitor, leaving the other
half for another window such as Nagstamon.

Currently, even on this relatively large real estate of ~980px,
content is cut-off. This commit attempts to improve the UI using
media queries.

| Before | After |
|--------|------|
|![before](https://user-images.githubusercontent.com/5111927/102879725-2be6ac00-4442-11eb-9459-26ac3434fef2.png)|![after](https://user-images.githubusercontent.com/5111927/102879724-2b4e1580-4442-11eb-8408-875971af07b5.png)|

Rather than hack the existing `layout-2x1-75-25` class used by
the 2nd line dashboard (and risk introducing unexpected changes
for other teams), I've created a new `layout-2x1-responsive` class.
It looks identical on the build.html screen, so I've added an
animation to differentiate the preview:

https://user-images.githubusercontent.com/5111927/103345974-b9517e00-4a8a-11eb-8867-c8e55996ec5c.mov

Once this is merged, we'll need to edit the 2nd line dashboard
link here:
https://github.com/alphagov/govuk-developer-docs/blame/800ed1f6a45ee0ab3493d4f4e33e249e5ac80470/source/manual/2nd-line.html.md#L20

ChrisBAshton committed Dec 30, 2020