UI: Web Assets v2 upgrade #85

Merged
Márton Lente merged 52 commits from martonlente/extensions-website:ui/web-assets-v2-upgrade into main 2024-04-30 17:57:33 +02:00
49 changed files with 445 additions and 458 deletions

1
.gitmodules vendored
View File

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

View File

@ -24,7 +24,7 @@
<div class="ext-detail-tagline">
<a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
</div>
<div class="ext-detail-authors ml-3">
<div class="ext-detail-authors ms-3">
<a href="{% url 'extensions:by-type' type_slug=extension.type_slug %}">
{{ extension.get_type_display }}
</a>
@ -44,7 +44,7 @@
{% block hero_tabs %}
<nav class="hero-tabs">
<span class="ml-auto"></span>
<span class="ms-auto"></span>
<div class="btn-row mb-1">
{% if request.user.is_staff %}
@ -88,7 +88,7 @@
<div class="dl-row">
<div class="dl-col">
<dt>Status</dt>
<dd>{% include "common/components/status.html" with class="d-block" %}</dd>
<dd>{% include "common/components/status.html" %}</dd>
</div>
</div>
<div class="dl-row">

@ -1 +1 @@
Subproject commit 9d428a82a5b51c1eec99639f3baebeac3b1f93f9
Subproject commit af61a962e1a30898279b4efdbb07a2dcb230a257

View File

@ -5,7 +5,7 @@ function galleriaCloneFirstItem() {
let firstGalleriaItem = galleriaCarrousel.firstElementChild.cloneNode(true);
firstGalleriaItem.classList.remove('js-galleria-item-preview', 'is-active');
firstGalleriaItem.classList.add('js-expand-on-click');
firstGalleriaItem.id = 'galleria-item-large';
firstGalleriaItem.id = 'galleria-item-lg';
document.getElementById("galleria-container").prepend(firstGalleriaItem);
}
@ -13,7 +13,7 @@ function galleriaCloneFirstItem() {
function galleriaSetLargePreview(item) {
let previewsContainer = document.getElementById('galleria-items');
let previewLarge = document.getElementById('galleria-item-large');
let previewLarge = document.getElementById('galleria-item-lg');
let thumbnails = document.getElementsByClassName("js-galleria-item-preview");
[].forEach.call(thumbnails, function(el) {
el.classList.remove("is-active");

View File

@ -4,7 +4,7 @@
z-index: 0
> li
--border-color: var(--box-background-color)
--border-color: var(--box-bg-color)
position: relative
&:first-child
@ -16,7 +16,7 @@
&:last-child
/* Remove bottom half of the vertical line for last item. */
.comment-card:before
height: calc(50% - 1rem)
height: calc(50% - var(--spacer))
.activity-status-change:before
height: calc(50% + var(--border-width))
@ -50,21 +50,25 @@
left: var(--border-width)
position: absolute
top: 50%
width: 2rem
width: calc(var(--spacer) * 2)
z-index: -1
.activity-icon
top: 1.2rem
.profile-avatar
border: var(--border-width) solid var(--border-color)
background-color: var(--border-color)
.comment-card
&:after
top: 2rem
top: 3.2rem
.activity-icon
top: 1.25rem
top: 2.2rem
.activity-status-change
color: var(--text-color-tertiary)
color: var(--color-text-tertiary)
.profile-avatar
+margin(3, right)
@ -73,7 +77,7 @@
left: 0
strong
color: var(--text-color-secondary)
color: var(--color-text-secondary)
.badge
border: none
@ -83,22 +87,22 @@
&.activity-status-approved
.activity-icon
border-color: var(--color-success)
box-shadow: 0 0 1rem var(--color-success-bg)
box-shadow: 0 0 var(--spacer) var(--color-success-bg)
color: var(--color-success-text)
.activity-icon
align-items: center
background-color: var(--background-color)
background-color: var(--color-bg)
border-radius: 100%
border: var(--border-width) solid var(--border-color)
color: var(--text-color-tertiary)
color: var(--color-text-tertiary)
display: flex
font-size: var(--font-size-small)
height: 1.5rem
font-size: var(--fs-sm)
height: var(--spacer-4)
justify-content: center
left: -.66rem
position: absolute
width: 1.5rem
width: var(--spacer-4)
/* Comment form */
.comment-form
@ -112,9 +116,6 @@
select
width: auto
button[type="submit"]
min-width: 50%
textarea
height: calc(var(--spacer) * 8)
max-height: 0

View File

@ -1,17 +1,24 @@
.badge-card
+border-radius(lg)
border-bottom-left-radius: 0
border-bottom-right-radius: 0
display: flex
+padding(2, y)
a.badge-tag
--badge-color: var(--text-color-secondary)
--badge-bg: var(--text-color-tertiary)
--badge-color: var(--color-text-secondary)
--badge-bg: var(--color-text-tertiary)
background-color: transparent
text-decoration: none !important
&:hover
background-color: transparent
border-color: var(--text-color)
color: var(--text-color)
border-color: var(--color-text)
color: var(--color-text)
.badge-tag
font-size: var(--font-size-extra-small)
font-size: var(--fs-xs)
.badge-status
&-approved
@ -24,10 +31,3 @@ a.badge-tag
&-disabled-by-staff,
&-disabled-by-author
@extend .badge-secondary
.card-badge
+border-radius(lg)
border-bottom-left-radius: 0
border-bottom-right-radius: 0
display: flex
+padding(2, y)

View File

@ -0,0 +1,29 @@
.card
@extend .box
+media-sm
--cards-items-per-row: 2
+media-md
--cards-items-per-row: 3
+media-lg
--cards-items-per-row: 4
.cards-item-content
overflow: hidden
.crads-item-excerpt
line-height: calc(24 / 18)
.cards-item-extra
text-transform: none
.cards-item-extra-rating-stars
margin-bottom: .2rem
.stars
font-size: 1.4rem
.cards-item-title
+padding(0, y)

View File

@ -11,33 +11,36 @@
z-index: 0
&:before
background-color: var(--box-background-color)
border-radius: .25rem
background-color: var(--box-bg-color)
border-radius: .4rem
content: ''
display: block
height: 1rem
height: var(--spacer)
left: -.33rem
position: absolute
rotate: 45deg
top: 1rem
width: 1rem
top: var(--spacer)
width: var(--spacer)
z-index: -1
p:last-child
margin-bottom: 0
header
color: var(--text-color-secondary)
font-size: var(--font-size-small)
color: var(--color-text-secondary)
font-size: var(--fs-sm)
+margin(2, bottom)
ul
align-items: center
display: flex
+list-unstyled
gap: 1rem
gap: var(--spacer)
margin: 0
li
line-height: var(--lh-sm)
aside
+margin(2, top)

View File

@ -1,14 +1,17 @@
\:root
--lh-sm: 2.4rem
.hero.extension-detail
--hero-max-height: 0
--hero-min-height: 240px
--font-size-hero-title: clamp(3rem, 4vw + 1rem, 48px)
--font-size-large: 18px
--border-width: 2px
--hero-background-color: hsl(213, 10%, 14%)
--hero-min-height: 24.0rem
--fs-hero-title: clamp(4.8rem, 4vw + 1.6rem, 4.8rem)
--fs-lg: 1.8rem
--border-width: .2rem
--hero-bg-color: hsl(213, 10%, 14%)
background-color: var(--hero-background-color)
background-color: var(--hero-bg-color)
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233e4248' fill-opacity='0.21'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
background-size: 40px
background-size: 4.0rem
flex-direction: column
overflow: initial
text-shadow: none
@ -24,10 +27,10 @@
.hero-overlay
background-color: transparent
background-image: linear-gradient(0deg, var(--background-color), hsla(213, 10%, 14%, 0))
background-image: linear-gradient(0deg, var(--color-bg), hsla(213, 10%, 14%, 0))
&.extension-review
--hero-min-height: 210px
--hero-min-height: 21.0rem
.ext-detail-download-danger
background-color: var(--color-danger-bg)
@ -42,8 +45,8 @@
@extend .alert
@extend .alert-danger
border-radius: 0
font-size: var(--font-size-small)
+font-weight-bold
font-size: var(--fs-sm)
+fw-bold
+padding(1, y)
text-align: center
@ -54,17 +57,17 @@
color: var(--color-warning-text);
.hero-breadcrumbs
font-size: var(--font-size-small)
font-size: var(--fs-sm)
a
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: inline-block
+padding(2)
.ext-detail-name
font-size: var(--font-size-title-massive)
+font-weight-title
line-height: var(--font-size-title-massive)
font-size: var(--fs-title-massive)
+fw-title
line-height: var(--fs-title-massive)
margin-bottom: 0
.ext-detail-info-authors
@ -72,7 +75,7 @@
flex-wrap: wrap
.ext-detail-authors
color: var(--text-color-secondary)
color: var(--color-text-secondary)
.ext-detail-tagline
+margin(2, bottom)
@ -81,9 +84,12 @@
+padding(4)
+style-rich-text
pre
+margin(3, bottom)
.ext-detail-info
dd
color: var(--text-color)
color: var(--color-text)
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
@ -93,8 +99,9 @@
margin-bottom: 0
dt
color: var(--text-color-secondary)
font-size: var(--font-size-small)
color: var(--color-text-secondary)
font-size: var(--fs-sm)
line-height: calc(24 / 14)
dd
font-family: var(--font-family-body)
@ -108,7 +115,7 @@
white-space: nowrap
&:hover
color: var(--text-color-primary)
color: var(--color-text-primary)
.dl-col
overflow: hidden
@ -134,10 +141,10 @@
padding: 0
strong
font-size: var(--font-size-large)
font-size: var(--fs-lg)
i
font-size: var(--font-size-large)
font-size: var(--fs-lg)
+margin(3, right)
.ext-detail-download
@ -145,7 +152,7 @@
+padding(2, y)
.btn-accent
box-shadow: 2px 5px 5px rgba(0,82,255,.102), 1px 10px 15px rgba(0,82,255,.102), 2px 10px 30px rgba(0,82,255,.349)
box-shadow: .2rem .8rem .8rem rgba(0,82,255,.102), 1.6rem 1.0rem 1.8rem rgba(0,82,255,.102), 3.2rem 1.0rem 3.2rem rgba(0,82,255,.349)
.btn-install-drag,
.btn-install-drag:active
@ -160,134 +167,21 @@
summary
.date
+margin(2, left)
color: var(--text-color-secondary)
+font-weight-normal
.cards-list
+media-sm
--cards-list-items-per-row: 2
+media-md
--cards-list-items-per-row: 3
+media-lg
--cards-list-items-per-row: 4
.ext-card
+box-card
display: flex
flex-direction: column
height: 100%
overflow: hidden
transition: box-shadow ease-in-out 1s
&:hover
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .04), -10px 0 20px 0px rgba(0, 0, 0, .04)
&.is-background-blur
background-color: hsl(213, 10%, 21%)
border: thin solid hsl(213, 10%, 20%)
position: relative
.ext-card-body
--text-color-secondary: hsla(213, 40%, 90%, .6)
border-bottom-left-radius: var(--border-radius-lg)
border-bottom-right-radius: var(--border-radius-lg)
+padding(1, top)
mix-blend-mode: screen
position: relative
z-index: 1
&:has(.ext-card-admin)
.ext-card-body
border-radius: 0
.ext-card-thumbnail-img
-webkit-mask-image: -webkit-gradient(linear, left 60%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
.ext-card-thumbnail:hover
&+.ext-card-body .ext-card-title
color: var(--text-color-primary)
&.ext-card-row
flex-direction: row
+margin(3, bottom)
.ext-card-thumbnail
--card-thumbnail-width: 240px
border-top-right-radius: 0
border-bottom-left-radius: var(--border-radius-lg)
height: 100%
img
border-top-right-radius: 0
border-bottom-left-radius: var(--border-radius-lg)
.ext-blender-version
display: inline-block
.ext-card-thumbnail-blur
bottom: 0
filter: blur(50px)
left: 0
position: absolute
right: 0
transform: scale(1.25)
top: 0
z-index: 0
opacity: .5
.ext-card-thumbnail
--card-thumbnail-width: 100%
align-items: center
border-top-left-radius: var(--border-radius-lg)
border-top-right-radius: var(--border-radius-lg)
display: block
justify-content: center
max-width: var(--card-thumbnail-width)
overflow: hidden
.ext-card-thumbnail-img
background-position: center
background-size: cover
+make-aspect-ratio('16x9')
transition: transform ease-out var(--transition-speed)
.ext-card-body
display: flex
flex: 1
flex-direction: column
justify-content: space-between
+padding(3)
p
line-height: 1.2
.ext-card-title
font-size: var(--font-size-large)
+margin(3, bottom)
transition: color var(--transition-speed)
a
text-decoration: none
color: var(--color-text-secondary)
+fw-normal
.ext-list-details
@extend .list-inline
align-items: center
color: var(--text-color-secondary)
font-size: var(--font-size-small)
color: var(--color-text-secondary)
font-size: var(--fs-sm)
line-height: var(--lh-sm)
margin: auto 0 0 0
&+.ext-list-details
+margin(2, top)
.ext-card-tags
display: flex
flex-wrap: wrap
gap: .25rem
justify-content: flex-start
/* Show only on row list view.*/
.ext-blender-version
display: none
@ -295,19 +189,6 @@
.ext-edit-field-row
+margin(2, top)
.ext-card-admin
align-items: center
background-color: hsla(213, 80%, 1%, .33)
border-bottom-left-radius: var(--border-radius-lg)
border-bottom-right-radius: var(--border-radius-lg)
border-top: var(--border-width) solid var(--border-color)
display: flex
justify-content: space-between
z-index: 1
dd
font-family: var(--font-body)
.previews-upload
+box-card
+padding(3)
@ -316,27 +197,29 @@
.previews-list
display: flex
flex-direction: column
gap: .5rem
gap: .8rem
.previews-list-item
--preview-thumbnail-max-size: 180px
--preview-thumbnail-max-size: calc(12.4rem * 16 / 9)
align-items: center
align-items: start
background-color:
border-radius: var(--border-radius-lg)
border: var(--border-width) solid var(--border-color)
display: flex
+padding(1, y)
+padding(2, y)
.previews-list-item-thumbnail
margin: 0
+margin(2, y)
width: var(--preview-thumbnail-max-size)
.previews-list-item-thumbnail-img
background-color: var(--background-color)
background-color: var(--color-bg)
background-position: center
background-size: cover
border-radius: var(--border-radius)
height: 12.4rem
+make-aspect-ratio('16x9')
.details
@ -344,7 +227,8 @@
flex: 1
label
font-size: var(--font-size-small)
font-size: var(--fs-sm)
line-height: var(--lh-sm)
ul
+list-unstyled
@ -365,7 +249,7 @@
.form-control
&[type="file"]
font-size: var(--font-size-extra-small)
font-size: var(--fs-xs)
max-width: 50%
.ext-version-history
@ -374,49 +258,52 @@
ul
@extend .list-inline
color: var(--text-color-secondary)
+font-weight-normal
gap: 0 1rem
color: var(--color-text-secondary)
+fw-normal
gap: 0 1.6rem
margin: 0
+margin(3, right)
.blender-version
color: var(--text-color-secondary)
+font-weight-normal
color: var(--color-text-secondary)
+fw-normal
+margin(3, left)
details[open]
details
padding: 0
&[open]
.show-on-collapse
display: none
.ext-detail-info
.ext-detail-permissions
strong
font-size: var(--font-size-normal)
font-size: var(--fs-normal)
small
display: block
i
font-size: var(--font-size-normal)
font-size: var(--fs-normal)
+margin(2, right)
/* Settings */
.settings
.form-control
&[disabled]
--input-bg-color: var(--background-color)
--input-color-bg: var(--color-bg)
background-color: var(--input-bg-color)
color: var(--text-color-secondary)
background-color: var(--input-color-bg)
color: var(--color-text-secondary)
&:hover
--input-bg-color-hover: var(--input-bg-color)
--input-color-bg-hover: var(--input-color-bg)
cursor: not-allowed
& + i.i-lock
color: var(--text-color-secondary)
color: var(--color-text-secondary)
position: absolute
right: var(--spacer)
@ -430,7 +317,7 @@
+margin(2, right)
.ext-review-list
color: var(--text-color-secondary)
color: var(--color-text-secondary)
th
+padding(3, x)
@ -440,7 +327,7 @@
transition: background-color var(--transition-speed-fast)
a
color: var(--text-color)
color: var(--color-text)
+padding(1, y)
padding-inline: 0 !important
@ -456,3 +343,36 @@
.ext-review-list-activity
display: flex
+padding(0, x)
.rating-form
select
color: var(--color-warning)
&:active,
&:hover,
&:focus
color: var(--color-warning)
// TODO: consider adding component boxed nav generic to web-assets, and make variants on top of that
.nav-pills
@extend .dropdown-menu
box-shadow: none
display: block
position: relative
.nav-pills-item
@extend .dropdown-item
+margin(1, bottom)
&.active
background-color: var(--color-accent-bg)
&:last-child
+margin(0, bottom)
.nav-pills-divider
@extend .dropdown-divider
+margin(0, top)

View File

@ -1,3 +1,18 @@
.form-check-input,
.form-check-label
&:hover
cursor: pointer
.form-check-input
height: var(--spacer-4)
.form-check-label
+margin(2, left)
.form-control
&[type="file"]
height: calc(var(--spacer) * 2.5)
/* Override Tagger's styling. */
.was-validated .form-control:invalid,
.form-control.is-invalid

View File

@ -1,7 +1,7 @@
.galleria-container
--extension-thumbnail-width: 140px
--extension-thumbnail-width: 14.0rem
background-color: var(--background-color-secondary)
background-color: var(--color-bg-secondary)
border-radius: var(--border-radius-lg)
+padding(2)
@ -12,7 +12,7 @@
.galleria-items
display: flex
gap: .5rem
gap: var(--spacer-2)
overflow-x: auto
+padding(2, top)
scroll-behavior: smooth
@ -25,7 +25,7 @@
display: none
&::-webkit-scrollbar
height: 10px
height: 1.0rem
width: 100%
&::-webkit-scrollbar-thumb
@ -33,7 +33,7 @@
border-radius: 999em
&::-webkit-scrollbar-track
background-color: hsl(var(--background-color-h), var(--background-color-s), 80%)
background-color: hsl(var(--color-bg-h), var(--color-bg-s), 80%)
.galleria-item
cursor: pointer
@ -43,7 +43,7 @@
.galleria-item-type-video
&::after
font-size: 2rem
font-size: calc(var(--spacer) * 2)
.galleria-item
+border-radius
@ -69,14 +69,14 @@
transform: translate(-50%, -50%)
width: initial
height: initial
gap: 1rem
gap: var(--spacer)
&.is-active
background-color: var(--color-primary)
background-color: var(--color-accent)
img
clip-path: inset(0.2rem 0.2rem 0.2rem 0.2rem)
clip-path: inset(.2rem .2rem .2rem .2rem)
img
clip-path: inset(0 0 0 0)
@ -92,7 +92,7 @@
color: white
content: '\e83e'
font-family: 'fontutti'
font-size: 4rem
font-size: 5.6rem
left: 50%
top: 50%
pointer-events: none
@ -120,7 +120,7 @@
background: transparent
border: none
cursor: pointer
font-size: 4rem
font-size: 5.6rem
height: 100vh
max-width: 200px
opacity: .6
@ -143,7 +143,7 @@
&.btn-close
fill: white
font-size: 2rem
font-size: 3.2rem
height: 20vh
max-height: 80px
max-width: 80px
@ -174,9 +174,9 @@
.indicator
background-color: rgba(black, .5)
bottom: 1rem
bottom: var(--spacer)
color: white
+font-weight-bold
+fw-bold
min-width: 3ch
+padding(2, x)
position: absolute
@ -184,10 +184,10 @@
text-align: right
.caption
backdrop-filter: blur(25px)
backdrop-filter: blur(2.8rem)
background-color: rgba(black, .5)
border-radius: var(--border-radius)
bottom: 1rem
bottom: var(--spacer)
color: white
+font-weight(500)
line-height: 1.5
@ -195,7 +195,7 @@
+padding(2, x)
position: absolute
text-align: center
text-shadow: 1px 1px 0 black, 2px 2px 3px rgba(black, .5)
text-shadow: .1rem .1rem 0 black, .2rem .2rem rgba(black, .5)
body.is-galleria-active
overflow: hidden

View File

@ -4,7 +4,7 @@
&.is-flatpage
--hero-max-height: 0
--hero-min-height: 240px
--hero-min-height: 24.0rem
background: transparent
.hero-content
@ -23,7 +23,7 @@
> a:not(.btn)
background-color: transparent
border-radius: 0
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: inline-block
+padding(4, x)
+padding(2, y)
@ -32,7 +32,7 @@
&::after
background-color: currentColor
bottom: -1px
bottom: -.1rem
content: ''
height: var(--border-width)
left: 0
@ -48,7 +48,7 @@
opacity: 1
&.is-active
+font-weight-bold
+fw-bold
color: white
&::after

View File

@ -1,14 +1,23 @@
.dl-col
margin-bottom: -.1rem // Compensate border-bottom height
.dl-col-2
flex-grow: 2
.dl-row
+padding(2, bottom)
&:first-child
+padding(0, top)
.list-filters
+box-card
background-color: var(--background-color-tertiary)
background-color: var(--color-bg-tertiary)
+padding(3)
h3
border-bottom: var(--border-width) solid var(--border-color)
color: var(--text-color-secondary)
color: var(--color-text-secondary)
+padding(2, bottom)
ul
@ -17,12 +26,12 @@
li
&.is-active
color: var(--text-color-primary)
+font-weight-bold
color: var(--color-text-primary)
+fw-bold
a
display: block
&:hover
color: var(--text-color-primary)
color: var(--color-text-primary)
text-decoration: none

View File

@ -7,7 +7,8 @@
h4,
h5,
h6
+margin(4, top)
+margin(3, bottom)
+padding(3, top)
img
+border-radius(lg)
@ -19,9 +20,4 @@
& >
h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type,
h5:first-of-type,
h6:first-of-type
+margin(0, top)
+padding(0, top)

View File

@ -0,0 +1,17 @@
.nav-global
--nav-global-border-radius: var(--border-radius)
--nav-global-border-radius-lg: var(--border-radius-lg)
--nav-global-button-height: calc(var(--spacer) * 2.5)
--nav-global-font-size: var(--fs-sm)
--nav-global-link-padding-y: var(--nav-global-spacer-xs);
--nav-global-navbar-height: var(--navbar-primary-height, var(--spacer-6));
--nav-global-spacer: var(--spacer)
--nav-global-spacer-sm: var(--spacer-2)
--nav-global-spacer-xs: var(--spacer-1)
.btn-primary
color: var(--color-accent) !important
input,
.form-control
height: var(--nav-global-button-height)

View File

@ -1,22 +1,23 @@
.background-color
background-color: var(--background-color)
background-color: var(--color-bg)
.background-color-primary
background-color: var(--background-color-primary)
background-color: var(--color-bg-primary)
.background-color-secondary
background-color: var(--background-color-secondary)
background-color: var(--color-bg-secondary)
.background-color-tertiary
background-color: var(--background-color-tertiary)
background-color: var(--color-bg-tertiary)
.border-bottom-tertiary
border-bottom: thin solid var(--background-color-tertiary)
border-bottom: thin solid var(--color-bg-tertiary)
.cursor-move
&:hover
cursor: move !important
// TODO: move utilities 'fade' and 'show' to web-assets
.fade
opacity: 0
// TODO: make variable 'transition-speed-slow' work
@ -36,6 +37,13 @@
.show
opacity: 1
.text-accent
color: var(--color-accent)
a.text-accent
&:hover
color: var(--color-accent)
.text-underline
text-decoration: underline !important

View File

@ -2,41 +2,13 @@
$font-path: '/static/fonts'
/* Import variables.*/
$grid-breakpoints: (xs: 0,sm: 768px,md: 1020px,lg: 1220px,xl: 1380px,xxl: 1680px) !default
$grid-breakpoints: (xs: 0,sm: 768px,md: 1020px,lg: 1220px,xl: 1380px,xxl: 1680px)
$container-max-widths: (sm: 760px, md: 1020px, lg: 1070px, xl: 1320px, xxl: 1600px)
$container-width: map-get($container-max-widths, 'xl')
@import '../../../../assets_shared/src/styles/_media_queries.sass'
@import '../../../../assets_shared/src/styles/_mixins.sass'
@import '../../../../assets_shared/src/styles/_variables.sass'
/* Import 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/_pagination.sass'
@import '../../../../assets_shared/src/styles/_sidebar.sass'
@import '../../../../assets_shared/src/styles/_table.sass'
@import '../../../../assets_shared/src/styles/_type.sass'
/* Web Assets. */
@import '../../../../assets_shared/src/styles/main.sass'
/* Extension Platform specific styling. */
@import '_mixins.sass'
@ -46,6 +18,7 @@ $container-width: map-get($container-max-widths, 'xl')
@import '_alert.sass'
@import '_badge.sass'
@import '_box.sass'
@import '_cards.sass'
@import '_code.sass'
@import '_comments.sass'
@import '_extension.sass'
@ -54,6 +27,7 @@ $container-width: map-get($container-max-widths, 'xl')
@import '_galleria.sass'
@import '_hero.sass'
@import '_list.sass'
@import '_navigation_global.sass'
@import '_table.sass'
@import 'ratings/static/ratings/styles/_review.sass'
@import 'ratings/static/ratings/styles/_stars.sass'
@ -66,7 +40,7 @@ $container-width: map-get($container-max-widths, 'xl')
+media-xs
width: 60px
/* Temporarily here until it can be moved to web-assets v2. */
/* TODO: temporarily here until it can be moved to web-assets v2. */
.nav-global-links-right
gap: 0 var(--spacer-2)
.navbar-search
@ -77,11 +51,11 @@ $container-width: map-get($container-max-widths, 'xl')
.profile-avatar
border-radius: 50%
height: var(--spacer-4)
pointer-events: none
width: 26px
.search-highlight
background-color: var(--btn-bg-color)
background-color: var(--btn-color-bg)
border-radius: var(--border-radius)
color: var(--btn-color)
font-style: normal
@ -97,13 +71,13 @@ $container-width: map-get($container-max-widths, 'xl')
border-radius: var(--border-radius)
color: hsl(0, 100%, 90%) !important
display: flex
+font-weight-bold
font-size: var(--font-size-extra-small)
+fw-bold
font-size: var(--fs-xs)
justify-content: center
padding-block: .1rem
padding-inline: .4rem
padding-inline: var(--spacer-1)
position: absolute
top: -.4rem
top: calc(var(--spacer-2) * -1)
transition: background-color var(--transition-speed), box-shadow 500ms, color var(--transition-speed)
right: -.5rem

View File

@ -40,12 +40,12 @@
.tagger > ul > li:not(.tagger-new) a:visited,
.tagger-new ul a,
.tagger-new ul a:visited {
color: var(--text-color);
color: var(--color-text);
}
.tagger > ul > li:not(.tagger-new) > a,
.tagger li:not(.tagger-new) > span,
.tagger .tagger-new ul {
background: var(--btn-bg-color);
background: var(--btn-color-bg);
border-radius: var(--border-radius);
padding: 4px 4px 4px 8px;

View File

@ -125,8 +125,8 @@
</li>
{% block nav-upload %}
<li>
<a href="{% url 'extensions:submit' %}" class="btn btn-primary text-primary">
<li class="me-2">
<a href="{% url 'extensions:submit' %}" class="btn btn-primary">
<i class="i-upload"></i>
<span>Upload Extension</span>
</a>

View File

@ -1,3 +1,4 @@
{# TODO: check if template is used and needed #}
<li class="nav-item {% include "common/components/_nav_item_active" %}">
{% include "common/components/nav_link.html" %}
</li>

View File

@ -1,5 +1,5 @@
{% if name %}
<a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
<a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
{% elif path %}
<a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
<a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
{% endif %}

View File

@ -14,7 +14,7 @@
{% endblock hero %}
{% block content %}
<div class="box p-5 my-3 is-flatpage">
<div class="box my-3 is-flatpage">
{{ flatpage.content|markdown }}
</div>
{% endblock content %}

View File

@ -1,8 +1,8 @@
// TODO: improve and refactor variable namings
const formsetContainer = document.getElementById('add-image-container');
const formsetContainer = document.getElementById('add-img-container');
const form = document.getElementById('update-extension-form');
const btnAddImage = document.getElementById('btn-add-image');
const btnAddImage = document.getElementById('btn-add-img');
const formsetPrefix = 'form';
const inputTotalForms = document.getElementById(`id_${formsetPrefix}-TOTAL_FORMS`);
const tagInput = document.getElementById('id_tags');
@ -28,7 +28,7 @@ function appendImageUploadForm() {
const formRow = document.createElement('div');
const newFormHTML = `
<div class="previews-list-item">
<div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
<div class="align-items-center d-flex previews-list-item-thumbnail ps-3">
<div class="js-input-img-thumbnail previews-list-item-thumbnail-img" title="Preview">
<div class="align-items-center d-flex js-input-img-thumbnail-icon justify-content-center">
<i class="i-image"></i>
@ -44,10 +44,10 @@ function appendImageUploadForm() {
<input accept="image/jpg,image/jpeg,image/png,image/webp,video/mp4" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
<ul class="pt-0">
<li>
<button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
<button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>
</li>
<li>
<button class="btn btn-link btn-sm js-btn-remove-img-upload-form pl-2 pr-0"><i class="i-trash"></i> Delete</button>
<button class="btn btn-link btn-sm js-btn-remove-img-upload-form ps-2 pe-0"><i class="i-trash"></i> Delete</button>
</li>
</ul>
</div>

View File

@ -71,7 +71,7 @@
{% trans "Version History" %}
</a>
<span class="ml-auto"></span>
<span class="ms-auto"></span>
<div class="btn-row">
{% if is_maintainer %}

View File

@ -1,5 +1,5 @@
<a href="{% url "extensions:by-support" support_slug=slug %}" title="Support: {{ name }}"
class="badge text-decoration-none align-middle {% if not small %}px-3 py-2 my-1{% endif %} badge-dark{#% if slug == 'official' %}primary{% elif slug == 'community' %}success{% else %}warning{% endif % #}"
style="{% if not small %}font-size: var(--font-size-base);{% endif %}">
style="{% if not small %}font-size: var(--fs-base);{% endif %}">
<b>{{ name }}</b>
</a>

View File

@ -1,25 +1,23 @@
{% load common filters %}
{% with latest=extension.latest_version thumbnail_360p_url=extension.get_previews.0.thumbnail_360p_url %}
<div class="ext-card {% if blur %}is-background-blur{% endif %}">
{% if blur %}
<div class="ext-card-thumbnail-blur" style="background-image: url({{ thumbnail_360p_url }});"></div>
{% endif %}
<a class="ext-card-thumbnail" href="{{ extension.get_absolute_url }}">
<div class="ext-card-thumbnail-img" style="background-image: url({{ thumbnail_360p_url }});" title="{{ extension.name }}"></div>
{% with latest=extension.latest_version thumbnail_360p_url=extension.previews.listed.first.thumbnail_360p_url %}
<div class="cards-item">
<div class="cards-item-content">
<a href="{{ extension.get_absolute_url }}">
<div class="cards-item-thumbnail">
<img alt="{{ extension.name }}" src="{{ thumbnail_360p_url }}" title="{{ extension.name }}">
</div>
</a>
<div class="ext-card-body">
<h3 class="ext-card-title">
<h3 class="cards-item-title">
<a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
</h3>
<div class="cards-item-excerpt">
<p>
{{ latest.tagline }}
</p>
<ul class="ext-list-details">
<li class="ext-card-author">
</div>
<div class="cards-item-extra">
<ul>
<li>
{% if extension.team %}
{% with team=extension.team %}
<a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
@ -30,10 +28,10 @@
</li>
</ul>
<ul class="ext-list-details mt-1">
<ul class="cards-item-extra-rating-stars">
{% if extension.average_score %}
<li>
<a href="{{ extension.get_ratings_url }}">
<a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
{% include "ratings/components/average.html" with score=extension.average_score %}
({{ extension.text_ratings_count|int_compact }})
</a>
@ -47,22 +45,25 @@
{% endif %}
{% if show_type %}
<li class="ml-auto">
<li class="ms-auto">
{{ extension.get_type_display }}
</li>
{% endif %}
</ul>
{% if latest.tags.count %}
<ul class="ext-list-details ext-card-tags">
<li class="ext-card-tags">
{% include "extensions/components/tags.html" with small=True version=latest %}
<ul>
{% for tag in latest.tags.all %}
<li>
{% include "extensions/components/badge_tag.html" with small=True version=latest %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
{# Author/admin tools can be added here in an extending template #}
{% block admin %}{% endblock admin %}
</div>
</div>
{% endwith %}

View File

@ -2,9 +2,9 @@
{# Info Summary #}
<section class="ext-detail-info">
<div class="card">
<div class="card p-0">
{% if is_initial %}
<div class="badge badge-info card-badge">
<div class="badge badge-card badge-info">
Information retrieved from manifest
</div>
{% else %}

View File

@ -19,11 +19,13 @@
{# Description #}
{% block extension_description %}
{% if extension.description %}
<section id="about" class="mt-3">
<div class="box ext-detail-description">
{{ extension.description|markdown }}
</div>
</section>
{% endif %}
{% endblock extension_description %}
{# What's New #}
@ -82,7 +84,7 @@
</ul>
</div>
{% else %}
<p class="mb-0"><i class="i-check mr-0"></i> This extension does not require special permissions.</p>
<p class="mb-0"><i class="i-check me-0"></i> This extension does not require special permissions.</p>
{% endif %}
</section>
{% endif %}
@ -125,7 +127,7 @@
<dt>{% trans 'Rating' %}</dt>
<dd>
{% if extension.average_score %}
<a href="{{ extension.get_ratings_url }}" class="text-decoration-none">
<a href="{{ extension.get_ratings_url }}" class="align-items-center d-flex stars-helper-detail text-decoration-none">
{% include "ratings/components/average.html" with score=extension.average_score %}
({{ extension.ratings.listed.count }})
</a>
@ -274,7 +276,7 @@
{% trans 'Reviews' %}
</a>
</h2>
<a href="{{ extension.get_ratings_url }}" class="ml-auto">See all</a>
<a href="{{ extension.get_ratings_url }}" class="ms-auto">See all</a>
</div>
</div>
</div>

View File

@ -82,7 +82,7 @@
<section class="card p-3 mt-3">
<div class="btn-col">
<button type="submit" name="save_draft" class="btn btn-primary btn-warning">
<button type="submit" name="save_draft" class="btn btn-warning">
<i class="i-check"></i>
<span>{% trans 'Save Draft' %}</span>
</button>

View File

@ -25,7 +25,7 @@
</div>
</div>
<div class="hero-background" style="background-image: url(https://www.blender.org/wp-content/uploads/2022/08/piotr-krynski-scanislands-blender-33lts-crop.jpg); background-position-y: 50%"></div>
<div class="hero-bg" style="background-image: url(https://www.blender.org/wp-content/uploads/2022/08/piotr-krynski-scanislands-blender-33lts-crop.jpg); background-position-y: 50%"></div>
<div class="hero-overlay"></div>
<div class="hero-credits"></div>
</div>
@ -38,10 +38,10 @@
<h2>
<a href="{% url 'extensions:by-type' type_slug='add-ons' %}">Add-ons</a>
</h2>
<a href="{% url 'extensions:by-type' type_slug='add-ons' %}" class="ml-auto">See all</a>
<a href="{% url 'extensions:by-type' type_slug='add-ons' %}" class="ms-auto">See all</a>
</div>
<p>Extend Blender capabilities with these add-ons by the community.</p>
<div class="cards-list mt-3">
<div class="cards cards-lg-4 cards-md-3 cards-sm-2 mt-3">
{% for extension in addons %}
{% include "extensions/components/card.html" %}
{% endfor %}
@ -53,12 +53,12 @@
<h2>
<a href="{% url 'extensions:by-type' type_slug='themes' %}">Themes</a>
</h2>
<a href="{% url 'extensions:by-type' type_slug='themes' %}" class="ml-auto fw-normal">
<a href="{% url 'extensions:by-type' type_slug='themes' %}" class="ms-auto fw-normal">
See all
</a>
</div>
<p>Blender themes to your liking. Dark, light, flat, colorful, and everything in between.</p>
<div class="cards-list mt-3">
<div class="cards cards-lg-4 cards-md-3 cards-sm-2 mt-3">
{% for extension in themes %}
{% include "extensions/components/card.html" %}
{% endfor %}
@ -66,7 +66,7 @@
<div class="my-5 text-center">
Got an add-on or theme to share with the community?
<a href="{% url 'extensions:submit' %}" class="text-primary ml-2">
<a href="{% url 'extensions:submit' %}" class="text-accent ms-2">
Upload
<i class="i-chevron-right"></i>
</a>

View File

@ -33,7 +33,7 @@
{% endif %}
{% if tag %}
<h2 class="d-flex align-items-center">
<span class="mr-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
<span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
{% include "extensions/components/badge_tag.html" %}
</h2>
{% endif %}
@ -47,7 +47,7 @@
<div class="row">
<div class="col">
{% if object_list %}
<div class="cards-list card-layout-horizontal cards-3">
<div class="cards cards-3">
{% for extension in object_list %}
{% include "extensions/components/card.html" with show_type=False %}
{% endfor %}

View File

@ -1,15 +1,14 @@
{% load common %}
{# Upload new preview images #}
{% load i18n %}
<div class="previews-upload">
<div id="add-image-container" class="previews-list">
<div id="add-img-container" class="previews-list">
{{ add_preview_formset.management_form }}
{{ add_preview_formset.non_form_errors }}
{% for newform in add_preview_formset %}
{% with inlineform=newform|add_form_classes %}
<div class="ext-edit-field-row js-ext-edit-field-row">
<div class="previews-list-item">
<div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
<div class="d-flex previews-list-item-thumbnail ps-3">
<div class="js-input-img-thumbnail previews-list-item-thumbnail-img" title="Preview">
<div class="align-items-center d-flex js-input-img-thumbnail-icon justify-content-center">
<i class="i-image"></i>
@ -24,7 +23,7 @@
{% include "common/components/field.html" with field=inlineform.source label='File' %}
<ul class="pt-0">
<li>
<button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
<button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>
</li>
</ul>
</div>
@ -35,10 +34,9 @@
{% endwith %}
{% endfor %}
</div>
</div>
<div class="row">
<div class="col text-right mt-3">
<a id="btn-add-image" class="btn">
<a id="btn-add-img" class="btn">
<i class="i-plus"></i>
<span>{% trans 'Add Preview' %}</span>
</a>

View File

@ -2,16 +2,17 @@
{% load i18n %}
{% block admin %}
<div class="ext-card-admin p-3">
<div>
<div class="bg-secondary cards-item-extra pt-3">
<ul class="w-100">
<li class="d-flex justify-content-between me-0 w-100">
<a href="{{ extension.get_manage_url }}" class="btn btn-sm">
<i class="i-edit"></i>
<span>{% trans 'Edit' %}</span>
</a>
<div class="align-items-center d-flex">
{% include "common/components/status.html" with object=extension class="badge-tag" %}
</div>
<div>
{% include "common/components/status.html" with object=extension %}
</div>
</li>
</ul>
</div>
{% endblock admin %}

View File

@ -25,7 +25,7 @@
<div class="row mt-4">
<div class="col">
{% if object_list %}
<div class="cards-list">
<div class="cards">
{% for extension in object_list %}
{% include "extensions/manage/components/card.html" with show_type=True %}
{% endfor %}

View File

@ -68,7 +68,7 @@
<small>Source File</small>
</a>
</li>
<li class="ml-auto">
<li class="ms-auto">
{% include "common/components/field.html" with field=inlineform.DELETE %}
</li>
<li>
@ -153,7 +153,7 @@
const previewDragContainer = document.querySelector('.js-previews-drag-container');
const previewDragClass = 'js-preview-drag';
{% comment %} dragula([document.querySelector('.js-preview-drag'), document.querySelector('.cards-list')]); {% endcomment %}
{% comment %} dragula([document.querySelector('.js-preview-drag'), document.querySelector('.cards')]); {% endcomment %}
dragula([previewDragContainer, previewDragContainer], {
moves: function (el, container, handle) {
return handle.className.includes(previewDragClass);

View File

@ -29,7 +29,7 @@
<span class="show-on-collapse blender-version">
{% include "extensions/components/blender_version.html" with version=version %}
</span>
<ul class="ml-auto">
<ul class="ms-auto">
<li class="show-on-collapse">{{ version.file.size_bytes|filesizeformat }}</li>
<li class="show-on-collapse"><i class="i-download"></i> {{ version.download_count }}</li>
<li>

View File

@ -32,7 +32,7 @@
h1 {
background: linear-gradient(to right, #0cc, violet);
background-clip: text;
-webkit-background-clip: text;
-webkit-bg-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 300;
font-size: 1.6em;

View File

@ -51,6 +51,7 @@
-webkit-mask-size: var(--star-size) var(--star-size)
mask-size: var(--star-size) var(--star-size)
text-align: left
transform: translateY(-.2rem)
width: var(--stars-number)
span
@ -62,6 +63,11 @@
--star-size: 1.6em
width: 8em
// TODO: refactor stars-helper
.stars-helper
max-height: 1.4rem
transform: translateY(-.1rem)
.ratings-summary
display: flex
flex-direction: column
@ -87,9 +93,9 @@
text-decoration: none
span
color: var(--text-color-secondary)
color: var(--color-text-secondary)
display: block
font-size: var(--font-size-base)
font-size: var(--fs-base)
.stars
+margin(auto, x)

View File

@ -2,6 +2,6 @@
{% blocktranslate asvar title with score=score %}Rated {{ score }} out of 5{% endblocktranslate %}
<span class="stars{% if size %} {{ size }}{% endif %}" title="{{ title }}">
<span class="stars me-1 {% if size %} {{ size }}{% endif %}" title="{{ title }}">
<span style="width: {% widthratio score 5 100 %}%"></span>
</span>

View File

@ -14,9 +14,9 @@
{{ rating.user }}
</a>
</li>
<li class="mr-auto">
<li class="align-items-center d-flex me-auto">
{% with score_percentage=rating.score %}
<a href="{{ extension.get_ratings_url }}?score={{ rating.score }}">
<a class="stars-helper" href="{{ extension.get_ratings_url }}?score={{ rating.score }}">
{% include "ratings/components/average.html" with score=rating.score %}
</a>
{% endwith %}

View File

@ -4,7 +4,7 @@
{% block page_title %}Rate {{ extension.name }}{% endblock page_title %}
{% block content %}
<div class="container">
<div class="container rating-form">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{% with form=form|add_form_classes %}

View File

@ -13,7 +13,7 @@
{% endif %}
</h2>
{% if score %}
<div class="ml-auto">
<div class="ms-auto">
<a href="{{ extension.get_ratings_url }}" class="text-muted">See all</a>
</div>
{% endif %}

View File

@ -12,7 +12,7 @@
<a href="{{ extension.get_review_url }}#activity">
<span>{{ stats.count }}</span>
</a>
<a href="{{ extension.get_review_url }}#activity-{{ stats.last_activity.id }}" class="ml-3">
<a href="{{ extension.get_review_url }}#activity-{{ stats.last_activity.id }}" class="ms-3">
<span>{{ stats.last_activity.date_created|naturaltime_compact }}</span>
</a>
{% include "files/components/scan_details_flag.html" with suspicious_files=extension.suspicious_files %}

View File

@ -24,7 +24,7 @@
{% trans "Version History" %}
</a>
<span class="ml-auto"></span>
<span class="ms-auto"></span>
<div class="btn-row">
{% if is_maintainer %}
@ -138,7 +138,7 @@
{{ activity.user }}
</a>
</li>
<li class="ml-auto">
<li class="ms-auto">
<a href="#activity-{{ activity.id }}" title="{{ activity.date_created }}">
{{ activity.date_created|naturaltime_compact }}
</a>
@ -166,8 +166,11 @@
{% include "common/components/field.html" with field=form.message %}
<div class="d-flex align-items-center">
<div class="btn-row ml-3 w-100 justify-content-end">
<div class="btn-row ms-3 w-100 justify-content-end">
{% if is_maintainer or request.user.is_moderator %}
{% include "common/components/field.html" with field=form.type %}

Getting a template error on items in approval-queue. This added if is not closed.

approval queue

Getting a template error on items in approval-queue. This added `if` is not closed. ![approval queue](/attachments/812bd802-d0ab-44a1-9d27-5181b8e9df7b)
{% endif %}
<button type="submit" id="activity-submit" class="btn btn-primary">
<span>{% trans "Comment" %}</span>
</button>

View File

@ -1,3 +1,3 @@
{% for _slug, badge in badges.items %}
<img class="mr-2" width="{{ width }}" src="{{ badge.image }}" title="{{ badge.description }}" label="{{ badge.label }}" />
<img class="me-2" width="{{ width }}" src="{{ badge.image }}" title="{{ badge.description }}" label="{{ badge.label }}" />
{% endfor %}

View File

@ -1,7 +1,7 @@
{% load static %}
<img src="{% if user.image %}{{ user.image.url }}{% else %}{% static 'common/images/blank-profile-pic.png' %}{% endif %}" class="profile-avatar {{ classes }}">
{% if show_name %}
<span class="ml-2">
<span class="ms-2">
{% firstof user.full_name user.username %}
</span>
{% endif %}

View File

@ -12,7 +12,7 @@
<div class="row">
<div class="d-none d-md-block col-md-3">
<div class="is-sticky pt-4">
<nav class="box nav-drawer-nested">
<nav class="box nav-drawer-nested p-3">
<div class="nav-drawer-body fw-bold">
{% include 'users/settings/tabs.html' %}
</div>

View File

@ -27,12 +27,12 @@
</div>
<div class="col-md-6 mb-4">
<label class="mb-2 h3" for="email">
<span class="mr-1">Email</span>
<span class="me-1">Email</span>
{% if user.confirmed_email_at %}
<span class="align-middle badge badge-sm badge-success"><i class="i-check"></i>Confirmed</span>
<span class="align-middle badge badge-success fs-xs"><i class="i-check"></i>Confirmed</span>
{% else %}
<span class="align-middle badge badge-sm badge-warning"><i class="i-alert-triangle"></i>Not yet confirmed</span>
<span class="align-middle badge badge-warning fs-xs"><i class="i-alert-triangle"></i>Not yet confirmed</span>
{% endif %}
</label>
<div class="align-items-center d-flex position-relative">

View File

@ -3,9 +3,11 @@
{% include "common/components/nav_link.html" with name="users:my-profile" title="Profile" classes="i-home py-2" %}
{% if user.teams.count %}
{% include "common/components/nav_link.html" with name="teams:list" title="Teams" classes="i-people py-2" %}
{% include "common/components/nav_link.html" with name="teams:list" title="Teams" classes="i-users py-2" %}
{% endif %}
<div class="nav-pills-divider"></div>
{% include "common/components/nav_link.html" with name="users:my-profile-delete" title="Delete account" classes="i-trash py-2" %}
</div>
{% endspaceless %}