UI: Training templates fluid video layouts #104435
@ -655,10 +655,88 @@ button,
|
|||||||
filter: blur(var(--filter-blur-value))
|
filter: blur(var(--filter-blur-value))
|
||||||
transform: scale(1.1)
|
transform: scale(1.1)
|
||||||
|
|
||||||
|
.training-group
|
||||||
|
--training-group-item-content-width: 100%
|
||||||
|
--training-group-item-nav-width: 100%
|
||||||
|
|
||||||
|
+media-xl
|
||||||
|
--training-group-item-content-width: 40.0rem
|
||||||
|
--training-group-item-nav-width: 30.0rem
|
||||||
|
|
||||||
|
+media-xxl
|
||||||
|
--training-group-item-content-width: 54.0rem
|
||||||
|
--training-group-item-nav-width: 40.0rem
|
||||||
|
|
||||||
|
.training-group-item
|
||||||
|
+padding(3, x)
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
+media-xl
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
.training-group-item-content
|
||||||
|
width: var(--training-group-item-content-width)
|
||||||
|
|
||||||
|
.box
|
||||||
|
background-color: var(--color-bg-tertiary)
|
||||||
|
+padding(3)
|
||||||
|
|
||||||
|
.comment-input-div
|
||||||
|
&.form-control
|
||||||
|
background-color: var(--color-bg-primary)
|
||||||
|
|
||||||
|
.replies
|
||||||
|
.comment
|
||||||
|
background-color: var(--color-bg-secondary)
|
||||||
|
|
||||||
|
.top-level-comment
|
||||||
|
background-color: var(--color-bg-primary)
|
||||||
|
|
||||||
|
.training-group-item-content-detail
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.cards-item-title
|
||||||
|
font-size: var(--fs-h4)
|
||||||
|
line-height: var(--lh-base)
|
||||||
|
|
||||||
|
+media-lg
|
||||||
|
.training-group-item-content-detail-inner
|
||||||
|
max-width: 114.0rem
|
||||||
|
|
||||||
|
+media-xl
|
||||||
|
width: calc(100% - var(--training-group-item-nav-width))
|
||||||
|
|
||||||
|
.cards
|
||||||
|
--cards-items-per-row: 4
|
||||||
|
|
||||||
|
+media-xxl
|
||||||
|
.cards
|
||||||
|
--cards-items-per-row: 5
|
||||||
|
|
||||||
|
// TODO: revise training-group-item-nav display toggle on medium and small screens
|
||||||
|
.training-group-item-nav
|
||||||
|
+margin(3, bottom)
|
||||||
|
width: var(--training-group-item-nav-width)
|
||||||
|
|
||||||
|
.training-group-item-video
|
||||||
|
background-color: black
|
||||||
|
+margin(3, bottom)
|
||||||
|
padding: 0
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
+media-xl
|
||||||
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
height: 100vh
|
||||||
|
justify-content: center
|
||||||
|
left: 0
|
||||||
|
margin-bottom: 0
|
||||||
|
position: sticky
|
||||||
|
top: 0
|
||||||
|
width: calc(100% - var(--training-group-item-content-width) - var(--training-group-item-nav-width))
|
||||||
|
|
||||||
.training-header-img-helper
|
.training-header-img-helper
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
|
||||||
max-height: calc(var(--spacer) * 25)
|
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
img
|
img
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
$container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 1320px, xxl: 1600px)
|
$container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 1320px, xxl: 1600px)
|
||||||
|
|
||||||
|
// Redeclare $grid-breakpoints 'xl' and 'xxl' with web-assets defaults to override obsolete Bootstrap breakpoints coming from flat, pre-compiled vendor files
|
||||||
|
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1320px, xxl: 1680px)
|
||||||
|
|
||||||
$container-width: map-get($container-max-widths, 'xl')
|
$container-width: map-get($container-max-widths, 'xl')
|
||||||
|
|
||||||
$font-path: "/static/assets/fonts"
|
$font-path: "/static/assets/fonts"
|
||||||
|
|||||||
@ -168,6 +168,10 @@ textarea
|
|||||||
|
|
||||||
/* Grid. */
|
/* Grid. */
|
||||||
// TODO: consider moving to web-assets
|
// TODO: consider moving to web-assets
|
||||||
|
.container-fluid
|
||||||
|
.row
|
||||||
|
+margin(0, x)
|
||||||
|
|
||||||
.row
|
.row
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
|
|||||||
@ -7,28 +7,22 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% block training_header_image %}
|
<div class="container-fluid pt-2 pt-md-3">
|
||||||
{% endblock training_header_image %}
|
|
||||||
|
|
||||||
<div class="container pt-2 pt-md-3">
|
|
||||||
<div class="d-md-none mb-3 pt-2 row">
|
<div class="d-md-none mb-3 pt-2 row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<button class="btn js-nav-drawer-btn-toggle"><i class="i-list"></i> Content</button>
|
<button class="btn js-nav-drawer-btn-toggle"><i class="i-list"></i> Content</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row training-group">
|
||||||
<div class="col-lg-3 col-md-4 mb-3 fade-xs js-nav-drawer-helper nav-drawer-helper">
|
<div class="training-group-item training-group-item-nav fade-xs js-nav-drawer-helper nav-drawer-helper">
|
||||||
<nav class="nav-drawer-nested">
|
<nav class="nav-drawer-nested">
|
||||||
<div class="nav-drawer-body">
|
<div class="nav-drawer-body">
|
||||||
{% block nested_nav_drawer_inner %}
|
{% block nested_nav_drawer_inner %}{% endblock nested_nav_drawer_inner %}
|
||||||
{% endblock nested_nav_drawer_inner %}
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="col col-lg-9 col-md-8">
|
|
||||||
{% block nexted_content %}
|
{% block nexted_content %}{% endblock nexted_content %}
|
||||||
{% endblock nexted_content %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|||||||
@ -19,64 +19,70 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block nexted_content %}
|
{% block nexted_content %}
|
||||||
{% if chapter.thumbnail %}
|
<div class="training-group-item-content-detail">
|
||||||
<div class="row mb-3">
|
<div class="training-group-item-content-detail-inner">
|
||||||
<div class="col">
|
{% if chapter.thumbnail %}
|
||||||
{% if section.is_free or request.user|has_active_subscription %}
|
<div class="row mb-3">
|
||||||
{% firstof chapter.picture_header chapter.thumbnail as header %}
|
<div class="col">
|
||||||
{% include "common/components/helpers/image_set.html" with alt=chapter.name classes="img-fluid img-width-100 rounded" img_source=header xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
|
{% if section.is_free or request.user|has_active_subscription %}
|
||||||
{% else %}
|
{% firstof chapter.picture_header chapter.thumbnail as header %}
|
||||||
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
{% include "common/components/helpers/image_set.html" with alt=chapter.name classes="img-fluid img-width-100 rounded" img_source=header xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
|
||||||
{% endif %}
|
{% else %}
|
||||||
</div>
|
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="align-items-start row">
|
||||||
|
<div class="col-12 col-md mb-3">
|
||||||
|
<div class="d-md-block d-none">
|
||||||
|
<p class="small text-muted">{{ training.name }}</p>
|
||||||
|
<h2 class="mb-0">{{ chapter.name }}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
||||||
|
<div class="button-toolbar-container">
|
||||||
|
<div class="button-toolbar">
|
||||||
|
{% if user.is_staff %}
|
||||||
|
<a href="{{ chapter.admin_url }}" class="btn btn-admin">
|
||||||
|
<i class="i-edit"></i>
|
||||||
|
<span>Edit</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<button data-bs-toggle="dropdown" class="btn btn-link">
|
||||||
|
<i class="i-more-vertical"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end">
|
||||||
|
<a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank" class="dropdown-item">
|
||||||
|
<i class="i-flag"></i>
|
||||||
|
<span>Report Problem</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if chapter.description %}
|
||||||
|
<section class="mb-3 row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="markdown-text">
|
||||||
|
{% with_shortcodes chapter.description|markdown %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="mb-3 row">
|
||||||
<div class="mb-3 row ">
|
<div class="col-12">
|
||||||
<div class="col">
|
<div class="cards card-layout-card-transparent files">
|
||||||
<div class="align-items-start row">
|
{% for section in chapter.sections.all %}
|
||||||
<div class="col-12 col-md mb-3">
|
{% if section.is_published %}
|
||||||
<div class="d-md-block d-none">
|
{% include "common/components/file_section.html" with section=section %}
|
||||||
<p class="small text-muted">{{ training.name }}</p>
|
{% endif %}
|
||||||
<h2 class="mb-0">{{ chapter.name }}</h2>
|
{% endfor %}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
|
|
||||||
<div class="button-toolbar-container">
|
|
||||||
<div class="button-toolbar">
|
|
||||||
{% if user.is_staff %}
|
|
||||||
<a href="{{ chapter.admin_url }}" class="btn btn-admin">
|
|
||||||
<i class="i-edit"></i>
|
|
||||||
<span>Edit</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<button data-bs-toggle="dropdown" class="btn btn-link">
|
|
||||||
<i class="i-more-vertical"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-end">
|
|
||||||
<a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank" class="dropdown-item">
|
|
||||||
<i class="i-flag"></i>
|
|
||||||
<span>Report Problem</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% if chapter.description %}
|
|
||||||
<section class="markdown-text mb-3">{% with_shortcodes chapter.description|markdown %}</section>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="cards card-layout-card-transparent files">
|
|
||||||
{% for section in chapter.sections.all %}
|
|
||||||
{% if section.is_published %}
|
|
||||||
{% include "common/components/file_section.html" with section=section %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,45 +19,35 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block nexted_content %}
|
{% block nexted_content %}
|
||||||
<div class="row mb-3">
|
<div class="training-group-item training-group-item-video">
|
||||||
{% if section.preview_youtube_link %}
|
{% if section.preview_youtube_link %}
|
||||||
<div class="col">
|
{% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
|
||||||
<div class="overflow-hidden rounded">
|
|
||||||
{% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% elif video %}
|
{% elif video %}
|
||||||
<div class="col">
|
{% if section.is_free or request.user|has_active_subscription %}
|
||||||
<div class="overflow-hidden rounded">
|
{% if user.is_anonymous %}
|
||||||
{% if section.is_free or request.user|has_active_subscription %}
|
{% 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 %}
|
||||||
{% if user.is_anonymous %}
|
{% else %}
|
||||||
{% 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 %}
|
{% 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 %}
|
||||||
{% else %}
|
{% endif %}
|
||||||
{% 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 %}
|
{% else %}
|
||||||
{% endif %}
|
{% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
|
||||||
{% else %}
|
{% endif %}
|
||||||
{% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="col">
|
{% if section.is_free or request.user|has_active_subscription %}
|
||||||
<div class="overflow-hidden rounded">
|
{% if section.thumbnail %}
|
||||||
{% if section.is_free or request.user|has_active_subscription %}
|
{% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
|
||||||
{% if section.thumbnail %}
|
{% endif %}
|
||||||
{% 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" %}
|
{% else %}
|
||||||
{% endif %}
|
<div class="col">
|
||||||
{% else %}
|
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
||||||
{% include 'common/components/content_locked.html' with background=training.picture_header %}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="training-group-item training-group-item-content">
|
||||||
<div class="col">
|
<div class="box">
|
||||||
<div class="align-items-start row">
|
<div class="row">
|
||||||
<div class="col-12 col-md mb-2 mb-md-3">
|
<div class="col mb-2 mb-md-3">
|
||||||
<div class="d-md-block d-none">
|
<div class="d-md-block d-none">
|
||||||
<p class="small text-muted">{{ chapter.name }}</p>
|
<p class="small text-muted">{{ chapter.name }}</p>
|
||||||
<h2>{{ section.name }}</h2>
|
<h2>{{ section.name }}</h2>
|
||||||
@ -92,7 +82,7 @@
|
|||||||
<section class="mb-3 markdown-text">
|
<section class="mb-3 markdown-text">
|
||||||
{% with_shortcodes section.text|markdown_unsafe %}
|
{% with_shortcodes section.text|markdown_unsafe %}
|
||||||
</section>
|
</section>
|
||||||
<section class="mb-3">
|
<section>
|
||||||
{% include 'comments/components/comment_section.html' %}
|
{% include 'comments/components/comment_section.html' %}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,24 +11,23 @@
|
|||||||
{% javascript 'training' %}
|
{% javascript 'training' %}
|
||||||
{% endblock scripts %}
|
{% endblock scripts %}
|
||||||
|
|
||||||
{% block training_header_image %}
|
|
||||||
{% if training.picture_header_url %}
|
|
||||||
<div class="container">
|
|
||||||
<div class="mt-3 row">
|
|
||||||
<div class="col training-header-img-helper">
|
|
||||||
<img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endblock training_header_image %}
|
|
||||||
|
|
||||||
{% block nexted_content %}
|
{% block nexted_content %}
|
||||||
<section>
|
|
||||||
<div class="row">
|
<section class="training-group-item training-group-item-content-detail">
|
||||||
<div class="col">
|
<div class="row training-group-item-content-detail-inner">
|
||||||
<div class="row align-items-start mb-2">
|
<div class="col">
|
||||||
<div class="col-12 col-md">
|
{% if training.picture_header_url %}
|
||||||
|
<div class="mb-3 row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="training-header-img-helper">
|
||||||
|
<img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="align-items-start mb-3 row">
|
||||||
|
<div class="col-12 col-md">
|
||||||
<h1 class="mb-0">{{ training.name }}</h1>
|
<h1 class="mb-0">{{ training.name }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-auto">
|
<div class="col-12 col-md-auto">
|
||||||
@ -75,7 +74,13 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<section class="markdown-text mb-3">{% with_shortcodes training.summary_rendered %}</section>
|
<section class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="markdown-text">
|
||||||
|
{% with_shortcodes training.summary_rendered %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user