Securedrop: Make HTML/CSS responsive

[heartsucker]

Currently many of the elements have fixed sizes (in pixels). This led to some ugly and poorly sized containers for the German translations in #1103 because of long words. It would probably look equally bad with very short words as in Chinese.

Before piling on more features, it might make sense to refactor the HTML/CSS (or hopefully SASS #1349) to support containers that resize depending on content size (as well as possibly monitor size). As I'm not usually a frontend dev, I'd roll it all by hand and skip a framework.

Currently there are a lot of features that require front changes, so it would be good to make this change before starting any of the others: #1356, #1355, #1354, #1353, #1171, #1170, (plus a nasty rebase of #1103)

[heartsucker]

I can help with this, but it would be helpful if someone could merge #1349 first. We already have ugliness with the new wordlist because of the longer words.

[conorsch]

Sorry about the holdup on #1349, @heartsucker—those changes are in develop now, so have at it!

[heartsucker]

@conorsch No worries. I'm probably going to hold off on this since it looks like @ninavizz has some more major changes to the UI in the pipe, and any changes I make might conflict with that.

Also related: https://github.com/freedomofpress/securedrop/issues/1450

[heartsucker]

Work tracked in branch responsive-css.

[kushaldas]

@SaptakS please have a look :)

[SaptakS]

@kushaldas sure. I will try to contribute and make the pages more responsive in case they aren't. Thanks. 😃

[SaptakS]

There is one more thing that I wanted to ask. Apart from changing the fixed sizes (in pixels) to maybe percentage or vw/vh, one more thing that we often see is though things resize like they should with screen size, somethings appear better when done differently in mobile.

Say, for example, in the /generate page, in wide screen, the differently sized buttons look good, but in narrower screens it looks weird:

Wide Screen:

Narrow Screen:

[ghost]

@SaptakS note that for this specific page we removed the USE EXISTING CODENAME button so this won't be an issue anymore.

[good-lly]

what is the progress, any update? I could help ...

[eloquence]

As the above comments and PRs show, a lot of work has been done on this since the issue was filed, and both JI and SI should render responsively. Additional improvements, e.g., to table rendering, can be filed as separate issues.