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
47 changed files with 520 additions and 520 deletions

1
.gitmodules vendored
View File

@ -1,6 +1,7 @@
[submodule "assets_shared"]
path = assets_shared
url = https://projects.blender.org/infrastructure/web-assets.git
branch = v2
[submodule "playbooks/shared"]
path = playbooks/shared
url = https://projects.blender.org/infrastructure/web-playbooks

@ -1 +1 @@
Subproject commit 016c666bad84c78f5c910419dd0917b443f1695d
Subproject commit 988d23bff0deb21518ec477c2ae67730e84e7712

View File

@ -29,7 +29,7 @@
.album-info
@extend .p-4
text-shadow: 2px 2px 0 rgba(black, .33), 2px 2px 15px rgba(black, .9)
text-shadow: .2rem .2rem 0 rgba(black, .33), .2rem .2rem var(--spacer) rgba(black, .9)
bottom: 0
color: $white
left: 0
@ -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

View File

@ -1,7 +1,8 @@
// TODO: optional change all explicit size values to modular sizing calculations
.attendees
--grid-items-width: 150px
--grid-items-width: 15.0rem
--grid-items-per-row: 2
--grid-gap-size: 20px
--grid-gap-size: 2.0rem
display: grid
gap: var(--grid-gap-size)
@ -19,7 +20,7 @@
.attendee
align-items: center
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: flex
flex-direction: column
justify-content: space-between
@ -49,23 +50,23 @@
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
+margin(1, y)
.attendee-company
color: var(--text-color-secondary)
font-size: var(--font-size-small)
color: var(--color-text-secondary)
font-size: var(--fs-sm)
line-height: 1
.attendee-portrait
--attendee-portrait-size: 90px
--attendee-portrait-size: 9.0rem
+media-sm
--attendee-portrait-size: 90px
--attendee-portrait-size: 9.0rem
height: var(--attendee-portrait-size)
+margin(auto, x)
@ -77,22 +78,24 @@
img
filter: unset
&.size-medium
--attendee-portrait-size: 80px
&.size-md
--attendee-portrait-size: calc(var(--spacer) * 5)
+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)
// Class '-large' is immutable
&.size-lg,
&.size-large
--attendee-portrait-size: 150px
--attendee-portrait-size: 15.0rem
+media-sm
--attendee-portrait-size: 180px
--attendee-portrait-size: 18.0rem
img
background-color: var(--background-color-secondary)
background-color: var(--color-bg-secondary)
border-radius: 50%
display: block
filter: grayscale(50%)

View File

@ -11,13 +11,6 @@
&:last-child
border: none
.event-name
font-size: 2vh
line-height: 1em
&.event-empty
color: rgba(var(--text-color), .5)
a
text-decoration: none !important
@ -25,7 +18,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 +26,7 @@
.event-location,
.event-category
+font-weight-bold
+fw-bold
.event-detail
.event-date
@ -41,32 +34,17 @@
content: ''
details
+padding(2, y)
transition: background-color var(--transition-speed)
@extend .box
details:not([open])
background-color: rgba(white, .33)
box-shadow: none
&:hover
background-color: rgba(white, .66)
.is-collapsed
opacity: 1
.is-collapsed
opacity: .5
transition: opacity var(--transition-speed)
+padding(3)
summary
color: var(--color-text-secondary)
+fw-normal
padding-right: 0
+font-weight-normal
color: var(--text-color-secondary)
.date
font-size: var(--font-size-small)
+margin(1, top)
opacity: .5
@extend .text-muted
.event-date a
text-decoration: none
@ -78,13 +56,13 @@
align-items: center
background-color: var(--color-info-bg)
border-radius: var(--border-radius)
box-shadow: 1px 2px 5px rgba(0, 0, 0, .1)
box-shadow: .1rem .2rem var(--spacer-1) rgba(0, 0, 0, .1)
color: var(--color-info)
content: 'UNDER REVIEW'
display: flex
font-size: 10px
+font-weight-bold
font-size: var(--fs-xs)
+fw-bold
position: absolute
padding: 2px 10px 0 10px
padding: .2rem var(--spacer-2) 0 var(--spacer-2)
top: -7px
right: -5px
right: calc(var(--spacer-1) * -1)

View File

@ -1,12 +1,12 @@
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)
.navbar-footer
align-items: center
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: flex
flex-direction: column
justify-content: space-between
@ -15,6 +15,7 @@ footer
flex-direction: row
> ul
align-items: center
+list-unstyled
display: flex
flex-direction: column
@ -43,13 +44,13 @@ footer
flex: 1
.btn
color: var(--text-color-secondary)
+font-weight-normal
color: var(--color-text-secondary)
+fw-normal
.footer-logo
margin-top: -2px
margin-top: -.2rem
svg
fill: var(--text-color-tertiary)
fill: var(--color-text-tertiary)
height: auto
max-width: 60px
max-width: var(--spacer-5)

View File

@ -1,27 +1,30 @@
$bcon-accent: #1291bd
\:root
--color-bcon-accent: #1291bd
.bcon-logo
text-shadow: none
// TODO: Revise logo img size for BCON 2024. Set sizing by height
img
max-width: 300px
max-width: 30.0rem
.bcon-date,
.bcon-place
padding: $spacer / 3
+font-weight-bold
+fw-bold
.bcon-date,
background-color: $white
color: $bcon-accent
color: var(--color-bcon-accent)
.bcon-place
background-color: $bcon-accent
background-color: var(--color-bcon-accent)
color: $white
.location-map
background-color: var(--background-color)
background-color: var(--color-bg)
border-radius: var(--border-radius)
height: 420px
height: 42.0rem
iframe
border-radius: var(--border-radius)

View File

@ -1,9 +1,9 @@
.icon
max-width: 1rem
max-width: var(--spacer)
position: relative
width: 1rem
width: var(--spacer)
*
max-width: 1rem
max-width: var(--spacer)
position: relative
width: 1rem
width: var(--spacer)

View File

@ -11,5 +11,5 @@
iframe
@extend .rounded
@extend .pt-3
height: 450px
height: 44.8rem
width: 100%

View File

@ -11,7 +11,7 @@
.message-preview-content
flex: 1
margin-left: 1rem
+margin(3, left)
opacity: .6
overflow: hidden
text-overflow: ellipsis

View File

@ -6,6 +6,10 @@ body.is-scrolled
.btn-accent
box-shadow: none
.nav-global-container
+media-lg
max-width: var(--container-width)
.navbar-nav.right
margin-right: initial
@ -24,7 +28,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 +42,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
@ -46,15 +50,15 @@ body.is-scrolled
white-space: nowrap
span
margin: -2px 0
+font-weight-bold
margin: -.2rem 0
+fw-bold
.navbar-brand
+padding(2, y)
img
@extend .img-fluid
max-height: 22px
max-height: var(--spacer-4)
image-rendering: optimize-contrast
image-rendering: -webkit-optimize-contrast
@ -66,6 +70,11 @@ body.is-scrolled
.hero .hero-content
padding-top: 0
img
height: calc(var(--spacer) * 14)
max-width: 100%
object-fit: contain
.content
position: relative
top: - var(--navbar-primary-height)
@ -88,14 +97,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

View File

@ -4,16 +4,15 @@
.board-events
color: rgba(white, .7)
font-size: 180%
font-size: var(--fs-h2)
+list-unstyled
line-height: 1
width: 100%
li
background-color: hsla(210deg, 16%, 43%, .1)
border-bottom: 3px solid hsla(210deg, 16%, 3%, .7)
display: grid
gap: 1rem
gap: var(--spacer)
grid-template-columns: 8% 60% 12% 20%
+padding(2, y)
@ -35,7 +34,7 @@
.board-e-time
color: white
+font-weight-bold
+fw-bold
.event-meta
display: flex
@ -44,7 +43,7 @@
.board-e-speakers
color: hsl(210deg, 16%, 25%)
font-size: 80%
font-size: var(--fs-h3)
.board-e-duration
+padding(2, right)
@ -84,8 +83,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)
@ -97,8 +96,7 @@
.panel-location
.board-events
color: white
font-size: 200%
line-height: 1.2
font-size: var(--fs-h1)
margin-bottom: 0
width: 100vw
@ -142,19 +140,25 @@
.board-e-time small
color: rgba(white, .5)
.board-date,
.board-e-duration,
.board-e-location,
.board-logo,
.board-e-name,
.board-e-time
line-height: calc(var(--spacer) * 2.5)
.board-e-duration
font-size: 85%
font-size: var(--fs-h3)
white-space: nowrap
.board-e-name
line-height: 1.1
.board-e-speakers
line-height: calc(var(--spacer) * 2)
+margin(2, top)
.board-logo
img
max-height: 1.8rem
max-height: calc(var(--spacer) * 2)
.panel-social
column-count: 3
@ -168,22 +172,22 @@
align-content: center
background-image: linear-gradient(45deg, hsl(197, 100%, 37%), hsl(197, 100%, 67%))
border-radius: var(--border-radius)
box-shadow: inset 0 -2px 0 0 black
box-shadow: inset 0 -.2rem 0 0 black
+margin(1)
display: flex
justify-content: space-between
text-shadow: 1px 1px 3px rgba(black, .2), 2px 2px 20px rgba(black, .2)
text-shadow: .1rem .1rem var(--spacer-1) rgba(black, .2), .2rem .2rem 2.0rem rgba(black, .2)
ul
background-color: hsl(0, 0%, 5%)
column-count: 2
column-gap: 2px
column-gap: .2rem
+list-unstyled
margin: 0
padding: 0
.social-tweet
border-bottom: 2px solid black
border-bottom: .2rem solid black
border-radius: var(--border-radius-lg)
break-inside: avoid
color: hsl(210deg, 16%, 84%)
@ -200,7 +204,7 @@
color: white
.tw-media img
box-shadow: 0 0 5px 0 rgba(black, .2)
box-shadow: 0 0 var(--spacer-1) 0 rgba(black, .2)
img
max-height: 40vh
@ -221,8 +225,8 @@
img
border-radius: var(--border-radius-lg)
min-width: 28px
width: 28px
min-width: calc(var(--spacer) * 2)
width: calc(var(--spacer) * 2)
.tw-date
margin-left: auto
@ -230,7 +234,7 @@
.tw-header
display: flex
font-size: var(--font-size-small)
font-size: var(--fs-sm)
.tw-author,
.tw-screen_name

View File

@ -3,7 +3,6 @@ $col-time-width: 8%
.schedule-container
.event-speakers
+margin(1, y)
line-height: 16px
.schedule-container+footer
margin-top: 0
@ -11,7 +10,12 @@ $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)
.btn-toggle
&.is-active
@extend .btn
@extend .btn-primary
+media-xs
+padding(0, y)
@ -26,20 +30,20 @@ $col-time-width: 8%
align-items: baseline
.btn-group
gap: .33rem
gap: var(--spacer-1)
.btn-toggle
border-radius: var(--border-radius)
.schedule-filter-title
color: var(--text-color-secondary)
font-size: var(--font-size-small)
color: var(--color-text-secondary)
font-size: var(--fs-sm)
.schedule-filters
display: flex
flex-direction: column
flex-wrap: wrap
gap: .33rem
gap: var(--spacer-1)
@include media-breakpoint-up(lg)
flex-direction: row
@ -57,23 +61,23 @@ $col-time-width: 8%
&.toggle
i
border-radius: 5px
border-radius: var(--spacer)
background-color: white
color: currentColor
height: 14px
height: var(--spacer)
+margin(1, right)
position: relative
transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed)
width: 14px
width: var(--spacer)
&:before
font-weight: bold
left: -5px
left: calc(var(--spacer-1) * -1)
opacity: 0
transform: scale(0)
position: relative
transition: opacity ease-in-out var(--transition-speed), transform ease-in-out var(--transition-speed)
top: -5px
top: calc(var(--spacer-1) * -1)
input:checked
&~label i
@ -131,15 +135,15 @@ $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
gap: var(--spacer-1)
+padding(2, y)
position: sticky
top: 0
@ -150,7 +154,7 @@ $col-time-width: 8%
body.is-scrolled
.schedule-day-toggles
box-shadow: 0 10px 30px rgba(black, .1)
box-shadow: 0 var(--spacer) calc(var(--spacer) * 2) rgba(black, .1)
position: fixed
.days-header
@ -169,7 +173,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 +186,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
@ -217,8 +221,8 @@ body.is-scrolled
.row-rulers-lg
@include media-breakpoint-up(lg)
border-top: var(--border-width) solid rgba(black, .05)
+padding(3, y)
border-top: calc(var(--border-width) * 2) solid rgba(black, .05)
.col-rulers
+padding(3, x)
@ -254,8 +258,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 +282,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,24 +293,25 @@ 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
/* Vertical schedule scrolls to this during conference days. */
.time-line-break
scroll-margin-top: 3.33rem
scroll-margin-top: calc(var(--spacer) * 2)
+media-lg
scroll-margin-top: 5.66rem
scroll-margin-top: calc(var(--spacer) * 3.5)
.time-header-lg
@extend .col-time
@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,16 +333,16 @@ 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
@extend .row-rulers
@extend .row-rulers-lg
scroll-margin-top: 3.33rem
scroll-margin-top: calc(var(--spacer) * 2)
+media-lg
scroll-margin-top: 6.33rem
scroll-margin-top: calc(var(--spacer) * 4)
&[data-completely-no-events]
display: none
@ -359,23 +364,23 @@ 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 var(--spacer-1) 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
height: var(--spacer-1)
left: -50%
position: absolute
top: -3px
top: calc(var(--spacer-1) * -1)
transform: translateX(-50%)
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 +396,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 +461,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 var(--spacer-1) var(--spacer) var(--color-accent-bg-hover), 0 0 2.0rem rgba(white, .5)
.event-name
color: black
@ -468,13 +473,13 @@ body.is-scrolled
visibility: visible
&.is-overlapping
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.35), 0px 15px 20px -1px rgba(0,0,0,0.025)
top: 10px
box-shadow: 0 .1rem var(--spacer-1) 0 rgba(0,0,0,0.35), 0 var(--spacer) 2.0rem -.1rem rgba(0,0,0,0.025)
top: var(--spacer-2)
&+.is-overlapping
top: 20px
top: 2.0rem
.event-name
line-height: 22px
line-height: var(--spacer-4)
text-wrap: balance
.event-details
@ -492,7 +497,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
@ -510,7 +515,8 @@ body.is-scrolled
display: none
+media-xl
--thumbnail-width: 150px
--thumbnail-width: 15.0rem
border-bottom-left-radius: var(--border-radius-lg)
border-top-left-radius: var(--border-radius-lg)
border-top-right-radius: 0
@ -537,25 +543,26 @@ body.is-scrolled
opacity: .25
.event-border
background-color: var(--background-color)
border-radius: 99rem
background-color: var(--color-bg)
border-radius: calc(var(--spacer) * 10)
+margin(2, top)
height: 4px
height: var(--spacer-1)
position: absolute
width: 100%
.event-header
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: flex
flex-wrap: wrap
font-size: var(--font-size-small)
font-size: var(--fs-sm)
+margin(1, bottom)
.event-description
align-items: center
display: flex
flex-wrap: wrap
gap: .5rem
gap: var(--spacer-1)
line-height: var(--spacer-4)
+list-unstyled
margin-bottom: 0
width: 100%
@ -578,19 +585,19 @@ body.is-scrolled
background-color: red
border-radius: 50%
display: none
height: 12px
left: .25rem
height: 1.2rem
left: var(--spacer-1)
position: absolute
top: .25rem
top: var(--spacer-1)
visibility: hidden
width: 12px
width: 1.2rem
.event-speakers
color: var(--text-color-secondary)
color: var(--color-text-secondary)
.event-tags
color: var(--text-color-secondary)
gap: 1rem
color: var(--color-text-secondary)
gap: var(--spacer)
.event-category
&-workshop, &-tutorial
@ -611,12 +618,12 @@ body.is-scrolled
/* Horizontal display. */
.schedule-container.horizontal
--channel-height: 124px
--channel-separator: 2px solid hsla(210deg, 16%, 43%, .2)
--channel-height: calc(var(--spacer) * 9)
--channel-separator: .2rem solid hsla(210deg, 16%, 43%, .2)
--time-slots-height: 40px
--time-line-hour: 6px 0 0 0 hsla(210deg, 16%, 43%, .1)
--time-line-halfhour: 2px dotted hsla(210deg, 16%, 43%, .2)
--time-slots-height: calc(var(--spacer) * 2.5)
--time-line-hour: .6rem 0 0 0 hsla(210deg, 16%, 43%, .1)
--time-line-halfhour: .2rem dotted hsla(210deg, 16%, 43%, .2)
left: 0
overflow: hidden
@ -679,7 +686,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
@ -724,7 +731,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)
@ -747,17 +754,17 @@ 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
strong
left: 1rem
left: var(--spacer)
position: sticky
/* 30min mark on each hour. */

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

View File

@ -1,16 +1,16 @@
.sponsors-container
--sponsor-level-1-max-size: 300px
--sponsor-level-2-max-size: 265px
--sponsor-level-3-max-size: 215px
--sponsor-level-1-max-size: calc(var(--spacer) * 18.75)
--sponsor-level-2-max-size: calc(var(--spacer) * 16.75)
--sponsor-level-3-max-size: calc(var(--spacer) * 13.5)
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
p
color: var(--text-color-secondary)
color: var(--color-text-secondary)
max-width: 500px
+margin(auto, x)
+margin(4, bottom)
@ -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
@ -37,7 +37,7 @@
display: block
height: var(--border-width)
position: absolute
top: 15px
top: var(--spacer)
width: 50%
&:after

View File

@ -50,7 +50,7 @@
content: ' '
=box-shadow-card
box-shadow: rgba(0,0,0,0.05) 0px 1px 4px 0px, rgba(0,0,0,0.025) 0px 15px 20px -1px
box-shadow: rgba(0,0,0,0.05) 0 .1rem var(--spacer-1) 0, rgba(0,0,0,0.025) 0 var(--spacer) 2.0rem -.1rem
=box-card
+box-shadow-card
@ -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
@ -155,28 +155,28 @@
=list-bullets
ul
padding-left: 20px
padding-left: 2.0rem
list-style: none
li:before
content: '·'
font-weight: 400
position: relative
left: -10px
left: -1.0rem
@mixin button($background-color, $text-color, $filled: false, $type: false)
background-color: transparent
border: none
border-radius: var(--border-radius-lg)
box-shadow: inset 0 0 0 2px $text-color
box-shadow: inset 0 0 0 .2rem $text-color
color: $text-color !important
display: inline-block
padding:
bottom: 7px
left: 20px
right: 20px
top: 7px
bottom: var(--spacer-2)
left: 2.0rem
right: 2.0rem
top: var(--spacer-2)
position: relative
text-decoration: none !important
transition: color 250ms ease-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out
@ -184,24 +184,24 @@
@if $filled
background-color: $background-color
box-shadow: inset 0 0 0 2px darken($background-color, 6%)
box-shadow: inset 0 0 0 .2rem darken($background-color, 6%)
&:focus
color: white !important
&:hover
background-color: rgba($background-color, .1)
box-shadow: inset 0 0 0 2px lighten($text-color, 10%)
box-shadow: inset 0 0 0 .2rem lighten($text-color, 10%)
color: lighten($text-color, 5%)
cursor: pointer
text-decoration: none
@if $filled
background-color: lighten($background-color, 10%)
box-shadow: inset 0 0 0 1px lighten($background-color, 5%)
box-shadow: inset 0 0 0 .1rem lighten($background-color, 5%)
&:active, &:focus
box-shadow: inset 0 0 0 1px lighten($background-color, 10%)
box-shadow: inset 0 0 0 .1rem lighten($background-color, 10%)
background-color: rgba($background-color, .3)
color: hsl(hue($text-color), 100%, 85%)
@ -214,11 +214,11 @@
i
display: inline-block
margin-right: 10px
min-width: 16px
+margin(2, right)
min-width: var(--spacer)
svg
max-width: 12px
max-width: 1.2rem
small
font-size: .6em
@ -232,8 +232,8 @@
=input-text-generic
border: thin solid $gray-600
border-radius: 3px
padding: 10px
border-radius: var(--spacer-1)
+padding(2)
=inputs-generic
textarea,

View File

@ -1,28 +1,28 @@
.btn {
background: rgba(black, .25);
border: 2px solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5);
border: .2rem solid $neon-green;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
border-color: $neon-green!important;
color: white;
&:hover, &:focus, &:active{
background: rgba(black, .25);
background-color:rgba(black, .25)!important;
border-color: $neon-green!important;
box-shadow: 0px 0px 15px 0px rgba($neon-green-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-green-glow, 0.75)!important;
box-shadow: 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75)!important;
text-decoration: none;
border: 2px solid $neon-green;
border: .2rem solid $neon-green;
}
&.btn-secondary {
border-color: $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5);
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
border-color: $neon-pink!important;
&:hover, &:focus, &:active{
background: rgba(black, .25)!important;
background-color:rgba(black, .25)!important;
border-color: $neon-pink!important;
box-shadow: 0px 0px 15px 0px rgba($neon-pink-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-pink-glow, 0.75)!important;
box-shadow: 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75)!important;
text-decoration: none;
border: 2px solid $neon-pink;
border: .2rem solid $neon-pink;
}
}
}

View File

@ -1,7 +1,7 @@
.card {
background: rgba(black, 0.25);
border: 2px solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5);
border: .2rem solid $neon-green;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
color: white;
a {
@ -13,8 +13,8 @@
}
&.card-yellow {
border: 2px solid $neon-yellow;
box-shadow: -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5);
border: .2rem solid $neon-yellow;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5);
a {
&:not(.btn) {
&:hover {
@ -25,8 +25,8 @@
}
&.card-pink {
border: 2px solid $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5);
border: .2rem solid $neon-pink;
box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
a {
&:not(.btn) {
&:hover {

View File

@ -1,11 +1,11 @@
.full-height-header{
height: calc(100vh - 40px);
height: calc(100vh - var(--spacer) * 2.5);
}
.jumbotron{
background-attachment: fixed;
background-position: top center;
padding: 90px 0 0;
padding: 9.0rem 0 0;
.container{
height: 100%;
}
@ -13,13 +13,13 @@
display: flex;
justify-content: flex-end;
flex-direction: column;
min-height: 90px;
min-height: 9.0rem;
background-position: top center;
.hero-overlay{
background-position: top center;
}
h1{
margin-top: 125px;
margin-top: calc(var(--spacer) * 8);
}
}
}

View File

@ -24,9 +24,9 @@ body{
.text-highlight{
color: $neon-yellow;
font-size: 36px;
font-size: var(--fs-h1);
font-weight: 300;
text-shadow: -5px 5px 9px $neon-yellow-glow;
text-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) $neon-yellow-glow;
}
.event-header{

View File

@ -17,13 +17,13 @@ body
.dz-preview
position: relative
display: inline-block
width: 120px
width: calc(var(--spacer) * 7.5)
margin: 0.5em
.dz-progress
display: block
height: 15px
border: 1px solid #aaa
height: var(--spacer)
border: .1rem solid #aaa
.dz-upload
display: block
@ -45,11 +45,11 @@ body
.dz-error-mark, .dz-success-mark
position: absolute
display: none
top: 30px
width: 54px
height: 58px
top: calc(var(--spacer) * 2)
width: 5.4rem
height: 5.8rem
left: 50%
margin-left: -27px
margin-left: calc(var(--spacer) * -2)
#photo-upload
width: 100vw

View File

@ -1,35 +1,7 @@
$font-path: '/static/assets/fonts'
// Import variables.
@import "../../../../assets_shared/src/styles/_media_queries.sass"
@import "../../../../assets_shared/src/styles/_variables.sass"
@import "../../../../assets_shared/src/styles/_mixins.sass"
// Import complete Bootstrap.
@import "../../../../assets_shared/src/styles/bootstrap/bootstrap.scss"
@import "../../../../assets_shared/src/styles/_utilities.sass"
@import "../../../../assets_shared/src/styles/_fonts.sass"
@import "../../../../assets_shared/src/styles/_bootstrap_overrides.sass"
@import "../../../../assets_shared/src/styles/_alert.sass"
@import "../../../../assets_shared/src/styles/_badge.sass"
@import "../../../../assets_shared/src/styles/_base.sass"
@import "../../../../assets_shared/src/styles/_box.sass"
@import "../../../../assets_shared/src/styles/_button.sass"
@import "../../../../assets_shared/src/styles/_cards.sass"
@import "../../../../assets_shared/src/styles/_code.sass"
@import "../../../../assets_shared/src/styles/_details.sass"
@import "../../../../assets_shared/src/styles/_footer.sass"
@import "../../../../assets_shared/src/styles/_forms.sass"
@import "../../../../assets_shared/src/styles/_hero.sass"
@import "../../../../assets_shared/src/styles/_list.sass"
@import "../../../../assets_shared/src/styles/_navigation.sass"
@import "../../../../assets_shared/src/styles/_navigation_global.scss"
@import "../../../../assets_shared/src/styles/_sidebar.sass"
@import "../../../../assets_shared/src/styles/_table.sass"
@import "../../../../assets_shared/src/styles/_type.sass"
// Import Web Assets.
@import "../../../../assets_shared/src/styles/main.sass"
@import "_albums.sass"
@import "_attendee.sass"
@ -46,13 +18,12 @@ $font-path: '/static/assets/fonts'
@import "_utils.sass"
\:root
--body-bg: #e9ecef
--background-color: var(--body-bg)
--body-color-bg: #e9ecef
--color-bg: var(--body-color-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%)
@ -62,10 +33,10 @@ $font-path: '/static/assets/fonts'
--color-cat-panel-bg: hsl(58deg, 40%, 86%)
--color-cat-roundtable: hsl(203deg, 19%, 55%)
--page-with-header-content-offset: 10rem
--page-with-header-content-offset: calc(var(--spacer) * 10)
+media-sm
--page-with-header-content-offset: 8rem
--page-with-header-content-offset: calc(var(--spacer) * 8)
body.is-scrolled
.navbar
@ -80,13 +51,13 @@ body.is-scrolled
z-index: 1
.hero-compact
max-height: 180px
max-height: calc(var(--spacer) * 11.25)
min-height: initial
.btn-float-right
position: absolute
right: 2rem
top: 1rem
right: calc(var(--spacer) * 2)
top: var(--spacer)
z-index: var(--zindex-fixed)
.video-container
@ -138,7 +109,7 @@ button.favorite-star
button.going-star
&:hover, &[data-is-checked]
+font-weight-bold
+fw-bold
color: var(--color-success)
i
@ -146,20 +117,20 @@ button.going-star
.vote-stars-login
@extend .btn
padding: 0.3rem !important
margin-bottom: 0.5rem
+margin(1, bottom)
padding: var(--spacer-1) !important
.favorite-star-login
@extend .btn
padding: 0.3rem $spacer !important
margin-bottom: 0.5rem
+margin(1, bottom)
padding: var(--spacer-1) $spacer !important
.vote-stars
// We use flex and order to arrange the stars in the right order. This is
// needed because CSS only has a preceded by selector whereas we need a
// succeeded by selector to show shadow for all preceding stars.
display: inline-flex
color: #f5cc27 !important
color: var(--color-text-secondary) !important
@for $i from 1 through 5
.vote-star[data-rating="#{$i}"]
@ -195,21 +166,16 @@ button.going-star
background: rgba(0, 0, 0, 0.5)
.hero-content
+padding(5, top)
position: relative
z-index: 10
padding-top: 5rem
.flatpage
+padding(3)
+media-sm
+padding(5)
img
border-radius: var(--border-radius)
.badge
+font-weight-bold
+fw-bold
&.status-submitted
--badge-bg: hsla(42deg, 100%, 50%, .15)
@ -242,3 +208,36 @@ button.going-star
.form-submit-dl
dd
font-family: var(--font-family-body)
dt
line-height: var(--spacer-4)
/* Apply Web Assets v2 form-control styles to custom rendered classes. */
.form-control
&.custom-file
+padding(0)
.custom-file-input,
.form-control-file
@extend .form-control
.custom-file-label
display: none
/* Web Assets overrides. */
// TODO: check component forms in Web Assets v2
.form-group
display: block
.form-check
+padding(5, left)
.form-check-input
transform: scale(1.5) translateX(calc(var(--spacer) * -1))
// TODO: check and cleanup style definition in Web Assets
.table-no-box
tr
td
padding-left: var(--spacer) !important
padding-right: var(--spacer) !important

View File

@ -23,8 +23,7 @@
| {% endblock sidebar %}
.col-md-9
.card
.card-body
| {% block content_main %}
| {% endblock content_main %}
.box
| {% block content_main %}
| {% endblock content_main %}
| {% endblock content %}

View File

@ -30,10 +30,10 @@ nav.nav-global(role='navigation')
| {% if '/tickets/overview/' not in request.path %}
| {# We have to compare strings, because Django can't handle enum values in templates #}
| {% if edition and edition.ticket_sale_status == 'open' %}
li.mr-2
a.btn.btn-accent.text-white(href="{% url 'tickets:products-table' %}")
li.d-lg-inline-flex.d-none
a.btn.btn-accent(href="{% url 'tickets:products-table' %}")
i.i-ticket
span Buy Tickets
span Buy tickets
| {% endif %}
| {% endif %}

View File

@ -6,26 +6,25 @@
| {% block jumbotron %}
.hero.is-container-overlap
.container
.hero-content.text-center
.hero-content
{% if edition.logo %}
img.d-block.mx-auto.img-fluid(src="{{ edition.logo.url }}", alt="{{ edition.title }}")
img.d-block.mb-3.mx-auto.img-fluid(src="{{ edition.logo.url }}", alt="{{ edition.title }}")
{% else %}
img.d-block.mx-auto.img-fluid(src="{% static 'images/BCON_logo.svg' %}", alt="{{ edition.title }}")
img.d-block.mb-3.mx-auto.img-fluid(src="{% static 'images/BCON_logo.svg' %}", alt="{{ edition.title }}")
{% endif %}
{% if edition.date_start %}
h2.mt-3 {{ edition.date_start | date:'d' }}-{{ edition.date_end | date:'d M, Y' }}
h2.mx-auto.text-center {{ edition.date_start | date:'d' }}-{{ edition.date_end | date:'d M, Y' }}
{% endif %}
{% if edition.location %}
h3 {{ edition.location }}
.hero-subtitle.mx-auto.text-center {{ edition.location }}
{% endif %}
{% if edition.header %}
.hero-background(style="background-image: url({{ edition.header.url }})")
{% else %}
.hero-background(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
.hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%")
{% endif %}
.hero-overlay
| {% endblock jumbotron %}
| {% endblock header %}
@ -34,10 +33,9 @@
.container
.row
.col
.card
.card-body
| {% block content_main %}
| {% endblock content_main %}
.box.p-3.p-sm-5
| {% block content_main %}
| {% endblock content_main %}
| {% endblock content %}
| {% block javascript-extra %}

View File

@ -10,8 +10,7 @@
.container.mt-3
.row
.col
.card.p-3
.card-body
| {% block content_main %}
| {% endblock content_main %}
.box.p-3.p-sm-5
| {% block content_main %}
| {% endblock content_main %}
| {% endblock content %}

View File

@ -24,8 +24,7 @@
| {% endblock sidebar %}
.col-md-9
.card.p-3
.card-body
| {% block content_main %}
| {% endblock content_main %}
.box.p-3
| {% block content_main %}
| {% endblock content_main %}
| {% endblock content %}

View File

@ -26,27 +26,29 @@ section
data-target="#message-{{ message.message.id }}",
id="message-{{ message.message.id }}")
span(style="opacity: .4").mr-2 {{ forloop.counter }}.
span.me-2.text-muted {{ forloop.counter }}.
span {{ message.message.user.profile }}
span.message-preview-content {{ message.message.content|truncatechars:80 }}
span.ml-auto
| {% if message.message.user.is_staff %}
span.badge.badge-admin.mr-2(title="BCON staff")
span.badge.badge-admin.me-2(title="BCON staff")
i.i-bcon
span Staff
| {% endif %}
| {% if message.message.user.id == object.user.id %}
span.badge.badge-info.mr-2(title="Proposal Author")
span.badge.badge-info.me-2(title="Proposal Author")
i.i-mic
span Proposal Author
| {% endif %}
| {% if request.user.is_superuser %}
a.px-3(href="{% url 'admin:conference_main_message_change' message.pk %}")
small Edit
small
span.me-1 Edit
i.i-edit
| {% endif %}
a.date(

View File

@ -3,22 +3,25 @@
| {% block content_main %}
h2 My Festival Submissions
| {% if object_list %}
table.table-no-box
tbody
| {% for o in object_list %}
tr
td(style="width: 4ch; padding-right: 0")
span.text-muted {{ o.edition.year }}
td(style="width: 4ch;")
span.text-muted.text-nowrap {{ o.edition.year }}
td
a(href="{% url 'festival_entry_detail' edition_path=o.edition.path pk=o.pk %}")
| {{ o.title }}
a(href="{% url 'festival_entry_detail' edition_path=o.edition.path pk=o.pk %}") {{ o.title }}
td.text-right
span.badge.badge-secondary(
class="status-{{o.status }}"
)
| {% if o.status == 'rejected' %}NOT ACCEPTED{% else %}{{o.status | upper }}{% endif %}
| {% empty %}
| Your Suzanne Awards Festival entries will show up here.
| {% endfor %}
span.badge.badge-secondary(class="status-{{ o.status }}")
| {% if o.status == 'rejected' %}
| NOT ACCEPTED
| {% else %}
| {{o.status | upper }}
| {% endif %}
| {% endfor %}
| {% else %}
div Your Suzanne Awards Festival entries will show up here.
| {% endif %}
| {% endblock content_main %}

View File

@ -19,49 +19,47 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.container.mt-3
.row
.col
.card.mb-3
.card-body
| {% if permissions.can_change %}
.event-detail-header
//- Status.
.row
.col-8
.d-flex
div
small.text-muted.d-block Submitted on
span(title="{{ object.created_at | date:'D d M, Y @ H:i' }}")
| {{ object.created_at | date:'l d M, Y' }}
.box.mb-3
| {% if permissions.can_change %}
//- Status.
.row
.col-8
.d-flex
div
small.text-muted.d-block Submitted on
span(title="{{ object.created_at | date:'D d M, Y @ H:i' }}")
| {{ object.created_at | date:'l d M, Y' }}
| {% if object.category %}
div.ml-4
small.text-muted.d-block Category
span
| {{ object.category | title }}
| {% if object.category %}
div.ml-4
small.text-muted.d-block Category
span
| {{ object.category | title }}
| {% endif %}
div.ml-4
small.text-muted.d-block Status
span.badge.badge-primary(class="status-{{ object.status }}")
| {% if object.status == 'rejected' %}NOT ACCEPTED{% else %}{{ object.status | upper }}{% endif %}
.col-4
.d-flex
.ml-auto
.btn-row
a.btn(
href="{% url 'festival_entry_update' edition_path=object.edition.path pk=object.pk %}")
i.i-edit
span Edit Submission
| {% if request.user.is_superuser %}
a.btn.btn-admin(
href="{% url 'admin:conference_main_festivalentry_change' object.pk %}")
| Admin
| {% endif %}
div.ml-4
small.text-muted.d-block Status
span.badge.badge-primary(class="status-{{ object.status }}")
| {% if object.status == 'rejected' %}NOT ACCEPTED{% else %}{{ object.status | upper }}{% endif %}
.col-4
.d-flex
.ml-auto
.btn-row
a.btn(
href="{% url 'festival_entry_update' edition_path=object.edition.path pk=object.pk %}")
i.i-edit
span Edit Submission
| {% if request.user.is_superuser %}
a.btn.btn-admin(
href="{% url 'admin:conference_main_festivalentry_change' object.pk %}")
| Admin
| {% endif %}
| {% endif %}
.p-4
.d-flex
h2 {{ object.title }}
h2.me-2 {{ object.title }}
.ml-auto
| {% if not user.is_authenticated %}

View File

@ -8,10 +8,10 @@ table.table-no-box
tbody
| {% for o in object_list %}
tr
td(style="width: 4ch; padding-right: 0")
span.text-muted {{ o.edition.year }}
td(style="width: 4ch;")
span.text-muted.text-nowrap {{ o.edition.year }}
td
a(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}")
a.px-0(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}")
| {{ o.name }}
td.text-right
span.badge.badge-primary(

View File

@ -34,83 +34,80 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.row
.col
.card.mb-3
.card-body
| {% if permissions.can_change %}
.event-detail-header
.row
.col-sm-8
| {% include "conference_main/components/review_header_details.pug" %}
.col-sm-4
.d-flex
.ml-auto
.btn-row.justify-content-end
a.btn(
href="{% url 'presentation_update' edition_path=object.edition.path pk=object.pk %}")
i.i-edit
span Edit
a.btn(
href="{% url 'presentation_review' edition_path=object.edition.path pk=object.pk %}")
i.i-comment
span Review
| {% if request.user.is_superuser %}
a.btn.btn-admin(
href="{% url 'admin:conference_main_event_change' object.pk %}")
| Admin
| {% endif %}
.box.mb-3.p-3
| {% if permissions.can_change %}
.mb-3.row
.col-sm-8
| {% include "conference_main/components/review_header_details.pug" %}
.col-sm-4
.d-flex
.ml-auto
.btn-row.justify-content-end
a.btn(
href="{% url 'presentation_update' edition_path=object.edition.path pk=object.pk %}")
i.i-edit
span Edit
a.btn(
href="{% url 'presentation_review' edition_path=object.edition.path pk=object.pk %}")
i.i-comment
span Review
| {% if request.user.is_superuser %}
a.btn.btn-admin(
href="{% url 'admin:conference_main_event_change' object.pk %}")
| Admin
| {% endif %}
| {% endif %}
.p-3
| {% if object.recording %}
.video-container
| {{ object.recording | oembed }}
| {% if object.recording %}
.video-container
| {{ object.recording | oembed }}
| {% endif %}
.row.mb-3
| {% if object.picture and not object.recording %}
.col-md-4
| {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %}
a(href="{{ picture.url }}", target="_blank")
img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}")
| {% endthumbnail %}
| {% endif %}
div(class="col-md-{% if object.picture and not object.recording %}8{% else %}12{% endif %}")
| {% if object.day and object.time %}
.event-header.mb-3
ul.event-description
| {% if object.location.slug %}
li.event-location(
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, 35%);")
| {{ object.location.slug | upper }}
| {% endif %}
| {% if object.category %}
li.event-category
| {{ object.category | upper }}
| {% endif %}
| {% if object.duration_minutes %}
li.event-duration
| {{ object.duration_minutes }} min
| {% endif %}
| {% if object.day.date and object.time %}
li.event-date
a(href="{% url 'schedule' edition_path=edition.path %}#event-{{ object.id }}")
| {{ object.day.date | date:'l dS M' }} {{ object.time | time:'H:i' }}
| {% endif %}
li.divider
| {% include "conference_main/components/event_buttons.pug" with event=object show_favorite=True %}
| {% endif %}
.row.mb-3
| {% if object.picture and not object.recording %}
.col-md-4
| {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %}
a(href="{{ picture.url }}", target="_blank")
img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}")
| {% endthumbnail %}
| {% endif %}
h2 {{ object.name }}
div(class="col-md-{% if object.picture and not object.recording %}8{% else %}12{% endif %}")
| {% if object.day and object.time %}
.event-header.mb-3
ul.event-description
| {% if object.location.slug %}
li.event-location(
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, 35%);")
| {{ object.location.slug | upper }}
| {% endif %}
| {% if object.category %}
li.event-category
| {{ object.category | upper }}
| {% endif %}
| {% if object.duration_minutes %}
li.event-duration
| {{ object.duration_minutes }} min
| {% endif %}
| {% if object.day.date and object.time %}
li.event-date
a(href="{% url 'schedule' edition_path=edition.path %}#event-{{ object.id }}")
| {{ object.day.date | date:'l dS M' }} {{ object.time | time:'H:i' }}
| {% endif %}
li.divider
| {% include "conference_main/components/event_buttons.pug" with event=object show_favorite=True %}
| {% endif %}
h2 {{ object.name }}
| {% if object.description %}
div {{ object.description | urlizetrunc:40 | linebreaks }}
| {% endif %}
| {% if object.description %}
div {{ object.description | urlizetrunc:40 | linebreaks }}
| {% endif %}
.row.mb-4
.col-md-12

View File

@ -8,8 +8,8 @@ table.table-no-box
tbody
| {% for o in events %}
tr
td(style="width: 4ch; padding-right: 0")
span.text-muted {{ o.edition.year }}
td(style="width: 4ch;")
span.text-muted.text-nowrap {{ o.edition.year }}
td
a(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}")
| {{ o.name }}

View File

@ -61,41 +61,38 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.col-lg-6
h5.text-uppercase.text-muted
| Description
.card.mb-3
.card-body
.p-3
| {% if object.recording %}
.video-container
| {{ object.recording | oembed }}
.box.mb-3.p-3
| {% if object.recording %}
.video-container
| {{ object.recording | oembed }}
| {% endif %}
.row
| {% if object.picture and not object.recording %}
.col-md-3
| {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %}
a(href="{{ picture.url }}")
img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}")
| {% endthumbnail %}
| {% endif %}
.row
| {% if object.picture and not object.recording %}
.col-md-3
| {% thumbnail object.picture "480x270" crop="50%" format="JPEG" as picture %}
a(href="{{ picture.url }}")
img.rounded.img-fluid(src='{{ picture.url }}', alt="{{ object.name }}")
| {% endthumbnail %}
div(class="col-md-{% if object.picture and not object.recording %}9{% else %}12{% endif %}")
h3.mb-3 {{ object.name }}
| {% if object.description %}
div {{ object.description | urlizetrunc:40 | linebreaks }}
| {% endif %}
div(class="col-md-{% if object.picture and not object.recording %}9{% else %}12{% endif %}")
h3.mb-3 {{ object.name }}
| {% if object.description %}
div {{ object.description | urlizetrunc:40 | linebreaks }}
.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 %}
.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 %}
.row.mb-4
.col-md-12
@ -131,7 +128,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% endif %}
| {% endif %}
.row
.ps-0.row
.col-md-12
| {% include 'conference_main/components/attendee.pug' with profile=speaker size="medium" show_links=True show_admin=True is_landscape=True %}
@ -148,13 +145,13 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% if request.user.is_superuser %}
| {% 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
tbody
| {% for o in speaker.other_events %}
tr
td(style="width: 4ch; padding-right: 0")
td(style="width: 4ch;")
span.text-muted {{ o.edition.year }}
td
a(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}")

View File

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

View File

@ -17,7 +17,7 @@ a.btn.float-right.d-inline(href="{% url 'profile_detail' pk=user.profile.pk %}")
| so that we can have your badge ready for you at the registration desk.
form(action="{% url 'profile_update' %}", method="post", enctype="multipart/form-data")
.form-group
.form-group.form-group-profile
| {% csrf_token %}
| {{ form | crispy }}

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 %}

View File

@ -54,8 +54,6 @@ class DateTimeOverrideMixin(View):
current_timestamp = datetime.datetime.now(tz=tz.gettz('Europe/Amsterdam'))
# Define to debug
# current_timestamp = datetime.datetime(2023, 10, 27, 10, 30, 0, tzinfo=tz.gettz('Europe/Amsterdam'))
if self.timestamp_overrides.day is not None:
current_timestamp = current_timestamp.replace(day=self.timestamp_overrides.day)

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>

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>

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" %}

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.

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);
}

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">

View File

@ -27,7 +27,7 @@
{% else %}
{% for product in products %}
<div class="col-md-6">
<div class="card d-flex flex-column p-3 w-100">
<div class="box d-flex flex-column p-3 w-100">
<div>
<h3>{{ product.name }}</h3>
<hr>
@ -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

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">

View File

@ -3,26 +3,31 @@
{% block content_main %}
<h2>Tickets</h2>
<table class="table table-no-box">
<tbody>
{% for ticket in object_list %}
{% url 'tickets:detail' ticket_token=ticket.token as detail_url %}
<tr>
{% is_claimed_by ticket request.user as clamed %}
<td>
<a href="{{ detail_url }}">
{{ ticket.edition }} ({{ ticket.sku }})
{% if clamed %}
(claimed by you)
{% endif %}
</a>
</td>
<td><a href="{{ detail_url }}">{% include "tickets/components/pill_payment_status.html" %}</a></td>
<td>{% include "tickets/ticket_detail_invoice.html" %}</td>
</tr>
{% empty %}
No tickets yet.
{% endfor %}
</tbody>
</table>
{% if object_list %}
<table class="table table-no-box">
<tbody>
{% for ticket in object_list %}
{% url 'tickets:detail' ticket_token=ticket.token as detail_url %}
<tr>
{% is_claimed_by ticket request.user as clamed %}
<td>
<a class="px-0" href="{{ detail_url }}">
{{ ticket.edition }} ({{ ticket.sku }})
{% if clamed %}
(claimed by you)
{% endif %}
</a>
</td>
<td><a class="px-0" href="{{ detail_url }}">{% include "tickets/components/pill_payment_status.html" %}</a></td>
<td>{% include "tickets/ticket_detail_invoice.html" %}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div>
No tickets yet.
</div>
{% endif %}
{% endblock %}