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 %}
<div class="hero hero-blog">
<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>
{% endif %}
<section class="container">
<div class="row">
<div class="col"></div>
<div class="col-md-10">
<div class="body-bg box">
<div class="bg-filter-blur box">
<div class="mb-4">
<span class="text-muted">{{ post.date_published|date:"jS M Y" }}
{% if post.category %}
@ -47,8 +45,6 @@
{% with_shortcodes post.content_html %}
</div>
{% include "blog/blog_toolbar.html" %}
<section class="mb-4">
{% include 'comments/components/comment_section.html' %}
</section>

View File

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

View File

@ -11,7 +11,7 @@
{% endblock %}
{% 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="col-lg-1"></div>
<div class="col-12 col-lg-10">

View File

@ -81,18 +81,18 @@
{% include "common/components/cards/pill.html" with label='Free' %}
{% endif %}
{% 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 }}">
<i class="i-info"></i>
{{ character_version.static_asset.license }}
</a>
{% 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>
Blender {{ character_version.min_blender_version }}
</span>
{% 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>
{{ character.film }}
</a>

View File

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

View File

@ -5,10 +5,10 @@
{% include 'users/components/avatar.html' with user=request.user %}
</div>
<div class="col ps-0">
{# TODO: migrate to form tags? #}
<div class="comment-input-div form-control" contenteditable="true"></div>
{# TODO: migrate to form tags #}
<div class="comment-input-div form-control js-comment-input-div-helper" contenteditable="true"></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">
<i class="i-send"></i>
Comment

View File

@ -15,7 +15,7 @@
<div class="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 %}
{% 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) => {
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) => {
@ -199,4 +204,31 @@ window.asset = (function asset() {
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
.comment
display: flex
@ -42,7 +53,7 @@
padding: var(--spacer-1)
.comment-input
align-items: center
align-items: start
display: flex
flex-direction: row
+margin(2, bottom)
@ -51,19 +62,18 @@
.comment-input-div
@extend .form-control
height: calc(var(--spacer) * 2.5)
&.disabled
opacity: $btn-disabled-opacity
&.form-control
background-color: var(--color-bg-tertiary)
// TODO: change placeholder to form attribute
&:empty
&::before
color: var(--color-text-tertiary)
content: 'Leave a comment'
left: var(--spacer-2)
left: var(--spacer-3)
position: absolute
top: 50%
transform: translateY(-50%)

View File

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

View File

@ -1,4 +1,17 @@
.modal
height: auto
overflow-y: scroll
+media-md
height: 100%
// TODO: cleanup and refactor component markup and style
.modal-asset
&.show
align-items: center
display: flex !important
justify-content: center
.modal-asset-zoom
img
display: block
@ -29,44 +42,98 @@
top: var(--spacer)
z-index: 1
.modal-body-img
&:hover
cursor: zoom-in
&.active
&:hover
cursor: zoom-out
.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
background-color: var(--color-bg-secondary)
height: 100%
+media-md
flex-direction: row
.modal-dialog
border-radius: var(--border-radius-lg)
overflow: hidden
.modal-header
border-bottom: 0
display: block
height: 100vh
+margin(0)
max-width: 100%
+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
.modal-asset-img-wrapper
align-items: center
cursor: zoom-in
display: flex
justify-content: center
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-close, &.next, &.previous
+media-md
width: 5.6rem
&.modal-close,
&.next,
&.previous
+media-md
position: absolute
&.modal-close
right: var(--spacer-3)
top: var(--spacer-3)
right: 0
+media-md
right: calc(var(--spacer) * 2)
top: calc(var(--spacer) * 2)
&.next, &.previous
top: 50%
right: var(--spacer-4)
top: var(--spacer-4)
&.next
right: calc(var(--spacer) * 2)
right: var(--spacer-4)
&.previous
left: calc(var(--spacer) * 2)
left: var(--spacer-4)

View File

@ -4,6 +4,12 @@
.bg-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
background-attachment: fixed
@ -127,3 +133,6 @@
.z-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
$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"
$link-decoration: none

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{% if url is none %}
{# 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 %}
<a class="badge" href="{{ url }}">{{ label }}</a>
<a class="badge {% if class %}{{ class }}{% endif %}" href="{{ url }}">{{ label }}</a>
{% endif %}

View File

@ -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" }} {% 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 }}">
<div class="position-relative">
<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">
{% endif %}
</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>
</div>

View File

@ -3,19 +3,19 @@
{% load pipeline %}
{% 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 }}">
<i class="i-chevron-right"></i>
</button>
{% endif %}
{% 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-asset-id="{{ previous_asset.id }}">
<i class="i-chevron-left"></i>
</button>
{% 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>
</button>
@ -30,13 +30,12 @@
{% include 'common/components/spoiler_alert.html' %}
{% endif %}
<div class="modal-header p-0">
<div class="d-md-none p-3">
<div class="bg-black col-lg-7 col-md-6 modal-header p-0">
<div class="align-items-center d-flex d-md-none justify-content-between px-3 py-4">
<div>
<p class="text-muted">{{ asset.static_asset.get_source_type_display }}</p>
<h3 class="mb-0">{{ asset.name }}</h3>
</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>
</button>
</div>
@ -63,24 +62,23 @@
{% include 'common/components/content_locked.html' with background=asset.static_asset.thumbnail_s_url %}
{% endif %}
</div>
<div class="modal-body">
<div class="col-lg-5 col-md-6 modal-body">
<div class="bg-secondary position-sticky pt-4 top-0 z-4">
<div class="align-items-start row">
<div class="col-12 col-md mb-2">
<div class="d-none d-md-block">
<h2>{{ asset.name }}</h2>
<h2 class="h3">
{{ asset.name }}
</h2>
</div>
</div>
</div>
<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>
</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 %}
@ -133,10 +131,18 @@
{# 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">
{# TODO: fix 'get_source_type_display' always image #}
{% 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>
@ -154,12 +160,20 @@
{{ 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="border-bottom"></div>
</div>
</div>
</div>
<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>
</div>
<div class="markdown-text">
{% 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 #}

View File

@ -27,7 +27,7 @@
</div>
</div>
<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>

View File

@ -46,14 +46,6 @@
{% 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>
@ -77,6 +69,14 @@
</a>
{% 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>

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

View File

@ -30,7 +30,7 @@
</li>
{% if film.show_production_logs_nav_link %}
<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 class="ms-3">
{% include 'films/components/admin/production_log_manage.html' %}
@ -48,7 +48,7 @@
{% endif %}
{% if user_can_edit_film %}
<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>
{% endif %}
</ul>

View File

@ -9,12 +9,12 @@
<div class="btn-row">
{% if film.youtube_link != "" %}
{# 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 }}
</button>
<a class="btn btn-link" href="{% url 'film-gallery' film.slug %}">Explore Content Gallery</a>
{% 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 %}
</div>
</div>

View File

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

View File

@ -76,8 +76,7 @@
<div class="drawer-nav-group">
{% for page in training.flatpages.all %}
<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 }}">
<i class="i-news me-2"></i>
<a class="drawer-nav-dropdown" href="{{ page.url }}" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ page.title }}">
<span class="drawer-nav-dropdown-text overflow-text">{{ page.title }}</span>
</a>
</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"
{% endif %} data-favorite-url="{{ training.favorite_url }}" data-training-id="{{ training.id }}">
<div class="position-relative">
<a class="cards-item-content" href="{{ training.url }}">
<div class="cards-item-thumbnail">
<img alt="{{ training.name }}" src="{% firstof training.static_asset.thumbnail_s_url training.thumbnail_s_url %}">
@ -44,4 +43,3 @@
{% endif %}
</div>
</div>
</div>

View File

@ -19,7 +19,6 @@
{% endblock %}
{% block nexted_content %}
<div class="page-detail-helper">
<div class="row mb-3">
{% if section.preview_youtube_link %}
<div class="col">
@ -98,7 +97,6 @@
</section>
</div>
</div>
</div>
{% endblock nexted_content %}
{% block scripts %}

View File

@ -4,7 +4,7 @@
{% static 'common/images/blank-profile-pic.png' as default_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 }}">
</div>
{% endif %}