Blender Studio pull request - Version 2.2.0 update #104394

Merged
Márton Lente merged 64 commits from ui/v2.2.0 into main 2024-04-08 16:32:44 +02:00
30 changed files with 1002 additions and 282 deletions

View File

@ -20,15 +20,13 @@
{% if post.header %} {% if post.header %}
<div class="hero hero-blog"> <div class="hero hero-blog">
<div class="hero-bg" style="background-image: url('{{ post.header.url }}'); background-position-y: 50%"></div> <div class="hero-bg" style="background-image: url('{{ post.header.url }}'); background-position-y: 50%"></div>
<div class="hero-overlay"></div>
<div class="hero-overlay-gradient"></div>
</div> </div>
{% endif %} {% endif %}
<section class="container"> <section class="container">
<div class="row"> <div class="row">
<div class="col"></div> <div class="col"></div>
<div class="col-md-10"> <div class="col-md-10">
<div class="body-bg box"> <div class="bg-filter-blur box">
<div class="mb-4"> <div class="mb-4">
<span class="text-muted">{{ post.date_published|date:"jS M Y" }} <span class="text-muted">{{ post.date_published|date:"jS M Y" }}
{% if post.category %} {% if post.category %}
@ -47,8 +45,6 @@
{% with_shortcodes post.content_html %} {% with_shortcodes post.content_html %}
</div> </div>
{% include "blog/blog_toolbar.html" %}
<section class="mb-4"> <section class="mb-4">
{% include 'comments/components/comment_section.html' %} {% include 'comments/components/comment_section.html' %}
</section> </section>

View File

@ -1,5 +1,7 @@
{% extends 'common/base.html' %} {% extends 'common/base.html' %}
{% load static %}
{% block title_prepend %}Blog - {% endblock title_prepend %} {% block title_prepend %}Blog - {% endblock title_prepend %}
{% block bodyclasses %}spacer{% endblock bodyclasses %} {% block bodyclasses %}spacer{% endblock bodyclasses %}

View File

@ -11,7 +11,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="page-detail-helper container py-2 py-md-3"> <div class="container py-2 py-md-3">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-lg-1"></div> <div class="col-lg-1"></div>
<div class="col-12 col-lg-10"> <div class="col-12 col-lg-10">

View File

@ -81,18 +81,18 @@
{% include "common/components/cards/pill.html" with label='Free' %} {% include "common/components/cards/pill.html" with label='Free' %}
{% endif %} {% endif %}
{% if character_version.static_asset.license %} {% if character_version.static_asset.license %}
<a href="{{ character_version.static_asset.license.url }}" target="_blank" class="d-inline mx-2 text-muted" <a href="{{ character_version.static_asset.license.url }}" target="_blank" class="d-inline ms-3 text-muted text-nowrap"
data-bs-toggle="tooltip" data-placement="bottom" title="{{ character_version.static_asset.license.description }}"> data-bs-toggle="tooltip" data-placement="bottom" title="{{ character_version.static_asset.license.description }}">
<i class="i-info"></i> <i class="i-info"></i>
{{ character_version.static_asset.license }} {{ character_version.static_asset.license }}
</a> </a>
{% endif %} {% endif %}
<span class="d-inline me-2 text-muted" title="Blender version"> <span class="d-inline ms-3 text-muted text-nowrap" title="Blender version">
<i class="i-blender"></i> <i class="i-blender"></i>
Blender {{ character_version.min_blender_version }} Blender {{ character_version.min_blender_version }}
</span> </span>
{% if character.film %} {% if character.film %}
<a class="d-inline me-2 text-muted" href="{{ character.film.url }}"> <a class="d-inline ms-3 text-muted text-nowrap" href="{{ character.film.url }}">
<i class="i-reel"></i> <i class="i-reel"></i>
{{ character.film }} {{ character.film }}
</a> </a>

View File

@ -17,23 +17,19 @@
{{ character.name }} {{ character.name }}
</h3> </h3>
<div class="cards-item-extra"> <div class="cards-item-extra">
{% if character_version.is_free %}
{% include "common/components/cards/pill.html" with class="me-3" label='Free' %}
{% endif %}
<ul> <ul>
{% if not character.is_published or not character_version.is_published %} {% if not character.is_published or not character_version.is_published %}
<li class="me-2"> <li class="me-3">
<span class="badge badge-danger"> <span class="badge badge-danger">
Unpublished Unpublished
</span> </span>
</li> </li>
{% endif %} {% endif %}
{% if character_version.is_free %}
<li class="me-2">
<span class="card-subtitle">
{% include "common/components/cards/pill.html" with label='Free' %}
</span>
</li>
{% endif %}
{% if character.likes.count > 0 %} {% if character.likes.count > 0 %}
<li class="me-2"> <li class="me-3">
<span class="card-subtitle"> <span class="card-subtitle">
{% if character.liked %} {% if character.liked %}
<i class="i-heart-filled"></i> <i class="i-heart-filled"></i>
@ -45,19 +41,21 @@
</li> </li>
{% endif %} {% endif %}
{% if character_version.comments.count > 0 %} {% if character_version.comments.count > 0 %}
<li class="me-2"> <li class="me-3">
<span class="card-subtitle"> <span class="card-subtitle">
<i class="i-comment"></i> <i class="i-comment"></i>
{{ character_version.comments.count }} {{ character_version.comments.count }}
</span> </span>
</li> </li>
{% endif %} {% endif %}
<li> {% if character.film %}
<span class="card-subtitle"> <li>
<i class="i-reel"></i> <span class="card-subtitle">
{{ character.film|capfirst }} <i class="i-reel"></i>
</span> {{ character.film|capfirst }}
</li> </span>
</li>
{% endif %}
</ul> </ul>
</div> </div>
</a> </a>

View File

@ -5,10 +5,10 @@
{% include 'users/components/avatar.html' with user=request.user %} {% include 'users/components/avatar.html' with user=request.user %}
</div> </div>
<div class="col ps-0"> <div class="col ps-0">
{# TODO: migrate to form tags? #} {# TODO: migrate to form tags #}
<div class="comment-input-div form-control" contenteditable="true"></div> <div class="comment-input-div form-control js-comment-input-div-helper" contenteditable="true"></div>
</div> </div>
<div class="col comment-send flex-grow-0 ps-0"> <div class="col comment-send d-flex flex-grow-0 lh-base ps-0">
<button class="btn btn-input btn-primary"> <button class="btn btn-input btn-primary">
<i class="i-send"></i> <i class="i-send"></i>
Comment Comment

View File

@ -15,7 +15,7 @@
<div class="comments"> <div class="comments">
{% if comments.number_of_comments %} {% if comments.number_of_comments %}
<h3 class="text-muted">{{ comments.number_of_comments }} comment{{ comments.number_of_comments|pluralize }}</h3> <h4 class="text-muted">{{ comments.number_of_comments }} comment{{ comments.number_of_comments|pluralize }}</h4>
{% endif %} {% endif %}
{% include 'comments/components/comment_tree.html' with comment_trees=comments.comment_trees %} {% include 'comments/components/comment_tree.html' with comment_trees=comments.comment_trees %}

View File

@ -111,7 +111,12 @@ window.asset = (function asset() {
}); });
document.querySelectorAll('.zoom-modal-link').forEach((element) => { document.querySelectorAll('.zoom-modal-link').forEach((element) => {
element.addEventListener('click', (event) => getModalHtml(element, zoomModalEl, event)); element.addEventListener('click', (event) => {
getModalHtml(element, zoomModalEl, event);
// Init function 'toggleZoomModalBodyImg'
toggleZoomModalBodyImg();
});
}); });
document.querySelectorAll(`${baseModalId} .modal-close`).forEach((element) => { document.querySelectorAll(`${baseModalId} .modal-close`).forEach((element) => {
@ -199,4 +204,31 @@ window.asset = (function asset() {
document.body.classList.add('modal-open'); document.body.classList.add('modal-open');
} }
}); });
// Create function 'toggleZoomModalBodyImg' to zoom in and out img in modal body
function toggleZoomModalBodyImg() {
// Create function init
function init() {
modalBodyImg = document.querySelector('.js-modal-body-img');
modalBodyImg.addEventListener('click', function() {
if (this.classList.contains('active')) {
this.classList.remove('active');
this.style.maxHeight = '100%';
this.style.maxWidth = '100%';
} else {
this.classList.add('active');
this.style.maxHeight = 'none';
this.style.maxWidth = 'none';
}
});
}
// Init function after parent js has run. TODO: change to callback function
setTimeout(function() {
init();
}, 200);
}
})(); })();

View File

@ -0,0 +1,30 @@
document.addEventListener('DOMContentLoaded', function() {
// TODO: remove function setCommentInputDivMaxWidth after forms have been migrated to native forms tags
function setCommentInputDivMaxWidth() {
setTimeout(function() {
const commentInputDivHelper = document.querySelectorAll('.js-comment-input-div-helper');
commentInputDivHelper.forEach(function(item) {
// Reset item style inline max-width
item.removeAttribute('style');
// Get item width within flex container
let itemWidth = item.offsetWidth;
// Set item max-width for multi-line comments
item.style.maxWidth = itemWidth + 'px';
});
}, 2000);
}
function init() {
setCommentInputDivMaxWidth();
window.addEventListener('resize', function() {
setCommentInputDivMaxWidth();
});
}
// Call function init
init();
});

View File

@ -1,3 +1,14 @@
.profile-card
.profile-avatar-helper
height: calc(var(--spacer) * 2)
overflow: hidden
width: calc(var(--spacer) * 2)
img
height: calc(var(--spacer) * 2)
overflow: hidden
width: calc(var(--spacer) * 2)
// TODO: cleanup and refactor component markup and style // TODO: cleanup and refactor component markup and style
.comment .comment
display: flex display: flex
@ -42,7 +53,7 @@
padding: var(--spacer-1) padding: var(--spacer-1)
.comment-input .comment-input
align-items: center align-items: start
display: flex display: flex
flex-direction: row flex-direction: row
+margin(2, bottom) +margin(2, bottom)
@ -51,19 +62,18 @@
.comment-input-div .comment-input-div
@extend .form-control @extend .form-control
height: calc(var(--spacer) * 2.5)
&.disabled &.disabled
opacity: $btn-disabled-opacity opacity: $btn-disabled-opacity
&.form-control &.form-control
background-color: var(--color-bg-tertiary) background-color: var(--color-bg-tertiary)
// TODO: change placeholder to form attribute
&:empty &:empty
&::before &::before
color: var(--color-text-tertiary) color: var(--color-text-tertiary)
content: 'Leave a comment' content: 'Leave a comment'
left: var(--spacer-2) left: var(--spacer-3)
position: absolute position: absolute
top: 50% top: 50%
transform: translateY(-50%) transform: translateY(-50%)

View File

@ -10,6 +10,12 @@
+media-lg +media-lg
--fs-xl: 6.4rem --fs-xl: 6.4rem
/* About. */
.about-history-list
li
&:nth-child(even)
flex-direction: row-reverse
/* Box. */ /* Box. */
.box-subscriptions .box-subscriptions
backdrop-filter: blur(var(--spacer-4)) brightness(175%) saturate(125%) backdrop-filter: blur(var(--spacer-4)) brightness(175%) saturate(125%)
@ -51,7 +57,7 @@
opacity: 1 opacity: 1
.btns-toolbar .btns-toolbar
@extend .border-bottom flex-wrap: wrap
.checkbox-like .checkbox-like
span span
@ -100,8 +106,9 @@
padding-right: var(--spacer) !important padding-right: var(--spacer) !important
.cards-item-title-overlay .cards-item-title-overlay
background: linear-gradient(0deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 100%) // background: linear-gradient(0deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 100%)
height: var(--spacer-5) background: linear-gradient(15deg, var(--color-bg) 0%, rgba(0, 0, 0, 0) 70%)
height: calc(var(--spacer) * 12)
.cards-item-film .cards-item-film
.cards-item-excerpt .cards-item-excerpt
@ -167,6 +174,10 @@
+media-lg +media-lg
--cards-items-per-row: 4 --cards-items-per-row: 4
/* Code. */
pre
+margin(3, bottom)
/* Flatpage. */ /* Flatpage. */
.flat-page-content .flat-page-content
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
@ -290,7 +301,6 @@ input
+margin(2, right) +margin(2, right)
/* Hero. */ /* Hero. */
.hero-blog,
.hero-character, .hero-character,
.hero-checkout, .hero-checkout,
.hero-film-landing-page, .hero-film-landing-page,
@ -302,6 +312,9 @@ input
--hero-min-height: 0 --hero-min-height: 0
height: calc(var(--spacer) * 20) height: calc(var(--spacer) * 20)
.hero-blog
margin-bottom: calc(var(--spacer) * -12)
.hero-checkout .hero-checkout
--hero-min-height: 0 --hero-min-height: 0
height: calc(var(--spacer) * 24) height: calc(var(--spacer) * 24)
@ -411,10 +424,6 @@ input
&.unread &.unread
opacity: 1 opacity: 1
/* Pages. */
.page-detail-helper
.btns-toolbar
border-bottom: 0 !important
/* Payment. */ /* Payment. */
.braintree-heading .braintree-heading
@ -498,22 +507,21 @@ button,
color: var(--color-text) color: var(--color-text)
background-color: var(--color-accent) background-color: var(--color-accent)
.body-bg .markdown-text
.markdown-text hr
hr clear: both
clear: both
+media-md +media-md
.float-end, .float-end,
.float-start .float-start
max-width: 50% max-width: 50%
transform: translateY(calc(var(--spacer) * -1)) transform: translateY(calc(var(--spacer) * -1))
.float-end .float-end
margin-left: var(--spacer-4) margin-left: var(--spacer-4)
.float-start .float-start
margin-right: var(--spacer-4) margin-right: var(--spacer-4)
img img
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)

View File

@ -1,4 +1,17 @@
.modal
height: auto
overflow-y: scroll
+media-md
height: 100%
// TODO: cleanup and refactor component markup and style // TODO: cleanup and refactor component markup and style
.modal-asset
&.show
align-items: center
display: flex !important
justify-content: center
.modal-asset-zoom .modal-asset-zoom
img img
display: block display: block
@ -29,44 +42,98 @@
top: var(--spacer) top: var(--spacer)
z-index: 1 z-index: 1
.modal-body-img
&:hover
cursor: zoom-in
&.active
&:hover
cursor: zoom-out
.modal-body .modal-body
padding: var(--spacer) --badge-bg: var(--color-bg-primary)
+margin(auto, x)
max-width: calc(100% )
overflow-y: scroll
+padding(0, top)
+padding(3, bottom)
img
border-radius: var(--border-radius)
max-width: 100%
.modal-content .modal-content
background-color: var(--color-bg-secondary) background-color: var(--color-bg-secondary)
height: 100%
+media-md
flex-direction: row
.modal-dialog .modal-dialog
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
overflow: hidden height: 100vh
+margin(0)
.modal-header max-width: 100%
border-bottom: 0
display: block
+media-md +media-md
height: 100vh
+margin(auto, x)
max-width: calc(100% - (5.6rem * 2 + var(--spacer-4) * 4)
+padding(4, y)
.modal-header
// TODO: consider changing background noise img raster to svg
border-bottom: 0
display: block
justify-content: center
+media-md
align-items: center
display: flex display: flex
.modal-asset-img-wrapper .modal-asset-img-wrapper
align-items: center
cursor: zoom-in cursor: zoom-in
display: flex
justify-content: center
width: 100% width: 100%
+media-md
height: calc(100vh - var(--spacer-4) * 2) // height must be explicitly defined in order to make img max-height work
.video-player
display: flex
max-height: 100%
*
max-height: 100%
.plyr__video-wrapper
display: flex
.modal-inner-wrapper
width: 100%
.modal-navigation .modal-navigation
&.modal-close, &.next, &.previous +media-md
position: absolute width: 5.6rem
&.modal-close,
&.next,
&.previous
+media-md
position: absolute
&.modal-close &.modal-close
right: var(--spacer-3) right: 0
top: var(--spacer-3)
+media-md +media-md
right: calc(var(--spacer) * 2) right: var(--spacer-4)
top: calc(var(--spacer) * 2) top: var(--spacer-4)
&.next, &.previous
top: 50%
&.next &.next
right: calc(var(--spacer) * 2) right: var(--spacer-4)
&.previous &.previous
left: calc(var(--spacer) * 2) left: var(--spacer-4)

View File

@ -4,6 +4,12 @@
.bg-cover .bg-cover
background-size: cover background-size: cover
// TODO: make bg filter blur uniform in project
.bg-filter-blur
// TODO: make bg colour dependent on dark or light theme
background-color: rgba(0, 0, 0, .5)
backdrop-filter: blur(24px)
.bg-fixed .bg-fixed
background-attachment: fixed background-attachment: fixed
@ -127,3 +133,6 @@
.z-1 .z-1
z-index: 1 z-index: 1
.z-4
z-index: 4

View File

@ -1,7 +1,8 @@
$container-width: 132.0rem
// TODO: consider moving to web-assets // TODO: consider moving to web-assets
$container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 132.0rem, xxl: 160.0rem) $container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 132.0rem, xxl: 160.0rem)
$container-width: map-get($container-max-widths, 'xl')
$font-path: "/static/assets/fonts" $font-path: "/static/assets/fonts"
$link-decoration: none $link-decoration: none

View File

@ -35,6 +35,11 @@ button,
--btn-color-bg: var(--btn-color-bg-hover) --btn-color-bg: var(--btn-color-bg-hover)
color: var(--color-bg) color: var(--color-bg)
.btn-admin
@extend .btn-link
--btn-color: var(--color-text)
.btn-img .btn-img
padding: 0 !important padding: 0 !important
@ -81,6 +86,8 @@ a.cards-item-content
// TODO: move to web-assets // TODO: move to web-assets
.cards .cards
--grid-gap-size: calc(var(--spacer) * 2)
+media-sm +media-sm
&.cards-sm-1 &.cards-sm-1
--cards-items-per-row: 1 --cards-items-per-row: 1
@ -121,8 +128,19 @@ a.cards-item-content
&.cards-lg-4 &.cards-lg-4
--cards-items-per-row: 4 --cards-items-per-row: 4
.cards-item
display: flex
flex-direction: column
.cards-item-content
display: flex
flex-direction: column
flex-grow: 1
.cards-item-extra .cards-item-extra
display: flex
letter-spacing: .1em letter-spacing: .1em
min-height: calc(var(--spacer) * 2.5)
padding-top: 0 padding-top: 0
ul ul
@ -171,7 +189,21 @@ details
.dropdown-menu .dropdown-menu
font-size: var(--fs-base) font-size: var(--fs-base)
.btn
padding-left: var(--spacer-2) !important
padding-right: var(--spacer-2) !important
/* Footer. */
.footer-navigation,
.footer-note
color: var(--color-text-secondary)
/* Forms. */ /* Forms. */
input,
.form-control
height: auto
min-height: calc(var(--spacer) * 2.5)
.form-control .form-control
border: 0 // Make btn and input heights match in horizontal layouts border: 0 // Make btn and input heights match in horizontal layouts
background-color: var(--color-bg-secondary) background-color: var(--color-bg-secondary)
@ -282,6 +314,7 @@ table
/* Type. */ /* Type. */
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
+fw-title +fw-title
text-wrap: balance
h1 h1
line-height: calc(40 / 32) line-height: calc(40 / 32)
@ -295,8 +328,6 @@ h2
+media-sm +media-sm
line-height: calc(40 / 32) line-height: calc(40 / 32)
hr
border-color: var(--color-text-tertiary)
.small .small
font-size: var(--fs-sm) font-size: var(--fs-sm)
@ -306,8 +337,16 @@ sup
top: -1em top: -1em
/* Utilities. */ /* Utilities. */
// TODO: fix style utility in web-assets
.bg-black
background-color: black !important
.fade .fade
&:not(.show) &:not(.show)
height: 0 !important height: 0 !important
overflow: hidden overflow: hidden
padding: 0 !important padding: 0 !important
.img-fluid
max-height: 100%
object-fit: cover

View File

@ -17,11 +17,13 @@
{% endif %} {% endif %}
{{ post.title }} {{ post.title }}
</h3> </h3>
<div class="cards-item-excerpt"> {% comment %}
<p> <div class="cards-item-excerpt">
{{ post.excerpt }} <p>
</p> {{ post.excerpt }}
</div> </p>
</div>
{% endcomment %}
<div class="d-flex cards-item-extra"> <div class="d-flex cards-item-extra">
{% if not post.is_published %} {% if not post.is_published %}
<span class="badge badge-danger me-3">Unpublished</span> <span class="badge badge-danger me-3">Unpublished</span>

View File

@ -1,6 +1,6 @@
{% if url is none %} {% if url is none %}
{# Class 'position-relative' is needed to work with hover before #} {# Class 'position-relative' is needed to work with hover before #}
<span class="badge position-relative">{{ label }}</span> <span class="badge position-relative {% if class %}{{ class }}{% endif %}">{{ label }}</span>
{% else %} {% else %}
<a class="badge" href="{{ url }}">{{ label }}</a> <a class="badge {% if class %}{{ class }}{% endif %}" href="{{ url }}">{{ label }}</a>
{% endif %} {% endif %}

View File

@ -2,7 +2,7 @@
{% load thumbnail %} {% load thumbnail %}
{% load common_extras %} {% load common_extras %}
<div class="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 %}"> <div class="cards-item cards-item-file 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 %}">
<a class="cards-item-content" href="{{ child_collection.url }}"> <a class="cards-item-content" href="{{ child_collection.url }}">
<div class="position-relative"> <div class="position-relative">
<div class="cards-item-thumbnail {% if not child_collection.thumbnail %}bg-tertiary ratio-16x9{% endif %}"> <div class="cards-item-thumbnail {% if not child_collection.thumbnail %}bg-tertiary ratio-16x9{% endif %}">
@ -18,6 +18,11 @@
<img class="file-icon" src="{% static "common/images/icons/folder.svg" %}" alt="Folder Icon"> <img class="file-icon" src="{% static "common/images/icons/folder.svg" %}" alt="Folder Icon">
{% endif %} {% endif %}
</div> </div>
<h4 class="cards-item-title">{{ child_collection.name }}</h4> <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="{{ child_collection.name }}">
<span class="overflow-text">{{ child_collection.name }}</span>
</span>
</h4>
</a> </a>
</div> </div>

View File

@ -3,19 +3,19 @@
{% load pipeline %} {% load pipeline %}
{% if next_asset %} {% if next_asset %}
<button class="btn btn-lg modal-navigation next" <button class="btn d-none d-md-flex modal-navigation next"
data-url="{% url 'api-asset' next_asset.id %}?site_context={{ site_context }}" data-asset-id="{{ next_asset.id }}"> data-url="{% url 'api-asset' next_asset.id %}?site_context={{ site_context }}" data-asset-id="{{ next_asset.id }}">
<i class="i-chevron-right"></i> <i class="i-chevron-right"></i>
</button> </button>
{% endif %} {% endif %}
{% if previous_asset %} {% if previous_asset %}
<button class="btn btn-lg modal-navigation previous" <button class="btn d-md-block d-none modal-navigation previous"
data-url="{% url 'api-asset' previous_asset.id %}?site_context={{ site_context }}" data-url="{% url 'api-asset' previous_asset.id %}?site_context={{ site_context }}"
data-asset-id="{{ previous_asset.id }}"> data-asset-id="{{ previous_asset.id }}">
<i class="i-chevron-left"></i> <i class="i-chevron-left"></i>
</button> </button>
{% endif %} {% endif %}
<button class="btn btn-lg modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal"> <button class="btn d-md-block d-none modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal">
<i class="i-cancel"></i> <i class="i-cancel"></i>
</button> </button>
@ -30,13 +30,12 @@
{% include 'common/components/spoiler_alert.html' %} {% include 'common/components/spoiler_alert.html' %}
{% endif %} {% endif %}
<div class="modal-header p-0"> <div class="bg-black col-lg-7 col-md-6 modal-header p-0">
<div class="d-md-none p-3"> <div class="align-items-center d-flex d-md-none justify-content-between px-3 py-4">
<div> <div>
<p class="text-muted">{{ asset.static_asset.get_source_type_display }}</p>
<h3 class="mb-0">{{ asset.name }}</h3> <h3 class="mb-0">{{ asset.name }}</h3>
</div> </div>
<button class="btn btn-lg modal-close modal-navigation" data-bs-dismiss="modal"> <button class="btn modal-close modal-navigation" data-bs-dismiss="modal">
<i class="i-cancel"></i> <i class="i-cancel"></i>
</button> </button>
</div> </div>
@ -63,103 +62,118 @@
{% include 'common/components/content_locked.html' with background=asset.static_asset.thumbnail_s_url %} {% include 'common/components/content_locked.html' with background=asset.static_asset.thumbnail_s_url %}
{% endif %} {% endif %}
</div> </div>
<div class="modal-body"> <div class="col-lg-5 col-md-6 modal-body">
<div class="align-items-start row"> <div class="bg-secondary position-sticky pt-4 top-0 z-4">
<div class="col-12 col-md mb-2"> <div class="align-items-start row">
<div class="d-none d-md-block"> <div class="col-12 col-md mb-2">
<h2>{{ asset.name }}</h2> <div class="d-none d-md-block">
<h2 class="h3">
{{ asset.name }}
</h2>
</div>
</div> </div>
</div> </div>
<div class="align-items-center mb-3 row">
<div class="col-12">
<div class="pb-3 row">
<div class="col-auto d-flex">
{% include 'common/components/cards/card_profile.html' with user=asset.static_asset.user title="Publisher" %}
</div>
{# Exclude the author in case author is mistakenly included into contributors as well #}
{% with asset_author=asset.static_asset.author|default:asset.static_asset.user contributors=asset.static_asset.contributors %}
{% if contributors.count > 1 or contributors.count == 1 and contributors.first.pk != asset_author.pk %}
<div class="col-auto">
<div class="contributors d-flex align-items-center">
<span class="opacity-50 pe-2 text-muted">
<i class="i-plus"></i>
</span>
<div class="me-2">
{% comment %} <h4 class="comment-name mb-0">{{ asset.static_asset.contributors.all|length}} Other{% if asset.static_asset.contributors.all|length > 1 %}s{% endif %}:</h4> {% endcomment %}
<div class="d-flex">
<div class="d-flex pe-2">
{% for contributor in contributors.all %}
{% if contributor.pk != asset_author.pk %}
{% include 'users/components/avatar.html' with user=contributor %}
{% endif %}
{% endfor %}
</div>
<button class="btn btn-link" data-bs-toggle="dropdown" href="">
<i class="i-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-end mt-2 pb-0 pt-2 px-2">
<h4 class="text-muted">Other contributors:</h4>
{% for contributor in contributors.all %}
{% if contributor.pk != asset_author.pk %}
<div class="dropdown-item dropdown-item-text">
<div class="profile-card py-2">
{% include 'users/components/avatar.html' with user=contributor %}
<div class="profile-details">
<span class="profile-name">{{ contributor.full_name }}</span>
{% for crew in contributor.film_crew.all %}
{% if crew.film.id == film.id %}
<small class="profile-title">{{ crew.role }}</small>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endwith %}
{# TODO: Check style 'text-sm' #}
<div class="align-items-end col d-flex flex-column justify-content-end text-muted text-sm x-sm">
<div class="d-flex">
{% if request.user.is_authenticated %}
{% if asset.is_free %}
<div class="me-2">
{% include "common/components/cards/pill.html" with class="fs-sm ms-1" label='Free' %}
</div>
{% endif %}
{% endif %}
<div class="me-2">
<div class="badge fs-sm">
{{ asset.static_asset.get_source_type_display }}
</div>
</div>
<div class="me-2">
{{ asset.date_published|date:"N jS, Y" }}
</div>
</div>
<div class="d-flex">
{% if asset.static_asset.license %}
<a href="{{ asset.static_asset.license.url }}" target="_blank" class="me-2 text-muted"
data-bs-toggle="tooltip" data-placement="bottom" title="{{ asset.static_asset.license.description }}">
{{ asset.static_asset.license }}
</a>
{% endif %}
{% if asset.static_asset.copyright %}
<p class="me-2">
<i class="i-copyright"></i>
{{ asset.static_asset.copyright }}
</p>
{% endif %}
</div>
</div>
</div>
<div class="border-bottom"></div>
</div>
</div>
</div> </div>
<div class="align-items-start mb-3 row"> <div class="align-items-start mb-3 row">
<div class="col-12 col-md mb-2 pb-24"> <div class="col-12 col-md mb-2 pb-24">
{% include "common/components/navigation/buttons_toolbar.html" with item=asset %} {% include "common/components/navigation/buttons_toolbar.html" with item=asset %}
</div> </div>
</div> </div>
<div class="align-items-center mb-3 row">
<div class="col-auto d-flex">
{% include 'common/components/cards/card_profile.html' with user=asset.static_asset.user title="Publisher" %}
</div>
{# Exclude the author in case author is mistakenly included into contributors as well #}
{% with asset_author=asset.static_asset.author|default:asset.static_asset.user contributors=asset.static_asset.contributors %}
{% if contributors.count > 1 or contributors.count == 1 and contributors.first.pk != asset_author.pk %}
<div class="col-auto">
<div class="contributors d-flex align-items-center">
<span class="opacity-50 pe-2 text-muted">
<i class="i-plus"></i>
</span>
<div class="me-2">
{% comment %} <h4 class="comment-name mb-0">{{ asset.static_asset.contributors.all|length}} Other{% if asset.static_asset.contributors.all|length > 1 %}s{% endif %}:</h4> {% endcomment %}
<div class="d-flex">
<div class="d-flex pe-2">
{% for contributor in contributors.all %}
{% if contributor.pk != asset_author.pk %}
{% include 'users/components/avatar.html' with user=contributor %}
{% endif %}
{% endfor %}
</div>
<button class="btn btn-link" data-bs-toggle="dropdown" href="">
<i class="i-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-end mt-2 pb-0 pt-2 px-2">
<h4 class="text-muted">Other contributors:</h4>
{% for contributor in contributors.all %}
{% if contributor.pk != asset_author.pk %}
<div class="dropdown-item dropdown-item-text">
<div class="profile-card py-2">
{% include 'users/components/avatar.html' with user=contributor %}
<div class="profile-details">
<span class="profile-name">{{ contributor.full_name }}</span>
{% for crew in contributor.film_crew.all %}
{% if crew.film.id == film.id %}
<small class="profile-title">{{ crew.role }}</small>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endwith %}
{# TODO: Check style 'text-sm' #}
<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">
{{ asset.date_published|date:"N jS, Y" }}
</div>
</div>
<div class="d-flex">
{% if asset.static_asset.license %}
<a href="{{ asset.static_asset.license.url }}" target="_blank" class="me-2 text-muted"
data-bs-toggle="tooltip" data-placement="bottom" title="{{ asset.static_asset.license.description }}">
{{ asset.static_asset.license }}
</a>
{% endif %}
{% if asset.static_asset.copyright %}
<p class="me-2">
<i class="i-copyright"></i>
{{ asset.static_asset.copyright }}
</p>
{% endif %}
{% if asset.is_free %}
{% include "common/components/cards/pill.html" with label='Free' %}
{% endif %}
</div>
</div>
</div>
<div class="markdown-text"> <div class="markdown-text">
{% if asset.is_spoiler and not asset.is_free and not user_has_active_subscription %} {% if asset.is_spoiler and not asset.is_free and not user_has_active_subscription %}
{# do not show description to non-subscribers, if this is a subscription-only spoiler #} {# do not show description to non-subscribers, if this is a subscription-only spoiler #}

View File

@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<img alt="{{ asset.name }}" src="{{ asset.static_asset.thumbnail.url }}"> <img alt="{{ asset.name }}" class="js-modal-body-img modal-body-img" src="{{ asset.static_asset.thumbnail.url }}">
</div> </div>
</div> </div>
</div> </div>

View File

@ -46,14 +46,6 @@
{% endif %} {% 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> <div>
<button data-bs-toggle="dropdown" class="btn btn-link"> <button data-bs-toggle="dropdown" class="btn btn-link">
<i class="i-more-vertical"></i> <i class="i-more-vertical"></i>
@ -77,6 +69,14 @@
</a> </a>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if user.is_staff %}
{% firstof item.character.admin_url item.admin_url as admin_url %}
{# TODO: consider remove btn admin for edit btns #}
<a href="{{ admin_url }}" class="btn btn-admin dropdown-item">
<i class="i-edit"></i>
<span>Edit</span>
</a>
{% endif %}
</div> </div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,507 @@
{% extends 'flatpages/default.html' %}
{% load static %}
{% block data_theme %}{% endblock %}
{% block flatpage_content_extra %}
<!-- Team -->
<section class="py-6">
<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>
</div>
</section>
<!-- History -->
<section class="pb-5 pt-6 theme-dark">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-4">
<h1>A bit of<br>
<span class="text-muted">history.</span></h1>
</div>
<div class="col-md-8 pt-3">
<div class="lead">
<p></p>
</div>
</div>
</div>
<ul class="about-history-list ps-0">
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">March 9th, 2014</h6>
<h2>Launch at SXSW</h2>
<p>
First happy cloud video and crowdfunding for Cosmos Laundromat Pilot.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<img class="rounded w-100" src="{% static 'common/images/about/2014_03_09_sxsw.XSr1Q2HL.jpg' %}">
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">March 10th, 2015</h6>
<h2>Gooseberry Cosmos Laundromat</h2>
<p>
Weekly folders with updates for subscribers. Initial development of Attract, which will become the new cloud some months later on.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://gooseberry.blender.org/gooseberry-campaign-launched-we-need-10k-people-to-help">
<img class="rounded w-100" src="{% static 'common/images/about/2014_03_10_cosmos.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">October 30th, 2015</h6>
<h2>Glass half</h2>
<p>
Introducing integrated blogs in Blender Cloud projects. Glass Half is the first project fully developed on the new Blender Cloud. It's also the first and only project to have share its <a href="https://cloud.blender.org/p/glass-half/5627bb22f0e7220061109c9f">animation dailies!</a> But the biggest outcome from Glass Half was definitely <a href="https://studio.blender.org/films/glass-half/56b9c4dcc379cf70d59360d9/?asset=150">Flexirig.</a>
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://studio.blender.org/blog/glass-half-glass-half-premiere/">
<img class="rounded w-100" src="{% static 'common/images/about/2015_10_30_glass.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">November 19th, 2015</h6>
<h2>Art Gallery</h2>
<p>
Learn by example. Introducing a place for amazing artwork to be shared, along with its blendfiles and breakdowns.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/new-art-gallery-with-gleb-alexandrov">
<img class="rounded w-100" src="{% static 'common/images/about/2015_11_19_art.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">November 24th, 2015</h6>
<h2>Blender Institute Podcast</h2>
<p>
With so much going on in the Cloud at at the studio. The Blender Institute Podcast was born! Sharing our daily studio work, Blender community news, and interacting with the awesome Blender Cloud subscribers.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-blender-institute-podcast">
<img class="rounded w-100" src="{% static 'common/images/about/2015_11_24_bip.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">December 1st, 2015</h6>
<h2>Blenrig</h2>
<p>
The most powerful and versatile rigging framework for Blender, used and tested through Cosmos Laundromat and the Caminandes series, is now part of Blender Cloud!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/p/blenrig/blog/welcome-to-the-blenrig-project">
<img class="rounded w-100" src="{% static 'common/images/about/2015_12_01_blenrig.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">December 23rd, 2015</h6>
<h2>Texture Library</h2>
<p>
The biggest source for CC0/Public Domain textures on the interwebs goes live. First as beta, as a quick gift right before Xmas 2015!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/new-texture-library">
<img class="rounded w-100" src="{% static 'common/images/about/2015_12_23_textures.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">January 5th, 2016</h6>
<h2>Character Library</h2>
<p>
High-quality, animation-ready characters collection from all the Blender Institute open projects, plus a brand new one: Vincent!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/nraryew-the-character-lib">
<img class="rounded w-100" src="{% static 'common/images/about/2016_01_05_charlib.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">January 30th, 2016</h6>
<h2>Caminandes: Llamigos</h2>
<p>
The <a href="https://www.youtube.com/watch?v=SkVqJ1SGeL0">third episode</a> of the Caminandes series was completely done -and sponsored! through Blender Cloud. It's also the only project til date to have <a href="https://www.youtube.com/watch?v=kQH897V9bDg&list=PLI2TkLMzCSr_H6ppmzDtU0ut0RwxGvXjv">nicely edited Weekly video reports.</a>
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/p/caminandes-3/blog/caminandes-llamigos">
<img class="rounded w-100" src="{% static 'common/images/about/2016_01_30_llamigos.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">March 1st, 2016</h6>
<h2>Sybren</h2>
<p>
Dr. Sybren Stüvel starts working at the Blender Institute!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/welcome-sybren">
<img class="rounded w-100" src="{% static 'common/images/about/2016_03_01_sybren.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">May 3rd, 2016</h6>
<h2>Private Projects</h2>
<p>
Create your own private projects on Blender Cloud.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<img class="rounded w-100" src="{% static 'common/images/about/2016_05_03_projects.XSr1Q2HL.jpg' %}">
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">May 9th, 2016</h6>
<h2>Project Sharing</h2>
<p>
Team work! Share your projects with other Blender Cloud subscribers.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-project-sharing">
<img class="rounded w-100" src="{% static 'common/images/about/2016_05_09_projectsharing.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">May 11th, 2016</h6>
<h2>Blender Cloud add-on with Texture Library</h2>
<p>
Browse the textures from within Blender!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-project-sharing">
<img class="rounded w-100" src="{% static 'common/images/about/2016_05_11_addon.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">May 23rd, 2016</h6>
<h2>Private Texture Libraries</h2>
<p>
Create your own private textures library and browse it in Blender with our add-on.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-private-texture-libraries">
<img class="rounded w-100" src="{% static 'common/images/about/2016_05_23_privtextures.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">June 30th, 2016</h6>
<h2>Blender Sync</h2>
<p>
Sync your Blender preferences across multiple devices.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-blender-sync">
<img class="rounded w-100" src="{% static 'common/images/about/2016_06_30_sync.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">July 14th, 2016</h6>
<h2>Image Sharing</h2>
<p>
Quickly share renders and Blender screenshots within Blender with our add-on.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-image-sharing">
<img class="rounded w-100" src="{% static 'common/images/about/2016_07_14_image.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">July 27th, 2016</h6>
<h2>HDRI Library</h2>
<p>
High-dynamic range images are now available on Blender Cloud! With their own special viewer. Also available via the Blender Cloud add-on.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-the-hdri-library">
<img class="rounded w-100" src="{% static 'common/images/about/2016_07_27_hdri.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase">December 6th, 2016</h6>
<h2>Toon Character Workflow</h2>
<p>
YouTube star Dillon Gu joins Blender Cloud for a new tutorial series that will guide you from the basics to a finished toon-shaded character.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/blog/introducing-the-hdri-library">
<img class="rounded w-100" src="{% static 'common/images/about/2016_12_06_toon.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
<li class="mb-5 row">
<div class="col-md-5 pt-md-5">
<h6 class="fs-sm fw-normal letter-spacing text-muted text-uppercase"></h6>
<h2>Agent 327</h2>
<p>
Follow the ongoing progress of the Barbershop fight scene, an animation test for the Agent 327 project. By subscribing to Blender Cloud, you get access to all resources and training produced so far!
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<a href="https://cloud.blender.org/p/agent-327">
<img class="rounded w-100" src="{% static 'common/images/about/2017_03_10_agent.XSr1Q2HL.jpg' %}">
</a>
</div>
</li>
</ul>
</div>
</section>
{% endblock %}

View File

@ -5,15 +5,15 @@
{% with title=flatpage.title %} {% with title=flatpage.title %}
{% include 'common/components/meta.html' %} {% include 'common/components/meta.html' %}
{% endwith %} {% endwith %}
{% endblock %} {% endblock meta %}
{% block content %} {% block content %}
<div class="navdrawer-offset"> <div class="navdrawer-offset">
<div class="container pt-4"> <div class="container pt-4">
{% if user.is_staff and perms.flatpages.change_flatpage %} {% if user.is_staff and perms.flatpages.change_flatpage %}
<section class="flat-page-content mb-4"> <section class="flat-page-content mb-4">
<a class="btn btn-admin btn-sm" <a class="btn btn-admin"
href="{% url 'admin:flatpages_flatpage_change' flatpage.id %}">Edit Page</a> href="{% url 'admin:flatpages_flatpage_change' flatpage.id %}"><i class="i-edit"></i> Edit page</a>
</section> </section>
{% endif %} {% endif %}
@ -33,4 +33,7 @@
{% endblock flatpage_content %} {% endblock flatpage_content %}
</div> </div>
</div> </div>
{% block flatpage_content_extra %}{% endblock flatpage_content_extra %}
{% endblock content %} {% endblock content %}

View File

@ -30,7 +30,7 @@
</li> </li>
{% if film.show_production_logs_nav_link %} {% if film.show_production_logs_nav_link %}
<li class="nav-item {% if date_list or production_log.name %}active{% endif %}"> <li class="nav-item {% if date_list or production_log.name %}active{% endif %}">
<a class="nav-link" href="{% url 'film-production-logs' film_slug=film.slug %}">Production logs</a> <a class="nav-link" href="{% url 'film-production-logs' film_slug=film.slug %}">Production Logs</a>
</li> </li>
<li class="ms-3"> <li class="ms-3">
{% include 'films/components/admin/production_log_manage.html' %} {% include 'films/components/admin/production_log_manage.html' %}
@ -48,7 +48,7 @@
{% endif %} {% endif %}
{% if user_can_edit_film %} {% if user_can_edit_film %}
<li class="nav-item" data-link="{{ film.admin_url }}"> <li class="nav-item" data-link="{{ film.admin_url }}">
<a href="{{ film.admin_url }}" class="btn btn-admin nav-link">Admin Edit</a> <a href="{{ film.admin_url }}" class="btn btn-admin nav-link"><i class="i-edit me-2"></i>Edit</a>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>

View File

@ -9,12 +9,12 @@
<div class="btn-row"> <div class="btn-row">
{% if film.youtube_link != "" %} {% if film.youtube_link != "" %}
{# Class 'video-modal-link' is needed for js #} {# Class 'video-modal-link' is needed for js #}
<button class="btn btn-primary video-modal-link" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="{{ film.youtube_link }}"> <button class="btn btn-accent video-modal-link" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="{{ film.youtube_link }}">
Watch {{ film.title }} Watch {{ film.title }}
</button> </button>
<a class="btn btn-link" href="{% url 'film-gallery' film.slug %}">Explore Content Gallery</a> <a class="btn btn-link" href="{% url 'film-gallery' film.slug %}">Explore Content Gallery</a>
{% else %} {% else %}
<a class="btn btn-primary" href="{% url 'film-gallery' film.slug %}">Explore Content Gallery</a> <a class="btn btn-accent" href="{% url 'film-gallery' film.slug %}">Explore Content Gallery</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>

View File

@ -86,16 +86,18 @@
{% endwith %} {% endwith %}
</div> </div>
<div class="col-md-10"> <div class="col-md-10">
<div class="row"> <div class="flex-column-reverse flex-md-row row">
<div class="col-md-8 pb-3"> <div class="col-md-8 pb-3">
<p>{{ entry.description }}</p> <p>{{ entry.description }}</p>
</div> </div>
{% if user_can_edit_production_log_entry %} {% if user_can_edit_production_log_entry %}
<div> <div class="col-md-4 d-flex justify-content-md-end">
<a href="{{ entry.admin_url }}" class="btn btn-admin"> <div class="pb-3">
<i class="i-edit"></i> <a href="{{ entry.admin_url }}" class="btn btn-admin">
<span>Edit</span> <i class="i-edit"></i>
</a> <span>Edit</span>
</a>
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>

View File

@ -76,8 +76,7 @@
<div class="drawer-nav-group"> <div class="drawer-nav-group">
{% for page in training.flatpages.all %} {% for page in training.flatpages.all %}
<div class="drawer-nav-dropdown-wrapper"> <div class="drawer-nav-dropdown-wrapper">
<a class="drawer-nav-dropdown h3" href="{{ page.url }}" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ page.title }}"> <a class="drawer-nav-dropdown" href="{{ page.url }}" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ page.title }}">
<i class="i-news me-2"></i>
<span class="drawer-nav-dropdown-text overflow-text">{{ page.title }}</span> <span class="drawer-nav-dropdown-text overflow-text">{{ page.title }}</span>
</a> </a>
</div> </div>

View File

@ -1,6 +1,5 @@
<div class="cards-item card-grid-item {{ card_sizes|default:"col-12 col-lg-4 col-sm-6" }}" {% if training.favorited %}data-checked="checked" <div class="cards-item card-grid-item {{ card_sizes|default:"col-12 col-lg-4 col-sm-6" }}" {% if training.favorited %}data-checked="checked"
{% endif %} data-favorite-url="{{ training.favorite_url }}" data-training-id="{{ training.id }}"> {% endif %} data-favorite-url="{{ training.favorite_url }}" data-training-id="{{ training.id }}">
<div class="position-relative">
<a class="cards-item-content" href="{{ training.url }}"> <a class="cards-item-content" href="{{ training.url }}">
<div class="cards-item-thumbnail"> <div class="cards-item-thumbnail">
<img alt="{{ training.name }}" src="{% firstof training.static_asset.thumbnail_s_url training.thumbnail_s_url %}"> <img alt="{{ training.name }}" src="{% firstof training.static_asset.thumbnail_s_url training.thumbnail_s_url %}">
@ -43,5 +42,4 @@
{% include 'training/components/card_button_favorite.html' with class='btn-save-media card-training-favorite' checked=training.favorited %} {% include 'training/components/card_button_favorite.html' with class='btn-save-media card-training-favorite' checked=training.favorited %}
{% endif %} {% endif %}
</div> </div>
</div>
</div> </div>

View File

@ -19,84 +19,82 @@
{% endblock %} {% endblock %}
{% block nexted_content %} {% block nexted_content %}
<div class="page-detail-helper"> <div class="row mb-3">
<div class="row mb-3"> {% if section.preview_youtube_link %}
{% 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>
{% 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/content_locked.html' with background=section.thumbnail_m_url %}
{% endif %}
</div>
</div>
{% 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="col">
<div class="align-items-start row"> <div class="overflow-hidden rounded">
<div class="col-12 col-md mb-2 mb-md-3"> {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
<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>
<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" %}
</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>
{% 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/content_locked.html' with background=section.thumbnail_m_url %}
{% endif %}
</div>
</div>
{% 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="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" %}
</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>
</div> </div>
{% endblock nexted_content %} {% endblock nexted_content %}

View File

@ -4,7 +4,7 @@
{% static 'common/images/blank-profile-pic.png' as default_avatar_url %} {% static 'common/images/blank-profile-pic.png' as default_avatar_url %}
{% firstof user.image_url default_avatar_url as avatar_url %} {% firstof user.image_url default_avatar_url as avatar_url %}
<div class="profile-avatar avatar-{% firstof size size 'md' %}"> <div class="profile-avatar profile-avatar-helper avatar-{% firstof size size 'md' %}">
<img src="{{ avatar_url }}" alt="{{ user.full_name }}" title="{{ user.full_name }}"> <img src="{{ avatar_url }}" alt="{{ user.full_name }}" title="{{ user.full_name }}">
</div> </div>
{% endif %} {% endif %}