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
2 changed files with 56 additions and 39 deletions
Showing only changes of commit 87c51b8464 - Show all commits

View File

@ -670,12 +670,27 @@ button,
.training-group-item
+padding(3, x)
.training-group-item-content
@extend .box
&:last-child
+media-xl
padding-right: 0
background-color: var(--color-bg-tertiary)
.training-group-item-content
width: var(--training-group-item-content-width)
.box
background-color: var(--color-bg-tertiary)
.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)
// TODO: revise training-group-item-nav display toggle on medium and small screens
.training-group-item-nav
+margin(3, bottom)

View File

@ -51,47 +51,49 @@
{% endif %}
</div>
<div class="training-group-item training-group-item-content">
<div class="row">
<div class="col">
<div class="row">
<div class="col 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 class="box">
<div class="row">
<div class="col">
<div class="row">
<div class="col 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="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 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="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 %}
<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" %}
{% 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>
<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>