search

antedebaas / Viesti-Reports

DMARC & SMTP-TLS Reports processor and visualizer and BIMI file hoster
https://docs.viestireports.com/
GNU Affero General Public License v3.0
82 stars 16 forks source link

UI cleanup, adaption for small screens, sidebar fixes #78

Closed jensb closed 4 months ago

jensb commented 6 months ago

This is from #55 - but cleaned up a little and made easier to adapt for future changes.

I fixed the sidebar layout, added a touch sidebar (right side) for mobile small screens, made some table columns display depend on screen size, adjusted the breadcrumbs bar, decreased padding for the card CSS for small screens and added icons here and there. I also moved most "what to display" decisions into @media queries so changing these in batches is easier in the future.

Not all tables have been adjusted yet. I'll do the rest if you like the direction this is going. One further idea is to also increase contrast for the cards, so they actually help guide the user. Another is removing the border-radius for all items and going for a more material-like layout especially for small screens, that'll save another bit of space and make the overall UI even simpler. What do you think?

I did leave the top menu for medium screen sizes but you can easily hide it setting display: none in the the respective CSS @media(..) query. This way it's also up to every user to decide what they prefer. Positioning is not perfect yet there either.

antedebaas commented 5 months ago

@jensb friendly ping

jensb commented 5 months ago

Hi, sorry for the silence. Family life :-) What is still to be done? AFAIK all issues were resolved.

antedebaas commented 5 months ago

please process all comments first

jensb commented 5 months ago

Will have a look tonight. Sorry for the delay.

jensb commented 4 months ago

Done. OK like this?

antedebaas commented 4 months ago

i'm sorry but im never gonna merge this as is. the design is incomplete and more important inconsistent between pages. most of the comments i made have not been resolved.

jensb commented 4 months ago

I don't get it. On my side of Github, most of the commits show up as "resolved" and my comment was the last one on each. Most of the things you wanted were implemented and this took me quite some time. Don't get me wrong, but this is a bit disheartening. If there's a misunderstanding on my part (perhaps the way PRs work) please help me find it.

antedebaas commented 4 months ago

image image image image

antedebaas commented 4 months ago

the design is all over the place. its inconsistent, uses different colors for elements that should have the same color. icons dont align etc. its cramped and text heavy where i try to find i middle ground.

jensb commented 4 months ago

Hm...

Your first screenshot seems not up to date. The reduced padding only appears when the sidebar is also not there: grafik vs. grafik

There's some stuff I did not commit because you didn't like it (back/fwd buttons for one), I'll check over the weekend if I missed a commit.

Regarding second screenshot, I removed the h:m:s time strings from the dates if they are 00:00:00 or 23:59 to declutter. See here: grafik

We can also remove time specifications totally and just keep the dates. In your original design they were always there (IIRC) so this was much more cramped.

Regarding no. 3, I don't have SMTP-TLS reports to play with so I never touched that side. This is basically your design. I did say I'd be happy to copy over the DMARC template's design as soon as you are happy with it, but not before, to avoid duplicate work.

Regarding no. 4, same thing. Me left, you right. As soon as you're happy with the left side, I can do the same for SMTP-TLS.

What else do you consider inconsistent? Which icons specifically - except for the SMTP-TLS template which I left mostly alone - do not line up?