Version 2.1.0 (beta) update #104385
|
|
@ -1 +1 @@
|
|||
Subproject commit 6527140bbf1479171256d25d9afcd310ef897f17
|
||||
Subproject commit 4e3eddffdccc999722b73634dbd1c9e95b6ccb26
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-2 py-md-3">
|
||||
<div class="page-detail-helper container py-2 py-md-3">
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-1"></div>
|
||||
<div class="col-12 col-lg-10">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-2 py-md-3">
|
||||
<div class="character-detail container py-2 py-md-3">
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-1"></div>
|
||||
<div class="col-12 col-lg-10">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="col-lg-1"></div>
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="align-items-start row">
|
||||
<div class="col-12 col-md">
|
||||
<div class="col">
|
||||
<div>
|
||||
<a href="{% url 'character-list' %}" class="d-block mb-3 text-muted">Characters</a>
|
||||
<div class="d-inline">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
||||
<div class="col-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
||||
{% include "common/components/navigation/buttons_toolbar.html" with item=character_version like_url=character.like_url likes_count=character.likes.count liked=character.liked %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<path
|
||||
d="M 6,2 C 4.9,2 4.01,2.9 4.01,4 L 4,20 c 0,1.1 0.89,2 1.99,2 H 18 c 1.1,0 2,-0.9 2,-2 V 8 L 14,2 Z m 7,7 V 3.5 L 18.5,9 Z"
|
||||
fill="#ffffff"
|
||||
id="path2"
|
||||
style="fill:#6b757d;fill-opacity:0.737255" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 481 B |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 460 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 590 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
// TODO: make script more generic if multiple subnavs are added
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const navGlobalLinkTraining = document.querySelector('.js-nav-global-link-training');
|
||||
const navSubnavTraining = document.querySelector('.js-nav-subnav-training');
|
||||
|
||||
function positionNavSubnavTraining() {
|
||||
// Get 'navGlobalLinkTraining' position left
|
||||
const navGlobalLinkTrainingRect = navGlobalLinkTraining.getBoundingClientRect();
|
||||
const navGlobalLinkTrainingPositionLeft = navGlobalLinkTrainingRect.left;
|
||||
|
||||
// Position 'navSubnavTraining'
|
||||
navSubnavTraining.style.left = navGlobalLinkTrainingPositionLeft + 'px';
|
||||
}
|
||||
|
||||
function hideNavSubnavTraining() {
|
||||
navSubnavTraining.classList.remove('show');
|
||||
}
|
||||
|
||||
function showNavSubnavTraining() {
|
||||
navSubnavTraining.classList.add('show');
|
||||
}
|
||||
|
||||
function init() {
|
||||
positionNavSubnavTraining();
|
||||
|
||||
// Create event 'navGlobalLinkTraining' on mouseover
|
||||
navGlobalLinkTraining.addEventListener('mouseover', function() {
|
||||
showNavSubnavTraining();
|
||||
});
|
||||
|
||||
// Create event 'navGlobalLinkTraining' on mouseleave
|
||||
navGlobalLinkTraining.addEventListener('mouseleave', function(e) {
|
||||
|
||||
// Check if mouse has left 'navSubnavTraining' area
|
||||
if (!navSubnavTraining.contains(e.relatedTarget)) {
|
||||
hideNavSubnavTraining();
|
||||
}
|
||||
});
|
||||
|
||||
// Create event 'navSubnavTraining' on mouseleave
|
||||
navSubnavTraining.addEventListener('mouseleave', function() {
|
||||
hideNavSubnavTraining();
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get all elements with the class 'js-sentence-case'
|
||||
const sentenceCaseItems = document.querySelectorAll('.js-sentence-case');
|
||||
|
||||
// Create function to convert a string to sentence case
|
||||
function sentenceCase(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
||||
}
|
||||
|
||||
// Apply sentence case to each item
|
||||
sentenceCaseItems.forEach((item) => {
|
||||
const textOriginal = item.textContent;
|
||||
const textSentenceCase = sentenceCase(textOriginal);
|
||||
|
||||
item.textContent = textSentenceCase;
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Create function replaceSubstrings
|
||||
function replaceSubstrings(className, replacements) {
|
||||
const items = document.querySelectorAll('.' + className);
|
||||
|
||||
items.forEach(function (item) {
|
||||
let content = item.textContent;
|
||||
|
||||
// Iterate through each replacement pair
|
||||
replacements.forEach(function (pair) {
|
||||
const stringOld = pair[0];
|
||||
const stringNew = pair[1];
|
||||
|
||||
content = content.replace(new RegExp(stringOld, 'g'), stringNew);
|
||||
});
|
||||
|
||||
// Update the item's content
|
||||
item.textContent = content;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Replace currency texts with symbols
|
||||
const replacements = [
|
||||
['EUR', '€'],
|
||||
['USD', '$'],
|
||||
];
|
||||
|
||||
replaceSubstrings('js-price-per-month', replacements);
|
||||
});
|
||||
|
|
@ -111,8 +111,10 @@ document.querySelectorAll('[data-bs-tooltip="tooltip-overflow"').forEach((i) =>
|
|||
tooltip.disable();
|
||||
const text = i.querySelector('.overflow-text');
|
||||
this.addEventListener('mouseover', () => {
|
||||
if (text.scrollWidth > text.clientWidth) {
|
||||
tooltip.enable();
|
||||
if (typeof scrollWidth !== 'undefined') {
|
||||
if (text.scrollWidth > text.clientWidth) {
|
||||
tooltip.enable();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -75,3 +75,6 @@ select
|
|||
/* Utilities. */
|
||||
.border-bottom
|
||||
border-bottom-color: var(--color-text-tertiary) !important
|
||||
|
||||
.letter-spacing
|
||||
letter-spacing: .1em
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
margin-bottom: var(--spacer-2)
|
||||
|
||||
.comment-section
|
||||
border-top: var(--border-width) solid var(--component-bg)
|
||||
border-top: var(--border-width) solid var(--box-bg-color)
|
||||
margin-top: calc(var(--spacer) * 2)
|
||||
+padding(3, top)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,41 @@
|
|||
\:root
|
||||
--fs-xl: 6.4rem
|
||||
|
||||
+media-xs
|
||||
--fs-xl: 6.4rem
|
||||
|
||||
+media-sm
|
||||
--fs-xl: 4.8rem
|
||||
|
||||
+media-lg
|
||||
--fs-xl: 6.4rem
|
||||
|
||||
/* Box. */
|
||||
.box-subscriptions
|
||||
backdrop-filter: blur(var(--spacer-4)) brightness(175%) saturate(125%)
|
||||
background-color: hsla(0, 0%, 100%, calc(.5))
|
||||
+padding(5, top)
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
+padding(0, left)
|
||||
|
||||
li
|
||||
// color-text-secondary, opacity 50%
|
||||
border-bottom: .1rem solid hsla(213, 10%, 58%, .5)
|
||||
+padding(4, left)
|
||||
+padding(2, y)
|
||||
position: relative
|
||||
|
||||
&::before
|
||||
content: "\2713" // symbol checkmark
|
||||
+margin(2, right)
|
||||
left: 0
|
||||
position: absolute
|
||||
|
||||
&:first-child
|
||||
+padding(0, top)
|
||||
|
||||
/* Buttons. */
|
||||
@mixin button-float
|
||||
.btn-float
|
||||
|
|
@ -12,6 +50,9 @@
|
|||
.btn-float
|
||||
opacity: 1
|
||||
|
||||
.btns-toolbar
|
||||
@extend .border-bottom
|
||||
|
||||
.checkbox-like
|
||||
span
|
||||
pointer-events: none
|
||||
|
|
@ -36,16 +77,37 @@
|
|||
.cards-films
|
||||
--grid-gap-size: 3rem
|
||||
|
||||
.cards-item
|
||||
// TODO: refactor convert file-icon-img
|
||||
.cards-item-icon-img
|
||||
height: var(--spacer-6)
|
||||
width: var(--spacer-6)
|
||||
|
||||
.cards-item-thumbnail
|
||||
&.ratio-16x9
|
||||
&::before
|
||||
display: none !important
|
||||
|
||||
.cards-item-file
|
||||
.cards-item-title,
|
||||
.cards-item-title-overlay
|
||||
bottom: 0
|
||||
|
||||
.cards-item-title
|
||||
font-size: var(--fs-base)
|
||||
font-size: var(--fs-sm)
|
||||
line-height: var(--spacer)
|
||||
padding-left: var(--spacer) !important
|
||||
padding-right: var(--spacer) !important
|
||||
|
||||
.cards-item-title-overlay
|
||||
background: linear-gradient(0deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 100%)
|
||||
height: var(--spacer-5)
|
||||
|
||||
.cards-item-film
|
||||
.cards-item-excerpt
|
||||
font-size: var(--fs-sm)
|
||||
line-height: var(--lh-sm)
|
||||
|
||||
.cards-item-thumbnail
|
||||
&::before
|
||||
padding-top: calc(23 / 16 * 100%)
|
||||
|
|
@ -56,6 +118,55 @@
|
|||
max-height: none
|
||||
width: auto
|
||||
|
||||
.cards-people
|
||||
// Create mixin to translate nth-child items
|
||||
=translateItems($start, $end, $translateX)
|
||||
@for $i from $start through $end
|
||||
&:nth-child(#{$i})
|
||||
transform: translateX($translateX)
|
||||
|
||||
--cards-items-per-row: 2
|
||||
--grid-gap-size: var(--spacer-5) var(--spacer)
|
||||
|
||||
.cards-item-people
|
||||
--cards-item-thumbnail-width: var(--spacer-6)
|
||||
|
||||
.cards-item-extra
|
||||
ul
|
||||
li
|
||||
font-size: var(--fs-sm)
|
||||
letter-spacing: normal
|
||||
line-height: var(--lh-sm)
|
||||
text-transform: none
|
||||
|
||||
.cards-item-thumbnail
|
||||
img
|
||||
filter: grayscale(1)
|
||||
|
||||
.cards-item-title
|
||||
+fw-title
|
||||
+margin(1, bottom)
|
||||
|
||||
+media-md
|
||||
+translateItems(4, 6, var(--spacer-5))
|
||||
+translateItems(10, 12, var(--spacer-5))
|
||||
|
||||
+media-lg
|
||||
+translateItems(4, 6, 0)
|
||||
+translateItems(10, 12, 0)
|
||||
|
||||
+translateItems(5, 8, var(--spacer-5))
|
||||
+translateItems(13, 16, var(--spacer-5))
|
||||
|
||||
+media-sm
|
||||
--cards-items-per-row: 2
|
||||
|
||||
+media-md
|
||||
--cards-items-per-row: 3
|
||||
|
||||
+media-lg
|
||||
--cards-items-per-row: 4
|
||||
|
||||
/* Flatpage. */
|
||||
.flat-page-content
|
||||
h1, h2, h3, h4, h5, h6
|
||||
|
|
@ -76,10 +187,11 @@
|
|||
|
||||
.badge
|
||||
&.badge-video-duration
|
||||
bottom: calc(var(--spacer) / 4)
|
||||
color: white
|
||||
margin: 0
|
||||
position: absolute
|
||||
right: calc(var(--spacer) / 4)
|
||||
right: var(--spacer-1)
|
||||
top: var(--spacer-1)
|
||||
|
||||
// Reset cards-item-thumbnail
|
||||
.cards-item-thumbnail
|
||||
|
|
@ -171,10 +283,13 @@
|
|||
&.grid
|
||||
margin-bottom: calc(var(--spacer) / 2)
|
||||
|
||||
/* Hero. */
|
||||
.film-logo
|
||||
max-height: calc(var(--spacer) * 12)
|
||||
/* Forms. */
|
||||
input
|
||||
&[type="checkbox"],
|
||||
height: auto
|
||||
+margin(2, right)
|
||||
|
||||
/* Hero. */
|
||||
.hero-blog,
|
||||
.hero-character,
|
||||
.hero-checkout,
|
||||
|
|
@ -194,12 +309,24 @@
|
|||
.hero-film
|
||||
height: auto
|
||||
max-height: none
|
||||
padding: calc(var(--spacer) * 2) 0 calc(var(--spacer) * 4)
|
||||
+padding(6, y)
|
||||
|
||||
.hero-content
|
||||
.film-logo
|
||||
margin-bottom: calc(var(--spacer) * 2)
|
||||
max-width: 100%
|
||||
max-height: calc(var(--spacer) * 12)
|
||||
|
||||
+media-md
|
||||
max-width: 50%
|
||||
|
||||
.hero-subtitle
|
||||
font-size: var(--fs-h4)
|
||||
line-height: calc(28 / 21)
|
||||
|
||||
.hero-overlay-gradient
|
||||
+position-absolute-zero
|
||||
background: linear-gradient(0deg, var(--body-bg) 0%, rgba(0,0,0,0) 100%)
|
||||
background: linear-gradient(0deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 100%)
|
||||
top: auto
|
||||
height: 50%
|
||||
|
||||
|
|
@ -211,6 +338,13 @@
|
|||
height: 92vh
|
||||
min-height: 680px
|
||||
|
||||
/* Looper. */
|
||||
.looper-select-option
|
||||
input
|
||||
&[type=radio]
|
||||
height: auto
|
||||
margin-right: var(--spacer-1)
|
||||
|
||||
/* Navbar. */
|
||||
.navbar-secondary
|
||||
display: flex
|
||||
|
|
@ -241,23 +375,65 @@
|
|||
i.i-chevron-down
|
||||
right: 0
|
||||
|
||||
/* Navigation subnav. */
|
||||
.nav-subnav
|
||||
--color-bg: hsla(0, 0%, 0%, .5)
|
||||
|
||||
backdrop-filter: blur(var(--spacer-4)) brightness(25%) saturate(175%)
|
||||
width: 72.0rem
|
||||
z-index: calc(var(--zindex-fixed) + 1)
|
||||
|
||||
a
|
||||
transition: opacity var(--transition-speed)
|
||||
|
||||
&:hover
|
||||
opacity: .8
|
||||
text-decoration: none
|
||||
|
||||
.btn-secondary
|
||||
// TODO: @web-assets check why not --border-width is used
|
||||
--btn-box-shadow: inset 0 0 0 .1rem currentColor
|
||||
|
||||
hr
|
||||
border-top: .1rem solid rgba(137, 147, 159, 0.5)
|
||||
|
||||
.nav-subnav-item-img
|
||||
min-width: 30%
|
||||
|
||||
div
|
||||
+make-aspect-ratio-custom(16, 9)
|
||||
|
||||
/* Notifications. */
|
||||
.activity-list-item
|
||||
opacity: 0.5
|
||||
transition: opacity var(--transition-speed)
|
||||
|
||||
&.unread
|
||||
opacity: 1
|
||||
|
||||
/* Pages. */
|
||||
.page-detail-helper
|
||||
.btns-toolbar
|
||||
border-bottom: 0 !important
|
||||
|
||||
/* Payment. */
|
||||
.braintree-heading
|
||||
color: var(--color-text)
|
||||
|
||||
/* Plyr. */
|
||||
button,
|
||||
.btn
|
||||
&.plyr__control
|
||||
padding-bottom: var(--spacer-2) !important
|
||||
padding-top: var(--spacer-2) !important
|
||||
|
||||
svg
|
||||
height: var(--spacer)
|
||||
|
||||
/* Profile. */
|
||||
.profile-avatar
|
||||
img
|
||||
box-shadow: 0 0 0 3px var(--component-bg-light)
|
||||
border-radius: 50%
|
||||
box-shadow: 0 0 0 3px var(--color-bg-primary)
|
||||
border-radius: 50% !important
|
||||
height: var(--profile-avatar-size)
|
||||
width: var(--profile-avatar-size)
|
||||
|
||||
|
|
@ -317,6 +493,10 @@
|
|||
transform: scale(1.1)
|
||||
|
||||
/* Type */
|
||||
::selection
|
||||
color: var(--color-text)
|
||||
background-color: var(--color-accent)
|
||||
|
||||
.body-bg
|
||||
.markdown-text
|
||||
hr
|
||||
|
|
@ -358,6 +538,12 @@
|
|||
font-size: var(--fs-xs)
|
||||
|
||||
/* Utilities (components). */
|
||||
.section-bg-img
|
||||
+make-aspect-ratio-custom(16, 9)
|
||||
|
||||
+media-lg
|
||||
+make-aspect-ratio-custom(4, 1)
|
||||
|
||||
// TODO: @web-assets refactor style components spoiler-alert
|
||||
.spoiler-alert
|
||||
@include border-radius($border-radius)
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
padding: var(--spacer)
|
||||
|
||||
.modal-content
|
||||
background-color: var(--component-bg-dark)
|
||||
background-color: var(--color-bg-secondary)
|
||||
|
||||
.modal-dialog
|
||||
border-radius: var(--border-radius-lg)
|
||||
|
|
|
|||
|
|
@ -63,13 +63,13 @@
|
|||
z-index: $zindex-dropdown
|
||||
width: calc(100% - var(--spacer))
|
||||
left: var(--spacer) / 2
|
||||
border: 1px solid var(--component-bg-light)
|
||||
border: 1px solid var(--color-bg-primary)
|
||||
|
||||
@include media-breakpoint-down(sm)
|
||||
display: block
|
||||
|
||||
.nav-drawer-inner
|
||||
border-top: 1px solid var(--component-bg-light)
|
||||
border-top: 1px solid var(--color-bg-primary)
|
||||
|
||||
.navbar-secondary
|
||||
border-width: 0
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
.nav-drawer-body
|
||||
overflow-y: auto
|
||||
|
||||
+scroll-bar(var(--navbar-bg), var(--component-bg-light))
|
||||
+scroll-bar(var(--navbar-bg), var(--color-bg-primary))
|
||||
|
||||
.nav-drawer-body
|
||||
height: auto
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
|
||||
.nav-drawer-section-progress-wrapper
|
||||
&+h4, +.h4
|
||||
margin-left: calc(var(--spacer) * 1.75)
|
||||
margin-left: calc(var(--spacer) * 2.25)
|
||||
|
||||
h4, .h4
|
||||
margin-bottom: 0
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
line-height: 1
|
||||
|
||||
&::before
|
||||
background: var(--component-bg-light)
|
||||
background: var(--color-bg-primary)
|
||||
border-radius: $border-radius
|
||||
content: close-quote
|
||||
height: calc(100% - var(--spacer) / 2)
|
||||
|
|
@ -290,7 +290,7 @@
|
|||
|
||||
.drawer-nav-header
|
||||
margin-top: -$spacer / 4
|
||||
border-bottom: var(--border-width) solid var(--component-bg)
|
||||
border-bottom: var(--border-width) solid var(--box-bg-color)
|
||||
margin-bottom: $spacer / 4
|
||||
padding: $spacer
|
||||
|
||||
|
|
@ -308,6 +308,7 @@
|
|||
width: 24px
|
||||
|
||||
h5
|
||||
font-size: var(--fs-sm)
|
||||
left: 50%
|
||||
line-height: 0
|
||||
position: absolute
|
||||
|
|
@ -326,11 +327,11 @@ $circle-circumference: $circle-diameter * 3.14
|
|||
border-radius: 50%
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
height: 30px
|
||||
height: 40px
|
||||
justify-content: center
|
||||
margin-right: ($spacer / 2)
|
||||
position: relative
|
||||
width: 30px
|
||||
width: 40px
|
||||
|
||||
&.progress
|
||||
border: var(--border-width) solid var(--color-accent)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
.bg-cover
|
||||
background-size: cover
|
||||
|
||||
.bg-fixed
|
||||
background-attachment: fixed
|
||||
|
||||
.bg-overlay
|
||||
@extend .hero-overlay
|
||||
|
||||
|
|
@ -14,7 +17,10 @@
|
|||
background-color: var(--color-bg-tertiary) !important
|
||||
|
||||
.body-bg
|
||||
background-color: var(--body-bg)
|
||||
background-color: var(--color-bg)
|
||||
|
||||
.border-bottom
|
||||
border-bottom: var(--border-width) solid var(--color-bg-primary) !important
|
||||
|
||||
.bottom-0
|
||||
bottom: 0
|
||||
|
|
@ -22,6 +28,14 @@
|
|||
.end-0
|
||||
right: 0
|
||||
|
||||
.fs-xl
|
||||
font-size: var(--fs-xl)
|
||||
|
||||
sup
|
||||
font-size: var(--fs-h4)
|
||||
+padding(2, left)
|
||||
top: -1.4em
|
||||
|
||||
.h-0
|
||||
height: 0
|
||||
|
||||
|
|
@ -49,6 +63,14 @@
|
|||
.mh-12
|
||||
max-height: calc(var(--spacer) * 12)
|
||||
|
||||
.overlay-gradient
|
||||
// TODO: change style hero-overlay-gradient to less specificity
|
||||
@extend .hero-overlay-gradient
|
||||
|
||||
background: linear-gradient(180deg, hsl(213, 10%, 12%) 0%, rgba(0, 0, 0, 0) 100%)
|
||||
bottom: auto
|
||||
top: 0
|
||||
|
||||
.ratio-16x9
|
||||
padding-bottom: calc(9 / 16 * 100%)
|
||||
|
||||
|
|
@ -58,6 +80,23 @@
|
|||
.start-0
|
||||
left: 0
|
||||
|
||||
.text-gradient
|
||||
+text-gradient(to right, var(--color-accent), var(--color-danger))
|
||||
|
||||
.text-muted
|
||||
color: var(--color-text-secondary) !important
|
||||
|
||||
.theme-dark
|
||||
/* TODO: reassign variables 'box-*' to prevail in selector scope. Move to web-assets */
|
||||
--badge-bg: var(--color-bg-secondary)
|
||||
--badge-color: var(--color-text)
|
||||
--box-bg-color: var(--color-bg-primary)
|
||||
|
||||
/* TODO: reassign rules 'background-color' and 'color' to prevail in selector scope. Move to web-assets */
|
||||
background-color: var(--color-bg)
|
||||
color: var(--color-text)
|
||||
|
||||
|
||||
.top-0
|
||||
top: 0
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
$border-radius: var(--border-radius)
|
||||
|
||||
$container-width: 132.0rem
|
||||
// TODO: consider moving to web-assets
|
||||
$container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 132.0rem, xxl: 160.0rem)
|
||||
|
||||
$font-path: "/static/assets/fonts"
|
||||
|
||||
// Change Bootstrap 5 link text-decoration default
|
||||
$link-decoration: none
|
||||
|
||||
$plyr-audio-progress-buffered-bg: var(--color-text)
|
||||
|
|
@ -13,20 +12,9 @@ $plyr-menu-color: var(--color-text)
|
|||
$plyr-video-control-color: var(--color-text)
|
||||
$plyr-video-control-bg-hover: var(--color-text)
|
||||
|
||||
$spacer: 1.6rem
|
||||
|
||||
\:root
|
||||
--body-color-bg: var(--color-bg) !important
|
||||
--body-color-tertiary: var(--color-text-tertiary)
|
||||
|
||||
--body-bg: var(--color-bg)
|
||||
--component-bg: var(--box-bg-color)
|
||||
--component-bg-light: var(--color-bg-primary)
|
||||
--component-bg-dark: var(--color-bg-secondary)
|
||||
|
||||
--body-color: var(--color-text)
|
||||
--body-color-highlight: var(--color-text-primary)
|
||||
--body-color-secondary: var(--color-text-secondary)
|
||||
--body-color-tertiary: var(--color-text-tertiary)
|
||||
|
||||
--color-like: var(--color-danger)
|
||||
|
||||
--profile-avatar-size: calc(var(--spacer) * 2)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,24 @@
|
|||
\:root
|
||||
--fs-h1: 3.2rem
|
||||
--fs-h2: 2.8rem
|
||||
|
||||
+media-sm
|
||||
--fs-h1: 4.0rem
|
||||
--fs-h2: 3.2rem
|
||||
|
||||
// TODO: @web-assets check media breakpoints
|
||||
a
|
||||
&:hover
|
||||
cursor: pointer
|
||||
|
||||
/* Base. */
|
||||
body
|
||||
background-color: var(--color-bg)
|
||||
|
||||
// TODO: consider moving to web-assets
|
||||
.container
|
||||
+padding(3, x)
|
||||
|
||||
/* Button */
|
||||
button,
|
||||
.btn
|
||||
|
|
@ -20,7 +37,7 @@ button,
|
|||
color: var(--color-bg)
|
||||
|
||||
.btn-img
|
||||
padding: 0
|
||||
padding: 0 !important
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
|
|
@ -36,6 +53,9 @@ button,
|
|||
background-color: hsl(213, 10%, 24%) // Same as nav-global-color-button-bg-hover
|
||||
color: var(--color-text-primary)
|
||||
|
||||
.btn-row
|
||||
gap: var(--spacer)
|
||||
|
||||
/* Card. */
|
||||
a
|
||||
.cards-item-thumbnail
|
||||
|
|
@ -51,14 +71,66 @@ a.cards-item-content
|
|||
.cards-item-thumbnail img
|
||||
transform: scale(1.033)
|
||||
|
||||
.card-layout-horizontal-circle-transparent
|
||||
.cards-item-title
|
||||
line-height: var(--lh-base)
|
||||
|
||||
.card-layout-card-transparent
|
||||
.cards-item-content
|
||||
background-color: transparent
|
||||
box-shadow: none
|
||||
|
||||
// TODO: move to web-assets
|
||||
.cards
|
||||
+media-sm
|
||||
&.cards-sm-1
|
||||
--cards-items-per-row: 1
|
||||
|
||||
&.cards-sm-2
|
||||
--cards-items-per-row: 2
|
||||
|
||||
&.cards-sm-3
|
||||
--cards-items-per-row: 3
|
||||
|
||||
&.cards-sm-4
|
||||
--cards-items-per-row: 4
|
||||
|
||||
|
||||
+media-md
|
||||
&.cards-md-1
|
||||
--cards-items-per-row: 1
|
||||
|
||||
&.cards-md-2
|
||||
--cards-items-per-row: 2
|
||||
|
||||
&.cards-md-3
|
||||
--cards-items-per-row: 3
|
||||
|
||||
&.cards-md-4
|
||||
--cards-items-per-row: 4
|
||||
|
||||
+media-lg
|
||||
&.cards-lg-1
|
||||
--cards-items-per-row: 1
|
||||
|
||||
&.cards-lg-2
|
||||
--cards-items-per-row: 2
|
||||
|
||||
&.cards-lg-3
|
||||
--cards-items-per-row: 3
|
||||
|
||||
&.cards-lg-4
|
||||
--cards-items-per-row: 4
|
||||
|
||||
.cards-item-extra
|
||||
letter-spacing: .1em
|
||||
padding-top: 0
|
||||
|
||||
ul
|
||||
li
|
||||
margin-right: var(--spacer-3)
|
||||
white-space: normal
|
||||
|
||||
// Fix cards list item thumbnail overflow on hover transition when card is not within a cards
|
||||
.cards-item-thumbnail
|
||||
overflow: hidden
|
||||
|
|
@ -68,19 +140,21 @@ a.cards-item-content
|
|||
padding-bottom: var(--spacer-2)
|
||||
|
||||
/* Deprecated. */
|
||||
.btn-lg
|
||||
padding-bottom: var(--spacer-2) !important
|
||||
padding-top: var(--spacer-2) !important
|
||||
|
||||
.lead
|
||||
line-height: calc(28 / 24)
|
||||
line-height: calc(32 / 24)
|
||||
|
||||
/* Details. */
|
||||
details
|
||||
@extend .box
|
||||
+padding(2)
|
||||
|
||||
margin-bottom: var(--spacer) !important
|
||||
|
||||
summary
|
||||
&:before
|
||||
left: var(--spacer-2)
|
||||
top: 1.0rem
|
||||
&+details
|
||||
&:last-child
|
||||
+margin(0, y)
|
||||
|
||||
/* Dropdown. */
|
||||
.dropdown-menu
|
||||
|
|
@ -104,6 +178,13 @@ summary
|
|||
background-color: var(--color-bg-secondary)
|
||||
color: var(--color-text)
|
||||
|
||||
/* Hero. */
|
||||
.hero-content
|
||||
h1
|
||||
+margin(3, bottom)
|
||||
|
||||
.hero-subtitle
|
||||
+margin(3, bottom)
|
||||
|
||||
/* Modal. */
|
||||
@media (min-width: 576px)
|
||||
|
|
@ -115,6 +196,11 @@ summary
|
|||
max-width: 780px
|
||||
|
||||
/* Navigation global */
|
||||
.navbar
|
||||
--navbar-active-indicator-width: -.2rem
|
||||
|
||||
+padding(0, y)
|
||||
|
||||
.navbar-secondary
|
||||
.navbar-nav
|
||||
overflow-x: scroll
|
||||
|
|
@ -141,6 +227,15 @@ summary
|
|||
background-color: var(--nav-global-color-menu-bg)
|
||||
color: var(--nav-global-color-text)
|
||||
|
||||
.nav-global-apps-menu
|
||||
top: calc(var(--spacer) * 3.5)
|
||||
|
||||
.nav-global-nav-links
|
||||
min-width: 50%
|
||||
|
||||
a
|
||||
height: calc(var(--spacer) * 4)
|
||||
+padding(0, y)
|
||||
|
||||
/* Pagination */
|
||||
// Fix hover colours when btn is not in box for web-assets
|
||||
|
|
@ -168,7 +263,34 @@ table
|
|||
padding-top: var(--spacer-3)
|
||||
|
||||
/* Type. */
|
||||
h1, h2, h3, h4, h5, h6
|
||||
+fw-title
|
||||
|
||||
h1
|
||||
line-height: calc(40 / 32)
|
||||
|
||||
+media-sm
|
||||
line-height: calc(48 / 40)
|
||||
|
||||
h2
|
||||
line-height: calc(32 / 28)
|
||||
|
||||
+media-sm
|
||||
line-height: calc(40 / 32)
|
||||
|
||||
hr
|
||||
border-color: var(--color-text-tertiary)
|
||||
|
||||
.small
|
||||
font-size: var(--fs-sm)
|
||||
|
||||
sup
|
||||
left: -.25em
|
||||
top: -1em
|
||||
|
||||
/* Uilities. */
|
||||
.fade
|
||||
&:not(.show)
|
||||
height: 0 !important
|
||||
overflow: hidden
|
||||
padding: 0 !important
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{% load static %}
|
||||
{% load common_extras %}
|
||||
<!DOCTYPE html>
|
||||
<html data-theme="dark" lang="en">
|
||||
<html {% block data_theme %}data-theme="dark"{% endblock %} lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -45,6 +45,7 @@
|
|||
</div>
|
||||
|
||||
{% include 'common/components/navbar.html' %}
|
||||
{% include 'common/components/navbar-subnav.html' %}
|
||||
|
||||
<div class="container-main">
|
||||
{% block secondary_nav %}{% endblock secondary_nav %}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,14 @@
|
|||
|
||||
<div class="cards-item {{ card_sizes }}">
|
||||
<a aria-label="{{ post.title }}" class="cards-item-content text-decoration-none" href="{% url 'post-detail' slug=post.slug %}">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{{ post.thumbnail_s_url }}" alt="{{ post.title }}">
|
||||
<div class="bg-tertiary cards-item-thumbnail">
|
||||
{% if post.thumbnail_s_url %}
|
||||
<img src="{{ post.thumbnail_s_url }}" alt="{{ post.title }}">
|
||||
{% else %}
|
||||
<div class="align-items-center position-absolute d-flex justify-content-center">
|
||||
<img class="cards-item-icon-img" src="/static/common/images/icons/file-grey.svg" alt="File preview">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h3 class="cards-item-title">
|
||||
{% if post.is_new and post.is_published %}
|
||||
|
|
@ -18,15 +24,15 @@
|
|||
</div>
|
||||
<div class="d-flex cards-item-extra">
|
||||
{% if not post.is_published %}
|
||||
<span class="badge badge-danger me-2">Unpublished</span>
|
||||
<span class="badge badge-danger me-3">Unpublished</span>
|
||||
{% else %}
|
||||
<div class="me-2">
|
||||
<div class="me-3">
|
||||
<i class="i-clock"></i>
|
||||
{{ post.date_published|timesince|compact_timesince }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if post.number_of_likes > 0 %}
|
||||
<div class="me-2">
|
||||
<div class="me-3">
|
||||
{% if post.liked %}
|
||||
<i class="i-heart-filled"></i>
|
||||
{% else %}
|
||||
|
|
@ -36,7 +42,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% if post.comments.count > 0 %}
|
||||
<div class="me-2">
|
||||
<div class="me-3">
|
||||
<i class="i-comment"></i>
|
||||
{{ post.comments.count }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,31 @@
|
|||
{% include 'common/components/cards/card_carousel.html' with title="Title" subtitle="Subtitle" slides=3 card_set=recently_watched_sections media_type="sections" id="carouselId" %}
|
||||
{% endcomment %}
|
||||
|
||||
<section class="mb-4">
|
||||
<div class="row justify-content-center mb-2">
|
||||
<div class="col">
|
||||
<section class="pb-6">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
{# TODO: fix line-heights #}
|
||||
{% if title_link %}
|
||||
<a href="{{ title_link }}" class="mb-0 h2">{{ title|default:"Title" }}</a>
|
||||
{# TODO: check if 'title_link' is needed #}
|
||||
{% comment %}
|
||||
<a href="{{ title_link }}" class="fs-1 fw-bold js-sentence-case mb-3 pe-md-5">{{ title|default:"Title" }}.</a>
|
||||
{% endcomment %}
|
||||
{# TODO: improve markup semantics #}
|
||||
<h1 class="js-sentence-case pe-md-5">{{ title|default:"Title" }}</h1>
|
||||
{% else %}
|
||||
<h2 class="mb-0">{{ title|default:"Title" }}</h2>
|
||||
<h1 class="js-sentence-case pe-md-5">{{ title|default:"Title" }}</h1>
|
||||
{% endif %}
|
||||
<p class="mb-0">{{ subtitle|default:"Subtitle" }}</p>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3">
|
||||
<div class="lead">
|
||||
<p>
|
||||
{{ subtitle|default:"" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
{# Class 'carousel-card-toolbar' is needed for js #}
|
||||
<div class="carousel-card-toolbar col-md-auto d-md-block d-none">
|
||||
<a class="btn btn-link {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}"
|
||||
|
|
@ -63,6 +78,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{% if description %}
|
||||
<div class="pt-4 row justify-content-center">
|
||||
<div class="col-md-8 text-center">
|
||||
<p class="mb-0">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row d-block d-md-none">
|
||||
<div class="col-md-auto carousel-card-toolbar">
|
||||
<a class="btn btn-link {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<section class="pb-6">
|
||||
<div class="mb-5 row">
|
||||
<div class="col-md-4">
|
||||
{# TODO: fix line-heights #}
|
||||
|
||||
{% if title_link %}
|
||||
{# TODO: check if 'title_link' is needed #}
|
||||
{% comment %}
|
||||
<a href="{{ title_link }}" class="fs-1 fw-bold js-sentence-case mb-3 pe-md-5">{{ title|default:"Title" }}.</a>
|
||||
{% endcomment %}
|
||||
{# TODO: improve markup semantics #}
|
||||
<h1 class="js-sentence-case pe-md-5">{{ title|default:"Title" }}</h1>
|
||||
{% else %}
|
||||
<h1 class="js-sentence-case pe-md-5">{{ title|default:"Title" }}</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-8 pt-3">
|
||||
<div class="lead">
|
||||
<p>
|
||||
{{ subtitle|default:"" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5 row">
|
||||
<div class="col-md-12">
|
||||
<div class="cards card-layout-card-transparent">
|
||||
{% for card in card_set|slice:6 %}
|
||||
{% if media_type == "file" %}
|
||||
{% include "common/components/file_carousel.html" with film_asset=card %}
|
||||
{% elif media_type == "section" %}
|
||||
{% include "training/components/card_training_section.html" with section=card %}
|
||||
{% elif media_type == "blog" %}
|
||||
{% include 'common/components/cards/card_blog.html' with post=card %}
|
||||
{% elif media_type == "training" %}
|
||||
{% include "training/components/card_training.html" with training=card card_sizes=" " %}
|
||||
{% elif media_type == "film" %}
|
||||
{% include "films/components/card_film.html" with film=card %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if description %}
|
||||
<div class="pt-4 row justify-content-center">
|
||||
<div class="col-md-8 text-center">
|
||||
<p class="mb-0">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<section class="{{ classes }}">
|
||||
<div class="justify-content-center mb-3 row">
|
||||
<div class="col-md-6 text-center">
|
||||
<h1>Frequently Asked Questions</h1>
|
||||
<div class="mb-5 row">
|
||||
<div class="col-md-4">
|
||||
<h1>Frequently asked <span class="text-muted">questions.</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{# Classes 'file-*' and 'grid-*' are used by js #}
|
||||
<div class="cards-item-file cards-item file grid-item {{ card_sizes|default:'col-12 col-sm-6 col-md-6 col-lg-4' }} {% if aspect_ratio == '16:9' %}widescreen{% elif aspect_ratio == '4:3' %}fourbythree{% elif aspect_ratio == '1:1' %}square{% endif %} {% if asset.is_spoiler or not user_can_view_asset and not asset.is_free %}locked{% endif %}">
|
||||
<a class="cards-item-content file-modal-link" data-asset-id="{{ asset.id }}" data-url="{% url 'api-asset' asset.id %}?site_context={{ site_context }}">
|
||||
<div class="mb-1 position-relative">
|
||||
<div class="position-relative">
|
||||
<div class="cards-item-thumbnail">
|
||||
{% if asset.static_asset.thumbnail %}
|
||||
{% if user_can_view_asset or asset.is_free %}
|
||||
|
|
@ -60,12 +60,12 @@
|
|||
<img class="file-icon" src="{% static "common/images/icons/file.svg" %}" alt="asset preview">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="cards-item-title-overlay position-absolute w-100"></div>
|
||||
<h4 class="cards-item-title d-flex mb-0 position-absolute w-100">
|
||||
<span data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ asset.name }}">
|
||||
<span class="overflow-text">{{ asset.name }}</span>
|
||||
</span>
|
||||
</h4>
|
||||
</div>
|
||||
<h4 class="cards-item-title d-flex mb-0">
|
||||
<span data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ asset.name }}">
|
||||
<span class="overflow-text">{{ asset.name }}</span>
|
||||
</span>
|
||||
</h4>
|
||||
</a>
|
||||
<div class="h-2"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{# Class 'card-grid-item' is needed for js #}
|
||||
<div class="card-grid-item cards-item {{ card_sizes|default:"col-12 col-sm-6 col-lg-3" }}">
|
||||
<a aria-label="{{ film_asset.name }}" class="bg-transparent cards-item-content file" href="{{ film_asset.url }}" data-asset-id="{{ film_asset.id }}" data-bs-tooltip="tooltip-overflow" data-placement="top" data-url="{% url 'api-asset' film_asset.id %}?site_context={{ site_context }}" title="{{ asset.name }}">
|
||||
<div class="mb-1 position-relative">
|
||||
<div class="position-relative">
|
||||
<div class="cards-item-thumbnail">
|
||||
{% if film_asset.static_asset.thumbnail_s_url %}
|
||||
<img class="file-img" src="{{ film_asset.static_asset.thumbnail_s_url }}" alt="{{ film_asset.name }}"/>
|
||||
|
|
@ -25,6 +25,6 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h3 class="cards-item-title oveflow-text">{{ film_asset.name }}</h3>
|
||||
<h3 class="cards-item-title fs-4 lh-sm oveflow-text">{{ film_asset.name }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{% load thumbnail %}
|
||||
{% load common_extras %}
|
||||
|
||||
<div class="cards-item file grid-item {{ card_sizes|default:"col-12 col-sm-6 col-md-6 col-lg-4" }}">
|
||||
<div class="cards-item file">
|
||||
<a class="cards-item-content" href="{{ section.url }}">
|
||||
<div class="position-relative">
|
||||
<div class="cards-item-thumbnail">
|
||||
|
|
@ -20,11 +20,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="cards-item-title" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ section.name }}">
|
||||
{% if section.is_free %}
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
{% endif %}
|
||||
<span class="overflow-text">{{ section.name }}</span>
|
||||
</div>
|
||||
<h3 class="cards-item-title" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ section.name }}">{{ section.name }}</h3>
|
||||
{% if section.is_free %}
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="align-items-start row">
|
||||
<div class="align-items-start mb-3 row">
|
||||
<div class="col-12 col-md mb-2 pb-24">
|
||||
{% include "common/components/navigation/buttons_toolbar.html" with item=asset %}
|
||||
</div>
|
||||
|
|
@ -134,6 +134,7 @@
|
|||
<div class="align-items-end col d-flex flex-column justify-content-end text-muted text-sm x-sm">
|
||||
<div class="d-flex">
|
||||
<div class="me-2">
|
||||
{# TODO: fix 'get_source_type_display' always image #}
|
||||
{{ asset.static_asset.get_source_type_display }}
|
||||
</div>
|
||||
<div class="me-2">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
{% load static %}
|
||||
{# TODO: add offset y while keeping js event mouseleave behaviour #}
|
||||
<div class="box d-md-block d-none fade js-nav-subnav-training nav-subnav position-absolute theme-dark" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-10.png' %}')">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="fs-xs letter-spacing lh-1 text-muted text-uppercase mb-3">
|
||||
Highlighted trainings
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<a class="col-6 d-flex pb-3" href="/training/geometry-nodes-from-scratch">
|
||||
<div class="me-3 nav-subnav-item-img">
|
||||
<div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-geometry-nodes-orig.jpg' %}');"></div>
|
||||
</div>
|
||||
<h6 class="fs-sm fw-normal lh-sm mb-0">Geometry nodes from scratch</h6>
|
||||
</a>
|
||||
<a class="col-6 d-flex pb-3" href="/training/procedural-shading">
|
||||
<div class="me-3 nav-subnav-item-img">
|
||||
<div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-procedural-shading-orig.jpg' %}');"></div>
|
||||
</div>
|
||||
<h6 class="fs-sm fw-normal lh-sm mb-0">Procedural shading: Fundamentals and beyond</h6>
|
||||
</a>
|
||||
<a class="col-6 d-flex pb-3" href="/training/stylized-character-workflow">
|
||||
<div class="me-3 nav-subnav-item-img">
|
||||
<div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-stylized-character-workflow-orig.jpg' %}' );"></div>
|
||||
</div>
|
||||
<h6 class="fs-sm fw-normal lh-sm mb-0">Stylized character workflow</h6>
|
||||
</a>
|
||||
<a class="col-6 d-flex pb-3" href="/training/animation-fundamentals">
|
||||
<div class="me-3 nav-subnav-item-img">
|
||||
<div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-animation-fundamentals-orig.jpg' %}');"></div>
|
||||
</div>
|
||||
<h6 class="fs-sm fw-normal lh-sm mb-0">Animation fundamentals</h6>
|
||||
</a>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="fs-xs letter-spacing lh-1 text-muted text-uppercase mb-3">
|
||||
Training types
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-3 row">
|
||||
<div class="col-12">
|
||||
<div class="btn-row">
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bmenu%5D%5Btype%5D=course#all-training">Course</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bmenu%5D%5Btype%5D=documentation#all-training">Documentation</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bmenu%5D%5Btype%5D=production%20lesson#all-training">Production lesson</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc[menu][type]=workshop#all-training">Worskhop</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="fs-xs letter-spacing lh-1 text-muted text-uppercase mb-3">
|
||||
Training categories
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="btn-row">
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bquery%5D=animation#all-training">Animation</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bquery%5D=geometry%20nodes#all-training">Geometry Nodes</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bquery%5D=lighting#all-training">Lighting</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc[query]=rendering#all-training">Rendering</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bquery%5D=rigging#all-training">Rigging</a>
|
||||
<a class="btn btn-secondary btn-sm" href="/training/?training_date_desc%5Bquery%5D=shading#all-training">Shading</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="nav-global" >
|
||||
<div class="nav-global theme-dark" >
|
||||
<div class="nav-global-container">
|
||||
<nav>
|
||||
<a href="/" class="nav-global-logo {% if request.path == '/' %}is-active{% endif %}">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<a href="{% url 'film-list' %}" class="{% if '/films' in request.path %}is-active{% endif %}">Films</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'training-home' %}" class="{% if '/training' in request.path %}is-active{% endif %}">Training</a>
|
||||
<a href="{% url 'training-home' %}" class="js-nav-global-link-training {% if '/training' in request.path %}is-active{% endif %}">Training</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'character-list' %}" class="{% if '/characters' in request.path %}is-active{% endif %}">Characters</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% load common_extras %}
|
||||
|
||||
<div class="btn-row justify-content-end justify-content-md-start">
|
||||
<div class="btns-toolbar d-flex justify-content-md-between pb-3">
|
||||
{% firstof item.like_url like_url as like_url %}
|
||||
{% firstof item.liked liked as liked %}
|
||||
{% firstof item.likes.count likes_count as likes_count %}
|
||||
|
|
@ -16,53 +16,68 @@
|
|||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_anonymous and not item.is_free %}
|
||||
<button class="btn btn-link disabled"><i class="i-lock" disabled></i> Login to Download</button>
|
||||
{% elif not item.is_free and not request.user|has_active_subscription %}
|
||||
<button class="btn btn-link disabled"><i class="i-lock" disabled></i> Subscribe to Download</button>
|
||||
{% elif request.user|has_active_subscription or item.is_free %}
|
||||
{% firstof "" item.preview_video_static_asset.video.tracks.count as preview_video_has_subtitles %}
|
||||
{% firstof "" item.static_asset.video.tracks.count as has_subtitles %}
|
||||
{# in case there's more than one downloadable, show a dropdown #}
|
||||
{% if item.preview_video_static_asset and item.static_asset or preview_video_has_subtitles or has_subtitles %}
|
||||
<div class="btn-row d-none d-md-flex">
|
||||
{% if user.is_anonymous and not item.is_free %}
|
||||
<button class="btn btn-link disabled"><i class="i-lock" disabled></i> Login to Download</button>
|
||||
{% elif not item.is_free and not request.user|has_active_subscription %}
|
||||
<button class="btn btn-link disabled"><i class="i-lock" disabled></i> Subscribe to Download</button>
|
||||
{% elif request.user|has_active_subscription or item.is_free %}
|
||||
{% firstof "" item.preview_video_static_asset.video.tracks.count as preview_video_has_subtitles %}
|
||||
{% firstof "" item.static_asset.video.tracks.count as has_subtitles %}
|
||||
{# in case there's more than one downloadable, show a dropdown #}
|
||||
{% if item.preview_video_static_asset and item.static_asset or preview_video_has_subtitles or has_subtitles %}
|
||||
{% include "common/components/navigation/download_button.html" with static_asset=item.static_asset %}
|
||||
<button data-bs-toggle="dropdown" data-bs-target="#downloadDropdown" class="btn btn-link dropdown-toggle">
|
||||
<i class="i-chevron-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" id="downloadDropdown">
|
||||
{% if item.preview_video_static_asset %}
|
||||
{% include "common/components/navigation/download_button.html" with static_asset=item.preview_video_static_asset additional_download="video" %}
|
||||
{% endif %}
|
||||
{% if has_subtitles or preview_video_has_subtitles %}
|
||||
{% with static_asset=item.preview_video_static_asset|default:item.static_asset %}
|
||||
{% firstof item.name item as vtt_filename %}
|
||||
{% include "common/components/navigation/download_subtitles.html" with name=vtt_filename %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "common/components/navigation/download_button.html" with static_asset=item.static_asset %}
|
||||
<button data-bs-toggle="dropdown" data-bs-target="#downloadDropdown" class="btn btn-link dropdown-toggle">
|
||||
<i class="i-chevron-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end" id="downloadDropdown">
|
||||
{% if item.preview_video_static_asset %}
|
||||
{% include "common/components/navigation/download_button.html" with static_asset=item.preview_video_static_asset additional_download="video" %}
|
||||
{% endif %}
|
||||
{% if has_subtitles or preview_video_has_subtitles %}
|
||||
{% with static_asset=item.preview_video_static_asset|default:item.static_asset %}
|
||||
{% firstof item.name item as vtt_filename %}
|
||||
{% include "common/components/navigation/download_subtitles.html" with name=vtt_filename %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "common/components/navigation/download_button.html" with static_asset=item.static_asset %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_staff %}
|
||||
{% firstof item.character.admin_url item.admin_url as admin_url %}
|
||||
<a href="{{ admin_url }}" class="btn btn-admin">
|
||||
<i class="i-edit"></i>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<button data-bs-toggle="dropdown" class="btn btn-link">
|
||||
<i class="i-more-vertical"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank"
|
||||
class="dropdown-item">
|
||||
<i class="i-flag"></i>
|
||||
<span>Report Problem</span>
|
||||
{% if user.is_staff %}
|
||||
{% firstof item.character.admin_url item.admin_url as admin_url %}
|
||||
<a href="{{ admin_url }}" class="btn btn-admin">
|
||||
<i class="i-edit"></i>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<button data-bs-toggle="dropdown" class="btn btn-link">
|
||||
<i class="i-more-vertical"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank"
|
||||
class="dropdown-item">
|
||||
<i class="i-flag"></i>
|
||||
<span>Report Problem</span>
|
||||
</a>
|
||||
{# Show button download only if asset is blend file or archive #}
|
||||
{% if asset.contains_blend_file or asset.static_asset.source_type == "file" %}
|
||||
{% else %}
|
||||
{% if item.static_asset.download_url %}
|
||||
<a href="{{ item.static_asset.download_url }}"
|
||||
target="_blank"
|
||||
download
|
||||
class="dropdown-item">
|
||||
<i class="i-download me-1"></i>
|
||||
<span>Download {% if additional_download %}{{ additional_download|capfirst }} {% endif %}<span class="text-muted">({{ item.static_asset.download_size }})</span></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
{% spaceless %}
|
||||
{% if static_asset.download_url %}
|
||||
<a href="{{ static_asset.download_url }}"
|
||||
target="_blank"
|
||||
download
|
||||
class="{% if additional_download %}dropdown-item{% else %}btn btn-link{% endif %}">
|
||||
<i class="i-download me-1"></i>
|
||||
<span>Download {% if additional_download %}{{ additional_download|capfirst }} {% endif %}<span class="text-muted">({{ static_asset.download_size }})</span></span>
|
||||
</a>
|
||||
{# Show button download only if asset is blend file or archive #}
|
||||
{% if asset.contains_blend_file or asset.static_asset.source_type == "file" %}
|
||||
<a href="{{ static_asset.download_url }}"
|
||||
target="_blank"
|
||||
download
|
||||
class="{% if additional_download %}dropdown-item{% else %}btn btn-link{% endif %}">
|
||||
<i class="i-download me-1"></i>
|
||||
<span>Download {% if additional_download %}{{ additional_download|capfirst }} {% endif %}<span class="text-muted">({{ static_asset.download_size }})</span></span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endspaceless %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{% load common_extras %}
|
||||
|
||||
{% get_featured as featured %}
|
||||
<div class="footer-navigation">
|
||||
<div class="footer-navigation theme-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-2">
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer-note">
|
||||
<footer class="footer-note theme-dark">
|
||||
Artistic freedom starts with Blender <i class="i-heart"></i> <span>The Free and Open Source
|
||||
3D Creation Suite</span>
|
||||
<div id="hop" title="Be awesome in space">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<div class="nav-drawer-section-progress-wrapper">
|
||||
<h5>{{ nth }}</h5>
|
||||
{% comment %} TODO(Anna): Fix fraction calculation {% endcomment %}
|
||||
<svg width="30" height="30" class="drawer-nav-section-icon-progress" style="--progress-fraction: {% if finished %} 1.0 {% else %} {{ progress_fraction }} {% endif %}">
|
||||
<circle class="background" cx="15" cy="15" r="14" />
|
||||
<circle class="progress" cx="15" cy="15" r="14" />
|
||||
<svg width="40" height="40" class="drawer-nav-section-icon-progress" style="--progress-fraction: {% if finished %} 1.0 {% else %} {{ progress_fraction }} {% endif %}">
|
||||
<circle class="background" cx="20" cy="20" r="14" />
|
||||
<circle class="progress" cx="20" cy="20" r="14" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="overflow-text h4">{{ title }}</p>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,79 @@
|
|||
{% extends 'common/base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block data_theme %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% include 'common/components/alert_coupon_announcement.html' %}
|
||||
|
||||
<!-- Header -->
|
||||
{% include 'common/components/home_headers/film_general_left.html' with film=featured_films.0 %}
|
||||
{% comment %}
|
||||
<!-- Header -->
|
||||
{% include 'common/components/home_headers/film_general_left.html' with film=featured_films.0 %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="container">
|
||||
<!-- Header Hero-->
|
||||
<div class="hero hero-welcome position-absolute theme-dark w-100">
|
||||
{% static 'common/images/welcome/welcome-header.jpg' as welcome_header_default %}
|
||||
<div class="hero-bg" style="background-image: url('{% static 'common/images/welcome/reef_render_for_website-sm.jpg' %}'); background-position-y: 50%">
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-overlay-gradient"></div>
|
||||
</div>
|
||||
|
||||
<!-- Live Stream -->
|
||||
{# TODO: check if livestream is needed #}
|
||||
{% comment %} {% include 'common/components/home_headers/livestream.html' %} {% endcomment %}
|
||||
<div class="pt-6 theme-dark">
|
||||
<div class="container">
|
||||
<!-- Live Stream -->
|
||||
{# TODO: check if livestream is needed #}
|
||||
{% comment %} {% include 'common/components/home_headers/livestream.html' %} {% endcomment %}
|
||||
|
||||
<!-- Latest Blog Posts -->
|
||||
{% url 'post-list' as blog_url %}
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Latest Blog Posts" title_link=blog_url subtitle="Hear the latest news about the Blender Studio." slides=3 card_set=latest_posts media_type="blog" id="latestPosts" %}
|
||||
<!-- Latest Blog Posts -->
|
||||
{% url 'post-list' as blog_url %}
|
||||
{% include 'common/components/cards/card_grid.html' with description="Want to see more? <a href='/blog'>Explore all blog posts.</a>" subtitle="Read our latest announcements, insights and news." title="Latest Blog Posts" title_link=blog_url slides=6 card_set=latest_posts media_type="blog" id="latestPosts" %}
|
||||
|
||||
<!-- Recently watched -->
|
||||
{% url 'training-home' as training_url %}
|
||||
{% if recently_watched_sections %}
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Continue training" title_link=training_url subtitle="Recently watched videos appear here! Continue watching where you left off." slides=4 card_set=recently_watched_sections media_type="section" id="continueTraining" %}
|
||||
{% endif %}
|
||||
<!-- Recently watched -->
|
||||
{% url 'training-home' as training_url %}
|
||||
{% if recently_watched_sections %}
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Continue training" title_link=training_url subtitle="Continue watching where you left off." slides=4 card_set=recently_watched_sections media_type="section" id="continueTraining" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Latest Training -->
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Latest Training" title_link=training_url subtitle="Want to see more? <a href='/training'>Explore all training</a>" slides=3 card_set=featured_trainings media_type="training" id="featuredTrainings" %}
|
||||
<!-- Latest Training -->
|
||||
{% include 'common/components/cards/card_grid.html' with description="Not what you're looking for? <a href='/training'>Explore all Blender Studio training.</a>" subtitle="Check out our latest courses, production lessons and workshops." title="Latest Training" title_link=training_url slides=6 card_set=featured_trainings media_type="training" id="featuredTrainings" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Movies -->
|
||||
<section class="mb-4">
|
||||
<div class="justify-content-center mb-5 row">
|
||||
<div class="col-md-6 text-center">
|
||||
<a class="h2 mb-0" href="{% url 'film-list' %}">Featured Open Movies</a>
|
||||
<p class="mb-0">The Blender <a href="/films">Open Movie projects</a> are made possible by subscriptions to the
|
||||
Blender Studio.</p>
|
||||
<section class="bg-center bg-cover bg-fixed section-bg-img" style="background-image: url('{% static 'common/images/home/blender-studio-still-8.jpeg' %}');"></section>
|
||||
|
||||
<!-- Featured movies -->
|
||||
<section class="py-6" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-md-4">
|
||||
<h1>Open <span class="text-muted"><br>
|
||||
movies</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3">
|
||||
<div class="lead">
|
||||
<p
|
||||
The Blender <a href="/films">Thanks for making open content possible. Open Movies </a> are made possible thanks to Blender Studio subscribers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-layout-card-transparent cards cards-films">
|
||||
{% for featured_film in featured_films|slice:':3' %}
|
||||
{% include "films/components/card_film.html" with film=featured_film %}
|
||||
<div class="card-layout-card-transparent cards cards-1 cards-sm-2 cards-lg-4 cards-films">
|
||||
{% for featured_film in featured_films|slice:'0:4' %}
|
||||
{% if featured_film.is_published or request.user.is_superuser or request.user.is_staff %}
|
||||
{% include "films/components/card_film.html" with film=featured_film %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- From the Archives -->
|
||||
{% url 'film-list' as film_url %}
|
||||
{% include 'common/components/cards/card_carousel.html' with title="From The Archives" title_link=film_url subtitle="Want to see more? <a href='/films'>Explore all films</a>" slides=4 card_set=featured_film_assets media_type="file" id="fromTheArchives" %}
|
||||
<div class="theme-dark pt-6">
|
||||
<div class="container">
|
||||
<!-- From the Archives -->
|
||||
{% url 'film-list' as film_url %}
|
||||
{% include 'common/components/cards/card_carousel.html' with description="Want to see more? <a href='/films'>Explore all films</a>" subtitle="Here is a random collection of featured assets from open movies." title="From The Archives" title_link=film_url slides=4 card_set=featured_film_assets media_type="file" id="fromTheArchives" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,36 @@
|
|||
{% extends 'common/base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block data_theme %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Header Hero-->
|
||||
<div class="hero hero-welcome">
|
||||
<div class="hero hero-welcome theme-dark">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1>{{ welcome_title.text }}</h1>
|
||||
<h1>
|
||||
Production<br>
|
||||
knowledge.
|
||||
{% comment %}
|
||||
{{ welcome_title.text }}
|
||||
{% endcomment %}
|
||||
</h1>
|
||||
<div class="hero-subtitle">
|
||||
{{ welcome_primary_text.text|linebreaks }}
|
||||
<strong>Subscribe to access </strong> invaluable production knowledge from Blender Studio, while securing Blender's future.
|
||||
{% comment %}
|
||||
{{ welcome_primary_text.text|linebreaks }}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
|
||||
{% url 'subscriptions:join' as join_url %}
|
||||
|
||||
<div class="hero-cta-container">
|
||||
<div class="btn-row mb-4">
|
||||
<a href="{% firstof welcome_button_url.text join_url %}" class="btn btn-accent">
|
||||
<span>{% firstof welcome_button_text.text "Join Blender Studio" %}</span>
|
||||
<div class="btn-row mb-3">
|
||||
<a href="{% firstof welcome_button_url.text join_url %}" class="btn btn-accent btn-lg">
|
||||
<span>{% firstof welcome_button_text.text "Join as individual" %}</span>
|
||||
</a>
|
||||
<a href="/teams" class="btn btn-link btn-lg">
|
||||
<span>Join as team</span>
|
||||
</a>
|
||||
{% comment %}
|
||||
<a href="#" class="btn btn-link">
|
||||
|
|
@ -31,149 +45,440 @@
|
|||
</div>
|
||||
</div>
|
||||
{% static 'common/images/welcome/welcome-header.jpg' as welcome_header_default %}
|
||||
<div class="hero-bg" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}'); background-position-y: 50%">
|
||||
{# TODO: improve img namings #}
|
||||
<div class="hero-bg" style="background-image: url('{% static 'common/images/welcome/reef_render_for_website-sm.jpg' %}'); background-position-y: 50%">
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
{% comment %}
|
||||
<div class="hero-bg" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}'); background-position-y: 50%">
|
||||
{% endcomment %}
|
||||
<div class="hero-overlay-gradient"></div>
|
||||
</div>
|
||||
|
||||
{% include 'common/components/alert_coupon_announcement.html' %}
|
||||
|
||||
<div class="container my-6">
|
||||
<!-- Training -->
|
||||
<section class="mb-4 mb-md-5">
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-md-6 text-center">
|
||||
<h1>Sharing Production Knowledge</h1>
|
||||
<!-- Training -->
|
||||
<section class="py-6 theme-dark">
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col-md-4">
|
||||
<h1>Sharing <span class="text-muted">production knowledge.</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3 pt-md-0">
|
||||
<div class="lead">
|
||||
<p>
|
||||
With training and docs covering every major topic in Blender, the Blender Studio team
|
||||
shares real production knowledge, which can be freely adopted in a CG pipeline.
|
||||
With training and docs covering every major topic in Blender, <strong>the Blender Studio team
|
||||
shares real production knowledge,</strong> which can be freely adopted in a CG pipeline.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards card-layout-card-transparent">
|
||||
{% for training in featured_trainings|slice:':3' %}
|
||||
{% include "common/components/cards/card_training.html" with training=training %}
|
||||
{% endfor %}
|
||||
<div class="cards cards-1 cards-lg-3 cards-sm-2 card-layout-card-transparent">
|
||||
<a class="cards-item-content text-decoration-none" href="/training/geometry-nodes-from-scratch">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/training-thumbnail-geometry-nodes-orig.jpg' %}" alt="Training thumbnail for Geometry Nodes from scratch">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Geometry Nodes from scratch</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
An extensive introduction to the Geometry Nodes system covering all fundamental concepts and workflows.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="cards-item-content text-decoration-none" href="/training/procedural-shading">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/training-thumbnail-procedural-shading-orig.jpg' %}" alt="Training thumbnail for Procedural shading: Fundamentals and beyond">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Procedural shading: Fundamentals and beyond</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
A comprehensive training series about procedural shading in Blender.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="cards-item-content text-decoration-none" href="/training/stylized-character-workflow/">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/training-thumbnail-stylized-character-workflow-orig.jpg' %}" alt="Training thumbnail for Stylized character workflow">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Stylized character workflow</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
A detailed guide on how to create a stylized character for film production.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="cards-item-content text-decoration-none" href="/pipeline">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/blender-studio-concept-art-04.jpeg' %}" alt="Thumbnail for Blender Studio Pipeline">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Blender Studio Pipeline</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
Sharing production knowledge based on the Blender open movie projects.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="cards-item-content text-decoration-none" href="/training/animation-fundamentals">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/training-thumbnail-animation-fundamentals-orig.jpg' %}" alt="Training thumbnail for Animation fundamentals">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Animation fundamentals</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
This 'learn by example' course will gradually introduce you to the core principles of character animation.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="cards-item-content text-decoration-none" href="/training/blender-studio-rigging-tools">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img src="{% static 'common/images/welcome/training-thumbnail-blender-studio-rigging-tools-orig.jpg' %}" alt="Training thumbnail for Blender Studio rigging tools">
|
||||
</div>
|
||||
<h3 class="cards-item-title">Blender Studio rigging tools</h3>
|
||||
<div class="cards-item-excerpt">
|
||||
<p>
|
||||
This is a documentation series showing off every single feature found in CloudRig.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{% comment %}
|
||||
{% for training in featured_trainings|slice:':3' %}
|
||||
{% include "common/components/cards/card_training.html" with training=training %}
|
||||
{% endfor %}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
<div class="row justify-content-center mt-4">
|
||||
<div class="col-md-6 text-center">
|
||||
<p>Not what you're looking for? <a href="/training">Explore all Blender Studio Training</a>.</p>
|
||||
<div class="col-md-8 text-center">
|
||||
<p>Not what you're looking for? <a href="/training">Explore all Blender Studio training</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Learn (video) -->
|
||||
<section class="my-6">
|
||||
<div class="row">
|
||||
{% for section in featured_sections|slice:':1' %}
|
||||
{% if section.static_asset.source_type == 'video' %}
|
||||
{% include "common/components/video_player.html" with url=section.static_asset.source.url poster=section.thumbnail_m_url classes="col-12 col-md-6 mb-3 mb-md-0 rounded-lg" tracks=section.static_asset.video.tracks.all %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="col-12 col-lg-6 col-md-6 d-flex flex-column justify-content-center px-4">
|
||||
<h1>The Blender Studio Team</h1>
|
||||
<p>Whether it’s Blender Developer Dr. Sybren teaching <a href="/training/scripting-for-artists/">Scripting for
|
||||
Artists</a>, or Animation Director Hjalti teaching
|
||||
<a href="/training/animation-fundamentals/">Animation Fundamentals</a> — the Blender Studio team shares
|
||||
actual production knowledge.</p>
|
||||
<p>Ask questions and receive replies from the author, download resources and join the discussion.</p>
|
||||
<div class="btn-row">
|
||||
<a href="{% url 'subscriptions:join' %}" class="btn btn-primary">Subscribe for €11.50/month</a>
|
||||
<a href="/training" class="btn btn-secondary">Explore Training</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Latest Project: latest of the featured films -->
|
||||
<section class="my-6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{% with latest_project=featured_films.0 %}
|
||||
{% static 'common/images/welcome/welcome-header.jpg' as welcome_header_default %}
|
||||
<div class="bg-center bg-cover box pb-5 pt-5 row position-relative" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}');">
|
||||
<div class="bg-overlay rounded-lg"></div>
|
||||
<div class="col">
|
||||
<img class="film-logo mb-3 mh-12" src="{{ latest_project.logo.url }}"
|
||||
alt="{{ latest_project.title }} Logo">
|
||||
<p class="mb-4">
|
||||
{{ latest_project.description|linebreaksbr }}
|
||||
</p>
|
||||
<div class="btn-row">
|
||||
<a href="{% url 'subscriptions:join' %}" class="btn btn-primary mb-2 mb-md-0">
|
||||
Subscribe for €11.50/month
|
||||
</a>
|
||||
<a href="{{ latest_project.url }}" class="btn btn-link">Explore the Film</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Other featured films -->
|
||||
<section class="my-6">
|
||||
<!-- Other featured films -->
|
||||
<section class="py-6" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-md-6 text-center">
|
||||
<h1>Support Open Productions</h1>
|
||||
<div class="col-md-4">
|
||||
<h1>Support <span class="text-muted">open productions.</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3 pt-md-0">
|
||||
<div class="lead">
|
||||
<p>
|
||||
The Blender Open Movie projects are made possible by subscriptions to the Blender Studio.
|
||||
The Blender Open Movie projects <strong>are made possible by subscriptions to the Blender Studio.</strong> By subscribing you support productions that push the boundaries of what is possible in CG animation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-layout-card-transparent cards cards-films">
|
||||
{% for featured_film in featured_films|slice:'1:4' %}
|
||||
<div class="card-layout-card-transparent cards cards-1 cards-sm-2 cards-lg-4 cards-films">
|
||||
{% for featured_film in featured_films|slice:'0:4' %}
|
||||
{% if featured_film.is_published or request.user.is_superuser or request.user.is_staff %}
|
||||
{% include "films/components/card_film.html" with film=featured_film %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="row justify-content-center mt-4">
|
||||
<div class="col-md-6 text-center">
|
||||
<p>Learn more about our other <a href="/films">open movies</a> and <a
|
||||
<div class="col-md-8 text-center">
|
||||
<p class="mb-0">Learn more about our other <a href="/films">open movies</a> and <a
|
||||
href="#faqHeadingHowIsMyMoneySpent">how your
|
||||
contribution is used</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Assets -->
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Access all our production assets!" subtitle="You can access all the production files from our films with a Blender Studio subscription." slides=4 card_set=featured_film_assets media_type="file" id="fromTheArchives" %}
|
||||
|
||||
<!-- Subscribe -->
|
||||
<section class="my-6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="bg-center bg-cover box pb-5 pt-5 row position-relative" style="background-image: url('{% static "common/images/welcome/join-bg.jpg" %}');">
|
||||
<div class="bg-overlay rounded-lg"></div>
|
||||
<div class="col"></div>
|
||||
<div class="col">
|
||||
<h1>Join Blender Studio!</h1>
|
||||
<div class="lead">
|
||||
<p class="mb-4">Subscribe to Blender Studio and get access to hundreds of hours of training,
|
||||
production assets and files from all the Open Movies.</p>
|
||||
</div>
|
||||
<a class="btn btn-primary btn-lg" href="{% url 'subscriptions:join' %}">Subscribe for €11.50/month</a>
|
||||
<!-- Team -->
|
||||
<section class="py-6 theme-dark">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-md-4">
|
||||
<h1>It's all about<br>
|
||||
<span class="text-gradient">people.</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3">
|
||||
<div class="lead">
|
||||
<p>
|
||||
Designers, developers, engineers, artists. All driven by passion. <strong>All using Blender to make an impact.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-layout-horizontal-circle-transparent cards cards-people">
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-andy-goralczyk.jpg' %}" alt="Andy Goralczyk">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Andy Goralczyk</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Art director</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-beau.jpg' %}" alt="Beau Gerbrands">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Beau Gerbrands</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>3D Artist</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-demeter.jpg' %}" alt="Demeter Dzadik">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Demeter Dzadik</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Character TD</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-francesco.jpg' %}" alt="Francesco Siddi">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Francesco Siddi</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>General Manager</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-fiona.jpg' %}" alt="Fiona Cohen">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Fiona Cohen</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Producer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-haru.jpg' %}" alt="Harukaze Legouge">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Harukaze Legouge</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Videographer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-hjalti.jpg' %}" alt="Hjalti Hjálmarsson">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Hjalti Hjálmarsson</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Animation Director</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-julien.jpg' %}" alt="Julien Kaspar">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Julien Kaspar</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>3D Artist</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-pablo-fournier.jpg' %}" alt="Pablo Fournier">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Pablo Fournier</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Animator</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-rik.jpg' %}" alt="Rik Schutte">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Rik Schutte</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Lead Animator</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-simon.jpg' %}" alt="Simon Thommes">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Simon Thommes</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Lead Tachnical Artist</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-item cards-item-people">
|
||||
<div class="cards-item-content">
|
||||
<div class="cards-item-thumbnail">
|
||||
<img width="640" height="360" src="{% static 'common/images/welcome/team-vivien.jpg' %}" alt="Vivien Lulkowski">
|
||||
</div>
|
||||
<div>
|
||||
<div class="cards-item-title">Vivien Lulkowski</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>Concept Artist</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
{% include 'common/components/faq.html' with classes="mb-5" %}
|
||||
<section class="bg-center bg-cover bg-fixed section-bg-img" style="background-image: url('{% static 'common/images/welcome/blender-studio-3.jpeg' %}');"></section>
|
||||
|
||||
<!-- Subscriptions -->
|
||||
<section>
|
||||
<div class="pt-6 theme-dark">
|
||||
<div class="container pb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-4">
|
||||
<h1>Choose your <span class="text-muted">subscription.</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3 pt-md-0">
|
||||
<div class="lead">
|
||||
<p>
|
||||
<strong>Subscribe to access</strong> invaluable production knowledge from Blender Studio artists, while securing Blender's future. Inspect 3D processes, learn efficient workflows, and unlock inspiration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-center bg-cover position-relative py-5" style="background-image: url('{% static 'common/images/welcome/blender-studio-concept-art-03.jpeg' %}');">
|
||||
<div class="overlay-gradient"></div>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-xl-1"></div>
|
||||
<div class="col-md-6 col-xl-5 d-flex mb-4 mb-md-0">
|
||||
<div class="box box-subscriptions d-flex flex-column" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-10.png' %}');">
|
||||
<h2>Individual <span class="fw-normal">subscription</span></h2>
|
||||
<p>
|
||||
<strong>For freelancers, students, and instructors</strong> who want to learn from Blender Studio artists.
|
||||
</p>
|
||||
<div class="fs-sm lh-sm">
|
||||
|
||||
</div>
|
||||
<div class="fs-xl lh-1 mb-4">
|
||||
<span>€11<sup>50</sup></span><span class="fs-base"> /month</span>
|
||||
</div>
|
||||
<ul class="list-style-none mb-5 p-0">
|
||||
<li>Full access<strong> to production assets</strong></li>
|
||||
<li>Follow the Open Movies <strong>production logs</strong></li>
|
||||
<li>Unlimited <strong>access to trainings</strong></li>
|
||||
<li>Comment and engage with Blender Studio content</li>
|
||||
</ul>
|
||||
<a class="btn btn-accent btn-lg mt-auto w-100" href="{% firstof welcome_button_url.text join_url %}"><i class="i-user"></i> Join as individual</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-5 d-flex">
|
||||
<div class="box box-subscriptions d-flex flex-column" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-10.png' %}');">
|
||||
<h2>Team <span class="fw-normal me-3">subscription</span><span class="badge">New</span></h2>
|
||||
<p>
|
||||
<strong>For studios and teams</strong> that want to improve their pipeline and creation processes.
|
||||
</p>
|
||||
<div class="fs-sm lh-sm">
|
||||
Starting from
|
||||
</div>
|
||||
<div class="fs-xl lh-1 mb-4">
|
||||
<span>€100</span><span class="fs-base"> /month</span>
|
||||
</div>
|
||||
<ul class="list-style-none mb-5 p-0">
|
||||
<li>Unlimited seats, based on company <strong>email domain</strong></li>
|
||||
<li>Download and view <strong>production assets</strong></li>
|
||||
<li>Unlimited <strong>access to trainings</strong></li>
|
||||
<li>Display company logo in the page</li>
|
||||
</ul>
|
||||
<p>
|
||||
Available to higher tiers:
|
||||
</p>
|
||||
<ul class="mb-5">
|
||||
<li>Up to <strong>8 hours</strong> of dedicated training based on Blender Studio content</li>
|
||||
</ul>
|
||||
<a class="btn btn-accent btn-lg w-100" href="/teams"><i class="i-users"></i> Join as team</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pt-6" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
|
||||
<!-- Assets -->
|
||||
<div class="container">
|
||||
{% include 'common/components/cards/card_carousel.html' with title="Featured assets." subtitle="Immerse yourself in our archives." slides=4 card_set=featured_film_assets media_type="file" id="fromTheArchives" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-6 theme-dark">
|
||||
<!-- FAQ -->
|
||||
<div class="container">
|
||||
{% include 'common/components/faq.html' %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -350,7 +350,7 @@ def get_random_featured_assets(limit=8) -> List[Asset]:
|
|||
query = Asset.objects.filter(is_featured=True, is_published=True)
|
||||
featured_ids = tuple({row['id'] for row in query.values('id')})
|
||||
featured_ids_sample = random.sample(featured_ids, min(limit, len(featured_ids)))
|
||||
return list(query.filter(id__in=featured_ids_sample))
|
||||
return list(query.filter(id__in=featured_ids_sample).order_by('-date_published'))
|
||||
|
||||
|
||||
def get_current_asset(request: HttpRequest) -> Dict[str, Asset]:
|
||||
|
|
|
|||
|
|
@ -117,14 +117,12 @@ const renderHits = (renderOptions, isFirstRender) => {
|
|||
<div class="cards-item-thumbnail">
|
||||
<img aria-label="${item.name}" loading=lazy src="${item.thumbnail_url || fileIconURL}">
|
||||
</div>
|
||||
<div class="cards-item-title overflow-text" data-tooltip="tooltip-overflow" data-placement="top" title="${item.name}">
|
||||
<div class="overflow-text">
|
||||
${instantsearch.highlight({
|
||||
attribute: 'name',
|
||||
hit: item,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="cards-item-title overflow-text" data-tooltip="tooltip-overflow" data-placement="top" title="${item.name}">
|
||||
${instantsearch.highlight({
|
||||
attribute: 'name',
|
||||
hit: item,
|
||||
})}
|
||||
</h3>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="hero hero-film">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<img class="mb-3 film-logo" src="{{ film.logo.url }}" alt="{{ film.title }} Logo">
|
||||
<img class="film-logo" src="{{ film.logo.url }}" alt="{{ film.title }} Logo">
|
||||
<p class="hero-subtitle">
|
||||
{{ film.summary|linebreaksbr }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block toolbar %}
|
||||
<div class="row">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
{% include "search/components/input.html" with sm=True %}
|
||||
</div>
|
||||
<div class="col-auto mb-3 d-md-block d-none">
|
||||
<div class="col-auto mb-3 mb-md-0 d-md-flex d-none">
|
||||
<div class="input-group input-group-sm" id="sorting">
|
||||
<label class="input-group-text pe-0" for="searchLicence">Sort by:</label>
|
||||
{% comment %} INPUT (Js) {% endcomment %}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html data-theme="dark" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="hero hero-checkout">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1>Blender Studio</h1>
|
||||
<h1 class="text-center">Blender Studio</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-bg" style="background-image: url('{% static 'subscriptions/images/join-header.png' %}'); background-position-y: 50%">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="hero-overlay"></div>
|
||||
<div class="hero-overlay-gradient"></div>
|
||||
</div>
|
||||
<div class="container mb-4">
|
||||
<div class="container mb-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<section class="box checkout md-5">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<footer class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="justify-content-center row">
|
||||
<div class="col-auto">
|
||||
<a class="text-muted" href="/terms-and-conditions">Terms & Conditions</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{{ form.device_data }}
|
||||
{{ form.price }}
|
||||
<div class="col">
|
||||
<ul class="d-block looper-select ps-0" id="id_gateway">
|
||||
<ul class="d-flooper-select ps-0" id="id_gateway">
|
||||
{% with field=form.gateway %}
|
||||
{% for radio in field %}
|
||||
<li class="list-style-none looper-select-option looper-select-option-{{ forloop.counter0 }} mb-2">
|
||||
|
|
|
|||
|
|
@ -2,82 +2,108 @@
|
|||
{% load static %}
|
||||
{% load common_extras %}
|
||||
|
||||
{% block data_theme %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="hero hero-teams-landing">
|
||||
<!-- Header Hero-->
|
||||
<div class="hero hero-welcome theme-dark">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4"></div>
|
||||
<div class="col-md-8">
|
||||
<div class="hero-content">
|
||||
<h1>Blender Studio<br>
|
||||
for Teams</h1>
|
||||
<div class="hero-subtitle">
|
||||
<p>
|
||||
Unlimited seats*. Unlimited content**.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-cta-container">
|
||||
<div>
|
||||
* Every tier gets unlimited seats, no matter the size of your team.
|
||||
</div>
|
||||
<div>
|
||||
** By subscribing you are helping Blender Studio create more open content and share production knowledge.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-content pt-6">
|
||||
<h1>
|
||||
Blender Studio<br>
|
||||
for teams
|
||||
{% comment %}
|
||||
{{ welcome_title.text }}
|
||||
{% endcomment %}
|
||||
</h1>
|
||||
<div class="hero-subtitle">
|
||||
Unlimited seats.<sup>1</sup> Unlimited content. <sup>2</sup>
|
||||
{% comment %}
|
||||
{{ welcome_primary_text.text|linebreaks }}
|
||||
{% endcomment %}
|
||||
</div>
|
||||
|
||||
{% url 'subscriptions:join' as join_url %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-bg" style="background-image: url('{% static 'common/images/welcome/join-bg.jpg' %}'); background-position-y: 50%">
|
||||
{% static 'common/images/welcome/welcome-header.jpg' as welcome_header_default %}
|
||||
{# TODO: improve img namings #}
|
||||
<div class="hero-bg" style="background-image: url('{% static 'common/images/teams/blender-studio-still-4.jpeg' %}'); background-position-y: 50%">
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="hero-bg" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}'); background-position-y: 50%">
|
||||
{% endcomment %}
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-overlay-gradient"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mb-md-5 row">
|
||||
<div class="col-md-12">
|
||||
<div class="cards-2 cards">
|
||||
{% for p in team_plans %}
|
||||
<div class="cards-item">
|
||||
<div class="cards-item-content pb-3">
|
||||
<h2 class="cards-item-title lh-base pt-3">{{ p.plan.product }}<br>
|
||||
<span class="fw-normal"> — {{ p.plan.name }}</span></h2>
|
||||
<div class="cards-item-excerpt mb-3">
|
||||
<strong>{{ p.default_variation.price_per_month }}</strong> / month
|
||||
</div>
|
||||
{% if p.plan.team_properties.description %}
|
||||
<p class="mb-3">
|
||||
{{ p.plan.team_properties.description|markdown }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div class="px-3">
|
||||
<div class="btn-row-fluid">
|
||||
<a href="{% url 'subscriptions:join-team' plan_variation_id=p.default_variation.id %}" class="btn btn-primary">Select</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Subscriptions -->
|
||||
<section class="pt-6" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
|
||||
<div class="container pb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-4">
|
||||
<h1>Choose your <span class="text-muted">subscription.</span></h1>
|
||||
</div>
|
||||
<div class="col-md-8 pt-3">
|
||||
<div class="lead">
|
||||
<p>
|
||||
<sup>1</sup>Every tier gets unlimited seats, no matter the size of your team. <sup>2</sup>By subscribing you are helping Blender Studio create more open content and share production knowledge.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# TODO: check if sponsors exist #}
|
||||
{% comment%}
|
||||
<section id="sponsors" class="sponsors">
|
||||
<h4>Sponsors</h4>
|
||||
<!-- Plans -->
|
||||
<div class="bg-center bg-cover py-5" style="background-image: url('{% static 'common/images/welcome/blender-studio-concept-art-03.jpeg' %}');">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="row">
|
||||
{% for p in team_plans %}
|
||||
<div class="col-md-4 d-flex mb-4 mb-md-0">
|
||||
<div class="box box-subscriptions d-flex flex-column pt-3" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-10.png' %}');">
|
||||
<div>
|
||||
<div class="badge mb-3">Corporate</div>
|
||||
</div>
|
||||
<h2>{{ p.plan.name }} <span class="fw-normal me-3">subscription</span></h2>
|
||||
{{ p.plan.description|markdown }}
|
||||
<div class="fs-sm lh-sm"></div>
|
||||
<div class="fs-1 lh-1 mb-4">
|
||||
<span class="js-price-per-month">{{ p.default_variation.price_per_month }}</span><span class="fs-base"> /month</span>
|
||||
</div>
|
||||
|
||||
{% for level, sponsor_teams in teams %}
|
||||
<div class="sponsors-{{ level|default:"other" }}">
|
||||
<h2>{{ level|default:"other"|capfirst }}</h2>
|
||||
<div class="sponsors-grid">
|
||||
{% for team in sponsor_teams %}
|
||||
{% include 'subscriptions/components/sponsor.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if p.plan.team_properties.description %}
|
||||
<div class="mb-5">
|
||||
{{ p.plan.team_properties.description|markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a class="btn btn-accent btn-lg mt-auto w-100" href="{% url 'subscriptions:join-team' plan_variation_id=p.default_variation.id %}"><i class="i-users"></i> Select</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endcomment%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if teams %}
|
||||
<section id="sponsors" class="sponsors">
|
||||
<h4>Sponsors</h4>
|
||||
|
||||
{% for level, sponsor_teams in teams %}
|
||||
<div class="sponsors-{{ level|default:'other' }}">
|
||||
<h2>{{ level|default:"other"|capfirst }}</h2>
|
||||
<div class="sponsors-grid">
|
||||
{% for team in sponsor_teams %}
|
||||
{% include 'subscriptions/components/sponsor.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -44,13 +44,13 @@
|
|||
<div class="button-toolbar-container">
|
||||
<div class="button-toolbar">
|
||||
{% if user.is_staff %}
|
||||
<a href="{{ chapter.admin_url }}" class="btn btn-admin btn-sm">
|
||||
<a href="{{ chapter.admin_url }}" class="btn btn-admin">
|
||||
<i class="i-edit"></i>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<button data-bs-toggle="dropdown" class="btn btn-link btn-sm">
|
||||
<button data-bs-toggle="dropdown" class="btn btn-link">
|
||||
<i class="i-more-vertical"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
|
|
@ -68,14 +68,16 @@
|
|||
<section class="markdown-text mb-3">{% with_shortcodes chapter.description|markdown %}</section>
|
||||
{% endif %}
|
||||
|
||||
{# TODO: @web-assets fix card layout cards width #}
|
||||
<div class="cards card-layout-card-transparent files grid row">
|
||||
<div class="col-12 col-lg-4 col-md-6 col-sm-6 grid-sizer"></div>
|
||||
{% for section in chapter.sections.all %}
|
||||
{% if section.is_published %}
|
||||
{% include "common/components/file_section.html" with section=section %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="cards card-layout-card-transparent files">
|
||||
{% for section in chapter.sections.all %}
|
||||
{% if section.is_published %}
|
||||
{% include "common/components/file_section.html" with section=section %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,12 +87,4 @@
|
|||
{{ block.super }}
|
||||
|
||||
{% javascript 'training' %}
|
||||
{% javascript 'vendor_masonry' %}
|
||||
{% javascript 'vendor_highlight' %}
|
||||
|
||||
<script>
|
||||
makeGrid();
|
||||
hljs.highlightAll();
|
||||
</script>
|
||||
|
||||
{% endblock scripts %}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@
|
|||
</div>
|
||||
<div class="cards-item-extra">
|
||||
<ul>
|
||||
{% if training.is_free %}
|
||||
<li>
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<i class="i-graduation-cap"></i>
|
||||
{% firstof training.type.label training.get_type_display training.get_category_display %}
|
||||
|
|
@ -29,9 +34,6 @@
|
|||
{{ training.film }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% if training.is_free %}
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Search -->
|
||||
<section>
|
||||
<section id="all-training">
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<h2 class="mb-0">All Training</h2>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<section id="all-training">
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<h2 class="mb-0">All Training</h2>
|
||||
|
|
|
|||
|
|
@ -19,82 +19,84 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block nexted_content %}
|
||||
<div class="row mb-3">
|
||||
{% if section.preview_youtube_link %}
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
|
||||
<div class="page-detail-helper">
|
||||
<div class="row mb-3">
|
||||
{% if section.preview_youtube_link %}
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif video %}
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% if section.is_free or request.user|has_active_subscription %}
|
||||
{% if user.is_anonymous %}
|
||||
{% include 'common/components/video_player.html' with url=video.source.url poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
|
||||
{% elif video %}
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% if section.is_free or request.user|has_active_subscription %}
|
||||
{% if user.is_anonymous %}
|
||||
{% include 'common/components/video_player.html' with url=video.source.url poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
|
||||
{% else %}
|
||||
{% include 'common/components/video_player.html' with url=video.source.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include 'common/components/video_player.html' with url=video.source.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
|
||||
{% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% else %}
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% if section.is_free or request.user|has_active_subscription %}
|
||||
{% if section.thumbnail %}
|
||||
{% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100 rounded" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="overflow-hidden rounded">
|
||||
{% if section.is_free or request.user|has_active_subscription %}
|
||||
{% if section.thumbnail %}
|
||||
{% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100 rounded" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
|
||||
{% endif %}
|
||||
<div class="align-items-start row">
|
||||
<div class="col-12 col-md mb-2 mb-md-3">
|
||||
<div class="d-md-block d-none">
|
||||
<p class="small text-muted">{{ chapter.name }}</p>
|
||||
<h2>{{ section.name }}</h2>
|
||||
</div>
|
||||
<div class="text-muted x-sm">
|
||||
<p class="d-inline me-2">{{ section.date_created|date:"N jS, Y" }}</p>
|
||||
{% if section.static_asset.license %}
|
||||
<a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline me-2 text-muted" data-bs-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}">
|
||||
<i class="i-info"></i>
|
||||
{{ section.static_asset.license }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.is_free %}
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
||||
{% include "common/components/navigation/buttons_toolbar.html" with item=section %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
{% if section.static_asset.author_image_url %}
|
||||
<div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="ms-2 profile-avatar"></div>
|
||||
{% else %}
|
||||
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
||||
<div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="ms-2 profile-avatar">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="align-items-start row">
|
||||
<div class="col-12 col-md mb-2 mb-md-3">
|
||||
<div class="d-md-block d-none">
|
||||
<p class="small text-muted">{{ chapter.name }}</p>
|
||||
<h2>{{ section.name }}</h2>
|
||||
</div>
|
||||
<div class="text-muted x-sm">
|
||||
<p class="d-inline me-2">{{ section.date_created|date:"N jS, Y" }}</p>
|
||||
{% if section.static_asset.license %}
|
||||
<a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline me-2 text-muted" data-bs-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}">
|
||||
<i class="i-info"></i>
|
||||
{{ section.static_asset.license }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if section.is_free %}
|
||||
{% include "common/components/cards/pill.html" with label='Free' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
||||
{% include "common/components/navigation/buttons_toolbar.html" with item=section %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
{% if section.static_asset.author_image_url %}
|
||||
<div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="ms-2 profile-avatar"></div>
|
||||
{% else %}
|
||||
<div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="ms-2 profile-avatar">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %}
|
||||
{% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %}
|
||||
</div>
|
||||
<section class="mb-3 markdown-text">
|
||||
{% with_shortcodes section.text|markdown_unsafe %}
|
||||
</section>
|
||||
<section class="mb-3">
|
||||
{% include 'comments/components/comment_section.html' %}
|
||||
</section>
|
||||
</div>
|
||||
<section class="mb-3 markdown-text">
|
||||
{% with_shortcodes section.text|markdown_unsafe %}
|
||||
</section>
|
||||
<section class="mb-3">
|
||||
{% include 'comments/components/comment_section.html' %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock nexted_content %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<form id="settings-form" method="POST" action="/settings/emails">
|
||||
{% for field in form %}
|
||||
<div class="form-group form-check ps-0 mb-3">
|
||||
<div class="form-check ps-0 mb-3">
|
||||
{% csrf_token %}
|
||||
{{ field.errors }}
|
||||
<label class="form-check-label">
|
||||
|
|
|
|||
Loading…
Reference in New Issue