From 38fd6477215072786ab46239b006a09fd69a1416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 21 Aug 2024 17:14:32 +0200 Subject: [PATCH 01/12] UI: Improve templates training layout Improve training detail pages' layouts by making the video sizing fluid, and centrally aligned to the viewport, while re-arranging nav and content columns. --- .../static/common/styles/studio/_custom.sass | 36 +++++++ .../templates/training/base_training.html | 15 ++- training/templates/training/section.html | 100 +++++++++--------- 3 files changed, 91 insertions(+), 60 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 415af399..fb777b72 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -655,6 +655,42 @@ button, filter: blur(var(--filter-blur-value)) 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: 54.0rem + --training-group-item-nav-width: 40.0rem + + .training-group-item + +padding(2, x) + + .training-group-item-content + @extend .box + + background-color: var(--color-bg-tertiary) + width: var(--training-group-item-content-width) + + // 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 + +margin(3, bottom) + width: 100% + + +media-xl + align-items: center + display: flex + height: calc(100vh - var(--spacer) * 4) + 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 align-items: center display: flex diff --git a/training/templates/training/base_training.html b/training/templates/training/base_training.html index f326b93a..3dae0fbf 100644 --- a/training/templates/training/base_training.html +++ b/training/templates/training/base_training.html @@ -10,25 +10,22 @@ {% block training_header_image %} {% endblock training_header_image %} -
+
-
-
+
+
-
- {% block nexted_content %} - {% endblock nexted_content %} -
+ + {% block nexted_content %}{% endblock nexted_content %}
{% endblock content %} diff --git a/training/templates/training/section.html b/training/templates/training/section.html index 76c80440..c81f9809 100644 --- a/training/templates/training/section.html +++ b/training/templates/training/section.html @@ -19,26 +19,22 @@ {% endblock %} {% block nexted_content %} -
+
{% if section.preview_youtube_link %} -
-
- {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %} -
+
+ {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %}
{% elif video %} -
-
- {% if section.is_free or request.user|has_active_subscription %} - {% if user.is_anonymous %} - {% 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 %} - {% else %} - {% 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 %} - {% endif %} +
+ {% if section.is_free or request.user|has_active_subscription %} + {% if user.is_anonymous %} + {% 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 %} {% else %} - {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} + {% 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 %} {% endif %} -
+ {% else %} + {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} + {% endif %}
{% else %}
@@ -54,47 +50,49 @@
{% endif %}
-
-
-
-
-
-

{{ chapter.name }}

-

{{ section.name }}

+
+
+
+
+
+
+

{{ chapter.name }}

+

{{ section.name }}

+
+
+

{{ section.date_created|date:"N jS, Y" }}

+ {% if section.static_asset.license %} + + + {{ section.static_asset.license }} + + {% endif %} + {% if section.is_free %} + {% include "common/components/cards/pill.html" with label='Free' %} + {% endif %} +
-
-

{{ section.date_created|date:"N jS, Y" }}

- {% if section.static_asset.license %} - - - {{ section.static_asset.license }} - - {% endif %} - {% if section.is_free %} - {% include "common/components/cards/pill.html" with label='Free' %} - {% endif %} +
+ {% include "common/components/navigation/buttons_toolbar.html" with item=section %}
-
- {% include "common/components/navigation/buttons_toolbar.html" with item=section %} -
-
-
- {% if section.static_asset.author_image_url %} -
- {% else %} -
-
- {% endif %} +
+ {% if section.static_asset.author_image_url %} +
+ {% else %} +
+
+ {% 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" %} +
+
+ {% with_shortcodes section.text|markdown_unsafe %} +
+
+ {% include 'comments/components/comment_section.html' %} +
-
- {% with_shortcodes section.text|markdown_unsafe %} -
-
- {% include 'comments/components/comment_section.html' %} -
{% endblock nexted_content %} -- 2.30.2 From 45021865c676b0620a69edd2e8dc567be5c0f490 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 21 Aug 2024 17:28:59 +0200 Subject: [PATCH 02/12] UI: Improve style custom training-group-item-video bg --- common/static/common/styles/studio/_custom.sass | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index fb777b72..82164da9 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -678,13 +678,17 @@ button, width: var(--training-group-item-nav-width) .training-group-item-video + @extend .box + + background-color: black +margin(3, bottom) + padding: 0 width: 100% +media-xl align-items: center display: flex - height: calc(100vh - var(--spacer) * 4) + height: 100vh left: 0 margin-bottom: 0 position: sticky -- 2.30.2 From b4c5302651ba64d2f9ed80b16fc83014c3a5fdf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 21 Aug 2024 17:34:53 +0200 Subject: [PATCH 03/12] UI: Improve style custom training-group-items sizings and spacings --- common/static/common/styles/studio/_custom.sass | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 82164da9..81a8ccd5 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -660,11 +660,15 @@ button, --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(2, x) + +padding(3, x) .training-group-item-content @extend .box -- 2.30.2 From 87c51b84649e4973d462c39b25dcab30b31e5cd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 21 Aug 2024 17:48:03 +0200 Subject: [PATCH 04/12] UI: Improve tyle custom training-group-items box contrasts and spacings --- .../static/common/styles/studio/_custom.sass | 21 +++++- training/templates/training/section.html | 74 ++++++++++--------- 2 files changed, 56 insertions(+), 39 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 81a8ccd5..34c1028b 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -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) diff --git a/training/templates/training/section.html b/training/templates/training/section.html index c81f9809..3f21ecc1 100644 --- a/training/templates/training/section.html +++ b/training/templates/training/section.html @@ -51,47 +51,49 @@ {% endif %}
-
-
-
-
-
-

{{ chapter.name }}

-

{{ section.name }}

+
+
+
+
+
+
+

{{ chapter.name }}

+

{{ section.name }}

+
+
+

{{ section.date_created|date:"N jS, Y" }}

+ {% if section.static_asset.license %} + + + {{ section.static_asset.license }} + + {% endif %} + {% if section.is_free %} + {% include "common/components/cards/pill.html" with label='Free' %} + {% endif %} +
-
-

{{ section.date_created|date:"N jS, Y" }}

- {% if section.static_asset.license %} - - - {{ section.static_asset.license }} - - {% endif %} - {% if section.is_free %} - {% include "common/components/cards/pill.html" with label='Free' %} - {% endif %} +
+ {% include "common/components/navigation/buttons_toolbar.html" with item=section %}
-
- {% include "common/components/navigation/buttons_toolbar.html" with item=section %} -
-
-
- {% if section.static_asset.author_image_url %} -
- {% else %} -
-
- {% endif %} +
+ {% if section.static_asset.author_image_url %} +
+ {% else %} +
+
+ {% 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" %} +
+
+ {% with_shortcodes section.text|markdown_unsafe %} +
+
+ {% include 'comments/components/comment_section.html' %} +
-
- {% with_shortcodes section.text|markdown_unsafe %} -
-
- {% include 'comments/components/comment_section.html' %} -
-- 2.30.2 From 2e135b8b8dd98856a60f9316aaa753c15b888ec8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Wed, 21 Aug 2024 17:51:35 +0200 Subject: [PATCH 05/12] UI: Improve style custom training-group-items box paddings --- common/static/common/styles/studio/_custom.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 34c1028b..f53f7d63 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -679,6 +679,7 @@ button, .box background-color: var(--color-bg-tertiary) + +padding(3) .comment-input-div &.form-control -- 2.30.2 From 4ed127df4a1ddf518af41d6e7480bf4cca76536c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 22 Aug 2024 16:23:46 +0200 Subject: [PATCH 06/12] UI: Improve template training group item content padding --- training/templates/training/section.html | 70 +++++++++++------------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/training/templates/training/section.html b/training/templates/training/section.html index 3f21ecc1..94b9e532 100644 --- a/training/templates/training/section.html +++ b/training/templates/training/section.html @@ -53,48 +53,44 @@
-
-
-
-
-

{{ chapter.name }}

-

{{ section.name }}

-
-
-

{{ section.date_created|date:"N jS, Y" }}

- {% if section.static_asset.license %} - - - {{ section.static_asset.license }} - - {% endif %} - {% if section.is_free %} - {% include "common/components/cards/pill.html" with label='Free' %} - {% endif %} -
-
-
- {% include "common/components/navigation/buttons_toolbar.html" with item=section %} -
+
+
+

{{ chapter.name }}

+

{{ section.name }}

-
- {% if section.static_asset.author_image_url %} -
- {% else %} -
-
+
+

{{ section.date_created|date:"N jS, Y" }}

+ {% if section.static_asset.license %} + + + {{ section.static_asset.license }} + + {% endif %} + {% if section.is_free %} + {% include "common/components/cards/pill.html" with label='Free' %} {% endif %} - - {% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %}
-
- {% with_shortcodes section.text|markdown_unsafe %} -
-
- {% include 'comments/components/comment_section.html' %} -
+
+
+ {% include "common/components/navigation/buttons_toolbar.html" with item=section %}
+
+ {% if section.static_asset.author_image_url %} +
+ {% else %} +
+
+ {% endif %} + + {% include 'common/components/cards/card_profile.html' with user=section.static_asset.user title="Publisher" %} +
+
+ {% with_shortcodes section.text|markdown_unsafe %} +
+
+ {% include 'comments/components/comment_section.html' %} +
{% endblock nexted_content %} -- 2.30.2 From 432adbe51bd2994fe1fbafd8ed0d4a2f97181978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 22 Aug 2024 16:31:42 +0200 Subject: [PATCH 07/12] UI: Remove style training group item video rounded corners --- .../static/common/styles/studio/_custom.sass | 2 -- training/templates/training/section.html | 34 ++++++++----------- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index f53f7d63..92f4efd7 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -698,8 +698,6 @@ button, width: var(--training-group-item-nav-width) .training-group-item-video - @extend .box - background-color: black +margin(3, bottom) padding: 0 diff --git a/training/templates/training/section.html b/training/templates/training/section.html index 94b9e532..26538bad 100644 --- a/training/templates/training/section.html +++ b/training/templates/training/section.html @@ -21,32 +21,26 @@ {% block nexted_content %}
{% if section.preview_youtube_link %} -
- {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %} -
+ {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True %} {% elif video %} -
- {% if section.is_free or request.user|has_active_subscription %} - {% if user.is_anonymous %} - {% 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 %} - {% else %} - {% 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 %} - {% endif %} + {% if section.is_free or request.user|has_active_subscription %} + {% if user.is_anonymous %} + {% 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 %} {% else %} - {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} + {% 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 %} {% endif %} -
+ {% else %} + {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} + {% endif %} {% else %}
-
- {% if section.is_free or request.user|has_active_subscription %} - {% if section.thumbnail %} - {% 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" %} - {% endif %} - {% else %} - {% include 'common/components/content_locked.html' with background=training.picture_header %} + {% if section.is_free or request.user|has_active_subscription %} + {% if section.thumbnail %} + {% 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" %} {% endif %} -
+ {% else %} + {% include 'common/components/content_locked.html' with background=training.picture_header %} + {% endif %}
{% endif %}
-- 2.30.2 From 54c698523e9d9a58965414b4eabd995e3689ec61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 22 Aug 2024 17:35:40 +0200 Subject: [PATCH 08/12] UI: Implement training layout changes to templates base and chapter --- .../static/common/styles/studio/_custom.sass | 12 +- .../templates/training/base_training.html | 3 - training/templates/training/chapter.html | 105 +++++++++--------- training/templates/training/training.html | 40 ++++--- 4 files changed, 86 insertions(+), 74 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 92f4efd7..90901f44 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -692,7 +692,15 @@ button, .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-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) width: var(--training-group-item-nav-width) @@ -715,8 +723,6 @@ button, .training-header-img-helper align-items: center - display: flex - max-height: calc(var(--spacer) * 25) overflow: hidden img diff --git a/training/templates/training/base_training.html b/training/templates/training/base_training.html index 3dae0fbf..dd3b18c9 100644 --- a/training/templates/training/base_training.html +++ b/training/templates/training/base_training.html @@ -7,9 +7,6 @@ {% endblock %} {% block content %} - {% block training_header_image %} - {% endblock training_header_image %} -
diff --git a/training/templates/training/chapter.html b/training/templates/training/chapter.html index 91b61ed7..50b94800 100644 --- a/training/templates/training/chapter.html +++ b/training/templates/training/chapter.html @@ -19,65 +19,70 @@ {% endblock %} {% block nexted_content %} - {% if chapter.thumbnail %} -
-
- {% 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 %} -
-
- {% endif %} -
-
-
-
-
-

{{ training.name }}

-

{{ chapter.name }}

-
+
+ {% if chapter.thumbnail %} +
+
+ {% 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 %}
-
-
-
- {% if user.is_staff %} - - - Edit - - {% endif %} +
+ {% endif %} - -
- - - Report Problem - -
+
+
+
+

{{ training.name }}

+

{{ chapter.name }}

+
+
+
+
+
+ {% if user.is_staff %} + + + Edit + + {% endif %} + + +
+ + + Report Problem +
+
- {% if chapter.description %} -
{% with_shortcodes chapter.description|markdown %}
- {% endif %} - -
-
-
- {% for section in chapter.sections.all %} - {% if section.is_published %} - {% include "common/components/file_section.html" with section=section %} - {% endif %} - {% endfor %} + {% if chapter.description %} +
+
+
+ {% with_shortcodes chapter.description|markdown %}
+
+ {% endif %} + +
+
+
+ {% for section in chapter.sections.all %} + {% if section.is_published %} + {% include "common/components/file_section.html" with section=section %} + {% endif %} + {% endfor %} +
diff --git a/training/templates/training/training.html b/training/templates/training/training.html index b2ecebb6..d2ea6c46 100644 --- a/training/templates/training/training.html +++ b/training/templates/training/training.html @@ -11,24 +11,22 @@ {% javascript 'training' %} {% endblock scripts %} -{% block training_header_image %} - {% if training.picture_header_url %} -
-
-
- {{ training.name }} -
-
-
- {% endif %} -{% endblock training_header_image %} - {% block nexted_content %} -
-
-
-
-
+ +
+
+
+
+
+ {% if training.picture_header_url %} +
+ {{ training.name }} +
+ {% endif %} +
+
+
+

{{ training.name }}

@@ -75,7 +73,13 @@
{% endif %} -
{% with_shortcodes training.summary_rendered %}
+
+
+
+ {% with_shortcodes training.summary_rendered %} +
+
+
-- 2.30.2 From 3e72e49f86930351a7d7b8e22c84f06cce783942 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 23 Aug 2024 12:28:48 +0200 Subject: [PATCH 09/12] UI: Add trainings cards grid fluid layout Make the trainings cards grid layout fluid, and add more items per row per breakpoints. Part of #104435 --- .../static/common/styles/studio/_custom.sass | 17 ++- .../styles/studio/_web-assets-overrides.sass | 4 + training/templates/training/chapter.html | 103 +++++++++--------- training/templates/training/training.html | 4 +- 4 files changed, 73 insertions(+), 55 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index 90901f44..c9b7d8ba 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -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) diff --git a/common/static/common/styles/studio/_web-assets-overrides.sass b/common/static/common/styles/studio/_web-assets-overrides.sass index d9276a42..47dc3b5c 100644 --- a/common/static/common/styles/studio/_web-assets-overrides.sass +++ b/common/static/common/styles/studio/_web-assets-overrides.sass @@ -168,6 +168,10 @@ textarea /* Grid. */ // TODO: consider moving to web-assets +.container-fluid + .row + +margin(0, x) + .row width: 100% diff --git a/training/templates/training/chapter.html b/training/templates/training/chapter.html index 50b94800..579490cc 100644 --- a/training/templates/training/chapter.html +++ b/training/templates/training/chapter.html @@ -20,60 +20,61 @@ {% block nexted_content %}
- {% if chapter.thumbnail %} -
-
- {% 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 %} -
-
- {% endif %} +
+ {% if chapter.thumbnail %} +
+
+ {% 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 %} +
+
+ {% endif %} -
-
-
-

{{ training.name }}

-

{{ chapter.name }}

-
-
-
-
-
- {% if user.is_staff %} - - - Edit - - {% endif %} +
+
+
+

{{ training.name }}

+

{{ chapter.name }}

+
+
+
+
+
+ {% if user.is_staff %} + + + Edit + + {% endif %} - -
- - - Report Problem - -
-
-
-
+ +
+ + + Report Problem + +
+
+
+
+
+ + {% if chapter.description %} +
+
+
+ {% with_shortcodes chapter.description|markdown %} +
+
+
+ {% endif %}
- - {% if chapter.description %} -
-
-
- {% with_shortcodes chapter.description|markdown %} -
-
-
- {% endif %} -
diff --git a/training/templates/training/training.html b/training/templates/training/training.html index d2ea6c46..f32cdc07 100644 --- a/training/templates/training/training.html +++ b/training/templates/training/training.html @@ -14,7 +14,7 @@ {% block nexted_content %}
-
+
@@ -74,7 +74,7 @@ {% endif %}
-
+
{% with_shortcodes training.summary_rendered %}
-- 2.30.2 From b9c63889035b23f1a0bd6d34643ba2de38043667 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 23 Aug 2024 12:56:19 +0200 Subject: [PATCH 10/12] Fix: Sass variable grid-breakpoints xl and xxl Fix grid-breakpoints 'xl' and 'xxl' Sass variables coming from flat pre-compiled vendor files with web-assets defaults. Improves the display of trainings' fluid video arrangement on xl and xxl desktop screens with more sensible layout changes. Part of #104435 --- common/static/common/styles/studio/_variables.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/common/static/common/styles/studio/_variables.sass b/common/static/common/styles/studio/_variables.sass index e8671a25..77303540 100644 --- a/common/static/common/styles/studio/_variables.sass +++ b/common/static/common/styles/studio/_variables.sass @@ -1,5 +1,8 @@ $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') $font-path: "/static/assets/fonts" -- 2.30.2 From cd5c36165b95eb9e728c0d10ace0bf47266b42be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 23 Aug 2024 13:07:43 +0200 Subject: [PATCH 11/12] Fix: Template training section tall image media display Fix tall images overflowing the media and video container in training section templates on desktop screens. Images never overflow the media container no matter their heights and widths. Part of #104435 --- common/static/common/styles/studio/_custom.sass | 1 + training/templates/training/section.html | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass index c9b7d8ba..8219b9e9 100644 --- a/common/static/common/styles/studio/_custom.sass +++ b/common/static/common/styles/studio/_custom.sass @@ -728,6 +728,7 @@ button, align-items: center display: flex height: 100vh + justify-content: center left: 0 margin-bottom: 0 position: sticky diff --git a/training/templates/training/section.html b/training/templates/training/section.html index 26538bad..e0e66805 100644 --- a/training/templates/training/section.html +++ b/training/templates/training/section.html @@ -33,15 +33,15 @@ {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} {% endif %} {% else %} -
- {% if section.is_free or request.user|has_active_subscription %} - {% if section.thumbnail %} - {% 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" %} - {% endif %} - {% else %} - {% include 'common/components/content_locked.html' with background=training.picture_header %} + {% if section.is_free or request.user|has_active_subscription %} + {% if section.thumbnail %} + {% 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" %} {% endif %} -
+ {% else %} +
+ {% include 'common/components/content_locked.html' with background=training.picture_header %} +
+ {% endif %} {% endif %}
-- 2.30.2 From a4afcc65c8913b9f4bf323b9e289e809d80f5167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 23 Aug 2024 16:27:39 +0200 Subject: [PATCH 12/12] Fix: Template training conditional picture header and markup Fix conditionals' placement checking for header image in training template. Part of #104435 --- training/templates/training/training.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/training/templates/training/training.html b/training/templates/training/training.html index f32cdc07..40a1d47c 100644 --- a/training/templates/training/training.html +++ b/training/templates/training/training.html @@ -16,15 +16,16 @@
-
-
- {% if training.picture_header_url %} + {% if training.picture_header_url %} +
+
{{ training.name }}
- {% endif %} +
-
+ {% endif %} +

{{ training.name }}

-- 2.30.2