infrastructure/conference-website
1
1
Fork 1
Code Issues 14 Pull Requests Releases Activity

UI: Various post-conference improvements #103983

New Issue
Closed
opened 2024-10-28 11:11:10 +01:00 by Márton Lente · 4 comments
Márton Lente commented 2024-10-28 11:11:10 +01:00
Owner
Copy Link

After and during BCON24, a set of possible UI improvements have been outlined. Here is the list:

  • Add more relevant hero to Photos pages. (#103982)
  • Make timestamps sticky on schedule pages for small screens.
  • Fix ongoing events' colours on schedule pages in horizontal mode. (Light mode might be ok.)
  • Check ongoing events' card layouts with indicator dot for favourited items.
  • Improve footer layout for small and medium screens. (Items get wrapped in an unpredictable way.)
  • Make filter buttons active and inactive states more prominent. (Checked and unchecked items' icons should be coherent.)
  • WIP Revise Market and Other locations' background colours, which might be too similar with little contrast.
  • Review and consider merging the following pull request, that implements a toggle switch to only show favourited items: #103981
  • Improve navigation in albums. Currently "Prev" is at the top, "Next" on bottom. Unify both and add First, Last pages.
  • Fix header link "Latest Photos" when there are multiple photo albums.

The idea of an archive page to browse, search and watch previous talks has been raised. It's a bigger change and it should be possibly managed separately.

After and during BCON24, a set of possible UI improvements have been outlined. Here is the list: - [x] Add more relevant hero to Photos pages. (https://projects.blender.org/infrastructure/conference-website/issues/103982) - [x] Make timestamps sticky on schedule pages for small screens. - [x] Fix ongoing events' colours on schedule pages in horizontal mode. (Light mode might be ok.) - [x] Check ongoing events' card layouts with indicator dot for favourited items. - [x] Improve footer layout for small and medium screens. (Items get wrapped in an unpredictable way.) - [x] Make filter buttons active and inactive states more prominent. (Checked and unchecked items' icons should be coherent.) - [ ] ~~WIP Revise _Market_ and _Other_ locations' background colours, which might be too similar with little contrast.~~ - [x] Review and consider merging the following pull request, that implements a toggle switch to only show favourited items: https://projects.blender.org/infrastructure/conference-website/pulls/103981 - [x] Improve navigation in albums. Currently "Prev" is at the top, "Next" on bottom. Unify both and add First, Last pages. - [x] Fix header link "Latest Photos" when there are multiple photo albums. The idea of an archive page to browse, search and watch previous talks has been raised. It's a bigger change and it should be possibly managed separately.
Márton Lente commented 2024-10-28 11:12:08 +01:00
Author
Owner
Copy Link

@pablovazquez I've started the above list of possible changes, feel free to change it or add more items you have in mind. Thank you!

@pablovazquez I've started the above list of possible changes, feel free to change it or add more items you have in mind. Thank you!
Pablo Vazquez commented 2024-10-29 12:26:37 +01:00
Owner
Copy Link

Make timestamps sticky on schedule pages for small screens.

Nice to see this one done! I see a small glitch where the time overlaps the day picker. It should ideally be underneath the day picker.

> Make timestamps sticky on schedule pages for small screens. Nice to see this one done! I see a small glitch where the time overlaps the day picker. It should ideally be underneath the day picker. <video src="/attachments/c237cb07-0611-4734-8a6d-7f1d4d5207c3" title="Screen Recording 2024-10-29 at 12.23.23.mov" controls></video>
Screen Recording 2024-10-29 at 12.23.23.mov
1.2 MiB
👍 1
Pablo Vazquez commented 2024-10-29 12:34:09 +01:00
Owner
Copy Link

It looked like the toggle buttons had a glitch outline but it turns out it's just the color. It was using var(--border-color) which is usually gray and low contrast. Perhaps using currentColor for the border color would make sure it's always as visible as the text.

It's also not rounded which makes it look off with the rest of the site.

Current:
current

Proposal:
proposal

Or even just transparent when checked, and the socket visible when not.
alt

It looked like the toggle buttons had a glitch outline but it turns out it's just the color. It was using `var(--border-color)` which is usually gray and low contrast. Perhaps using `currentColor` for the border color would make sure it's always as visible as the text. It's also not rounded which makes it look off with the rest of the site. Current: ![current](/attachments/2ca6a969-e8c0-4416-9c9e-ac11fc7a7532) Proposal: ![proposal](/attachments/289cb943-99cc-48fa-a3fd-1c61b87db7c8) Or even just transparent when checked, and the socket visible when not. ![alt](/attachments/e034b772-6bb6-4643-a3c2-796be786c2e6)
image.png
43 KiB
image.png
50 KiB
image.png
29 KiB
👍 1
Márton Lente commented 2024-10-29 16:05:39 +01:00
Author
Owner
Copy Link

It looked like the toggle buttons had a glitch outline but it turns out it's just the color. It was using var(--border-color) which is usually gray and low contrast. Perhaps using currentColor for the border color would make sure it's always as visible as the text.

Thank you for the proposal, it's indeed nicer. I've changed accordingly.

As the above tasklist has been completed and also deployed, I'm closing the issue for now. We can reopen anytime, or open dedicate issues for further ideas.

> It looked like the toggle buttons had a glitch outline but it turns out it's just the color. It was using `var(--border-color)` which is usually gray and low contrast. Perhaps using `currentColor` for the border color would make sure it's always as visible as the text. Thank you for the proposal, it's indeed nicer. I've changed accordingly. As the above tasklist has been completed and also deployed, I'm closing the issue for now. We can reopen anytime, or open dedicate issues for further ideas.
👍 1
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
legacy project
Infrastructure: Websites

  
Priority
High

  
Priority
Normal

  
Priority
Unbreak Now!

  
Status
Archived

  
Status
Confirmed

  
Status
Resolved

  
Type
Bug

  
Type
Design

  
Type
Report

  
Type
To Do

No Label
legacy project
Infrastructure: Websites
Priority
High
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Resolved
Type
Bug
Type
Design
Type
Report
Type
To Do
Milestone
Clear milestone
No items
No Milestone
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: infrastructure/conference-website#103983
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?