Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

some small ui tweaks #119

Merged
merged 4 commits into from
Nov 1, 2023
Merged

some small ui tweaks #119

merged 4 commits into from
Nov 1, 2023

Conversation

wont-work
Copy link
Contributor

@wont-work wont-work commented Oct 30, 2023

  • rounded timeline corners when "Show a gap between posts on the timeline" is disabled
  • show a pointer cursor when hovering over clickable parts of notes when "Click to open notes" is enabled
  • hide status indicators when they're in an "unknown" state
  • add more shadows
before

Screenshot 2023-10-30 at 15-19-55 @kopper

after

Screenshot 2023-10-30 at 15-18-42 @kopper

there are three parts of this pr i'm not too sure on:

  • i directly copied the ._shadow helper's box-shadow definition for consistency, but i'm not entirely sure if the size of those shadows fit the ui. it may make sense to play with the individual shadow sizes
    • imo it's still better than having no separation between the elements and the background
  • 4fcd47b feels a bit too "fragile" as i just apply a shadow to all panel elements no matter what. so far there is only one obvious exception i could find that needed reverting (notifications), but there's probably more out there i haven't encountered. unsure about that commit.
    • that said, individually hunting down parts that could use a shadow in a codebase as large as misskey feels like a tiring job, so not sure on what the best way to approach that would be
  • pnpm lint runs out of memory in my laptop

@Mar0xy
Copy link
Contributor

Mar0xy commented Oct 30, 2023

hide status indicators when they're in an "unknown" state

This mainly was left in by misskey to keep consistency so it's not just like woop all of a sudden the status indicator is not here while on other profiles it is.

add more shadows

A big issue I see with this is performance on the client as the more CSS Effects need to be rendered (especially on the profile page as it also has css effects for the background images which currently affect the entire site on stable and has already been fixed) the slower/laggier it gets.

@Mar0xy
Copy link
Contributor

Mar0xy commented Oct 30, 2023

show a pointer cursor when hovering over clickable parts of notes when "Click to open notes" is enabled

While this is a nice idea on paper it kinda translates weirdly due to the fact that it makes it harder to indicate if someone is hovering over the footer icons, cw button and as well as making the cursor be basically a permanent pointer (which lets be honest when it comes to the way the pointer looks it has always looked weird/ugly).

@wont-work
Copy link
Contributor Author

wont-work commented Oct 30, 2023

This mainly was left in by misskey to keep consistency so it's not just like woop all of a sudden the status indicator is not here while on other profiles it is.

👍, dropping that commit in this case

A big issue I see with this is performance on the client as the more CSS Effects need to be rendered (especially on the profile page as it also has css effects for the background images which currently affect the entire site on stable and has already been fixed) the slower/laggier it gets.

true, but imo there needs to be some way to separate things from the background, barely perceptible color changes do not cut it (especially on pages without a background image)

there may be a way to pull it off with borders which should be slightly more resource efficient, i'll have to experiment

While this is a nice idea on paper it kinda translates weirdly due to the fact that it makes it harder to indicate if someone is hovering over the footer icons, cw button

right now there is no other indication on what part of a note is clickable and what part isn't. especially on posts with reactions or audio where the empty space next to them do not open the post (or the empty space under the avatar, which in fairness seems to be consistent with masto)

the footer icons can be solved by giving them a hover color (which i'll may throw in with the next revision of this pr, depends on if my brain's willing to cooperate) (edit: there already seems to be css for doing this. are the colors just the same in the default themes?)

and the cw button changes background colors which feels reasonable to me (and the cursor doesn't change because the post hitbox is that close to the cw button)

not entirely sure on what you mean by "and as well as making the cursor be basically a permanent pointer (which lets be honest when it comes to the way the pointer looks it has always looked weird/ugly)." though

@wont-work wont-work marked this pull request as draft October 30, 2023 13:35
@wont-work wont-work force-pushed the css-tweaks branch 2 times, most recently from 107ece1 to 98dc045 Compare October 31, 2023 12:33
@wont-work
Copy link
Contributor Author

revision 2: using a border does seem to look pretty nice, and should be less resource intensive compared to shadows. also snuck in a fix for shadows and transparent avatars in the profile page

Screenshot 2023-10-31 at 15-29-16 @kopper
Screenshot 2023-10-31 at 15-28-29 @kopper

@wont-work wont-work marked this pull request as ready for review October 31, 2023 17:12
@wont-work
Copy link
Contributor Author

there are a few more changes i'd like to make but they're significantly larger and probably deserve their own individual PRs (if i manage to pull them off, that is). un-drafting this pr

Copy link
Contributor

@Mar0xy Mar0xy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As said on Discord the borders don't look good depending on the theme you use and it would probably be good to avoid trying to separate the background and containers for now until a better solution can be found.

@wont-work
Copy link
Contributor Author

dropped borders & rebased on develop

@Mar0xy Mar0xy merged commit a8e4616 into transfem-org:develop Nov 1, 2023
8 checks passed
@Mar0xy Mar0xy mentioned this pull request Nov 7, 2023
@wont-work wont-work deleted the css-tweaks branch November 7, 2023 22:47
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants