Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SLVUU-111: Customise scrollbar styling for 'My Layouts' list #130

Closed
wants to merge 5 commits into from
Closed

SLVUU-111: Customise scrollbar styling for 'My Layouts' list #130

wants to merge 5 commits into from

Conversation

cfisher-scottlogic
Copy link

@cfisher-scottlogic cfisher-scottlogic commented Dec 5, 2023 •
edited
Loading

Background

Brings styling of the scrollbar in the 'My Layouts' tab in line with the Figma design.

Figma
image

Change List

  • Hide scrollbar track (webkit and firefox)
  • Give scrollbar thumb border radius (webkit)
  • Give scrollbar thumb the correct colour (webkit and firefox)
  • Shrink vertical scrollbar width (4px exact on webkit, thin on firefox)
  • Modify padding of the layout list's container (.vuuLeftNav-drawer ) to position vertical scrollbar at the very edge of the drawer

Notes

  • Can't get scrollbar hover to work with webkit
  • Can't make Firefox look like webkit supported browsers (Chrome/Edge)

Before / After

Firefox

image

image

Edge

image

image

Chrome

image

image

@cfisher-scottlogic cfisher-scottlogic linked an issue Dec 5, 2023 that may be closed by this pull request
LayoutList style scrollbar #111
Open
@cfisher-scottlogic cfisher-scottlogic changed the title SLVUU-111: Customise scrollbar styling for 'My Layouts' list [WIP] SLVUU-111: Customise scrollbar styling for 'My Layouts' list Dec 5, 2023
@cfisher-scottlogic cfisher-scottlogic marked this pull request as ready for review December 6, 2023 14:29
@cfisher-scottlogic cfisher-scottlogic changed the title [WIP] SLVUU-111: Customise scrollbar styling for 'My Layouts' list SLVUU-111: Customise scrollbar styling for 'My Layouts' list Dec 6, 2023
vferraro-scottlogic
vferraro-scottlogic approved these changes Dec 14, 2023
View reviewed changes
Copy link

@vferraro-scottlogic vferraro-scottlogic left a comment

Choose a reason for hiding this comment

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

The scroll bar styling looks good! Too bad we couldn't get it working in Firefox :(

@pling-scottlogic
Copy link

PR merged into Finos

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vferraro-scottlogic vferraro-scottlogic vferraro-scottlogic approved these changes

@pling-scottlogic pling-scottlogic pling-scottlogic approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

LayoutList style scrollbar
4 participants
@cfisher-scottlogic @pling-scottlogic @vferraro-scottlogic @heswell