From 1e0ac08d585ac8621cbcd61189bd10fc3ce86f7e Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 2 Feb 2024 19:47:49 +0800 Subject: Events: Re-organize templates and significantly improve layouts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- pydis_site/static/css/events/base.css | 73 +++++-- pydis_site/templates/events/current_event.html | 7 +- pydis_site/templates/events/index.html | 107 ++-------- pydis_site/templates/events/main_events.html | 19 +- pydis_site/templates/events/other_events.html | 233 +++++++++++++-------- .../events/pages/adventofcode/_index.html | 2 +- .../events/pages/revivalofcode/_index.html | 2 +- pydis_site/templates/events/scheduled_events.html | 118 +++++++++++ .../events/sidebar/adventofcode/useful-links.html | 2 +- .../templates/events/sidebar/events_list.html | 69 ------ .../templates/events/sidebar/main_sidebar.html | 66 ++++++ .../templates/events/sidebar/revivalofcode.html | 6 +- 12 files changed, 421 insertions(+), 283 deletions(-) create mode 100644 pydis_site/templates/events/scheduled_events.html delete mode 100644 pydis_site/templates/events/sidebar/events_list.html create mode 100644 pydis_site/templates/events/sidebar/main_sidebar.html diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css index 6b2642bb..55725f75 100644 --- a/pydis_site/static/css/events/base.css +++ b/pydis_site/static/css/events/base.css @@ -19,27 +19,40 @@ pre { margin-bottom: 0 !important } -.event-gallery .date-icon { +.event-gallery .date-icon, #main-section .date-icon { margin-left: -.25rem; } -.event-gallery .card { +.event-gallery .card, .event-gallery .box { border-radius: 6px; margin-bottom: 1.5rem; } +/* We are using bulma cards as boxes here to take advantage of the card's + * header image component */ .event-gallery .card img { border-top-left-radius: 6px; border-top-right-radius: 6px; } +/* Custom component: A colored line at the top of a card that can be styled + * with bulma's has-background-* classes.*/ +.card .colored-line { + /* A default color as grey */ + background-color: #C1C1C1; + height: .3rem; + display: block; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + @media (min-width: 700px) { - .scheduled-events .media-left { + #scheduled-events .media-left { margin-left: 2rem; margin-right: 2rem; } - .previous-events .media-left { + #previous-events .media-left { margin-left: 1rem; margin-right: 1rem; } @@ -60,28 +73,42 @@ pre { align-content: space-between; } + #other-events-section { + height: 62rem; + } + + #other-events-section .box { + width: calc(50% - 1rem); + } + + #other-events-section .box:nth-child(2n+1) { order: 1; } + #other-events-section .box:nth-child(2n) { order: 2; } + + #other-events-section::before { + content: ""; + flex-basis: 100%; + width: 0; + order: 2; + } + @media (min-width: 900px) { /* 3 columns */ - #main-events { + #main-events-section { /* Required. Must be only slightly taller than the tallest column */ - height: 65rem; - } - - #other-events { - height: 75rem; + height: 67rem; } - .event-gallery .card { + #main-events-section .card { width: calc(33% - 1rem); } /* Reorder vertically */ - .event-gallery .card:nth-child(3n+1) { order: 1; } - .event-gallery .card:nth-child(3n+2) { order: 2; } - .event-gallery .card:nth-child(3n) { order: 3; } + #main-events-section .card:nth-child(3n+1) { order: 1; } + #main-events-section .card:nth-child(3n+2) { order: 2; } + #main-events-section .card:nth-child(3n) { order: 3; } /* 2 line breaks to force new columns, for each gap between the three columns. */ - .event-gallery::before, .event-gallery::after { + #main-events-section::before, #main-events-section::after { content: ""; flex-basis: 100%; width: 0; @@ -91,23 +118,23 @@ pre { @media (max-width: 900px) { /* 2 columns */ - #main-events { - height: 100rem; + #main-events-section { + height: 80rem; } - #other-events { - height: 110rem; + #other-events-section { + height: 80rem; } - .event-gallery .card { + #main-events-section .card { width: calc(50% - 1rem); } - .event-gallery .card:nth-child(2n+1) { order: 1; } - .event-gallery .card:nth-child(2n) { order: 2; } + #main-events-section.card:nth-child(2n+1) { order: 1; } + #main-events-section.card:nth-child(2n) { order: 2; } /* 1 line break to force a new column, for the gap between the two columns. */ - .event-gallery::before { + #main-events-section::before { content: ""; flex-basis: 100%; width: 0; diff --git a/pydis_site/templates/events/current_event.html b/pydis_site/templates/events/current_event.html index b264a6ab..df47f6f7 100644 --- a/pydis_site/templates/events/current_event.html +++ b/pydis_site/templates/events/current_event.html @@ -1,10 +1,7 @@ {% load static %} -{# Current or ongoing event #} -{# (n/a) #} - -{# Next event to promote #} -
+{# Current/next event to promote #} +
Upcoming event
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index b0522e39..2dcdb747 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -7,98 +7,23 @@ {% endblock %} {% block event_base_content %} -
-
-

Briefly describe events. Explain how to subscribe to updates from the #roles channel.

- {% include "events/current_event.html" %} - -
-

Scheduled events for 2024

-
-
-

- -

-
-
-
-
PyWeek 37
-

March 17-24

-

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Revival of Code
-

TBD

-

Revisit past years' Advent of Code problems! Puzzles are relased every other day and there will be dedicated solution threads for you to discuss with other participants.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Code Jam
-

TBD

-

Our annual code-jam where we place you in a team of five and you have 11 days to code some sort of application or program in Python based on a selected technology or framework.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
PyWeek 38
-

September

-

The bi-annual game-jam where you are allowed one week to write a game from scratch, either as an individual or as a team.

-
- Learn more -
-
-
-
-

- -

-
-
-
-
Advent of Code
-

December 1-25

-

Daily programming puzzles with increasing difficulties where each puzzle has a little story and you can discuss solutions with other participants. You are allowed to use any programming language you like.

-
- Learn more -
-
-
+
+
+

At Python Discord we run a few regular events, such as programming contests and workshops. We also run more ad-hoc events such as Python release streams. All members are welcome to participate in the events live, and for most events we release videos on our YouTube channel after the event in case you've missed it.

+

To subscribe to the announcements, head over to the bottom of the #roles channel and get the @Announcements role to receive notifications on the latest updates!

+ {% include "events/current_event.html" %} + {% include "events/scheduled_events.html" %} +
+
+ {% include "events/sidebar/main_sidebar.html" %}
-
- {% include "events/sidebar/events_list.html" %}
-
-
-
-{% include "events/main_events.html" %} -
-{% include "events/other_events.html" %} +
+ +
+ {% include "events/main_events.html" %} + +
+ {% include "events/other_events.html" %} {% endblock %} diff --git a/pydis_site/templates/events/main_events.html b/pydis_site/templates/events/main_events.html index d2666eb7..a4675333 100644 --- a/pydis_site/templates/events/main_events.html +++ b/pydis_site/templates/events/main_events.html @@ -5,9 +5,10 @@

-{# These events are sorted based on priority #} -