Update/template/course-page/course-info-mobile (#39)

* Change HubL label for course price label * Add course video on mobile view * Add course features listing on mobile view
codurance · Dec 18, 2023 · db2f19c · db2f19c
1 parent 2d7354b
commit db2f19c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/version_control/katalyst_by_codurance/css/templates/course-page.css b/version_control/katalyst_by_codurance/css/templates/course-page.css
@@ -121,18 +121,43 @@ section h2 {
     }
 {% endcall %}
 
+.course-video--mobile {
+    position: relative;
+}
+
+.course-video--mobile iframe {
+    height: 100%;
+    left: 0;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
+.heading.mobile-view h1 {
+    margin-top: var(--space-l);
+}
+
 .course-info-banner {
     background-color: var(--light-grey);
-    padding: var(--space-m) var(--space-s);
-
+    padding-top: var(--space-m);
+    padding-bottom: var(--space-m);
 }
 
 .course-info-banner__wrapper {
     display: flex;
     align-items: center; 
 }
 
+.course-features-listing--mobile {
+    margin-inline: auto;
+    max-width: min(var(--content-max-width),100% - var(--space-3xl));
+}
 
+.course-features-listing--mobile ul {
+    margin: unset;
+}
 
 .accordion {
     background-color: var(--dark-blue);

diff --git a/version_control/katalyst_by_codurance/templates/course-page.html b/version_control/katalyst_by_codurance/templates/course-page.html
@@ -12,7 +12,7 @@
     {% module "course_video" path="@hubspot/video" video_type="embed" label="Course video" %}
     <div class="course-info-card__content">
       <div class="price">
-        {% module "course_price_label" path="@hubspot/text" label="Course title" %}
+        {% module "course_price_label" path="@hubspot/text" label="Course price label" %}
         <span>€ {% module "course_price" path="@hubspot/text" label="Course price" no_wrapper=True %}</span>
       </div>
       {% module "purchase_button" path="@hubspot/button" label="Purchase button" no_wrapper=True %} 
@@ -40,6 +40,11 @@
       {% module "course_description" path="@hubspot/rich_text" label="Course description" %}
     </section>
     <section class="heading container mobile-view">
+      <div class="course-video--mobile">
+        <div class="iframe_wrapper">
+          {{ content.widgets.course_video.body.embed_field.oembed_response.html }}
+        </div>
+      </div>
       <h1>{{ content.widgets.course_title.body.value }}</h1>
       <p>{{ content.widgets.course_description.body.html }}</p>
     </section>
@@ -51,6 +56,20 @@ <h1>{{ content.widgets.course_title.body.value }}</h1>
         </div>
       </div>
     </section>
+
+    <section class="course-features-listing--mobile mobile-view">
+      {% set course_features_listing = content.widgets.course_features_listing.body.list_items %}
+
+      <ul class="icon-text-listing">
+        {% for item in course_features_listing %}
+          <li>
+            <i class="las {{ item.icon }}"></i>
+            {{ item.text }}
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+
     <section class="container">
       {% module "intro_description_title" path="@hubspot/header" label="Intro Text Title" %}
       <div class="two-col-text">