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
24 changed files with 102 additions and 101 deletions
Showing only changes of commit 2f82d89267 - Show all commits

View File

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

View File

@ -28,7 +28,7 @@ body.looper-checkout_choose_plan_variation
.mention
margin-bottom: 1rem
background-color: var(--color-primary-bg-hover)
background-color: var(--color-accent-bg-hover)
.checkout-send-instructions
pre
@ -44,7 +44,7 @@ body.looper-checkout_choose_plan_variation
position: relative
width: 100%
.levels-background
.levels-bg
background-image: linear-gradient(349deg, #0031aa, #6100cf)
.box

View File

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

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

View File

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

View File

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

View File

@ -1,18 +1,19 @@
\:root
--font-size-membership-corp-gold: 3rem
--font-size-membership-corp-silver: 2.6rem
--font-size-membership-corp-bronze: 1.66rem
--font-size-membership-top: 1.46667rem
--font-size-hero-title: clamp(3rem, 4vw + 1rem, 72px)
--fs-membership-corp-gold: 3rem
--fs-membership-corp-silver: 2.6rem
--fs-membership-corp-bronze: 1.66rem
--fs-membership-top: 1.46667rem
--fs-hero-title: clamp(3rem, 4vw + 1rem, 72px)
--header-bg-color: hsl(254deg, 50%, 13%)
--header-text-color: hsl(213deg 10% 92%)
/* Bootstrap overrides. */
$font-size-base: .9rem
$fs-base: .9rem
$progress-height: .5rem
$font-path: '../../assets/fonts'
@import '../../../../assets_shared/src/styles/main.sass'
@import braintree
@ -45,9 +46,9 @@ $font-path: '../../assets/fonts'
max-width: 580px
h2
font-size: var(--font-size-hero-title)
+font-weight-title
line-height: var(--font-size-hero-title)
font-size: var(--fs-hero-title)
+fw-title
line-height: var(--fs-hero-title)
+text-gradient(144deg, hsl(344deg, 100%, 98%), hsl(243deg, 100%, 90%))
.responsive-object
@ -67,9 +68,9 @@ $font-path: '../../assets/fonts'
background: linear-gradient(199deg, hsl(hue(orange), 70%, 70%) 39%, hsl(hue(pink), 100%, 50%) 70%)
background-color: hsl(hue(cyan), 100%, 30%)
background-clip: text
-webkit-background-clip: text
-webkit-bg-clip: text
-webkit-text-fill-color: transparent
+font-weight-light
+fw-light
margin: 50px auto 0
position: relative
width: 100%
@ -142,7 +143,7 @@ table > tbody > tr > td
.survey
label
color: var(--text-color-primary)
+font-weight-normal
+fw-normal
input[type="checkbox"],
input[type="radio"]
@ -152,7 +153,7 @@ table > tbody > tr > td
&[checked]
&+label
+font-weight-bold
+fw-bold
h3
font-size: 1.1rem

View File

@ -21,9 +21,9 @@
{% if a.membership %}
<a href="{% url 'looper:checkout_new' a.membership.level.plan.id %}">
{% 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 %}
<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 %}
<i class="i-activity"></i>
{% endif %}

View File

@ -1,7 +1,7 @@
{% spaceless %}
{% if not field.is_hidden %}
<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>
{% endif %}
{{ field }}

View File

@ -18,7 +18,7 @@
</ul>
</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">
{% csrf_token %}
{% include "blender_fund_main/components/form.html" %}

View File

@ -38,7 +38,7 @@
{% for a in activity %}
<li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}">
<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>
</a>
</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>
<h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5>
</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>
<h5 class="stats-sum-name">INDIVIDUALS</h5>
</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>
<h5 class="stats-sum-name">CORPORATE</h5>
</div>
@ -176,7 +176,7 @@
</div>
<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">
<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>

View File

@ -4,7 +4,7 @@
<div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5">
<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>
<div class="lead pt-4">
Your donations help dozens of people to work on <br>

View File

@ -3,7 +3,7 @@
{% load humanize %}
{% block content_settings %}
<div class="ml-4 mt-2 mb-2">
<div class="ms-4 mt-2 mb-2">
<h2>Link Donation</h2>
<div class="row">
<div class="col-md-12">
@ -16,7 +16,7 @@
The receipt for this donation will be listed under Receipts section of your account.
</p>
{# 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">
{% csrf_token %}
{% include "blender_fund_main/components/form.html" %}

View File

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

View File

@ -202,9 +202,9 @@
{% endwith %}
{# 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">
<aside><i class="i-info mr-2"></i></aside>
<aside><i class="i-info me-2"></i></aside>
<div>
<p class="mb-0">
Blender LTS (long-term support) releases feature up to 2 years of support and fixes.
@ -223,9 +223,9 @@
{% endwith %}
{# 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">
<aside><i class="i-info mr-2"></i></aside>
<aside><i class="i-info me-2"></i></aside>
<div>
<p class="mb-0">
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.
</p>
<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
enabled_addons = [addon.module for addon in bpy.context.preferences.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="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="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="rendering" label="Rendering techonologies" %}
</select>

View File

@ -39,7 +39,7 @@
{% for a in activity %}
<li class="a-item a-cat-{{ a.category }} a-membership-cat-{{ a.membership.level.category }}">
<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>
</a>
</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>
<h5 class="stats-sum-name">MONTHLY <br/> CONTRIBUTION</h5>
</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>
<h5 class="stats-sum-name">INDIVIDUALS</h5>
</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>
<h5 class="stats-sum-name">CORPORATE</h5>
</div>
@ -68,7 +68,7 @@
</div>
<div class="levels js-fade" id="join">
<div class="levels-background"></div>
<div class="levels-bg"></div>
<div class="container py-5">
<h1 class="mt-4 py-4">Choose your membership, <br>or donate once</h1>
<div class="row">
@ -161,7 +161,7 @@
{% endcache %}
<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">
<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>

View File

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

View File

@ -17,7 +17,7 @@
<div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5">
<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>
<div class="lead pt-4">
You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund
@ -38,7 +38,7 @@
</a>
<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>
{% if membership.level.bid_badge_name %}

View File

@ -6,7 +6,7 @@
<div class="checkout-yay-bg py-5 checkout-container">
<div class="container text-center py-5">
<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>
<div class="lead py-3">
You are now a <strong>{{ order.subscription.plan }}</strong> member of the Blender Development Fund

View File

@ -5,10 +5,10 @@
{% block content %}
<div class="checkout-container">
<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">
<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>
</header>
<hr/>

View File

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

View File

@ -4,7 +4,7 @@
{% block content %}
<div class="checkout-container">
<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">
<h2 class="my-0 pt-4">Not your payment link</h2>
</section>

View File

@ -19,7 +19,7 @@
{% include "blender_fund_main/components/form.html" %}
<hr/>
<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>
{% endif %}
{% endblock after_membership_info %}

View File

@ -171,7 +171,7 @@
</button>
{% 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>
</a>
{% endif %}