pleroma/pleroma-fe
0
0
Fork 0
Code Issues 343 Pull requests 27 Projects Releases Packages Wiki Activity

Layout refactoring + Three column mode #2770

Closed
hj wants to merge 0 commits from gitlab-mr-iid-1503 into develop
pull from: gitlab-mr-iid-1503
merge into: pleroma:develop
Conversation 39 Commits - Files changed -
hj commented 2022-04-05 16:47:04 +00:00
Owner
Copy link

This refactors majority of layout code/markup/css related to layout.

Major changes:

  • Fixed "always show mobile new post button", that stuff was broken day 1 lol
  • Fixed logoLeft option, also got broken along the way
  • Notifications are loaded asynchronously to make teleports work on page load. Probably saves a few bytes of a bundle for anon viewers, almost imperceptable to logged in users (it takes slightly longer for initial load of notifications).
  • Instead of isMobileLayout there's now layoutType which can be mobile, normal, wide, this will also make it possible to make an option to disable wide mode or mobile mode if needed.
    • Layouts are now set with CSS class instead of media-query. Some more modifier classes like forbidding sticky headers, enabling scrollbars on sidebars, whether mobile button is visible etc.
    • There are three user options - disable wide mode entirely, wide and wide + reverse. Latter two are labelled as what they do from user perspective - move notifications to 3rd column or move post/nav to 3rd column
  • There's now single Notifications component (apart from interactions) on page, shared between desktop, wide and mobile mode. Essentially we only render it once and just move around, therefore any open forms you had in it will remain open and drafts won't be lost between layout transitions. Also makes swapping between desktop and mobile modes MUCH quicker and lag-free.
  • Instead of scrolling body now there's a scrolling container below navbar, that is sort of requirement for sticky headers to work but also scrollbars make more sense. You can still scroll by scrolling anywhere, except the navbar, which i think is an acceptable compromise Requirement for sticky was a bogus one, it work on body just fine. Other than that stuff like body-lock stopped working (duh) and other stuff was pain to fix so I ended up reverting to previous approach.
  • Notifications, Timelines (but not user's) have sticky headers
    • Unfortunately it's not entirely possible to keep the gap above without content showing through, the only way I came up with needs a css mask to be adjusted on scroll event (since -webkit-mask-attachment is no longer a thing and there's no replacement for it) but at this point it felt like too much effort for an underwhelming solution. So some content will show through heading if it has rounded corners and heading will jump around a bit (mostly in chats)
    • Also inline expanded conversations have sticky headers (stack below other sticky headers) for easier thread closing.
    • There's an option to disable sticky headers entirely, in case they take up too much vertical space
  • Chats no longer have "chat mode layout" or whatever it was, instead it works exactly as other views, instead of chat having a scrollable inner "viewport", it's the content that is being scrolled, while header and footer are kept in place with position: sticky, to avoid excessive jumpiness post form and header have been "glued" to edges.
  • Columns are now scrollable by using position: sticky to hold entire column in place as if it's fixed but without moving it. Scrollbars are hidden with css (scrollbar-width on firefox, webkit pseudoelements on chrome-cringed browsers) with an option to show them (for sidebars).
    • Bonus: Stylized scrollbars on chromium-likes. Unfortunately arrows on buttons had to be made with gradients since the ONLY other option is to use background-image and even with SVG that cannot use css custom properties and therefore cannot be themed. BS. On firefox we just do simple coloring. Since we don't support any trident-based IEs don't even bother asking for IE custom scrollbars.
  • App.scss got linted, reorganized and refactored, panel stuff is split into a separate file (currently trying to make a Panel component is way out of scope for this MR due to effort required)
    • Many, MANY sizing stuff now uses relative units (rems, ems) instead of pixels, as a result sizes might be not as they were before, mostly interface became a bit wider in general.
      • Also while I was at it i changed all font-size: 14px to font-size: 1(r)em (except body one) since it matches the root size. Plus many other font-sizes got changed.
      • Many dimensional things (i.e. avatars) still use pixels for now, I'll make another MR where almost everything is (r)ems, for now it's just that you can write a userstyle like body { font-size: 16px }, later it will be an in-ui option.
    • A lot of stuff that was previously defined exclusively for some things (i.e. scrolls for sidebar, chats header etc) have been more universal and reusable.
    • A lot of things now use calc() and local (prefixed with __ or ___) or when applicable global (subject to change) (i.e. --panel-header-height) css properties. Not only it makes CSS code a lot cleaner and easier to maintain, it allows better customizability either via a userstyle (now) or theme/settings (in future, possibly)

Currently known bugs:

  • Menus have broken styles for buttons
  • Emoji picker/suggestor in main post form gets overlapped by shadows of post form
  • Offset shadow in chats when scrolled to bottom
  • Deal with scrollbars on browsers that don't support scrollbar-width nor webkit scrollbar styling
  • Typing long post in notifications columns scrolls main column
  • Force chat panel header to be always sticky irregardless of setting
This refactors majority of layout code/markup/css related to layout. ## Major changes: * Fixed "always show mobile new post button", that stuff was broken day 1 lol * Fixed `logoLeft` option, also got broken along the way * Notifications are loaded asynchronously to make teleports work on page load. Probably saves a few bytes of a bundle for anon viewers, almost imperceptable to logged in users (it takes slightly longer for initial load of notifications). * Instead of `isMobileLayout` there's now `layoutType` which can be `mobile`, `normal`, `wide`, this will also make it possible to make an option to disable wide mode or mobile mode if needed. * Layouts are now set with CSS class instead of media-query. Some more modifier classes like forbidding sticky headers, enabling scrollbars on sidebars, whether mobile button is visible etc. * There are three user options - disable wide mode entirely, wide and wide + reverse. Latter two are labelled as what they do from user perspective - move notifications to 3rd column or move post/nav to 3rd column * There's now single Notifications component (apart from interactions) on page, shared between desktop, wide and mobile mode. Essentially we only render it once and just move around, therefore any open forms you had in it will remain open and drafts won't be lost between layout transitions. Also makes swapping between desktop and mobile modes MUCH quicker and lag-free. * ~~Instead of scrolling body now there's a scrolling container below navbar, that is sort of requirement for sticky headers to work but also scrollbars make more sense. You can still scroll by scrolling anywhere, except the navbar, which i think is an acceptable compromise~~ Requirement for sticky was a bogus one, it work on body just fine. Other than that stuff like body-lock stopped working (duh) and other stuff was pain to fix so I ended up reverting to previous approach. * Notifications, Timelines (but not user's) have sticky headers * Unfortunately it's not entirely possible to keep the gap above without content showing through, the only way I came up with needs a css mask to be adjusted on scroll event (since `-webkit-mask-attachment` is no longer a thing and there's no replacement for it) but at this point it felt like too much effort for an underwhelming solution. So some content will show through heading if it has rounded corners and heading will jump around a bit (mostly in chats) * Also inline expanded conversations have sticky headers (stack below other sticky headers) for easier thread closing. * There's an option to disable sticky headers entirely, in case they take up too much vertical space * Chats no longer have "chat mode layout" or whatever it was, instead it works exactly as other views, instead of chat having a scrollable inner "viewport", it's the content that is being scrolled, while header and footer are kept in place with `position: sticky`, to avoid excessive jumpiness post form and header have been "glued" to edges. * Columns are now scrollable by using `position: sticky` to hold entire column in place as if it's `fixed` but without moving it. Scrollbars are hidden with css (scrollbar-width on firefox, webkit pseudoelements on chrome-cringed browsers) with an option to show them (for sidebars). * Bonus: Stylized scrollbars on chromium-likes. Unfortunately arrows on buttons had to be made with gradients since the **ONLY** other option is to use background-image and even with SVG that cannot use css custom properties and therefore cannot be themed. BS. On firefox we just do simple coloring. Since we don't support any trident-based IEs don't even bother asking for IE custom scrollbars. * App.scss got linted, reorganized and refactored, panel stuff is split into a separate file (currently trying to make a Panel component is way out of scope for this MR due to effort required) * Many, MANY sizing stuff now uses relative units (rems, ems) instead of pixels, as a result sizes might be not as they were before, mostly interface became a bit wider in general. * Also while I was at it i changed all `font-size: 14px` to `font-size: 1(r)em` (except body one) since it matches the root size. Plus many other font-sizes got changed. * Many dimensional things (i.e. avatars) still use pixels for now, I'll make another MR where almost everything is (r)ems, for now it's just that you can write a userstyle like `body { font-size: 16px }`, later it will be an in-ui option. * A lot of stuff that was previously defined exclusively for some things (i.e. scrolls for sidebar, chats header etc) have been more universal and reusable. * A lot of things now use `calc()` and local (prefixed with `__` or `___`) or when applicable global (subject to change) (i.e. `--panel-header-height`) css properties. Not only it makes CSS code a lot cleaner and easier to maintain, it allows better customizability either via a userstyle (now) or theme/settings (in future, possibly) ## Currently known bugs: - [x] Menus have broken styles for buttons - [x] Emoji picker/suggestor in main post form gets overlapped by shadows of post form - [x] Offset shadow in chats when scrolled to bottom - [x] Deal with scrollbars on browsers that don't support `scrollbar-width` nor webkit scrollbar styling - [x] Typing long post in notifications columns scrolls main column - [x] Force chat panel header to be always sticky irregardless of setting
tusooa commented 2022-04-30 18:54:56 +00:00
Owner
Copy link

image
this is pretty unsatisfactory -- maybe change it to top: (topnavheight + spacing);?

![image](/attachments/17769ebc-9db7-44d7-b4c2-94193899a222) this is pretty unsatisfactory -- maybe change it to `top: (topnavheight + spacing);`?
image.png
29 KiB
tusooa commented 2022-04-30 19:04:23 +00:00
Owner
Copy link

When there's no notification panel, it looks very weird

image

When there's no notification panel, it looks very weird ![image](/attachments/b0a37922-b174-4a94-8909-4615e5c2d2ca)
image.png
1.9 MiB
tusooa commented 2022-04-30 19:09:05 +00:00
Owner
Copy link

Conversation panel bar shows over timeline panel bar, I feel this is pretty weird

image

Conversation panel bar shows over timeline panel bar, I feel this is pretty weird ![image](/attachments/eba59f3e-accf-4719-b950-bdf54cc9ac29)
image.png
26 KiB
tusooa commented 2022-04-30 19:10:08 +00:00
Owner
Copy link

when it's scrolled up it looks even weirder

image

when it's scrolled up it looks even weirder ![image](/attachments/0aff0543-e68a-4c15-9a09-11480cfc5cb0)
image.png
23 KiB
tusooa commented 2022-04-30 19:13:24 +00:00
Owner
Copy link

What is this "up to date"?

image

What is this "up to date"? ![image](/attachments/1fca925f-f039-4bc6-a492-9c1333fb8a08)
image.png
973 KiB
tusooa commented 2022-04-30 19:16:23 +00:00
Owner
Copy link

timeline virtual scrolling needs a heavy fix: if you scroll too fast (then stop) (scroll speed seems to be irrelevant), the page will just stuck there...

image

timeline virtual scrolling needs a heavy fix: ~~if you scroll too fast (then stop)~~ (scroll speed seems to be irrelevant), the page will just stuck there... ![image](/attachments/230282fc-5f6d-4cfd-b53a-d8962c3122da)
image.png
1.2 MiB
tusooa commented 2022-04-30 19:19:28 +00:00
Owner
Copy link

oh so it's the same as the one in the timeline panel header...? but looks really weird here

oh so it's the same as the one in the timeline panel header...? but looks really weird here
tusooa commented 2022-04-30 19:24:22 +00:00
Owner
Copy link

sticky conversation heading @ user timeline:

image
(i suggest using css variables to determine how much space should be left on the top...)

sticky conversation heading @ user timeline: ![image](/attachments/a10dfb09-7971-42eb-9645-d4c255ee42b3) (i suggest using css variables to determine how much space should be left on the top...)
image.png
69 KiB
tusooa commented 2022-04-30 19:26:19 +00:00
Owner
Copy link

Interactions has a panel header, but it is not sticky

image

Interactions has a panel header, but it is not sticky ![image](/attachments/aa25a76f-7308-4fe9-b551-57190384a3ed)
image.png
61 KiB
tusooa commented 2022-04-30 19:27:04 +00:00
Owner
Copy link

Chats panel does not have top spacing
image

Chats panel does not have top spacing ![image](/attachments/7779d41b-3542-4f2a-b54b-35ea315e424b)
image.png
20 KiB
tusooa commented 2022-04-30 19:27:41 +00:00
Owner
Copy link

Follow requests panel is also not sticky, nor is About page panels

Follow requests panel is also not sticky, nor is About page panels
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

it was a temporary workaround initially but now i'm really not sure if this is necessary, it works fine without it. I mean line below is enough?

it was a temporary workaround initially but now i'm really not sure if this is necessary, it works fine without it. I mean line below is enough?
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

then it will be like this:

image

idk i feel like sticking to top looks better

then it will be like this: ![image](/attachments/6c05910d-76c5-43b2-bd29-5e56fb94f8b4) idk i feel like sticking to top looks better
image.png
46 KiB
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

yeah i was considering disabling third column mode for anon visitors

yeah i was considering disabling third column mode for anon visitors
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

nice catch, gonna take a look at that

nice catch, gonna take a look at that
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

yeah, might hide it again

yeah, might hide it again
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

this is probably vue3/develop issue

this is probably vue3/develop issue
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

yeah, thanks

yeah, thanks
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

well not everything is sticky yet, and not everything is meant to be sticky (about page), as there's little to no controls there. Interactions is a weird case because tabs are not part of the hearder IIRC, I might come back to it later.

well not everything is sticky yet, and not everything is meant to be sticky (about page), as there's little to no controls there. Interactions is a weird case because tabs are not part of the hearder IIRC, I might come back to it later.
hj commented 2022-05-01 11:00:12 +00:00
Author
Owner
Copy link

that's intentional because otherwise it will jump around depending on page contents

that's intentional because otherwise it will jump around depending on page contents
hj commented 2022-05-01 11:03:43 +00:00
Author
Owner
Copy link

conversation header should stick right below the panel bar, i wonder if it's some sort of browser issue or you have some sort of customizations. What browser?

image

conversation header should stick right below the panel bar, i wonder if it's some sort of browser issue or you have some sort of customizations. What browser? ![image](/attachments/62279ce0-f19b-4b89-9d30-dd3df270df12)
image.png
36 KiB
hj commented 2022-05-03 22:58:05 +00:00
Author
Owner
Copy link

seems firefox handles z-indexes somwhat different than chrome 🤷 thanks web standards

seems firefox handles z-indexes somwhat different than chrome :shrug: thanks web standards
hj commented 2022-05-09 20:28:19 +00:00
Author
Owner
Copy link

wide mode is disabled for anon viewers now, setting is likewise, hidden.

wide mode is disabled for anon viewers now, setting is likewise, hidden.
hj commented 2022-05-09 20:28:19 +00:00
Author
Owner
Copy link

hidden

hidden
hj commented 2022-05-09 20:28:19 +00:00
Author
Owner
Copy link

should be fixed now

should be fixed now
tusooa commented 2022-05-22 12:12:04 +00:00
Owner
Copy link

where does this value come from? is it possible to use things like 100%?

where does this value come from? is it possible to use things like 100%?
tusooa commented 2022-05-22 12:40:19 +00:00
Owner
Copy link

why "? 'unseen' is not a js keyword

why `"`? 'unseen' is not a js keyword
tusooa commented 2022-05-22 12:40:19 +00:00
Owner
Copy link

invalid property value, non-zero values must have units (unlike line-height)

invalid property value, non-zero values must have units (unlike line-height)
tusooa commented 2022-05-22 12:40:19 +00:00
Owner
Copy link

better to use a new translation key (intended meaning has changed)

better to use a new translation key (intended meaning has changed)
hj commented 2022-05-22 12:46:41 +00:00
Author
Owner
Copy link

nice catch

nice catch
hj commented 2022-05-22 12:46:41 +00:00
Author
Owner
Copy link

no idea, probably linter messed it up??

no idea, probably linter messed it up??
hj commented 2022-05-22 12:46:41 +00:00
Author
Owner
Copy link

Ehhhh... it's not THAT important, it's just a slight clarification. Old meaning is still applicable, just a bit more ambigious. IIRC Weblate should warn if original string got changed, telling translators to probably update the translations.

Ehhhh... it's not THAT important, it's just a slight clarification. Old meaning is still applicable, just a bit more ambigious. IIRC Weblate should warn if original string got changed, telling translators to probably update the translations.
tusooa commented 2022-05-22 16:46:51 +00:00
Owner
Copy link

fixed in #2790

fixed in https://git.pleroma.social/pleroma/pleroma-fe/pulls/2790
hj commented 2022-05-22 18:50:06 +00:00
Author
Owner
Copy link

ok it does seem like it's linter issue but it's been around for years seemingly, i see it in other places too

ok it does seem like it's linter issue but it's been around for years seemingly, i see it in other places too
hj commented 2022-05-22 18:51:43 +00:00
Author
Owner
Copy link

if you set border-radius to huge non-percent value it ends up being a circle, if you use 100% it can end up being oval instead if element's aspect ratio isn't 1;

if you set `border-radius` to huge non-percent value it ends up being a circle, if you use 100% it can end up being oval instead if element's aspect ratio isn't 1;
tusooa commented 2022-05-23 01:10:53 +00:00
Owner
Copy link

i also feel that in 3-column mode this setting is redundant. so maybe another alternative is to disable this setting item when the user activate 3-column mode.

i also feel that in 3-column mode this setting is redundant. so maybe another alternative is to disable this setting item when the user activate 3-column mode.
tusooa commented 2022-05-23 01:14:41 +00:00
Owner
Copy link

it's just a slight clarification.

but i think users of other languages that do have translated text here will get confused -- a key change will mandate re-translation which i think would be more desirable. for utterly new users they would think "which one is the sidebar?" "why is it, not the other, called a sidebar?"

>it's just a slight clarification. but i think users of other languages that do have translated text here will get confused -- a key change will mandate re-translation which i think would be more desirable. for utterly new users they would think "which one is the sidebar?" "why is it, not the other, called a sidebar?"
hj commented 2022-05-23 19:29:45 +00:00
Author
Owner
Copy link

i also feel that in 3-column mode this setting is redundant. so maybe another alternative is to disable this setting item when the user activate 3-column mode.

it works in conjunction with 3-column mode selector - in a way we're still operating on "2 columns is the default" headspace, the existing users probably will understand how it works from the get-go, but it might be a bit confusing to new users.

There's still things to iron out, like this new column is called either "third column" or "notifications column". Ideally, in future we might implement more liberal column customization that will make these settings obsolete, but for now this is "an imperfect solution for imperfect world".

I can change the key if you insist, but overall problem still remains, and I'm open to any suggestions - we don't want existing users to get confused either.

>i also feel that in 3-column mode this setting is redundant. so maybe another alternative is to disable this setting item when the user activate 3-column mode. it works in conjunction with 3-column mode selector - in a way we're still operating on "2 columns is the default" headspace, the existing users probably will understand how it works from the get-go, but it might be a bit confusing to new users. There's still things to iron out, like this new column is called either "third column" or "notifications column". Ideally, in future we might implement more liberal column customization that will make these settings obsolete, but for now this is "an imperfect solution for imperfect world". I can change the key if you insist, but overall problem still remains, and I'm open to any suggestions - we don't want existing users to get confused either.
tusooa commented 2022-05-23 21:26:31 +00:00
Owner
Copy link

i guess in the future we could implement some kind of drag-and-drop customization (xref. Windows Live Space)

i guess in the future we could implement some kind of drag-and-drop customization (xref. Windows Live Space)

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1

Instance Admin Dashboard

  
NL2

Improved Mobile Experience

  
NL4

Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility

https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident

Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe!2770
No description provided.