search

srid / ema

Change-aware static site generator for Haskell programmers
https://ema.srid.ca
GNU Affero General Public License v3.0
117 stars 9 forks source link

Vanilla CSS Status Indicator #123

Closed RiugaBachi closed 2 years ago

RiugaBachi commented 2 years ago

:eyes:

Resolves #91 .

srid commented 2 years ago

@RiugaBachi Could you post a screenshot/video of how this looks on your browser/computer?

(We don't have to mirror the Tailwind style faithfully; so we have the creative freedom to change the indicator's styling; but since on my end the position of the indicator looks a bit off I wonder if we are facing a browser-specific difference).

RiugaBachi commented 2 years ago

image

I'm using vivaldi.

srid commented 2 years ago

On Brave (a Chromium browser) as well as Safari it looks like this:

image

...

image

Hover tooltips does work, FWIW.

srid commented 2 years ago

I wonder if we can spot the precise difference by running the Tailwind CSS compiler on the current status indicator and then compare the generated styles with the one in this PR.

RiugaBachi commented 2 years ago

Could you see if that resolves the issue for you?

srid commented 2 years ago

@RiugaBachi It behaves the same, as in I see:

image

Are you not able to reproduce this locally in Chrome or Chromium?

RiugaBachi commented 2 years ago

Yea, it appears as it does in this comment for Vivaldi, Brave, Firefox on my system.

srid commented 2 years ago

So maybe this is a macOS-specific issue. Okay, I'll try to tweak this later.

FTR, tailwind generates this CSS: https://gist.github.com/srid/2471813953a6df9b24909b9bb1d3cd2b#file-tailwind-compiled-css

RiugaBachi commented 2 years ago

So I had a hunch and toyed around with measurements until I figured out it was box-sizing: border-box. This should definitely make it consistent across all resolutions.

I basically noticed how (vanilla width) = (tailwind (width + padding + border)) and surmised there was some property to perform padding/border compensation.

Also apologies, I am a bit inept at UI/UX lmao.

srid commented 2 years ago

Yup, that works (on Brave)!

Re: border-box I think they talk about it here: https://tailwindcss.com/docs/box-sizing

I am a bit inept at UI/UX lmao.

Most programmers are. :-) Tailwind is great for design for that reason.