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

UI: Implement toggle-bars to My conference filters #103981

Merged
Márton Lente merged 5 commits from ui/my-conference-toggles into main 2024-10-29 15:20:31 +01:00
Conversation 2 Commits 5 Files Changed 3 +131 -69
14 changed files with 131 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0954626f45 - Show all commits

2
assets_shared

@ -1 +1 @@
Subproject commit 0cdfbd54f695493a549f87162a6a43f29b7f053f
Subproject commit c6cc2d73f86e46e8710ba98e60f7d35eb7590fae

7
conference_main/models.py
View File

@ -72,14 +72,17 @@ class Location(models.Model):
rgb = tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))
return rgb
# TODO: improve colour contrast further
def color_to_hsv(self):
rgb = self.color_to_rgb(self.color)
# Turn colors into 255 range
rgb = [c / 255.0 for c in rgb]
# Turn RGB to HSV
hsv = colorsys.rgb_to_hsv(*rgb)
# Turn colors in to CSS HSV representation (360, 100, 100)
return hsv[0] * 360, hsv[1] * 100, hsv[2] * 100
# Shift hue to improve colour contrast
hue_shift = 120
hue = (hsv[0] * 360 + hue_shift) % 360
return hue, hsv[1] * 100, hsv[2] * 100
def __str__(self):
return self.name

9
conference_main/static/conference_main/styles/_albums.sass
View File

@ -80,7 +80,8 @@
color: white
display: flex
justify-content: center
+padding(2)
+padding(2, y)
+padding(3, x)
.btn-row
flex: 1
@ -88,3 +89,9 @@
.btn-accent
box-shadow: none
.edition-logo-header
svg, img
fill: var(--color-text-tertiary)
height: auto
max-width: var(--spacer-6)

25
conference_main/static/conference_main/styles/_schedule.sass
View File

@ -157,18 +157,19 @@ $col-time-width: 8%
&.toggle
i
border-radius: var(--spacer)
background-color: currentColor
background-color: transparent
// TODO: improve border-color contrast in theme light
border: var(--border-width) solid var(--border-color)
color: currentColor
height: var(--spacer)
height: var(--spacer-4)
+margin(1, right)
position: relative
transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed)
width: var(--spacer)
width: var(--spacer-4)
&:before
font-weight: bold
left: calc(var(--spacer-1) * -1)
left: calc(var(--spacer-1) * -.5)
opacity: 0
transform: scale(0)
position: relative
@ -177,8 +178,6 @@ $col-time-width: 8%
input:checked
&~label i
background-color: transparent
&:before
opacity: 1
transform: scale(.85)
@ -248,6 +247,7 @@ $col-time-width: 8%
+media-lg
display: none
// TODO: cleanup either CSS or JS for sticky positioning of schedule day toggles. Currently both are used, JS handling the display
body.is-scrolled
.schedule-day-toggles
box-shadow: 0 var(--spacer) calc(var(--spacer) * 2) rgba(black, .1)
@ -298,11 +298,11 @@ body.is-scrolled
display: flex
flex-direction: column
flex-wrap: nowrap
overflow: hidden
@include media-breakpoint-up(lg)
flex-wrap: wrap
flex-direction: row
overflow: hidden // Prevents position sticky on children on small screens
.flex-row-break-lg
@include media-breakpoint-up(lg)
@ -392,7 +392,11 @@ body.is-scrolled
@include media-breakpoint-up(lg)
display: none
background-color: var(--color-bg)
+padding(2, y)
position: sticky
top: 0
z-index: calc(var(--zindex-fixed) + 1)
/* Vertical schedule scrolls to this during conference days. */
.time-line-break
@ -559,7 +563,6 @@ body.is-scrolled
/* Ongoing events.. */
&.happening-now
background-color: var(--box-bg-color-hover) !important
box-shadow: 0 var(--spacer-2) var(--spacer) var(--color-accent-bg-hover) // --box-shadow-lg with color-accent-bg-hover
/* Red indicator on top-left. */
@ -692,9 +695,7 @@ body.is-scrolled
border-radius: 50%
display: none
height: 1.2rem
position: absolute
right: var(--spacer-2)
top: var(--spacer-2)
margin-left: .2rem
visibility: hidden
width: 1.2rem

57
conference_main/templates/conference_main/_footer.pug
View File

@ -15,32 +15,6 @@ footer
img(src="{% static 'images/BCON_logo.svg'%}", alt="{{ edition.title }}")
{% endif %}
| {% if main_menu_editions|length >= 2 or edition not in main_menu_editions and main_menu_editions|length >= 1 %}
li
button.btn.dropdown-toggle.py-0(
aria-expanded='false',
aria-haspopup='true',
class="js-dropdown-toggle",
data-toggle-menu-id="nav-edition-menu",
id="nav-edition-dropdown")
| Editions
.dropdown-menu.dropdown-menu-left.dropdown-menu-bottom(
aria-labelledby='nav-edition-dropdown',
class="js-dropdown-menu",
id="nav-edition-menu")
| {% for menu_edition in main_menu_editions %}
a.dropdown-item(
class="{% if menu_edition == edition %}active{% endif %}",
href="{% url 'homepage' edition_path=menu_edition.path %}")
{{ menu_edition.title }}
| {% endfor %}
| {% endif %}
li
a(href="/code-of-conduct/") Code of Conduct
li
a(href="/hosting-official-bcon/") Hosting an Official BCON
ul
| {% if edition and edition.flatpage_call_for_participation_published %}
li
@ -85,7 +59,38 @@ footer
target="_blank",
title="Follow @BlenderConf on Twitter")
| #[i.i-twitter]
hr
.container
.justify-content-center.navbar-footer
| {% if main_menu_editions|length >= 2 or edition not in main_menu_editions and main_menu_editions|length >= 1 %}
{# TODO: check media queries breakpoints #}
ul.mb-2.mb-lg-0
li
button.btn.dropdown-toggle.py-0(
aria-expanded='false',
aria-haspopup='true',
class="js-dropdown-toggle",
data-toggle-menu-id="nav-edition-menu",
id="nav-edition-dropdown")
| Editions
.dropdown-menu.dropdown-menu-left.dropdown-menu-bottom(
aria-labelledby='nav-edition-dropdown',
class="js-dropdown-menu",
id="nav-edition-menu")
| {% for menu_edition in main_menu_editions %}
a.dropdown-item(
class="{% if menu_edition == edition %}active{% endif %}",
href="{% url 'homepage' edition_path=menu_edition.path %}")
{{ menu_edition.title }}
| {% endfor %}
| {% endif %}
ul
li.fs-sm
a(href="/code-of-conduct/") Code of Conduct
li.fs-sm
a(href="/hosting-official-bcon/") Hosting an Official BCON
#hop(title='Be awesome in space')
svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 448 512')

2
conference_main/templates/conference_main/_navbar.pug
View File

@ -7,7 +7,7 @@ nav.nav-global(role='navigation')
a.nav-global-logo(
href="{% if edition and edition.path %}{% url 'homepage' edition_path=edition.path %}{% else %}/{% endif %}",
class="{% if request.path == '/' %}is-active{% endif %}")
| {% include "conference_main/_navbar_logo.pug" %}
| {% include "conference_main/_navbar_logo.pug" with show_date=True %}
button.nav-global-logo.js-dropdown-toggle(data-toggle-menu-id='nav-global-nav-links')
{% if edition.logo_small %}

2
conference_main/templates/conference_main/_navbar_logo.pug
View File

@ -11,6 +11,7 @@
img(src="{% static 'images/BCON_logo.svg'%}", alt="{{ edition.title }}")
{% endif %}
{% if show_date %}
.navbar-dates
{% if edition.date_start %}
span {{ edition.date_start | date:'F d' }}{% if edition.date_start != edition.date_end %}-{{ edition.date_end | date:'d' }}{% endif %}, {{ edition.date_end | date:'Y' }}
@ -19,3 +20,4 @@
{% if edition.location %}
span {{ edition.location }}
{% endif %}
{% endif %}

15
conference_main/templates/conference_main/_navbar_menu_user.pug
View File

@ -31,11 +31,11 @@ li.dropdown
a.dropdown-item.is-admin(href="{% url 'admin:tickets_ticket_changelist' %}")
i.i-ticket
| Tickets
li
a.dropdown-item.is-admin(href="{% url 'admin:conference_main_event_changelist' %}{% if edition %}?edition__id__exact={{ edition.id }}{% endif %}")
i.i-layers
| Presentations
| {% if edition and not edition.is_archived and edition.festival_voting_open %}
li
a.dropdown-item.is-admin(href="{% url 'admin:conference_main_festivalentry_changelist' %}")
@ -43,6 +43,15 @@ li.dropdown
| Festival Entries
| {% endif %}
| {% with album=edition.get_open_album %}
| {% if album %}
li
a.dropdown-item.is-admin(href="{% url 'admin:conference_main_photo_changelist' %}{% if edition %}?edition__id__exact={{ edition.id }}{% endif %}")
i.i-camera
| Photos
| {% endif %}
| {% endwith %}
li.dropdown-divider
| {% endif %}
@ -51,7 +60,6 @@ li.dropdown
a.dropdown-item(href="{% url 'presentation_submit' edition_path=edition.path %}")
i.i-upload
| Submit Presentation
li.dropdown-divider
| {% endif %}
| {% if edition and not edition.is_archived and edition.festival_submissions_open %}
@ -59,9 +67,10 @@ li.dropdown
a.dropdown-item(href="{% url 'festival_entry_submit' edition_path=edition.path %}")
i.i-upload
| Submit Festival Entry
li.dropdown-divider
| {% endif %}
li.dropdown-divider
li
a.dropdown-item(href="{% url 'profile_update' %}")
i.i-user

27
conference_main/templates/conference_main/components/album-pagination.pug Normal file
View File

@ -0,0 +1,27 @@
ul.bg-primary.pagination.py-2
| {% if is_paginated and page_obj.number > 1 %}
li.page-item.page-first
a(href="?page=1") First
| {% endif %}
| {% if is_paginated and page_obj.has_previous %}
li.page-item.page-prev
a(href="?page={{ page_obj.previous_page_number }}")
i.i-chevron-left
| Previous
| {% endif %}
li.page-item.page-current
a(href="#") Page {{ page_obj.number }} of {{ paginator.num_pages }}
| {% if is_paginated and page_obj.has_next %}
li.page-item.page-next
a(href="?page={{ page_obj.next_page_number }}")
| Next
i.i-chevron-right
| {% endif %}
| {% if is_paginated and page_obj.number < paginator.num_pages %}
li.page-item.page-last
a(href="?page={{ paginator.num_pages }}") Last
| {% endif %}

2
conference_main/templates/conference_main/panel/panel_location.pug
View File

@ -16,7 +16,7 @@
strong {{ location.name|upper }}
.board-date {{ date|date:"l jS" }}
.board-logo {% include "conference_main/_navbar_logo.pug" %}
.board-logo {% include "conference_main/_navbar_logo.pug" with show_date=True %}
| {% for event in events %}
li(

34
conference_main/templates/conference_main/photos/album.pug
View File

@ -3,17 +3,19 @@
| {% block content %}
.album-container-fullscreen
| {% if user.is_anonymous and album.is_upload_open %}
header
a.edition-logo-header.me-4(href="/")
| {% include "conference_main/_navbar_logo.pug" %}
| {% if user.is_anonymous and album.is_upload_open %}
a(href="{% url 'oauth:login' %}").d-block.p-3.text-decoration-underline
| Log in to upload photos
| {% endif %}
| {% endif %}
| {% if can_upload_photos or request.user.is_staff %}
header
| {% if can_upload_photos or request.user.is_staff %}
.btn-row
| {% if can_upload_photos %}
a.btn.btn-accent.px-5(href="{{ album.get_upload_url }}")
a.btn.btn-accent(href="{{ album.get_upload_url }}")
i.i-upload
span Upload Photos
| {% endif %}
@ -22,16 +24,18 @@
.whoosh-container
a.whoosh(href="{% url 'admin:conference_main_album_change' album.pk %}")
i.i-edit
a.whoosh(href="{% url 'admin:conference_main_photo_changelist' %}?albums__id__exact={{ album.pk }}&edition__id__exact={{ edition.pk }}")
i.i-camera
| {% endif %}
| {% endif %}
.photo-list
| {% if is_paginated and page_obj.has_previous %}
a.photo-list-page-nav(href="?page={{ page_obj.previous_page_number }}")
i.i-arrow-left
span Previous
| {% endif %}
| {% if album.license %}
span.mx-3.text-muted(title="All photos are {{ album.license }}") {{ album.license }}
| {% endif %}
| {% include "conference_main/components/album-pagination.pug" %}
.photo-list
| {% for photo in photos %}
a.photo-list-item(href="{{ photo.file.url }}")
img(src="{{ photo.thumbnail_m_url }}")
@ -44,9 +48,5 @@
| {% endif %}
| {% endfor %}
| {% if is_paginated and page_obj.has_next %}
a.photo-list-page-nav(href="?page={{ page_obj.next_page_number }}")
span Next
i.i-arrow-right
| {% endif %}
| {% include "conference_main/components/album-pagination.pug" %}
| {% endblock content %}

8
conference_main/templates/conference_main/photos/albums.pug
View File

@ -1,6 +1,14 @@
| {% extends "conference_main/base.pug" %}
| {% load thumbnail %}
| {% block header %}
| {% block jumbotron %}
| {% with title="Photos" subtitle="Albums with impressions and portraits<br> from the Blender Conference "|add:edition.path|add:"." %}
| {% include "conference_main/components/hero.pug" with title=title subtitle=subtitle|safe show_gradient=True show_overlay=True %}
| {% endwith %}
| {% endblock jumbotron %}
| {% endblock header %}
| {% block content %}
.container.py-4
.box

4
conference_main/templates/conference_main/presentations/schedule_horizontal.pug
View File

@ -96,10 +96,10 @@
| {{ event.duration_minutes }} m
| {% endif %}
li.divider
li.remarks
li.divider
| {% include "conference_main/components/event_buttons.pug" with without_login_button=True is_schedule=True %}
.event-name

6
conference_main/templates/conference_main/presentations/schedule_vertical.pug
View File

@ -199,9 +199,6 @@
.event-details-info
.event-header
ul.event-description
| {# Indicator for ongoing events. #}
li.remarks
| {% if event.location.slug %}
li.event-location(
style="color: hsl(var(--location-hue-{{ event.location.slug }}), 80%, var(--schedule-container-location-color-l));")
@ -218,6 +215,9 @@
| {{ event.duration_minutes }} m
| {% endif %}
| {# Indicator for ongoing events. #}
li.remarks
li.divider
| {% include "conference_main/components/event_buttons.pug" with without_login_button=True is_schedule=True %}