studio/blender-studio
3
4
Fork 4
Code Issues 37 Pull Requests 2 Projects 1 Releases 5 Wiki Activity

UI: Training templates fluid video layouts #104435

Merged
Márton Lente merged 13 commits from ui/training-layout-fluid into main 2024-08-23 16:50:27 +02:00
Conversation 2 Commits 13 Files Changed 7 +73 -55
4 changed files with 73 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3e72e49f86 - Show all commits

17
common/static/common/styles/studio/_custom.sass
View File

@ -693,13 +693,26 @@ button,
background-color: var(--color-bg-primary)
.training-group-item-content-detail
+margin(auto, x)
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
max-width: var(--container-width)
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)

4
common/static/common/styles/studio/_web-assets-overrides.sass
View File

@ -168,6 +168,10 @@ textarea
/* Grid. */
// TODO: consider moving to web-assets
.container-fluid
.row
+margin(0, x)
.row
width: 100%

103
training/templates/training/chapter.html
View File

@ -20,60 +20,61 @@
{% block nexted_content %}
<div class="training-group-item-content-detail">
{% if chapter.thumbnail %}
<div class="row mb-3">
<div class="col">
{% if section.is_free or request.user|has_active_subscription %}
{% firstof chapter.picture_header chapter.thumbnail as 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" %}
{% else %}
{% include 'common/components/content_locked.html' with background=training.picture_header %}
{% endif %}
</div>
</div>
{% endif %}
<div class="training-group-item-content-detail-inner">
{% if chapter.thumbnail %}
<div class="row mb-3">
<div class="col">
{% if section.is_free or request.user|has_active_subscription %}
{% firstof chapter.picture_header chapter.thumbnail as 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" %}
{% else %}
{% 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 %}
<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>
<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>
{% if chapter.description %}
<section class="mb-3 row">
<div class="col col-lg-9">
<div class="markdown-text">
{% with_shortcodes chapter.description|markdown %}
</div>
</div>
</section>
{% endif %}
<div class="mb-3 row">
<div class="col-12">
<div class="cards card-layout-card-transparent files">

4
training/templates/training/training.html
View File

@ -14,7 +14,7 @@
{% block nexted_content %}
<section class="training-group-item training-group-item-content-detail">
<div class="row">
<div class="row training-group-item-content-detail-inner">
<div class="col">
<div class="mb-3 row">
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-08-23 16:13:25 +02:00
Outdated
Review
Copy Link

This entire div can be empty if {% if training.picture_header_url %} is false.
Adding a gap because of mb-3 without anything inside.

Move the check up here.

This entire div can be empty if `{% if training.picture_header_url %}` is false. Adding a gap because of `mb-3` without anything inside. Move the check up here.
Márton Lente commented 2024-08-23 16:28:52 +02:00
Outdated
Review
Copy Link

Thanks, it has been fixed.

Thanks, it has been fixed.
<div class="col">
@ -74,7 +74,7 @@
{% endif %}
<section class="row">
<div class="col-12 col-lg-9">
<div class="col-12">
<div class="markdown-text">
{% with_shortcodes training.summary_rendered %}
</div>