UI: 2024 Hero component options #103971

Merged
Márton Lente merged 66 commits from ui/2024-hero-options into main 2024-09-24 13:00:31 +02:00
10 changed files with 45 additions and 38 deletions
Showing only changes of commit a40d282605 - Show all commits

@ -1 +1 @@
Subproject commit acd238dcfa43a379b02411dde2db07c994066b43 Subproject commit 8fc7eb32ce9b0c9ecbaa07ff3232cc8c6cdebe21

View File

@ -20,7 +20,7 @@
.attendee .attendee
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-direction: column flex-direction: column
justify-content: space-between justify-content: space-between
@ -58,7 +58,7 @@
+margin(1, y) +margin(1, y)
.attendee-company .attendee-company
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--fs-sm) font-size: var(--fs-sm)
line-height: 1 line-height: 1
@ -85,7 +85,9 @@
--attendee-portrait-size: 110px --attendee-portrait-size: 110px
--fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px) --fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px)
&.size-lg // Class '-large' is immutable
&.size-lg,
&.size-large
--attendee-portrait-size: 15.0rem --attendee-portrait-size: 15.0rem
+media-sm +media-sm

View File

@ -39,7 +39,7 @@
+padding(3) +padding(3)
summary summary
color: var(--text-color-secondary) color: var(--color-text-secondary)
+fw-normal +fw-normal
padding-right: 0 padding-right: 0

View File

@ -6,7 +6,7 @@ footer
.navbar-footer .navbar-footer
align-items: center align-items: center
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-direction: column flex-direction: column
justify-content: space-between justify-content: space-between
@ -44,13 +44,13 @@ footer
flex: 1 flex: 1
.btn .btn
color: var(--text-color-secondary) color: var(--color-text-secondary)
+fw-normal +fw-normal
.footer-logo .footer-logo
margin-top: -.2rem margin-top: -.2rem
svg svg
fill: var(--text-color-tertiary) fill: var(--color-text-tertiary)
height: auto height: auto
max-width: var(--spacer-5) max-width: var(--spacer-5)

View File

@ -12,6 +12,11 @@ $col-time-width: 8%
@extend .container-fluid @extend .container-fluid
background-color: var(--color-bg-primary) background-color: var(--color-bg-primary)
.btn-toggle
&.is-active
@extend .btn
@extend .btn-primary
+media-xs +media-xs
+padding(0, y) +padding(0, y)
@ -31,7 +36,7 @@ $col-time-width: 8%
border-radius: var(--border-radius) border-radius: var(--border-radius)
.schedule-filter-title .schedule-filter-title
color: var(--text-color-secondary) color: var(--color-text-secondary)
font-size: var(--fs-sm) font-size: var(--fs-sm)
.schedule-filters .schedule-filters
@ -546,7 +551,7 @@ body.is-scrolled
width: 100% width: 100%
.event-header .event-header
color: var(--text-color-secondary) color: var(--color-text-secondary)
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
font-size: var(--fs-sm) font-size: var(--fs-sm)
@ -588,10 +593,10 @@ body.is-scrolled
width: 1.2rem width: 1.2rem
.event-speakers .event-speakers
color: var(--text-color-secondary) color: var(--color-text-secondary)
.event-tags .event-tags
color: var(--text-color-secondary) color: var(--color-text-secondary)
gap: var(--spacer) gap: var(--spacer)
.event-category .event-category

View File

@ -10,7 +10,7 @@
text-align: center text-align: center
p p
color: var(--text-color-secondary) color: var(--color-text-secondary)
max-width: 500px max-width: 500px
+margin(auto, x) +margin(auto, x)
+margin(4, bottom) +margin(4, bottom)

View File

@ -156,7 +156,7 @@ button.going-star
// needed because CSS only has a preceded by selector whereas we need a // needed because CSS only has a preceded by selector whereas we need a
// succeeded by selector to show shadow for all preceding stars. // succeeded by selector to show shadow for all preceding stars.
display: inline-flex display: inline-flex
color: #f5cc27 !important color: var(--color-text-secondary) !important
@for $i from 1 through 5 @for $i from 1 through 5
.vote-star[data-rating="#{$i}"] .vote-star[data-rating="#{$i}"]

View File

@ -23,6 +23,7 @@
.hero-subtitle.mx-auto.text-center {{ edition.location }} .hero-subtitle.mx-auto.text-center {{ edition.location }}
{% endif %} {% endif %}
{% if edition.header %}
.hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%") .hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%")
// TODO: @back-end make '.hero-overlay' optional // TODO: @back-end make '.hero-overlay' optional
// .hero-overlay // .hero-overlay

View File

@ -68,32 +68,31 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% endif %} | {% endif %}
.row .row
| {% if object.picture and not object.recording %} | {% if object.picture and not object.recording %}
.col-md-3 .col-md-3
| {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %} | {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %}
a(href="{{ picture.url }}") a(href="{{ picture.url }}")
img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}") img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}")
| {% endthumbnail %} | {% endthumbnail %}
| {% endif %} | {% endif %}
div(class="col-md-{% if object.picture and not object.recording %}9{% else %}12{% endif %}") div(class="col-md-{% if object.picture and not object.recording %}9{% else %}12{% endif %}")
h3.mb-3 {{ object.name }}
h3.mb-3 {{ object.name }} | {% if object.description %}
div {{ object.description | urlizetrunc:40 | linebreaks }}
| {% endif %}
| {% if object.description %} .event-tags
div {{ object.description | urlizetrunc:40 | linebreaks }} | {% if event.tags.all %}
| {% for tag in event.tags.all %}
.badge.badge-secondary.badge-sm(title="{{ tag.name }}")
| {{ tag.name }}
| {% endfor %}
| {% else %}
small No tags set yet.
| {% endif %} | {% endif %}
.event-tags
| {% if event.tags.all %}
| {% for tag in event.tags.all %}
.badge.badge-secondary.badge-sm(title="{{ tag.name }}")
| {{ tag.name }}
| {% endfor %}
| {% else %}
small No tags set yet.
| {% endif %}
| {% if object.proposal %} | {% if object.proposal %}
.row.mb-4 .row.mb-4
.col-md-12 .col-md-12
@ -129,7 +128,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% endif %} | {% endif %}
| {% endif %} | {% endif %}
.row .ps-0.row
.col-md-12 .col-md-12
| {% include 'conference_main/components/attendee.pug' with profile=speaker size="medium" show_links=True show_admin=True is_landscape=True %} | {% include 'conference_main/components/attendee.pug' with profile=speaker size="medium" show_links=True show_admin=True is_landscape=True %}
@ -146,7 +145,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% if request.user.is_superuser %} | {% if request.user.is_superuser %}
| {% if speaker.other_events %} | {% if speaker.other_events %}
h5.pt-4.mb-0.text-muted SESSIONS h5.ps-0.pt-4.mb-0.text-muted SESSIONS
table.mb-2 table.mb-2
tbody tbody

View File

@ -13,7 +13,7 @@
.col-sm-9 .col-sm-9
| {% if profile.bio %} | {% if profile.bio %}
.lead.pt-3 {{ profile.bio|linebreaks|urlizetrunc:80 }} .pt-3 {{ profile.bio|linebreaks|urlizetrunc:80 }}
| {% elif request.user.id == profile.id %} | {% elif request.user.id == profile.id %}
.lead.text-muted .lead.text-muted