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

UI: Conference website web-assets v2 upgrade #103970

Merged
Márton Lente merged 50 commits from ui/web-assets-v2-update into main 2024-09-23 12:34:43 +02:00
Conversation 20 Commits 50 Files Changed 47 +94 -94
21 changed files with 94 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1d50952f90 - Show all commits

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

@ -45,7 +45,7 @@
top: 0
.album-upload-container
background-color: var(--background-color)
background-color: var(--color-bg)
position: relative
header
@ -63,7 +63,7 @@
.dropzone
align-items: center
background-color: var(--background-color-alt)
background-color: var(--color-bg-alt)
color: white
display: flex
justify-content: center
@ -72,7 +72,7 @@
background: transparent
.album-container-fullscreen
background-color: var(--background-color-alt)
background-color: var(--color-bg-alt)
height: 100%
header

14
conference_main/static/conference_main/styles/_attendee.sass
View File

@ -49,8 +49,8 @@
transition: color var(--transition-speed) var(--transition-timing-fast)
.attendee-name
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
.attendee-title
display: block
@ -58,7 +58,7 @@
.attendee-company
color: var(--text-color-secondary)
font-size: var(--font-size-small)
font-size: var(--fs-sm)
line-height: 1
.attendee-portrait
@ -77,14 +77,14 @@
img
filter: unset
&.size-medium
&.size-md
--attendee-portrait-size: 80px
+media-sm
--attendee-portrait-size: 110px
--font-size-large: clamp(1.2rem, 1.5vw + 1rem, 18px)
--fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px)
&.size-large
&.size-lg
--attendee-portrait-size: 150px
+media-sm
@ -92,7 +92,7 @@
img
background-color: var(--background-color-secondary)
background-color: var(--color-bg-secondary)
border-radius: 50%
display: block
filter: grayscale(50%)

10
conference_main/static/conference_main/styles/_event.sass
View File

@ -25,7 +25,7 @@
+padding(3)
&.review
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
+box-shadow-card
+margin(4, bottom)
+padding(3, x)
@ -33,7 +33,7 @@
.event-location,
.event-category
+font-weight-bold
+fw-bold
.event-detail
.event-date
@ -60,11 +60,11 @@
summary
padding-right: 0
+font-weight-normal
+fw-normal
color: var(--text-color-secondary)
.date
font-size: var(--font-size-small)
font-size: var(--fs-sm)
+margin(1, top)
opacity: .5
@ -83,7 +83,7 @@
content: 'UNDER REVIEW'
display: flex
font-size: 10px
+font-weight-bold
+fw-bold
position: absolute
padding: 2px 10px 0 10px
top: -7px

4
conference_main/static/conference_main/styles/_footer.sass
View File

@ -1,5 +1,5 @@
footer
background-color: var(--background-color)
background-color: var(--color-bg)
border-top: var(--border-width) var(--border-color) solid
+margin(3, y)
+padding(3, y)
@ -44,7 +44,7 @@ footer
.btn
color: var(--text-color-secondary)
+font-weight-normal
+fw-normal
.footer-logo
margin-top: -2px

4
conference_main/static/conference_main/styles/_homepage.sass
View File

@ -8,7 +8,7 @@ $bcon-accent: #1291bd
.bcon-date,
.bcon-place
padding: $spacer / 3
+font-weight-bold
+fw-bold
.bcon-date,
background-color: $white
@ -19,7 +19,7 @@ $bcon-accent: #1291bd
color: $white
.location-map
background-color: var(--background-color)
background-color: var(--color-bg)
border-radius: var(--border-radius)
height: 420px

14
conference_main/static/conference_main/styles/_navigation.sass
View File

@ -24,7 +24,7 @@ body.is-scrolled
display: flex
.navbar-mobile
background-color: var(--background-color)
background-color: var(--color-bg)
.nav-icon i
transform: scale(1.33)
@ -38,7 +38,7 @@ body.is-scrolled
color: var(--navbar-color)
display: flex
flex-direction: column
font-size: var(--font-size-extra-small)
font-size: var(--fs-xs)
line-height: 1.5
+padding(3, x)
text-overflow: ellipsis
@ -47,7 +47,7 @@ body.is-scrolled
span
margin: -2px 0
+font-weight-bold
+fw-bold
.navbar-brand
+padding(2, y)
@ -88,14 +88,14 @@ body.is-scrolled
outline: none
&:hover
background-color: var(--color-primary-bg)
color: var(--color-primary)
background-color: var(--color-accent-bg)
color: var(--color-accent)
text-decoration: none
i
+margin(2, right)
&.is-active a
background-color: var(--color-primary-bg)
color: var(--color-primary)
background-color: var(--color-accent-bg)
color: var(--color-accent)
text-decoration: none

8
conference_main/static/conference_main/styles/_panel.sass
View File

@ -35,7 +35,7 @@
.board-e-time
color: white
+font-weight-bold
+fw-bold
.event-meta
display: flex
@ -84,8 +84,8 @@
header
color: white
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
+padding(3, x)
+padding(2, y)
@ -230,7 +230,7 @@
.tw-header
display: flex
font-size: var(--font-size-small)
font-size: var(--fs-sm)
.tw-author,
.tw-screen_name

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

@ -11,7 +11,7 @@ $col-time-width: 8%
.schedule-filters-container,
.schedule-day-toggles
@extend .container-fluid
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
+media-xs
+padding(0, y)
@ -33,7 +33,7 @@ $col-time-width: 8%
.schedule-filter-title
color: var(--text-color-secondary)
font-size: var(--font-size-small)
font-size: var(--fs-sm)
.schedule-filters
display: flex
@ -131,12 +131,12 @@ $col-time-width: 8%
&:checked
~ label
background-color: var(--color-primary-bg)
border-color: var(--color-primary-bg)
color: var(--color-primary-text)
background-color: var(--color-accent-bg)
border-color: var(--color-accent-bg)
color: var(--color-accent-text)
&:hover
background-color: var(--color-primary-bg-hover)
background-color: var(--color-accent-bg-hover)
.schedule-day-toggles
gap: .5rem
@ -169,7 +169,7 @@ body.is-scrolled
&.is-fixed
@extend .d-none
@extend .fixed-top
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
+box-shadow-card
@include media-breakpoint-up(lg)
@ -182,19 +182,19 @@ body.is-scrolled
opacity: .5
.day-header
font-size: var(--font-size-large)
font-size: var(--fs-lg)
margin-bottom: 0
+padding(2, y)
.time-cell-placeholder
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
+padding(3, x)
+padding(2, top)
text-align: right
.schedule
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
display: flex
flex-direction: column
flex-wrap: nowrap
@ -254,8 +254,8 @@ body.is-scrolled
@extend .col-day
@extend .row-rulers
border-color: transparent
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
margin-bottom: 0
order: var(--day-number)
+padding(2, y)
@ -278,7 +278,7 @@ body.is-scrolled
position: relative
&:before
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
content: 'Today'
+padding(2, right)
position: absolute
@ -289,7 +289,7 @@ body.is-scrolled
@extend .row-rulers
@include media-breakpoint-up(sm)
font-size: var(--font-size-large)
font-size: var(--fs-lg)
@include media-breakpoint-up(lg)
display: none
@ -305,8 +305,8 @@ body.is-scrolled
@extend .row-rulers-lg
display: none
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
+padding(3, x)
text-align: right
@ -328,7 +328,7 @@ body.is-scrolled
.event-cell
background-color: rgba(black, .025)
background-color: var(--background-color)
background-color: var(--color-bg)
display: flex
flex-direction: column
@extend .col-day
@ -359,13 +359,13 @@ body.is-scrolled
/* Current-time slot. */
&.happening-now
background-color: var(--color-primary-bg)
box-shadow: 0 0 0 3px inset var(--color-primary-bg-hover)
background-color: var(--color-accent-bg)
box-shadow: 0 0 0 3px inset var(--color-accent-bg-hover)
position: relative
/* Draw an horizontal line across the entire schedule. */
&:before
background-color: var(--color-primary)
background-color: var(--color-accent)
content: ''
height: 3px
left: -50%
@ -375,7 +375,7 @@ body.is-scrolled
width: 300vw
.time-header
+font-weight-bold
+fw-bold
/* In the vertical schedule, only hide events on mobile,
* It's nice to see all days at once on desktop. */
@ -391,8 +391,8 @@ body.is-scrolled
.bcon-logo-text
align-items: center
display: flex
font-size: var(--font-size-large)
+font-weight-bold
font-size: var(--fs-lg)
+fw-bold
height: 100%
justify-content: center
opacity: 0
@ -456,7 +456,7 @@ body.is-scrolled
/* Ongoing events.. */
&.happening-now
background-color: white !important
box-shadow: 0 5px 15px var(--color-primary-bg-hover), 0 0 20px rgba(white, .5)
box-shadow: 0 5px 15px var(--color-accent-bg-hover), 0 0 20px rgba(white, .5)
.event-name
color: black
@ -491,7 +491,7 @@ body.is-scrolled
.event-thumbnail
--thumbnail-width: 100%
align-items: center
background-color: var(--background-color)
background-color: var(--color-bg)
border-top-left-radius: var(--border-radius-lg)
border-top-right-radius: var(--border-radius-lg)
display: flex
@ -536,7 +536,7 @@ body.is-scrolled
opacity: .25
.event-border
background-color: var(--background-color)
background-color: var(--color-bg)
border-radius: 99rem
+margin(2, top)
height: 4px
@ -547,7 +547,7 @@ body.is-scrolled
color: var(--text-color-secondary)
display: flex
flex-wrap: wrap
font-size: var(--font-size-small)
font-size: var(--fs-sm)
+margin(1, bottom)
.event-description
@ -678,7 +678,7 @@ body.is-scrolled
top: -2px
.location-label
font-size: var(--font-size-small)
font-size: var(--fs-sm)
color: white
height: 0
left: 0
@ -723,7 +723,7 @@ body.is-scrolled
span
align-items: center
background-color: var(--background-color)
background-color: var(--color-bg)
display: flex
flex: 1
height: var(--time-slots-height)
@ -746,11 +746,11 @@ body.is-scrolled
right: 0
&.happening-now
background-color: var(--color-primary)
background-color: var(--color-accent)
&:before
box-shadow: 0 0 0 3px inset var(--color-primary-bg-hover)
background-color: var(--color-primary-bg-hover)
box-shadow: 0 0 0 3px inset var(--color-accent-bg-hover)
background-color: var(--color-accent-bg-hover)
strong
color: white

6
conference_main/static/conference_main/styles/_slideshow.sass
View File

@ -1,8 +1,8 @@
.photo-list-page-nav
background-color: var(--background-color-alt)
background-color: var(--color-bg-alt)
color: white
+font-weight-bold
font-size: var(--font-size-large)
+fw-bold
font-size: var(--fs-lg)
display: flex
align-items: center
justify-content: center

8
conference_main/static/conference_main/styles/_sponsors.sass
View File

@ -3,8 +3,8 @@
--sponsor-level-2-max-size: 265px
--sponsor-level-3-max-size: 215px
background-color: var(--background-color)
border-top: var(--border-width) solid var(--background-color-tertiary)
background-color: var(--color-bg)
border-top: var(--border-width) solid var(--color-bg-tertiary)
+padding(5, top)
+margin(5, top)
text-align: center
@ -20,11 +20,11 @@
.sponsor-level
color: rgb(108,160,255)
font-size: var(--font-size-large)
font-size: var(--fs-lg)
position: relative
span
background-color: var(--background-color)
background-color: var(--color-bg)
+padding(3, x)
position: relative
z-index: 1

4
conference_main/static/conference_main/styles/_utils.sass
View File

@ -76,7 +76,7 @@
=text-gradient($direction, $colorfrom, $colorto)
background: linear-gradient($direction, $colorfrom, $colorto)
background-clip: text
-webkit-background-clip: text
-webkit-bg-clip: text
-webkit-text-fill-color: transparent
=transition($prop: all, $time: 0.1s, $ease: ease-in)
@ -132,7 +132,7 @@
=pointer-events-none
pointer-events: none !important
@mixin text-background($text-color, $background-color, $roundness, $padding)
@mixin text-bg($text-color, $background-color, $roundness, $padding)
border-radius: $roundness
padding: $padding
background-color: $background-color

10
conference_main/static/conference_main/styles/main.sass
View File

@ -19,12 +19,12 @@ $font-path: '/static/assets/fonts'
\:root
--body-bg: #e9ecef
--background-color: var(--body-bg)
--color-bg: var(--body-bg)
--navbar-bg: #1e1e1e
--navbar-primary-height: 45px
--table-border-color: var(--background-color-tertiary)
--table-row-bg-color: var(--background-color-secondary)
--table-border-color: var(--color-bg-tertiary)
--table-row-bg-color: var(--color-bg-secondary)
--color-cat-talk: hsl(178deg, 69%, 45%)
--color-cat-talk-bg: hsl(178deg, 69%, 89%)
@ -110,7 +110,7 @@ button.favorite-star
button.going-star
&:hover, &[data-is-checked]
+font-weight-bold
+fw-bold
color: var(--color-success)
i
@ -181,7 +181,7 @@ button.going-star
border-radius: var(--border-radius)
.badge
+font-weight-bold
+fw-bold
&.status-submitted
--badge-bg: hsla(42deg, 100%, 50%, .15)

2
conference_main/templates/conference_main/widgets/image.html
View File

@ -2,7 +2,7 @@
<img src="{{ widget.value.url }}"><br>
{% if not widget.required %}
<div class="py-2">
<label class="float-left mr-2" for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}:</label>
<label class="float-left me-2" for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}:</label>
<input class="float-left" type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
</div>
{% endif %}

4
tickets/templates/tickets/checkout.html
View File

@ -131,9 +131,9 @@
<div class="row">
<div class="col">
<div class="form-group form-inline float-right">
<label for="promoCode" class="mr-3">Promo code</label>
<label for="promoCode" class="me-3">Promo code</label>
<input type="text" class="form-control" id="promoCode" autocomplete="off" readonly>
<p class="field-validation-error small m-0 mr-2 float-right text-danger d-none"></p>
<p class="field-validation-error small m-0 me-2 float-right text-danger d-none"></p>
</div>
</div>
</div>

2
tickets/templates/tickets/components/badge.html
View File

@ -4,7 +4,7 @@
<h4 class="d-flex align-items-end">
Your Badge
<a href="{% url "profile_update" %}" class="btn btn-primary btn-md ml-auto">
<a href="{% url "profile_update" %}" class="btn btn-primary btn-md ms-auto">
<i class="i-edit"></i> Edit
</a>
</h4>

2
tickets/templates/tickets/components/pill_payment_status.html
View File

@ -2,7 +2,7 @@
{% if ticket.order_number %}Order number: <strong>{{ ticket.order_number }}</strong>{% endif %}
{% with refund_status=ticket.refund_status %}
<div class="float-right ml-3">
<div class="float-right ms-3">
{% if ticket.is_free %}
<span class="badge badge-info px-2 py-1">Free</span>
{% elif refund_status == "full" %}

4
tickets/templates/tickets/forms/widgets/gateway_radio_option.html
View File

@ -9,7 +9,7 @@
{# Make bank transfer look similar to BT options #}
<div class="braintree-option" tabindex="0"
style="border-width: 1px; border-color: #b5b5b5; border-radius: 4px; --body-bg: #e9ecef;
--background-color: var(--body-bg); margin-top: 0">
--color-bg: var(--body-bg); margin-top: 0">
<div class="braintree-option__logo">
<svg focusable="false" width="48" height="29"
aria-hidden="true" viewBox="0 0 24 24">
@ -24,7 +24,7 @@
{% endif %}
</div>
{% if widget.value == "bank" %}
<p class="text-muted mt-1 ml-1{% if not widget.selected %} d-none{% endif %}"
<p class="text-muted mt-1 ms-1{% if not widget.selected %} d-none{% endif %}"
id="bank-transfer-warning">
When choosing to pay by bank, you will need to manually perform a payment.
It might take several days until our team receives the bank transfer and finalises your order.

2
tickets/templates/tickets/invoice.css
View File

@ -51,7 +51,7 @@ footer {
color: rgba(40, 35, 74, 0.6);
}
.secondary-small {
.secondary-sm {
font-size: 0.7rem;
color: rgba(40, 35, 74, 0.6);
}

12
tickets/templates/tickets/invoice.html
View File

@ -82,16 +82,16 @@
<tbody>
<tr class="row-category">
<td class="cell-product">
<span class="secondary-small">Products</span>
<span class="secondary-sm">Products</span>
</td>
<td class="cell-price">
<span class="secondary-small cell-price-content">Price</span>
<span class="secondary-sm cell-price-content">Price</span>
</td>
<td class="cell-quantity">
<span class="secondary-small cell-quantity-content">Quantity</span>
<span class="secondary-sm cell-quantity-content">Quantity</span>
</td>
<td class="cell-total-price">
<span class="secondary-small">Total Price</span>
<span class="secondary-sm">Total Price</span>
</td>
</tr>
{% for item in order.line_items %}
@ -101,7 +101,7 @@
{# **N.B.**: For now we just assume there's always one line item and product is known, if tax must be shown #}
{% for tax in object.product.taxes %}
<br />
<span class="secondary-small">Incl. VAT {{ tax.rate }}% ({{ tax.description }})</span>
<span class="secondary-sm">Incl. VAT {{ tax.rate }}% ({{ tax.description }})</span>
{% endfor %}
</td>
<td class="cell-price">
@ -109,7 +109,7 @@
<span class="cell-price-content">{% format_cents item.price.unit_amount item.currency %}</span>
{# **N.B.**: For now we just assume there's always one line item and product is known, if tax must be shown #}
{% for tax in object.product.taxes %}
<span class="secondary-small cell-price-content">{% format_cents tax.amount item.currency %}</span>
<span class="secondary-sm cell-price-content">{% format_cents tax.amount item.currency %}</span>
{% endfor %}
</td>
<td class="cell-quantity">

4
tickets/templates/tickets/products_table.html
View File

@ -36,7 +36,7 @@
<div class="mt-auto pt-3">
<hr>
<div class="text-right mb-2">
<span class="ml-auto pb-2"><span>Price:</span> <strong>{{ product.price_label }}</strong></span>
<span class="ms-auto pb-2"><span>Price:</span> <strong>{{ product.price_label }}</strong></span>
</div>
<div class="btn-row-fluid">
{% if request.user.is_authenticated %}
@ -59,7 +59,7 @@
<div class="col pt-4">
<div class="mt-3">
<div class="d-flex mb-3 mx-5">
<div><h1 class="mt-1 mr-2 text-muted"><i class="i-heart"></i></h1></div>
<div><h1 class="mt-1 me-2 text-muted"><i class="i-heart"></i></h1></div>
<div class="flex-1">
Developers who have <a style="text-decoration: underline" href="https://developer.blender.org/docs/handbook/contributing/"><strong>contributed code</strong></a>
to Blender in the past 12 months can contact <a style="text-decoration: underline" href="https://to.chat.blender.org/#/@thomasdinges:blender.org">Thomas Dinges

2
tickets/templates/tickets/ticket_detail_claims.html
View File

@ -26,7 +26,7 @@
<label class="sr-only" for="claim-url">
Ticket{{ unclaimed|pluralize }} can be claimed using the following link:
</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group mb-2 me-sm-2">
<input type="text" class="form-control" id="claim-url" readonly value="{% absolute_url ticket.claim_url %}">
<div class="input-group-append">
<button class="input-group-text btn btn-secondary" title="Copy to clipboard" id="btn-copy-claim-url">