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 +520 -520
47 changed files with 520 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitmodules vendored
View File

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

2
assets_shared

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

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

@ -29,7 +29,7 @@
.album-info .album-info
@extend .p-4 @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 bottom: 0
color: $white color: $white
left: 0 left: 0
@ -45,7 +45,7 @@
top: 0 top: 0
.album-upload-container .album-upload-container
background-color: var(--background-color) background-color: var(--color-bg)
position: relative position: relative
header header
@ -63,7 +63,7 @@
.dropzone .dropzone
align-items: center align-items: center
background-color: var(--background-color-alt) background-color: var(--color-bg-alt)
color: white color: white
display: flex display: flex
justify-content: center justify-content: center
@ -72,7 +72,7 @@
background: transparent background: transparent
.album-container-fullscreen .album-container-fullscreen
background-color: var(--background-color-alt) background-color: var(--color-bg-alt)
height: 100% height: 100%
header header

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

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

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

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

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

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

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

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

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

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

2
conference_main/static/conference_main/styles/_live.sass
View File

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

2
conference_main/static/conference_main/styles/_messages.sass
View File

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

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

@ -6,6 +6,10 @@ body.is-scrolled
.btn-accent .btn-accent
box-shadow: none box-shadow: none
.nav-global-container
+media-lg
max-width: var(--container-width)
.navbar-nav.right .navbar-nav.right
margin-right: initial margin-right: initial
@ -24,7 +28,7 @@ body.is-scrolled
display: flex display: flex
.navbar-mobile .navbar-mobile
background-color: var(--background-color) background-color: var(--color-bg)
.nav-icon i .nav-icon i
transform: scale(1.33) transform: scale(1.33)
@ -38,7 +42,7 @@ body.is-scrolled
color: var(--navbar-color) color: var(--navbar-color)
display: flex display: flex
flex-direction: column flex-direction: column
font-size: var(--font-size-extra-small) font-size: var(--fs-xs)
line-height: 1.5 line-height: 1.5
+padding(3, x) +padding(3, x)
text-overflow: ellipsis text-overflow: ellipsis
@ -46,15 +50,15 @@ body.is-scrolled
white-space: nowrap white-space: nowrap
span span
margin: -2px 0 margin: -.2rem 0
+font-weight-bold +fw-bold
.navbar-brand .navbar-brand
+padding(2, y) +padding(2, y)
img img
@extend .img-fluid @extend .img-fluid
max-height: 22px max-height: var(--spacer-4)
image-rendering: optimize-contrast image-rendering: optimize-contrast
image-rendering: -webkit-optimize-contrast image-rendering: -webkit-optimize-contrast
@ -66,6 +70,11 @@ body.is-scrolled
.hero .hero-content .hero .hero-content
padding-top: 0 padding-top: 0
img
height: calc(var(--spacer) * 14)
max-width: 100%
object-fit: contain
.content .content
position: relative position: relative
top: - var(--navbar-primary-height) top: - var(--navbar-primary-height)
@ -88,14 +97,14 @@ body.is-scrolled
outline: none outline: none
&:hover &:hover
background-color: var(--color-primary-bg) background-color: var(--color-accent-bg)
color: var(--color-primary) color: var(--color-accent)
text-decoration: none text-decoration: none
i i
+margin(2, right) +margin(2, right)
&.is-active a &.is-active a
background-color: var(--color-primary-bg) background-color: var(--color-accent-bg)
color: var(--color-primary) color: var(--color-accent)
text-decoration: none text-decoration: none

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

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

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

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

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

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

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

@ -1,16 +1,16 @@
.sponsors-container .sponsors-container
--sponsor-level-1-max-size: 300px --sponsor-level-1-max-size: calc(var(--spacer) * 18.75)
--sponsor-level-2-max-size: 265px --sponsor-level-2-max-size: calc(var(--spacer) * 16.75)
--sponsor-level-3-max-size: 215px --sponsor-level-3-max-size: calc(var(--spacer) * 13.5)
background-color: var(--background-color) background-color: var(--color-bg)
border-top: var(--border-width) solid var(--background-color-tertiary) border-top: var(--border-width) solid var(--color-bg-tertiary)
+padding(5, top) +padding(5, top)
+margin(5, top) +margin(5, top)
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)
@ -20,11 +20,11 @@
.sponsor-level .sponsor-level
color: rgb(108,160,255) color: rgb(108,160,255)
font-size: var(--font-size-large) font-size: var(--fs-lg)
position: relative position: relative
span span
background-color: var(--background-color) background-color: var(--color-bg)
+padding(3, x) +padding(3, x)
position: relative position: relative
z-index: 1 z-index: 1
@ -37,7 +37,7 @@
display: block display: block
height: var(--border-width) height: var(--border-width)
position: absolute position: absolute
top: 15px top: var(--spacer)
width: 50% width: 50%
&:after &:after

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

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

14
conference_main/static/conference_main/styles/bcon20la/_buttons.scss
View File

@ -1,28 +1,28 @@
.btn { .btn {
background: rgba(black, .25); background: rgba(black, .25);
border: 2px solid $neon-green; border: .2rem 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); 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; border-color: $neon-green!important;
color: white; color: white;
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
background: rgba(black, .25); background: rgba(black, .25);
background-color:rgba(black, .25)!important; background-color:rgba(black, .25)!important;
border-color: $neon-green!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; text-decoration: none;
border: 2px solid $neon-green; border: .2rem solid $neon-green;
} }
&.btn-secondary { &.btn-secondary {
border-color: $neon-pink; 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; border-color: $neon-pink!important;
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
background: rgba(black, .25)!important; background: rgba(black, .25)!important;
background-color:rgba(black, .25)!important; background-color:rgba(black, .25)!important;
border-color: $neon-pink!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; text-decoration: none;
border: 2px solid $neon-pink; border: .2rem solid $neon-pink;
} }
} }
} }

12
conference_main/static/conference_main/styles/bcon20la/_cards.scss
View File

@ -1,7 +1,7 @@
.card { .card {
background: rgba(black, 0.25); background: rgba(black, 0.25);
border: 2px solid $neon-green; border: .2rem 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); 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; color: white;
a { a {
@ -13,8 +13,8 @@
} }
&.card-yellow { &.card-yellow {
border: 2px solid $neon-yellow; border: .2rem 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); 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 { a {
&:not(.btn) { &:not(.btn) {
&:hover { &:hover {
@ -25,8 +25,8 @@
} }
&.card-pink { &.card-pink {
border: 2px solid $neon-pink; border: .2rem 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); 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 { a {
&:not(.btn) { &:not(.btn) {
&:hover { &:hover {

8
conference_main/static/conference_main/styles/bcon20la/_header.scss
View File

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

4
conference_main/static/conference_main/styles/bcon20la/bcon20la.scss
View File

@ -24,9 +24,9 @@ body{
.text-highlight{ .text-highlight{
color: $neon-yellow; color: $neon-yellow;
font-size: 36px; font-size: var(--fs-h1);
font-weight: 300; 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{ .event-header{

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

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

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

@ -1,35 +1,7 @@
$font-path: '/static/assets/fonts' $font-path: '/static/assets/fonts'
// Import variables. // Import Web Assets.
@import "../../../../assets_shared/src/styles/_media_queries.sass" @import "../../../../assets_shared/src/styles/main.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 "_albums.sass" @import "_albums.sass"
@import "_attendee.sass" @import "_attendee.sass"
@ -46,13 +18,12 @@ $font-path: '/static/assets/fonts'
@import "_utils.sass" @import "_utils.sass"
\:root \:root
--body-bg: #e9ecef --body-color-bg: #e9ecef
--background-color: var(--body-bg) --color-bg: var(--body-color-bg)
--navbar-bg: #1e1e1e --navbar-bg: #1e1e1e
--navbar-primary-height: 45px
--table-border-color: var(--background-color-tertiary) --table-border-color: var(--color-bg-tertiary)
--table-row-bg-color: var(--background-color-secondary) --table-row-bg-color: var(--color-bg-secondary)
--color-cat-talk: hsl(178deg, 69%, 45%) --color-cat-talk: hsl(178deg, 69%, 45%)
--color-cat-talk-bg: hsl(178deg, 69%, 89%) --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-panel-bg: hsl(58deg, 40%, 86%)
--color-cat-roundtable: hsl(203deg, 19%, 55%) --color-cat-roundtable: hsl(203deg, 19%, 55%)
--page-with-header-content-offset: 10rem --page-with-header-content-offset: calc(var(--spacer) * 10)
+media-sm +media-sm
--page-with-header-content-offset: 8rem --page-with-header-content-offset: calc(var(--spacer) * 8)
body.is-scrolled body.is-scrolled
.navbar .navbar
@ -80,13 +51,13 @@ body.is-scrolled
z-index: 1 z-index: 1
.hero-compact .hero-compact
max-height: 180px max-height: calc(var(--spacer) * 11.25)
min-height: initial min-height: initial
.btn-float-right .btn-float-right
position: absolute position: absolute
right: 2rem right: calc(var(--spacer) * 2)
top: 1rem top: var(--spacer)
z-index: var(--zindex-fixed) z-index: var(--zindex-fixed)
.video-container .video-container
@ -138,7 +109,7 @@ button.favorite-star
button.going-star button.going-star
&:hover, &[data-is-checked] &:hover, &[data-is-checked]
+font-weight-bold +fw-bold
color: var(--color-success) color: var(--color-success)
i i
@ -146,20 +117,20 @@ button.going-star
.vote-stars-login .vote-stars-login
@extend .btn @extend .btn
padding: 0.3rem !important +margin(1, bottom)
margin-bottom: 0.5rem padding: var(--spacer-1) !important
.favorite-star-login .favorite-star-login
@extend .btn @extend .btn
padding: 0.3rem $spacer !important +margin(1, bottom)
margin-bottom: 0.5rem padding: var(--spacer-1) $spacer !important
.vote-stars .vote-stars
// We use flex and order to arrange the stars in the right order. This is // 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 // 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}"]
@ -195,21 +166,16 @@ button.going-star
background: rgba(0, 0, 0, 0.5) background: rgba(0, 0, 0, 0.5)
.hero-content .hero-content
+padding(5, top)
position: relative position: relative
z-index: 10 z-index: 10
padding-top: 5rem
.flatpage .flatpage
+padding(3)
+media-sm
+padding(5)
img img
border-radius: var(--border-radius) border-radius: var(--border-radius)
.badge .badge
+font-weight-bold +fw-bold
&.status-submitted &.status-submitted
--badge-bg: hsla(42deg, 100%, 50%, .15) --badge-bg: hsla(42deg, 100%, 50%, .15)
@ -242,3 +208,36 @@ button.going-star
.form-submit-dl .form-submit-dl
dd dd
font-family: var(--font-family-body) 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

3
conference_main/templates/conference_main/2020la/la_base_with_sidebar.pug
View File

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

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

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

18
conference_main/templates/conference_main/base.pug
View File

@ -6,26 +6,25 @@
| {% block jumbotron %} | {% block jumbotron %}
.hero.is-container-overlap .hero.is-container-overlap
.container .container
.hero-content.text-center .hero-content
{% if edition.logo %} {% 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 %} {% 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 %} {% endif %}
{% if edition.date_start %} {% 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 %} {% endif %}
{% if edition.location %} {% if edition.location %}
h3 {{ edition.location }} .hero-subtitle.mx-auto.text-center {{ edition.location }}
{% endif %} {% endif %}
{% if edition.header %} {% if edition.header %}
.hero-background(style="background-image: url({{ edition.header.url }})") .hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%")
{% else %}
.hero-background(style="background-image: url({% static 'images/bcon19_cityscape_notext.jpg' %})")
{% endif %} {% endif %}
.hero-overlay .hero-overlay
| {% endblock jumbotron %} | {% endblock jumbotron %}
| {% endblock header %} | {% endblock header %}
@ -34,8 +33,7 @@
.container .container
.row .row
.col .col
.card .box.p-3.p-sm-5
.card-body
| {% block content_main %} | {% block content_main %}
| {% endblock content_main %} | {% endblock content_main %}
| {% endblock content %} | {% endblock content %}

3
conference_main/templates/conference_main/base_simple.pug
View File

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

3
conference_main/templates/conference_main/base_with_sidebar.pug
View File

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

10
conference_main/templates/conference_main/components/message_exchange.pug
View File

@ -26,27 +26,29 @@ section
data-target="#message-{{ message.message.id }}", data-target="#message-{{ message.message.id }}",
id="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.message.user.profile }}
span.message-preview-content {{ message.message.content|truncatechars:80 }} span.message-preview-content {{ message.message.content|truncatechars:80 }}
span.ml-auto span.ml-auto
| {% if message.message.user.is_staff %} | {% 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 i.i-bcon
span Staff span Staff
| {% endif %} | {% endif %}
| {% if message.message.user.id == object.user.id %} | {% 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 i.i-mic
span Proposal Author span Proposal Author
| {% endif %} | {% endif %}
| {% if request.user.is_superuser %} | {% if request.user.is_superuser %}
a.px-3(href="{% url 'admin:conference_main_message_change' message.pk %}") a.px-3(href="{% url 'admin:conference_main_message_change' message.pk %}")
small Edit small
span.me-1 Edit
i.i-edit
| {% endif %} | {% endif %}
a.date( a.date(

23
conference_main/templates/conference_main/festival/entries/account_list.pug
View File

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

6
conference_main/templates/conference_main/festival/entries/detail.pug
View File

@ -19,10 +19,8 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.container.mt-3 .container.mt-3
.row .row
.col .col
.card.mb-3 .box.mb-3
.card-body
| {% if permissions.can_change %} | {% if permissions.can_change %}
.event-detail-header
//- Status. //- Status.
.row .row
.col-8 .col-8
@ -61,7 +59,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.p-4 .p-4
.d-flex .d-flex
h2 {{ object.title }} h2.me-2 {{ object.title }}
.ml-auto .ml-auto
| {% if not user.is_authenticated %} | {% if not user.is_authenticated %}

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

@ -8,10 +8,10 @@ table.table-no-box
tbody tbody
| {% for o in object_list %} | {% for o in object_list %}
tr tr
td(style="width: 4ch; padding-right: 0") td(style="width: 4ch;")
span.text-muted {{ o.edition.year }} span.text-muted.text-nowrap {{ o.edition.year }}
td 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 }} | {{ o.name }}
td.text-right td.text-right
span.badge.badge-primary( span.badge.badge-primary(

7
conference_main/templates/conference_main/presentations/detail.pug
View File

@ -34,11 +34,9 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.row .row
.col .col
.card.mb-3 .box.mb-3.p-3
.card-body
| {% if permissions.can_change %} | {% if permissions.can_change %}
.event-detail-header .mb-3.row
.row
.col-sm-8 .col-sm-8
| {% include "conference_main/components/review_header_details.pug" %} | {% include "conference_main/components/review_header_details.pug" %}
.col-sm-4 .col-sm-4
@ -60,7 +58,6 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% endif %} | {% endif %}
| {% endif %} | {% endif %}
.p-3
| {% if object.recording %} | {% if object.recording %}
.video-container .video-container
| {{ object.recording | oembed }} | {{ object.recording | oembed }}

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

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

11
conference_main/templates/conference_main/presentations/review.pug
View File

@ -61,9 +61,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
.col-lg-6 .col-lg-6
h5.text-uppercase.text-muted h5.text-uppercase.text-muted
| Description | Description
.card.mb-3 .box.mb-3.p-3
.card-body
.p-3
| {% if object.recording %} | {% if object.recording %}
.video-container .video-container
| {{ object.recording | oembed }} | {{ object.recording | oembed }}
@ -79,7 +77,6 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
| {% 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 %} | {% if object.description %}
@ -131,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 %}
@ -148,13 +145,13 @@ 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
| {% for o in speaker.other_events %} | {% for o in speaker.other_events %}
tr tr
td(style="width: 4ch; padding-right: 0") td(style="width: 4ch;")
span.text-muted {{ o.edition.year }} span.text-muted {{ o.edition.year }}
td td
a(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}") a(href="{% url 'presentation_detail' edition_path=o.edition.path pk=o.pk %}")

2
conference_main/templates/conference_main/profile/detail.pug
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

2
conference_main/templates/conference_main/profile/update.pug
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. | 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(action="{% url 'profile_update' %}", method="post", enctype="multipart/form-data")
.form-group .form-group.form-group-profile
| {% csrf_token %} | {% csrf_token %}
| {{ form | crispy }} | {{ form | crispy }}

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

@ -2,7 +2,7 @@
<img src="{{ widget.value.url }}"><br> <img src="{{ widget.value.url }}"><br>
{% if not widget.required %} {% if not widget.required %}
<div class="py-2"> <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 }}"> <input class="float-left" type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
</div> </div>
{% endif %} {% endif %}

2
conference_main/views/panel.py
View File

@ -54,8 +54,6 @@ class DateTimeOverrideMixin(View):
current_timestamp = datetime.datetime.now(tz=tz.gettz('Europe/Amsterdam')) current_timestamp = datetime.datetime.now(tz=tz.gettz('Europe/Amsterdam'))
# Define to debug # 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: if self.timestamp_overrides.day is not None:
current_timestamp = current_timestamp.replace(day=self.timestamp_overrides.day) current_timestamp = current_timestamp.replace(day=self.timestamp_overrides.day)

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

@ -131,9 +131,9 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="form-group form-inline float-right"> <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> <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> </div>
</div> </div>

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

@ -4,7 +4,7 @@
<h4 class="d-flex align-items-end"> <h4 class="d-flex align-items-end">
Your Badge 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 <i class="i-edit"></i> Edit
</a> </a>
</h4> </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 %} {% if ticket.order_number %}Order number: <strong>{{ ticket.order_number }}</strong>{% endif %}
{% with refund_status=ticket.refund_status %} {% with refund_status=ticket.refund_status %}
<div class="float-right ml-3"> <div class="float-right ms-3">
{% if ticket.is_free %} {% if ticket.is_free %}
<span class="badge badge-info px-2 py-1">Free</span> <span class="badge badge-info px-2 py-1">Free</span>
{% elif refund_status == "full" %} {% 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 #} {# Make bank transfer look similar to BT options #}
<div class="braintree-option" tabindex="0" <div class="braintree-option" tabindex="0"
style="border-width: 1px; border-color: #b5b5b5; border-radius: 4px; --body-bg: #e9ecef; 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"> <div class="braintree-option__logo">
<svg focusable="false" width="48" height="29" <svg focusable="false" width="48" height="29"
aria-hidden="true" viewBox="0 0 24 24"> aria-hidden="true" viewBox="0 0 24 24">
@ -24,7 +24,7 @@
{% endif %} {% endif %}
</div> </div>
{% if widget.value == "bank" %} {% 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"> id="bank-transfer-warning">
When choosing to pay by bank, you will need to manually perform a payment. 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. 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); color: rgba(40, 35, 74, 0.6);
} }
.secondary-small { .secondary-sm {
font-size: 0.7rem; font-size: 0.7rem;
color: rgba(40, 35, 74, 0.6); color: rgba(40, 35, 74, 0.6);
} }

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

@ -82,16 +82,16 @@
<tbody> <tbody>
<tr class="row-category"> <tr class="row-category">
<td class="cell-product"> <td class="cell-product">
<span class="secondary-small">Products</span> <span class="secondary-sm">Products</span>
</td> </td>
<td class="cell-price"> <td class="cell-price">
<span class="secondary-small cell-price-content">Price</span> <span class="secondary-sm cell-price-content">Price</span>
</td> </td>
<td class="cell-quantity"> <td class="cell-quantity">
<span class="secondary-small cell-quantity-content">Quantity</span> <span class="secondary-sm cell-quantity-content">Quantity</span>
</td> </td>
<td class="cell-total-price"> <td class="cell-total-price">
<span class="secondary-small">Total Price</span> <span class="secondary-sm">Total Price</span>
</td> </td>
</tr> </tr>
{% for item in order.line_items %} {% 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 #} {# **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 %} {% for tax in object.product.taxes %}
<br /> <br />
<span class="secondary-small">Incl. VAT {{ tax.rate }}% ({{ tax.description }})</span> <span class="secondary-sm">Incl. VAT {{ tax.rate }}% ({{ tax.description }})</span>
{% endfor %} {% endfor %}
</td> </td>
<td class="cell-price"> <td class="cell-price">
@ -109,7 +109,7 @@
<span class="cell-price-content">{% format_cents item.price.unit_amount item.currency %}</span> <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 #} {# **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 %} {% 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 %} {% endfor %}
</td> </td>
<td class="cell-quantity"> <td class="cell-quantity">

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

@ -27,7 +27,7 @@
{% else %} {% else %}
{% for product in products %} {% for product in products %}
<div class="col-md-6"> <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> <div>
<h3>{{ product.name }}</h3> <h3>{{ product.name }}</h3>
<hr> <hr>
@ -36,7 +36,7 @@
<div class="mt-auto pt-3"> <div class="mt-auto pt-3">
<hr> <hr>
<div class="text-right mb-2"> <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>
<div class="btn-row-fluid"> <div class="btn-row-fluid">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
@ -59,7 +59,7 @@
<div class="col pt-4"> <div class="col pt-4">
<div class="mt-3"> <div class="mt-3">
<div class="d-flex mb-3 mx-5"> <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"> <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> 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 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"> <label class="sr-only" for="claim-url">
Ticket{{ unclaimed|pluralize }} can be claimed using the following link: Ticket{{ unclaimed|pluralize }} can be claimed using the following link:
</label> </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 %}"> <input type="text" class="form-control" id="claim-url" readonly value="{% absolute_url ticket.claim_url %}">
<div class="input-group-append"> <div class="input-group-append">
<button class="input-group-text btn btn-secondary" title="Copy to clipboard" id="btn-copy-claim-url"> <button class="input-group-text btn btn-secondary" title="Copy to clipboard" id="btn-copy-claim-url">

13
tickets/templates/tickets/ticket_list.html
View File

@ -3,6 +3,8 @@
{% block content_main %} {% block content_main %}
<h2>Tickets</h2> <h2>Tickets</h2>
{% if object_list %}
<table class="table table-no-box"> <table class="table table-no-box">
<tbody> <tbody>
{% for ticket in object_list %} {% for ticket in object_list %}
@ -10,19 +12,22 @@
<tr> <tr>
{% is_claimed_by ticket request.user as clamed %} {% is_claimed_by ticket request.user as clamed %}
<td> <td>
<a href="{{ detail_url }}"> <a class="px-0" href="{{ detail_url }}">
{{ ticket.edition }} ({{ ticket.sku }}) {{ ticket.edition }} ({{ ticket.sku }})
{% if clamed %} {% if clamed %}
(claimed by you) (claimed by you)
{% endif %} {% endif %}
</a> </a>
</td> </td>
<td><a href="{{ detail_url }}">{% include "tickets/components/pill_payment_status.html" %}</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> <td>{% include "tickets/ticket_detail_invoice.html" %}</td>
</tr> </tr>
{% empty %}
No tickets yet.
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% else %}
<div>
No tickets yet.
</div>
{% endif %}
{% endblock %} {% endblock %}