infrastructure/devfund-website
0
2
Fork 0
Code Issues 28 Pull Requests Projects 1 Releases Wiki Activity

UI: Devfund-website web-assets v2 upgrade #96867

Merged
Márton Lente merged 12 commits from ui/web-assets-v2-upgrade into main 2024-11-01 16:41:18 +01:00
Conversation 0 Commits 12 Files Changed 27 +140 -111
27 changed files with 140 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitmodules vendored
View File

@ -1,4 +1,5 @@
[submodule "assets_shared"] [submodule "assets_shared"]
branch = v2
path = assets_shared path = assets_shared
url = https://projects.blender.org/infrastructure/web-assets.git url = https://projects.blender.org/infrastructure/web-assets.git
[submodule "donation-box"] [submodule "donation-box"]

2
assets_shared

@ -1 +1 @@
Subproject commit 8839ec4de330d84ed68bfdbb27017ab4920e426b Subproject commit b513d1ea6fa17060398f1d68453a4f86fb75c779

6
blender_fund_main/static/blender_fund_main/styles/_braintree.sass
View File

@ -5,10 +5,10 @@ ul#id_gateway
@extend .mb-4 @extend .mb-4
> label input, > label input,
@extend .mr-2 @extend .me-2
.gateway-options .gateway-options
@extend .ml-2 @extend .ms-2
.braintree-heading .braintree-heading
@ -28,7 +28,7 @@ ul#id_gateway
.braintree-sheet, .braintree-sheet,
.braintree-form__hosted-field, .braintree-form__hosted-field,
.braintree-large-button .braintree-lg-button
border-radius: var(--border-radius) border-radius: var(--border-radius)
.braintree-option .braintree-option

10
blender_fund_main/static/blender_fund_main/styles/_checkout.sass
View File

@ -22,13 +22,13 @@ body.looper-checkout_choose_plan_variation
.mention, pre .mention, pre
color: white color: white
max-width: 700px max-width: 700px
padding: 1rem padding: 1.6rem
margin-inline: auto margin-inline: auto
border-radius: var(--border-radius) border-radius: var(--border-radius)
.mention .mention
margin-bottom: 1rem margin-bottom: 1.6rem
background-color: var(--color-primary-bg-hover) background-color: var(--color-accent-bg-hover)
.checkout-send-instructions .checkout-send-instructions
pre pre
@ -44,7 +44,7 @@ body.looper-checkout_choose_plan_variation
position: relative position: relative
width: 100% width: 100%
.levels-background .levels-bg
background-image: linear-gradient(349deg, #0031aa, #6100cf) background-image: linear-gradient(349deg, #0031aa, #6100cf)
.box .box
@ -156,7 +156,7 @@ form.checkout-form
position: relative position: relative
h1 h1
margin-top: 0.5rem margin-top: 0.8rem
+text-gradient(-45deg, #e8c27d, #ff002d) +text-gradient(-45deg, #e8c27d, #ff002d)
a a

6
blender_fund_main/static/blender_fund_main/styles/_form.sass
View File

@ -31,7 +31,7 @@
&-country, // .field-country &-country, // .field-country
&-postal_code // .field-postal_code &-postal_code // .field-postal_code
@extend .pl-3 @extend .ps-3
&-region, &-region,
&-billing_email, &-billing_email,
@ -68,7 +68,7 @@
&-is_private &-is_private
@extend .field-checkbox @extend .field-checkbox
input[type="checkbox"] input[type="checkbox"]
@extend .ml-3 @extend .ms-3
&-gateway_pk, &-gateway_pk,
&-gateway &-gateway
+clearfix +clearfix
@ -106,7 +106,7 @@
.helptext .helptext
color: var(--text-color-secondary) color: var(--text-color-secondary)
font-size: var(--font-size-small) font-size: var(--fs-sm)
padding-top: 10px padding-top: 10px
.errorlist .errorlist

1
blender_fund_main/static/blender_fund_main/styles/_link_membership.sass
View File

@ -21,4 +21,3 @@ form.link-membership-form
label label
font-size: small font-size: small

22
blender_fund_main/static/blender_fund_main/styles/_memberships.sass
View File

@ -21,8 +21,8 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
box-shadow: 1px 1px 15px rgba(black, .33) box-shadow: 1px 1px 15px rgba(black, .33)
color: white color: white
content: 'POPULAR' content: 'POPULAR'
font-size: var(--font-size-extra-small) font-size: var(--fs-xs)
+font-weight-bold +fw-bold
padding: 3px 10px 2px padding: 3px 10px 2px
position: absolute position: absolute
left: -5px left: -5px
@ -82,7 +82,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
.platinum, .platinum,
.titanium, .titanium,
.diamond .diamond
font-size: var(--font-size-membership-top) font-size: var(--fs-membership-top)
.diamond .diamond
font-weight: bold font-weight: bold
@ -91,7 +91,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
color: $primary color: $primary
.corporate-bronze, .corporate_bronze .corporate-bronze, .corporate_bronze
font-size: var(--font-size-membership-corp-bronze) font-size: var(--fs-membership-corp-bronze)
line-height: 1.25 line-height: 1.25
img img
@ -104,7 +104,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
max-width: $m-logo-bronze-width max-width: $m-logo-bronze-width
.corporate-silver, .corporate_silver .corporate-silver, .corporate_silver
font-size: var(--font-size-membership-corp-silver) font-size: var(--fs-membership-corp-silver)
img img
max-height: $m-logo-silver-height max-height: $m-logo-silver-height
@ -113,7 +113,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
max-width: $m-logo-silver-width max-width: $m-logo-silver-width
.corporate-gold, .corporate_gold .corporate-gold, .corporate_gold
font-size: var(--font-size-membership-corp-gold) font-size: var(--fs-membership-corp-gold)
img img
max-height: $m-logo-gold-height max-height: $m-logo-gold-height
@ -143,7 +143,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
&-notes // levels-notes &-notes // levels-notes
color: rgba(white, .8) color: rgba(white, .8)
.levels-background .levels-bg
background-image: linear-gradient(349deg, hsl(216deg, 86%, 46%), hsl(274deg, 100%, 50%)) background-image: linear-gradient(349deg, hsl(216deg, 86%, 46%), hsl(274deg, 100%, 50%))
position: absolute !important position: absolute !important
top: 0 top: 0
@ -157,7 +157,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
max-width: 48px max-width: 48px
.credits .credits
background-color: var(--background-color) background-color: var(--color-bg)
overflow: initial overflow: initial
position: relative position: relative
@ -242,7 +242,7 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
background-color: hsla(0,0,0,.15) background-color: hsla(0,0,0,.15)
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)
font-size: var(--font-size-small) font-size: var(--fs-sm)
.l-table-cell .l-table-cell
+padding(2, y) +padding(2, y)
@ -293,8 +293,8 @@ $m-logo-bronze-height: $m-logo-bronze-width / $height-width-factor
.m-name .m-name
color: white color: white
font-size: var(--font-size-large) font-size: var(--fs-lg)
+font-weight-bold +fw-bold
.m-price .m-price
color: hsl(239deg, 45%, 83%) color: hsl(239deg, 45%, 83%)

55
blender_fund_main/static/blender_fund_main/styles/_stats.sass
View File

@ -1,8 +1,8 @@
$stats-item-size: 14rem $stats-item-size: 22.4rem
$stats-item-top-background: hsl(226, 60%, 46%) $stats-item-top-bg: hsl(226, 60%, 46%)
$stats-item-middle-background: hsl(246, 60%, 46%) $stats-item-middle-bg: hsl(246, 60%, 46%)
$stats-item-bottom-background: hsl(266, 80%, 46%) $stats-item-bottom-bg: hsl(266, 80%, 46%)
$stats-background: var(--header-bg-color) $stats-bg: var(--header-bg-color)
.stats-container .stats-container
pointer-events: none pointer-events: none
@ -10,7 +10,7 @@ $stats-background: var(--header-bg-color)
&:after &:after
border-right-color: transparent !important border-right-color: transparent !important
border-top-color: $stats-background !important border-top-color: $stats-bg !important
z-index: 1 z-index: 1
.stats-content .stats-content
@ -50,9 +50,9 @@ $stats-background: var(--header-bg-color)
@extend .d-flex @extend .d-flex
@extend .flex-column @extend .flex-column
@extend .mx-5 @extend .mx-5
background-color: $stats-item-top-background background-color: $stats-item-top-bg
color: rgba(white, .8) color: rgba(white, .8)
filter: drop-shadow(0 10px 0 rgba($stats-item-top-background,.33)) drop-shadow(0 20px 0 $stats-background) drop-shadow(0 -10px 0 rgba($stats-item-top-background,.33)) drop-shadow(0 -20px 0 $stats-background) filter: drop-shadow(0 10px 0 rgba($stats-item-top-bg,.33)) drop-shadow(0 20px 0 $stats-bg) drop-shadow(0 -10px 0 rgba($stats-item-top-bg,.33)) drop-shadow(0 -20px 0 $stats-bg)
margin-top: calc(var(--spacer) * 5) margin-top: calc(var(--spacer) * 5)
position: relative position: relative
width: $stats-item-size width: $stats-item-size
@ -66,11 +66,11 @@ $stats-background: var(--header-bg-color)
width: 0 width: 0
&:before &:before
border-bottom: ($stats-item-size / 3.33) solid $stats-item-top-background border-bottom: ($stats-item-size / 3.33) solid $stats-item-top-bg
bottom: 100% bottom: 100%
&:after &:after
border-top: ($stats-item-size / 3.33) solid $stats-item-top-background border-top: ($stats-item-size / 3.33) solid $stats-item-top-bg
top: 100% top: 100%
width: 0 width: 0
@ -81,8 +81,8 @@ $stats-background: var(--header-bg-color)
left: unset left: unset
&.stats-pos-middle &.stats-pos-middle
background-color: $stats-item-middle-background background-color: $stats-item-middle-bg
filter: drop-shadow(0 8px 0 rgba($stats-item-middle-background,.33)) drop-shadow(0 15px 0 $stats-background) drop-shadow(0 -8px 0 rgba($stats-item-middle-background,.33)) drop-shadow(0 -15px 0 $stats-background) filter: drop-shadow(0 8px 0 rgba($stats-item-middle-bg,.33)) drop-shadow(0 15px 0 $stats-bg) drop-shadow(0 -8px 0 rgba($stats-item-middle-bg,.33)) drop-shadow(0 -15px 0 $stats-bg)
margin-top: $spacer * 7 margin-top: $spacer * 7
right: 40% right: 40%
@ -91,13 +91,13 @@ $stats-background: var(--header-bg-color)
right: $stats-item-size / 1.11 right: $stats-item-size / 1.11
&:before &:before
border-bottom-color: $stats-item-middle-background border-bottom-color: $stats-item-middle-bg
&:after &:after
border-top-color: $stats-item-middle-background border-top-color: $stats-item-middle-bg
&.stats-pos-bottom &.stats-pos-bottom
background-color: $stats-item-bottom-background background-color: $stats-item-bottom-bg
filter: drop-shadow(0 8px 0 rgba($stats-item-bottom-background,.33)) drop-shadow(0 15px 0 $stats-background) drop-shadow(0 -8px 0 rgba($stats-item-bottom-background,.33)) drop-shadow(0 -15px 0 $stats-background) filter: drop-shadow(0 8px 0 rgba($stats-item-bottom-bg,.33)) drop-shadow(0 15px 0 $stats-bg) drop-shadow(0 -8px 0 rgba($stats-item-bottom-bg,.33)) drop-shadow(0 -15px 0 $stats-bg)
left: 50px left: 50px
top: -12px top: -12px
@ -105,11 +105,11 @@ $stats-background: var(--header-bg-color)
left: unset left: unset
&:before &:before
border-bottom-color: $stats-item-bottom-background border-bottom-color: $stats-item-bottom-bg
&:after &:after
border-top-color: $stats-item-bottom-background border-top-color: $stats-item-bottom-bg
&.stats-size-small &.stats-size-sm
width: $stats-item-size / 1.5 width: $stats-item-size / 1.5
&:before, &:before,
@ -137,12 +137,13 @@ $stats-background: var(--header-bg-color)
.stats-sum .stats-sum
align-items: center align-items: center
display: flex display: flex
font-size: 3rem font-size: 4.8rem
+font-weight-bold +fw-bold
justify-content: center justify-content: center
.stats-sum-name .stats-sum-name
+font-weight-bold font-size: var(--fs-sm)
+fw-bold
opacity: .8 opacity: .8
.stats-intro .stats-intro
@ -178,7 +179,7 @@ $stats-background: var(--header-bg-color)
h4 h4
opacity: .5 opacity: .5
+font-weight-normal +fw-normal
a a
text-decoration: none text-decoration: none
@ -187,7 +188,7 @@ $stats-background: var(--header-bg-color)
&:hover &:hover
text-decoration: underline text-decoration: underline
.a-image .a-img
+margin(1, left) +margin(1, left)
+margin(3, right) +margin(3, right)
max-height: var(--activity-icon-size) max-height: var(--activity-icon-size)
@ -308,7 +309,7 @@ $stats-background: var(--header-bg-color)
&::before &::before
transform: scaleX(2) transform: scaleX(2)
.a-image, .a-img,
i.i-activity i.i-activity
transform: scale(1.2) transform: scale(1.2)
@ -338,12 +339,12 @@ $stats-background: var(--header-bg-color)
.a-cat-announcement, .a-cat-announcement,
.a-cat-dev-fund-grant .a-cat-dev-fund-grant
background-color: var(--background-color-primary) background-color: var(--color-bg-primary)
border-radius: var(--border-radius) border-radius: var(--border-radius)
+box-shadow-card +box-shadow-card
.a-title .a-title
font-size: var(--font-size-large) font-size: var(--fs-lg)
.a-title .a-title
+media-xs +media-xs

24
blender_fund_main/static/blender_fund_main/styles/campaign.sass
View File

@ -5,7 +5,7 @@
\:root \:root
/* Should match colorBg in campaign.js */ /* Should match colorBg in campaign.js */
--body-bg: #edf4fd --body-bg: #edf4fd
--background-color: var(--body-bg) --color-bg: var(--body-bg)
.landing-campaign .landing-campaign
.container-main .container-main
@ -15,8 +15,8 @@
--nav-global-color-bg: transparent --nav-global-color-bg: transparent
--nav-global-color-menu-bg: hsl(213, 10%, 14%) --nav-global-color-menu-bg: hsl(213, 10%, 14%)
--nav-global-color-text: black --nav-global-color-text: black
--nav-global-color-text-hover: var(--color-primary) --nav-global-color-text-hover: var(--color-accent)
--nav-global-color-text-active: var(--color-primary) --nav-global-color-text-active: var(--color-accent)
left: 0 left: 0
position: absolute position: absolute
@ -30,7 +30,7 @@
fill: hsl(213, 5%, 64%) fill: hsl(213, 5%, 64%)
.nav-global-logo:hover svg .nav-global-logo:hover svg
fill: var(--color-primary) fill: var(--color-accent)
+media-xs +media-xs
.nav-global-nav-links .nav-global-nav-links
@ -57,8 +57,8 @@
img img
animation: badge-dance 5s infinite animation: badge-dance 5s infinite
display: block display: block
filter: drop-shadow(0 0 1.75rem #1441b1); filter: drop-shadow(0 0 2.8rem #1441b1)
margin: 2rem auto 0 auto margin: 3.2rem auto 0 auto
max-width: 280px max-width: 280px
.campaign--donation-box .campaign--donation-box
@ -81,8 +81,8 @@
.campaign--message .campaign--message
color: #000000 color: #000000
font-size: var(--font-size-large) font-size: var(--fs-lg)
+font-weight-bold +fw-bold
mix-blend-mode: normal mix-blend-mode: normal
+padding(2, x) +padding(2, x)
+padding(5, y) +padding(5, y)
@ -92,7 +92,7 @@
pointer-events: initial pointer-events: initial
h1 h1
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
+font-weight(900) +font-weight(900)
line-height: 1.1 line-height: 1.1
+margin(3, bottom) +margin(3, bottom)
@ -129,7 +129,7 @@
border-radius: var(--border-radius) border-radius: var(--border-radius)
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3) box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3)
color: #666 color: #666
font-size: var(--font-size-small) font-size: var(--fs-sm)
mix-blend-mode: luminosity mix-blend-mode: luminosity
min-width: 28ch min-width: 28ch
opacity: 0 opacity: 0
@ -144,7 +144,7 @@
strong strong
color: black color: black
+font-weight-bold +fw-bold
&.is-visible &.is-visible
opacity: 1 opacity: 1
@ -168,7 +168,7 @@
position: absolute position: absolute
right: 0 right: 0
top: 125% top: 125%
font-size: var(--font-size-small) font-size: var(--fs-sm)
color: rgba(black, .6) color: rgba(black, .6)
span span

56
blender_fund_main/static/blender_fund_main/styles/main.sass
View File

@ -1,18 +1,22 @@
// TODO: convert explicit font sizes to variables
// TODO: convert explicit spacing sizes to modular sizing
// TODO: unify px and rem units' usage
\:root \:root
--font-size-membership-corp-gold: 3rem --fs-membership-corp-gold: 4.8rem
--font-size-membership-corp-silver: 2.6rem --fs-membership-corp-silver: 4.16rem
--font-size-membership-corp-bronze: 1.66rem --fs-membership-corp-bronze: 2.656rem
--font-size-membership-top: 1.46667rem --fs-membership-top: 2.34667rem
--font-size-hero-title: clamp(3rem, 4vw + 1rem, 72px) --fs-hero-title: clamp(4.8rem, 4vw + 1rem, 72px)
--header-bg-color: hsl(254deg, 50%, 13%) --header-bg-color: hsl(254deg, 50%, 13%)
--header-text-color: hsl(213deg 10% 92%) --header-text-color: hsl(213deg 10% 92%)
/* Bootstrap overrides. */ /* Bootstrap overrides. */
$font-size-base: .9rem $fs-base: 1.44rem
$progress-height: .5rem $progress-height: .8rem
$font-path: '../../assets/fonts' $font-path: '../../assets/fonts'
@import '../../../../assets_shared/src/styles/main.sass' @import '../../../../assets_shared/src/styles/main.sass'
@import braintree @import braintree
@ -25,6 +29,16 @@ $font-path: '../../assets/fonts'
@import settings @import settings
@import stats @import stats
/* Components and Web Assets overrides. */
\:root
--fs-hero-title: 3.6rem
+media-sm
--fs-hero-title: 5.3rem
+media-lg
--fs-hero-title: 6.3rem
.homepage .homepage
.container-main .container-main
background-color: var(--header-bg-color) background-color: var(--header-bg-color)
@ -32,6 +46,10 @@ $font-path: '../../assets/fonts'
.nav-global .nav-global
z-index: initial z-index: initial
.nav-global-container
+media-lg
max-width: var(--container-width)
.hero .hero
background-color: var(--header-bg-color) background-color: var(--header-bg-color)
background-image: linear-gradient(hsl(213, 10%, 14%), var(--header-bg-color)) background-image: linear-gradient(hsl(213, 10%, 14%), var(--header-bg-color))
@ -45,9 +63,9 @@ $font-path: '../../assets/fonts'
max-width: 580px max-width: 580px
h2 h2
font-size: var(--font-size-hero-title) font-size: var(--fs-hero-title)
+font-weight-title +fw-title
line-height: var(--font-size-hero-title) line-height: var(--fs-hero-title)
+text-gradient(144deg, hsl(344deg, 100%, 98%), hsl(243deg, 100%, 90%)) +text-gradient(144deg, hsl(344deg, 100%, 98%), hsl(243deg, 100%, 90%))
.responsive-object .responsive-object
@ -69,7 +87,7 @@ $font-path: '../../assets/fonts'
background-clip: text background-clip: text
-webkit-background-clip: text -webkit-background-clip: text
-webkit-text-fill-color: transparent -webkit-text-fill-color: transparent
+font-weight-light +fw-light
margin: 50px auto 0 margin: 50px auto 0
position: relative position: relative
width: 100% width: 100%
@ -119,6 +137,12 @@ table > tbody > tr > td
.flatpage .flatpage
overflow-x: auto overflow-x: auto
h1, h2, h3, h4, h5, h6
+padding(3, top)
&:first-child
+padding(0, top)
table table
display: block display: block
min-width: 375px min-width: 375px
@ -142,7 +166,7 @@ table > tbody > tr > td
.survey .survey
label label
color: var(--text-color-primary) color: var(--text-color-primary)
+font-weight-normal +fw-normal
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] input[type="radio"]
@ -152,10 +176,10 @@ table > tbody > tr > td
&[checked] &[checked]
&+label &+label
+font-weight-bold +fw-bold
h3 h3
font-size: 1.1rem font-size: 1.76rem
+margin(3, bottom) +margin(3, bottom)
.radio-horizontal .radio-horizontal
@ -171,6 +195,10 @@ table > tbody > tr > td
&.has-7 &.has-7
grid-template-columns: repeat(7, 1fr) grid-template-columns: repeat(7, 1fr)
// TODO: @web-assets check input height rule explicit
input
height: auto
.input-w-sm .input-w-sm
max-width: 100% max-width: 100%
width: 100% width: 100%

4
blender_fund_main/templates/blender_fund_main/activity_list.html
View File

@ -21,9 +21,9 @@
{% if a.membership %} {% if a.membership %}
<a href="{% url 'looper:checkout_new' a.membership.level.plan.id %}"> <a href="{% url 'looper:checkout_new' a.membership.level.plan.id %}">
{% if a.membership.level.category == 'CORP' %} {% if a.membership.level.category == 'CORP' %}
<img class="a-image" src="{% static 'blender_fund_main/images/badge_corporate.png' %}" alt="{{ a.membership.level }}"> <img class="a-img" src="{% static 'blender_fund_main/images/badge_corporate.png' %}" alt="{{ a.membership.level }}">
{% elif a.membership.level.image %} {% elif a.membership.level.image %}
<img class="a-image" src="{{ a.membership.level.image.url }}" alt="{{ a.membership.level }}"> <img class="a-img" src="{{ a.membership.level.image.url }}" alt="{{ a.membership.level }}">
{% else %} {% else %}
<i class="i-activity"></i> <i class="i-activity"></i>
{% endif %} {% endif %}

2
blender_fund_main/templates/blender_fund_main/components/field_label_wrapped.html
View File

@ -1,7 +1,7 @@
{% spaceless %} {% spaceless %}
{% if not field.is_hidden %} {% if not field.is_hidden %}
<label for="{{ field.id_for_label }}"> <label for="{{ field.id_for_label }}">
<span class="mr-3">{{ field.label }}{#% if field.field.required %}<span class="ms-1 subtitle fw-bold">*</span>{% endif %#}</span> <span class="me-3">{{ field.label }}{#% if field.field.required %}<span class="ms-1 subtitle fw-bold">*</span>{% endif %#}</span>
</label> </label>
{% endif %} {% endif %}
{{ field }} {{ field }}

2
blender_fund_main/templates/blender_fund_main/components/form_donate_once_credit.html
View File

@ -18,7 +18,7 @@
</ul> </ul>
</div> </div>
<div class="x-save-confirm text-success float-right mr-3"><b>Saved ✔</b></div> <div class="x-save-confirm text-success float-right me-3"><b>Saved ✔</b></div>
<form class="form" autocomplete="off"> <form class="form" autocomplete="off">
{% csrf_token %} {% csrf_token %}
{% include "blender_fund_main/components/form.html" %} {% include "blender_fund_main/components/form.html" %}

8
blender_fund_main/templates/blender_fund_main/credits.html
View File

@ -38,7 +38,7 @@
{% for a in activity %} {% for a in activity %}
<li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}"> <li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}">
<a href="{% url 'activity-list' %}#activity-{{ a.id }}"> <a href="{% url 'activity-list' %}#activity-{{ a.id }}">
<i class="i-activity pr-1"></i> {{ a.display_title | safe }} <i class="i-activity pe-1"></i> {{ a.display_title | safe }}
<span class="time" title="{{ a.created_at }}"> {{ a.created_at | naturaltime_compact }}</span> <span class="time" title="{{ a.created_at }}"> {{ a.created_at | naturaltime_compact }}</span>
</a> </a>
</li> </li>
@ -54,11 +54,11 @@
<div class="stats-sum"><span class="currency-symbol">{{ summed_income.currency_symbol }}</span><span class="js-count-contributions">{{ summed_income.just_whole }}</span></div> <div class="stats-sum"><span class="currency-symbol">{{ summed_income.currency_symbol }}</span><span class="js-count-contributions">{{ summed_income.just_whole }}</span></div>
<h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5> <h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5>
</div> </div>
<div class="stats-item stats-pos-middle stats-size-small"> <div class="stats-item stats-pos-middle stats-size-sm">
<div class="stats-sum js-count">{{ memberships_per_category.INDIV }}</div> <div class="stats-sum js-count">{{ memberships_per_category.INDIV }}</div>
<h5 class="stats-sum-name">INDIVIDUALS</h5> <h5 class="stats-sum-name">INDIVIDUALS</h5>
</div> </div>
<div class="stats-item stats-pos-bottom stats-size-small"> <div class="stats-item stats-pos-bottom stats-size-sm">
<div class="stats-sum js-count">{{ memberships_per_category.CORP }}</div> <div class="stats-sum js-count">{{ memberships_per_category.CORP }}</div>
<h5 class="stats-sum-name">CORPORATE</h5> <h5 class="stats-sum-name">CORPORATE</h5>
</div> </div>
@ -176,7 +176,7 @@
</div> </div>
<div class="container"> <div class="container">
<div class="d-flex p-3 align-items-center"><span class="ml-auto pr-3">Select Currency</span> <div class="d-flex p-3 align-items-center"><span class="ms-auto pe-3">Select Currency</span>
<select id="js-currency"> <select id="js-currency">
<option data-currency="EUR" {% if preferred_currency == 'EUR' %}selected="selected"{% endif %}>Euro</option> <option data-currency="EUR" {% if preferred_currency == 'EUR' %}selected="selected"{% endif %}>Euro</option>
<option data-currency="USD" {% if preferred_currency == 'USD' %}selected="selected"{% endif %}>US Dollar</option> <option data-currency="USD" {% if preferred_currency == 'USD' %}selected="selected"{% endif %}>US Dollar</option>

2
blender_fund_main/templates/blender_fund_main/donate_once_thank_you.html
View File

@ -4,7 +4,7 @@
<div class="checkout-yay-bg py-5 checkout-container"> <div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5"> <div class="container text-center py-5">
<h1 class="thanks"> <h1 class="thanks">
Thank you {{ user.customer.billing_address.full_name }}! <i class="i-heart text-danger pl-3"></i> Thank you {{ user.customer.billing_address.full_name }}! <i class="i-heart text-danger ps-3"></i>
</h1> </h1>
<div class="lead pt-4"> <div class="lead pt-4">
Your donations help dozens of people to work on <br> Your donations help dozens of people to work on <br>

4
blender_fund_main/templates/blender_fund_main/link_donation.html
View File

@ -3,7 +3,7 @@
{% load humanize %} {% load humanize %}
{% block content_settings %} {% block content_settings %}
<div class="ml-4 mt-2 mb-2"> <div class="ms-4 mt-2 mb-2">
<h2>Link Donation</h2> <h2>Link Donation</h2>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
@ -16,7 +16,7 @@
The receipt for this donation will be listed under Receipts section of your account. The receipt for this donation will be listed under Receipts section of your account.
</p> </p>
{# TODO: Mention campaign badge if order was made during one #} {# TODO: Mention campaign badge if order was made during one #}
<p class="ml-2"> <p class="ms-2">
<form class="form link-donation-form" method="post"> <form class="form link-donation-form" method="post">
{% csrf_token %} {% csrf_token %}
{% include "blender_fund_main/components/form.html" %} {% include "blender_fund_main/components/form.html" %}

4
blender_fund_main/templates/blender_fund_main/link_membership.html
View File

@ -6,7 +6,7 @@
{% block after_membership_info %} {% block after_membership_info %}
{% if user.is_anonymous %} {% if user.is_anonymous %}
<div class="ml-4 mt-2 mb-2"> <div class="ms-4 mt-2 mb-2">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
You need a Blender ID account to manage this membership. You need a Blender ID account to manage this membership.
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="ml-4 mt-2 mb-2"> <div class="ms-4 mt-2 mb-2">
<h3>Link Membership</h3> <h3>Link Membership</h3>
<div class="row"> <div class="row">
<div class="{% if membership.level.badge %}col-md-9{% else %}col-md-12{% endif %}"> <div class="{% if membership.level.badge %}col-md-9{% else %}col-md-12{% endif %}">

12
blender_fund_main/templates/blender_fund_main/survey.html
View File

@ -202,9 +202,9 @@
{% endwith %} {% endwith %}
{# Note: this depends on the question above being 'dont-know'. #} {# Note: this depends on the question above being 'dont-know'. #}
<div id="info_blender_lts" class="alert mt-2 pl-2 {% if survey.response_data|get_attr:'use_blender_lts' != 'dont-know' %}is-hidden{% endif %}"> <div id="info_blender_lts" class="alert mt-2 ps-2 {% if survey.response_data|get_attr:'use_blender_lts' != 'dont-know' %}is-hidden{% endif %}">
<div class="d-flex"> <div class="d-flex">
<aside><i class="i-info mr-2"></i></aside> <aside><i class="i-info me-2"></i></aside>
<div> <div>
<p class="mb-0"> <p class="mb-0">
Blender LTS (long-term support) releases feature up to 2 years of support and fixes. Blender LTS (long-term support) releases feature up to 2 years of support and fixes.
@ -223,9 +223,9 @@
{% endwith %} {% endwith %}
{# Note: this depends on the question above being 'dont-know'. #} {# Note: this depends on the question above being 'dont-know'. #}
<div id="info_blender_experimental" class="alert mt-2 pl-2 {% if survey.response_data|get_attr:'use_experimental' != 'dont-know' %}is-hidden{% endif %}"> <div id="info_blender_experimental" class="alert mt-2 ps-2 {% if survey.response_data|get_attr:'use_experimental' != 'dont-know' %}is-hidden{% endif %}">
<div class="d-flex"> <div class="d-flex">
<aside><i class="i-info mr-2"></i></aside> <aside><i class="i-info me-2"></i></aside>
<div> <div>
<p class="mb-0"> <p class="mb-0">
Experimental builds have the latest features and bug fixes, but they can be unstable and break your files. Experimental builds have the latest features and bug fixes, but they can be unstable and break your files.
@ -301,7 +301,7 @@
This will copy a list of your active add-ons to the clipboard. This will copy a list of your active add-ons to the clipboard.
</p> </p>
<div class="code-container"> <div class="code-container">
<pre translate="no" id="addons-code" style="font-size: var(--font-size-small)" class="m-0 px-3"> <pre translate="no" id="addons-code" style="font-size: var(--fs-sm)" class="m-0 px-3">
import bpy import bpy
enabled_addons = [addon.module for addon in bpy.context.preferences.addons] enabled_addons = [addon.module for addon in bpy.context.preferences.addons]
addons_string = ", ".join(enabled_addons) addons_string = ", ".join(enabled_addons)
@ -649,7 +649,7 @@ bpy.context.window_manager.clipboard = addons_string</pre>
{% include f_multi_option with name=name value="apps" label="Apps (experiences powered by Blender)" %} {% include f_multi_option with name=name value="apps" label="Apps (experiences powered by Blender)" %}
{% include f_multi_option with name=name value="online-collaboration" label="Distributed, online collaboration" %} {% include f_multi_option with name=name value="online-collaboration" label="Distributed, online collaboration" %}
{% include f_multi_option with name=name value="computer-vision" label="Computer Vision (dense reconstuction, enhanced motion tracking, gaussian splatting, etc.)" %} {% include f_multi_option with name=name value="computer-vision" label="Computer Vision (dense reconstuction, enhanced motion tracking, gaussian splatting, etc.)" %}
{% include f_multi_option with name=name value="ml-ai" label="Machine Learning and AI (tools to improve artistic worflows)" %} {% include f_multi_option with name=name value="ms-ai" label="Machine Learning and AI (tools to improve artistic worflows)" %}
{% include f_multi_option with name=name value="virtual-production" label="Virtual Production" %} {% include f_multi_option with name=name value="virtual-production" label="Virtual Production" %}
{% include f_multi_option with name=name value="rendering" label="Rendering techonologies" %} {% include f_multi_option with name=name value="rendering" label="Rendering techonologies" %}
</select> </select>

10
templates/blender_fund/landing.html
View File

@ -39,7 +39,7 @@
{% for a in activity %} {% for a in activity %}
<li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}"> <li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}">
<a href="{% url 'activity-list' %}#activity-{{ a.id }}"> <a href="{% url 'activity-list' %}#activity-{{ a.id }}">
<i class="i-activity pr-1"></i> {{ a.display_title | safe }} <i class="i-activity pe-1"></i> {{ a.display_title | safe }}
<span class="time" title="{{ a.created_at }}"> {{ a.created_at | naturaltime_compact }}</span> <span class="time" title="{{ a.created_at }}"> {{ a.created_at | naturaltime_compact }}</span>
</a> </a>
</li> </li>
@ -55,11 +55,11 @@
<div class="stats-sum"><span class="currency-symbol">{{ summed_income.currency_symbol }}</span><span class="js-count-contributions">{{ summed_income.just_whole }}</span></div> <div class="stats-sum"><span class="currency-symbol">{{ summed_income.currency_symbol }}</span><span class="js-count-contributions">{{ summed_income.just_whole }}</span></div>
<h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5> <h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5>
</div> </div>
<div class="stats-item stats-pos-middle stats-size-small"> <div class="stats-item stats-pos-middle stats-size-sm">
<div class="stats-sum js-count">{{ memberships_per_category.INDIV }}</div> <div class="stats-sum js-count">{{ memberships_per_category.INDIV }}</div>
<h5 class="stats-sum-name">INDIVIDUALS</h5> <h5 class="stats-sum-name">INDIVIDUALS</h5>
</div> </div>
<div class="stats-item stats-pos-bottom stats-size-small"> <div class="stats-item stats-pos-bottom stats-size-sm">
<div class="stats-sum js-count">{{ memberships_per_category.CORP }}</div> <div class="stats-sum js-count">{{ memberships_per_category.CORP }}</div>
<h5 class="stats-sum-name">CORPORATE</h5> <h5 class="stats-sum-name">CORPORATE</h5>
</div> </div>
@ -68,7 +68,7 @@
</div> </div>
<div class="levels js-fade" id="join"> <div class="levels js-fade" id="join">
<div class="levels-background"></div> <div class="levels-bg"></div>
<div class="container py-5"> <div class="container py-5">
<h1 class="mt-4 py-4">Choose your membership, <br>or donate once</h1> <h1 class="mt-4 py-4">Choose your membership, <br>or donate once</h1>
<div class="row"> <div class="row">
@ -161,7 +161,7 @@
{% endcache %} {% endcache %}
<div class="container"> <div class="container">
<div class="d-flex p-3 align-items-center"><span class="ml-auto pr-3">Select Currency</span> <div class="d-flex p-3 align-items-center"><span class="ms-auto pe-3">Select Currency</span>
<select id="js-currency"> <select id="js-currency">
<option data-currency="EUR" {% if preferred_currency == 'EUR' %}selected="selected"{% endif %}>Euro</option> <option data-currency="EUR" {% if preferred_currency == 'EUR' %}selected="selected"{% endif %}>Euro</option>
<option data-currency="USD" {% if preferred_currency == 'USD' %}selected="selected"{% endif %}>US Dollar</option> <option data-currency="USD" {% if preferred_currency == 'USD' %}selected="selected"{% endif %}>US Dollar</option>

2
templates/checkout/checkout_base.html
View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<div class="checkout-container"> <div class="checkout-container">
<div class="levels-background"></div> <div class="levels-bg"></div>
<section class="box checkout"> <section class="box checkout">
<header class="plan-info"> <header class="plan-info">
{% if plan.membership.image %} {% if plan.membership.image %}

4
templates/checkout/checkout_done.html
View File

@ -17,7 +17,7 @@
<div class="checkout-yay-bg py-5 checkout-container"> <div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5"> <div class="container text-center py-5">
<h1 class="thanks"> <h1 class="thanks">
Thank you {{ user.customer.billing_address.full_name }}! <i class="i-heart text-danger pl-3"></i> Thank you {{ user.customer.billing_address.full_name }}! <i class="i-heart text-danger ps-3"></i>
</h1> </h1>
<div class="lead pt-4"> <div class="lead pt-4">
You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund
@ -38,7 +38,7 @@
</a> </a>
<a class="d-block pt-5" href="{% url 'settings_membership_edit' membership_id=membership.pk %}" title="Manage your memberships"> <a class="d-block pt-5" href="{% url 'settings_membership_edit' membership_id=membership.pk %}" title="Manage your memberships">
Manage your membership <i class="i-chevron-right pl-2"></i> Manage your membership <i class="i-chevron-right ps-2"></i>
</a> </a>
{% if membership.level.bid_badge_name %} {% if membership.level.bid_badge_name %}

2
templates/checkout/checkout_done_transactionless.html
View File

@ -6,7 +6,7 @@
<div class="checkout-yay-bg py-5 checkout-container"> <div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5"> <div class="container text-center py-5">
<h1 class="thanks"> <h1 class="thanks">
Thank you {{ order.customer.billing_address.full_name }}! <i class="i-heart-filled text-danger pl-2"></i> Thank you {{ order.customer.billing_address.full_name }}! <i class="i-heart-filled text-danger ps-2"></i>
</h1> </h1>
<div class="lead py-3"> <div class="lead py-3">
You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund

4
templates/checkout/checkout_existing_order.html
View File

@ -5,10 +5,10 @@
{% block content %} {% block content %}
<div class="checkout-container"> <div class="checkout-container">
<section class="box checkout"> <section class="box checkout">
<header><a class="text-muted" href="/"><i class="i-chevron-left pr-3"></i> Blender Development Fund</a> <header><a class="text-muted" href="/"><i class="i-chevron-left pe-3"></i> Blender Development Fund</a>
<section class="plan-info d-flex align-items-center"> <section class="plan-info d-flex align-items-center">
<h2 class="my-0 pt-4">{{ plan.description }}</h2> <h2 class="my-0 pt-4">{{ plan.description }}</h2>
<h2 class="ml-auto my-0 pt-4"><span>{{ order.price.with_currency_symbol }} for {{ subscription.interval_length }} {{ subscription.interval_unit }}</span></h2> <h2 class="ms-auto my-0 pt-4"><span>{{ order.price.with_currency_symbol }} for {{ subscription.interval_length }} {{ subscription.interval_unit }}</span></h2>
</section> </section>
</header> </header>
<hr/> <hr/>

2
templates/checkout/choose_plan_variation.html
View File

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<div class="checkout-container"> <div class="checkout-container">
<div class="levels-background"></div> <div class="levels-bg"></div>
<section class="box checkout"> <section class="box checkout">
<header> <header>
<section class="plan-info"> <section class="plan-info">

2
templates/checkout/not_your_order.html
View File

@ -4,7 +4,7 @@
{% block content %} {% block content %}
<div class="checkout-container"> <div class="checkout-container">
<section class="box checkout"> <section class="box checkout">
<header><a class="text-muted" href="/"><i class="i-chevron-left pr-3"></i> Blender Development Fund</a> <header><a class="text-muted" href="/"><i class="i-chevron-left pe-3"></i> Blender Development Fund</a>
<section class="plan-info d-flex align-items-center"> <section class="plan-info d-flex align-items-center">
<h2 class="my-0 pt-4">Not your payment link</h2> <h2 class="my-0 pt-4">Not your payment link</h2>
</section> </section>

2
templates/settings/membership_cancel.html
View File

@ -19,7 +19,7 @@
{% include "blender_fund_main/components/form.html" %} {% include "blender_fund_main/components/form.html" %}
<hr/> <hr/>
<a class="btn" href="{{ back_url }}"><span>← Keep Membership and Go Back</span></a> <a class="btn" href="{{ back_url }}"><span>← Keep Membership and Go Back</span></a>
<button class="btn-danger form-submit ml-3" id="submit-button" type="submit"><span>Confirm Cancellation of Membership</span></button> <button class="btn-danger form-submit ms-3" id="submit-button" type="submit"><span>Confirm Cancellation of Membership</span></button>
</form> </form>
{% endif %} {% endif %}
{% endblock after_membership_info %} {% endblock after_membership_info %}

2
templates/settings/membership_edit.html
View File

@ -171,7 +171,7 @@
</button> </button>
{% if subscription.status != 'pending-cancellation' and subscription.status != 'cancelled' %} {% if subscription.status != 'pending-cancellation' and subscription.status != 'cancelled' %}
<a class="ml-auto btn btn-link btn-danger" href="{% url 'settings_membership_cancel' membership_id=membership.id %}"> <a class="ms-auto btn btn-link btn-danger" href="{% url 'settings_membership_cancel' membership_id=membership.id %}">
<span>Cancel Membership</span> <span>Cancel Membership</span>
</a> </a>
{% endif %} {% endif %}