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

training/templates/training/base_training.html

@@ -10,25 +10,22 @@
   {% block training_header_image %}
   {% endblock training_header_image %}
 
-  <div class="container pt-2 pt-md-3">
+  <div class="container-fluid 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="col-lg-3 col-md-4 mb-3 fade-xs js-nav-drawer-helper nav-drawer-helper">
+    <div class="row training-group">
+      <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 %}
-            {% endblock nested_nav_drawer_inner %}
+            {% block nested_nav_drawer_inner %}{% endblock nested_nav_drawer_inner %}
           </div>
         </nav>
       </div>
-      <div class="col col-lg-9 col-md-8">
-        {% block nexted_content %}
-        {% endblock nexted_content %}
-      </div>
+
+      {% block nexted_content %}{% endblock nexted_content %}
     </div>
   </div>
 {% endblock content %}

training/templates/training/section.html

@@ -19,15 +19,12 @@
 {% 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 %}
@@ -39,7 +36,6 @@
           {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
         {% endif %}
       </div>
-      </div>
     {% else %}
       <div class="col">
         <div class="overflow-hidden rounded">
@@ -54,10 +50,11 @@
       </div>
     {% endif %}
   </div>
+  <div class="training-group-item training-group-item-content">
     <div class="row">
       <div class="col">
-      <div class="align-items-start row">
-        <div class="col-12 col-md mb-2 mb-md-3">
+        <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>
@@ -97,6 +94,7 @@
         </section>
       </div>
     </div>
+  </div>
 {% endblock nexted_content %}
 
 {% block scripts %}