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 +86 -74
4 changed files with 86 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 54c698523e - Show all commits

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

@ -692,6 +692,14 @@ button,
.top-level-comment
background-color: var(--color-bg-primary)
.training-group-item-content-detail
+margin(auto, x)
width: 100%
+media-xl
max-width: var(--container-width)
width: calc(100% - var(--training-group-item-nav-width))
// TODO: revise training-group-item-nav display toggle on medium and small screens
.training-group-item-nav
+margin(3, bottom)
@ -715,8 +723,6 @@ button,
.training-header-img-helper
align-items: center
display: flex
max-height: calc(var(--spacer) * 25)
overflow: hidden
img

3
training/templates/training/base_training.html
View File

@ -7,9 +7,6 @@
{% endblock %}
{% block content %}
{% block training_header_image %}
{% endblock training_header_image %}
<div class="container-fluid pt-2 pt-md-3">
<div class="d-md-none mb-3 pt-2 row">
<div class="col-12">

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

@ -19,6 +19,7 @@
{% endblock %}
{% block nexted_content %}
<div class="training-group-item-content-detail">
{% if chapter.thumbnail %}
<div class="row mb-3">
<div class="col">
@ -31,8 +32,7 @@
</div>
</div>
{% endif %}
<div class="mb-3 row ">
<div class="col">
<div class="align-items-start row">
<div class="col-12 col-md mb-3">
<div class="d-md-block d-none">
@ -65,10 +65,16 @@
</div>
{% if chapter.description %}
<section class="markdown-text mb-3">{% with_shortcodes chapter.description|markdown %}</section>
<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="row">
<div class="mb-3 row">
<div class="col-12">
<div class="cards card-layout-card-transparent files">
{% for section in chapter.sections.all %}
@ -80,7 +86,6 @@
</div>
</div>
</div>
</div>
{% endblock nexted_content %}
{% block scripts %}

34
training/templates/training/training.html
View File

@ -11,23 +11,21 @@
{% javascript 'training' %}
{% 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 %}
<section>
<section class="training-group-item training-group-item-content-detail">
<div class="row">
<div class="col">
<div class="row align-items-start mb-2">
<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">
{% if training.picture_header_url %}
<div class="training-header-img-helper">
<img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
</div>
{% endif %}
</div>
</div>
<div class="align-items-start mb-3 row">
<div class="col-12 col-md">
<h1 class="mb-0">{{ training.name }}</h1>
</div>
@ -75,7 +73,13 @@
</div>
{% endif %}
<section class="markdown-text mb-3">{% with_shortcodes training.summary_rendered %}</section>
<section class="row">
<div class="col-12 col-lg-9">
<div class="markdown-text">
{% with_shortcodes training.summary_rendered %}
</div>
</div>
</section>
</div>
</div>
</section>