General templates and styles overhaul

[ogdenwebb]

Hello,

These changes aim to create a better website UI/UX, especially talking about mobile view. Mostly I was trying to avoid breaking your changes related to message log table for example, so I've tried to keep design as is, but with a few exceptions.

Mostly it based on this https://github.com/lizmat/App-Raku-Log/issues/3#issuecomment-913208077 and some personal requests made by @Altai-man.

Note I didn't touch JS part and you have to change some part of your Cro templates (e.g. navbar now has two browse menu, because one of them aimed for mobiles, so you need to create a component), sidebars toggling logic is still poor, etc.

Brief changelog

• Rework common, index and homepage templates: improve layout (column system) in general, rework some elements, better element placement, etc
• Change navbar structure, move date switcher from main container to navigation
• Added secondary navbar to keep date switcher on mobiles, because main navbar can't contain Camelia logo, a channel dropdown menu and hamburger elements at the same time (for example on 360p width it's a mess on the same row)
• Redesign the main menu on mobiles: now it contains all browse menu entries, and two tabs for search/filter settings
• Some other style fixes & improvements

p.s. I've changed column layout, so maybe it will produce some issues for now.

[lizmat]

Thank you for your work on this. Is this still a work in progress? Or is it ready to be merged?

[ogdenwebb]

@lizmat technically it's ready to merge if everything is fine for you.

[lizmat]

Thank you, looks great.

It does seem like the mobile menu is either not working correctly, or it doesn't need the Filter / Search buttons. For me, on Safari, it is showing both:

and clicking the "Search" button doesn't do anything.

[ogdenwebb]

Duh, forget to redo that.

In common.crotmp there is div with id tab-content, but somehow I put is-active class for both of them.

[lizmat]

Ok, I think I can fix that :-)

[lizmat]

I removed the "is-active" from the search part. But the button still doesn't work.

[ogdenwebb]

But the button still doesn't work.

Yeah, as I noted in the initial message, I didn't touch JS part.

[lizmat]

There's some more quirks, but I think I can handle them when I have time again to look into them more carefully. Thanks again!

Ah no, there's one thing that's probably some width calculation being off somewhere deep in CSS:

That only appears to happen on "20 September 2021", because it is just a tad wider that "21 September 2021".

[ogdenwebb]

Yes, this issue appears due to a different font using in Safari, so you need to play with max-width here. I assume something in range 290-300px should be enough, but maybe a bit more.

https://github.com/lizmat/App-Raku-Log/blob/60ee5282769ec603b9bbf0b794bfa7e46db1d15b/base/static/styles/main.scss#L306-L307

[lizmat]

tells me there's a new version of npm, is it safe to update?

[lizmat]

290px fixes it

[ogdenwebb]

tells me there's a new version of npm, is it safe to update?

Well, kinda. It highly depends on a project and its dependencies, because sometimes it can broke your workflow when third party packages in your project cause incompatibility with the most recent version of npm (or vice versa) due to a lack of updates in their code base.

Considering we have pretty fresh dependencies, it should be ok.

[Altai-man]

Yay, I am really glad to see @lizmat reacting!

I hope this addresses a well bit of https://github.com/lizmat/App-Raku-Log/issues/3 and we don't need more tweaking.

What we, AFAIU, miss are the JS bits (we need a checklist maybe?) and live page which is still on my and I am quite eager to work on it as soon as the situation allows.