Redesign of events page #1210
Merged
Redesign of events page #1210
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for pydis-static ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
- Added standalone pages for each event - Added initial design of new layout - Refactored some sidebars and templates to update current/upcoming event - Put two CJ10 assets into their own dedicated folder Includes dummy text for event descriptions and content that is not up-to-date: Current and Upcoming event components.
hedyhli
force-pushed
the
feat/events-redesign
branch
from
1c2aa3e
to
51bfa2c
Compare
hedyhli
added
status: WIP
… into feat/events-redesign
Aka, many minor changes I shouldn't've grouped together in a single commit. - Add main page events description - Use date icons every where - Fill up one-off events list - Use a media-like layout for one-off events instead - Use 2-column masonry for one-off events list - Update schedules for this year - Add a colored top border line to cards in the main gallery that do not have thumbnail banners - Add april fools to fill the gap in the second row so the grid looks better - Re-purpose 'all events' sidebar as 'ToC' with appropriate anchor links - Use circle-info icon everywhere for learn more buttons - Added python release streams to the one-off events That light blue cloud icon for devops hour looks dope IMO :P - And of course, thanks to the layout change for one-off events list I do not have to hurriedly create ad-hoc thumbnails for them 😔. phew - Which means our fancy hats workshop can use the beautiful magician hat emoji as the icon! - Renamed 'scheduled' and 'recent' events to be year-independent. This makes it consistent because we might end up updating the list mid-year. This means all dates will have the year specified. The pain of updating the gallery sections' height for both main and one-off events section continues to be a limitation.
hedyhli
force-pushed
the
feat/events-redesign
branch
from
7cccae0
to
319ca9a
Compare
|
There are still a number of issues with the design, but I've run out of ideas on how to best solve them. So I'll mark this PR as ready for review now. |
hedyhli
added
s: needs review
janine9vn
approved these changes
Mar 17, 2024
It's not completely over yet as the winners are yet to be announced, but the coding phase, as shown in the date "March 17-24th" has passed so it no longer makes sense to list it as ongoing.
jchristgit
requested changes
Mar 29, 2024
Co-authored-by: jchristgit <jc@jchri.st>
jchristgit
approved these changes
Mar 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #494
This PR attempts address the proposal from the linked issue by redesigning our events page to draw more engagement. This includes making the content more easily accessible and organized.
It is also an opportunity to update the page to be more up-to-date on the latest events for this new year.
Pages on preview:
https://deploy-preview-1210--pydis-static.netlify.app/events/
Behold, responsive masonry in CSS only
pydis_masonry.mov
Implications
The events page would need to be updated more frequently due to this redesign. This means every time an event starts or finishes, we should update the page.
Limitations
Masonry grids
To have a good-looking grid with items of variable heights for our regular and one-off events, masonry was required.
Why do we want Masonry??
For maximum end-user-experience and developer experience, Masonry itself would be probably be the best bet. However I was against adding a whole javascript dependency just for these two sections so I made use of the newly discovered CSS-only flexbox solution instead.
We can't simply use Bulma columns because we need to preserve item ordering on mobile, where no columns are used.
What do you mean??
This came with the limitation that whenever items in the grids are updated we have to modify the
heightin CSS manually, ensuring it has enough room for all screen widths from around 600px to 1000px. This was a pain during development, and for the future when we are adding/removing items from the grid the person who updates it should not be overly involved in the CSS.The implementation is in the
events/base.cssCSS file with comments.Ideas for the future
Assets
Should use the same icons for the same event, or should we use the annual branding? For instance, we have different branding for each Pyweek and Code Jam, should the icon used in the "scheduled"/"previous" events use the specific branding for that year, this makes multiple entries of the same event have different icons.
Currently, I use the same Pyweek icons, but for Code Jam 2023, I used the 2023 icon, and for the rest, used 2022 icon.
Todo
Design
Content
Finalize the assets to useEtc.
--- Optimistic deadline: February ---
--- WIP ➡️ ready for reviews ---
Maybe