[go: up one dir, main page]
Skip to content

Rewrite CSS using Flexbox

asdfkcdkrequested to merge
asdfkcdk/cactus-client:fix-css into main

Caution: this PR is big! It's basically my rewrite of the style sheet while trying to make it work on my website.

This introduces Flexbox everywhere except of course for the comment content itself (1. of #61 (closed)) and makes the styles work without a browser style sheet (2. of #61 (closed)). It also fixes other things that I found along the way:

  • add missing padding in textarea
  • unstyle links, make pointer a cursor
  • use writing mode relative properties
  • remove duplicate selectors
  • and many more...

I reckon looking at the total change diff will be quite hard. Lots of red and green hurting your eyes instead of helping you understand what changed and why. Because of this, I cleaned up the changes, put them into multiple smaller logical commits with more details in the commit messages, that allow you to view the changes from commit to commit. Gitlab's Commit tab seems to be quite nice to view the changes of individual commits. I hope this helps. If there are any question or anything is unclear feel free to ask!

Also I left some "todo" notes in the code for the future, regarding the use of class names (3. of #61 (closed)), rules that can removed if all: unset is used (4. of #61 (closed)), and cleaning up of markup (5. of #61 (closed)).

Before you dive into the hard part, left me show you something cool! 😎

Thanks to Flexbox, this single rule

.cactus-container {
 flex-direction: column-reverse;
}

now allows the user to switch the order of the comments and put the editor at the bottom! No change in markup required! 🔥

And with just these two rules

.cactus-container>div:last-child {
  flex-direction: column-reverse;
}

.cactus-container>div:last-child>div:first-child {
  flex-direction: column-reverse;
}

the user can switch around the order of the comments themselves, putting the old ones at the top and the new ones at the bottom. And the "view more" button happens to be at the right place as well! This should make CC pretty easily customisable. This was also requested in #55 I believe.

(Note, there seems to be a known bug in Safari 14 which fails to apply the gap property if flex-direction: column-reverse is set, leading to missing gaps between the sections. So maybe don't use Safari 🥲)

Note, with regards to the two ugly selectors in the second code, this will hopefully be simpler if all elements get class names (see 3 of #61 (closed)).

Also this should help towards fixing #57 (closed). It zeros margins of the first and last child of .cactus-message-text. Though more work is needed to the markup structure as it seems that sometimes a wrapping div is inserted which then preserves the margins (see 5 of #61 (closed)).

Thanks!

Edited by asdfkcdk

Merge request reports