search

mojolicious / mojolicious.org

:cookie: Mojolicious Website
https://mojolicious.org
33 stars 19 forks source link

Improve the responsiveness #17

Closed kiwiroy closed 3 years ago

kiwiroy commented 3 years ago

Implementing the comment from @smonff and augmenting the mojo-fun header image with a media query for screen widths smaller than the image size. Briefly tested with Firefox and Safari responsive design modes.

kraih commented 3 years ago

Before/after screenshots would probably help with the reviews.

kiwiroy commented 3 years ago

Here are some screen captures from Galaxy S9, iPhone 6-8, iPad Pro (in portrait and landscape). Collated as montages using gm using latest code.

Before - large left/right borders and small text on phone size Before

After - improved border, text size After

Docs iPhone only. Galaxy is similar with slight changes to wrapping position. iPads, even minis, have two columns. Docs

Native image size - mojo-fun too wide at lower res as described by @smonff NoMedia

kraih commented 3 years ago

I'm seeing inconsistent results actually. It doesn't seem to work for the documentation overview page.

ios
kiwiroy commented 3 years ago

Those long Command module names. 😞

smonff commented 3 years ago

Might fix by reducing the margin of the <ul>s with media queries in specific cases of nested <uls>s. Font size could also be shrunk a very small bit in the list (it adds inconsistency but if it is something like font-size: 95%;, difficult to notice). Or reducing the general font-size, dunno, it is very nice like this, but a bit huge I guess

I'll could try to post a fix for this if you agree with the principle.

kraih commented 3 years ago

The site has been broken for a day now 😢. Is there a quick solution or do we have to revert the PR?

smonff commented 3 years ago

Working on it.

kraih commented 3 years ago

I've deployed a workaround in the meantime.

smonff commented 3 years ago

FYI, I also tested this exact same solution and thought it was not acceptable, typographically (brrrrreaking words 😱). But, who care you'll tell me?

kraih commented 3 years ago

It's certainly not ideal, and i wouldn't mind a better solution if it works.

smonff commented 3 years ago

It's certainly not ideal, and i wouldn't mind a better solution if it works.

I was thinking of declaring a class (or an id) in the pod for the API list part (or other "long namespaces" areas) and applying the CSS I commited and also the break-word thing for extreme cases to this specific class or id but I can't find anymore if perlpod allows this.