common/static/common/styles/studio/_custom.sass

@@ -655,10 +655,88 @@ button,
     filter: blur(var(--filter-blur-value))
     transform: scale(1.1)
 
-.training-header-img-helper
+.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
-  max-height: calc(var(--spacer) * 25)
+      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
+  align-items: center
   overflow: hidden
 
   img

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"

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%
 

training/templates/training/base_training.html

@@ -7,28 +7,22 @@
 {% endblock %}
 
 {% 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="col-12">
         <button class="btn js-nav-drawer-btn-toggle"><i class="i-list"></i> Content</button>
       </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">
           <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>
         </nav>
       </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>
 {% endblock content %}

training/templates/training/chapter.html

@@ -19,6 +19,8 @@
 {% endblock %}
 
 {% block nexted_content %}
+  <div class="training-group-item-content-detail">
+    <div class="training-group-item-content-detail-inner">
       {% if chapter.thumbnail %}
          <div class="row mb-3">
            <div class="col">
@@ -31,8 +33,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 +66,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">
+             <div class="markdown-text">
+               {% with_shortcodes chapter.description|markdown %}
+             </div>
+           </div>
+         </section>
        {% endif %}
-
+    </div>
-      <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 +87,6 @@
       </div>
     </div>
   </div>
-  </div>
 {% endblock nexted_content %}
 
 {% block scripts %}

training/templates/training/section.html

@@ -19,16 +19,10 @@
 {% endblock %}
 
 {% block nexted_content %}
-  <div class="row mb-3">
+  <div class="training-group-item training-group-item-video">
     {% if section.preview_youtube_link %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
       {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True  %}
-        </div>
-      </div>
     {% elif video %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
       {% 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 %}
@@ -38,26 +32,22 @@
       {% else %}
         {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
       {% endif %}
-        </div>
-      </div>
     {% else %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
       {% 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" %}
+          {% 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 %}
-        </div>
-      </div>
-    {% endif %}
-  </div>
-  <div class="row">
         <div class="col">
-      <div class="align-items-start row">
+          {% include 'common/components/content_locked.html' with background=training.picture_header %}
-        <div class="col-12 col-md mb-2 mb-md-3">
+        </div>
+      {% endif %}
+    {% endif %}
+  </div>
+  <div class="training-group-item training-group-item-content">
+    <div class="box">
+      <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>
@@ -92,7 +82,7 @@
       <section class="mb-3 markdown-text">
         {% with_shortcodes section.text|markdown_unsafe %}
       </section>
-      <section class="mb-3">
+      <section>
         {% include 'comments/components/comment_section.html' %}
       </section>
     </div>

training/templates/training/training.html

@@ -11,23 +11,22 @@
   {% javascript 'training' %}
 {% endblock scripts %}
 
-{% block training_header_image %}
+{% block nexted_content %}
+
+<section class="training-group-item training-group-item-content-detail">
+  <div class="row training-group-item-content-detail-inner">
+    <div class="col">
       {% if training.picture_header_url %}
-  <div class="container">
+        <div class="mb-3 row">
-    <div class="mt-3 row">
+          <div class="col">
-      <div class="col training-header-img-helper">
+            <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 %}
-{% endblock training_header_image %}
 
-{% block nexted_content %}
+      <div class="align-items-start mb-3 row">
-  <section>
-    <div class="row">
-      <div class="col">
-        <div class="row align-items-start mb-2">
         <div class="col-12 col-md">
             <h1 class="mb-0">{{ training.name }}</h1>
           </div>
@@ -75,7 +74,13 @@
           </div>
         {% 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>
   </section>