Course details UI

src/app/tabs/courses/details/details.component.html

@@ -33,24 +33,75 @@
 </section>
 
 <ul class="chapter-list">
-    <li class="completed">
+    <li class="chapter completed">
         <div class="container">
             <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            <div class="details">
+            <div class="chapter-heading">
                 <label> Chapter 1 </label>
                 <p> 5 Topics </p>
             </div>
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
         </div>
     </li>
-    <li>
+    <li class="chapter active">
         <div class="container">
             <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            <div class="details">
+            <div class="chapter-heading">
                 <label> Chapter 2 </label>
                 <p> 5 Topics </p>
             </div>
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
         </div>
+        <ul class="topic-list">
+            <li class="topic completed">
+                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="topic-container">
+                    <p>
+                        <span class="type"> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                    </p>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                </div>
+            </li>
+
+            <li class="topic completed">
+                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="topic-container">
+                    <p>
+                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                    </p>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                </div>
+            </li>
+
+            <li class="topic">
+                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="topic-container">
+                    <p>
+                        <span class="type"> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                    </p>
+                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                </div>
+            </li>
+
+            <li class="topic">
+                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="topic-container">
+                    <p>
+                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                    </p>
+                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                </div>
+            </li>
+
+            <li class="topic">
+                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="topic-container">
+                    <p>
+                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                    </p>
+                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                </div>
+            </li>
+        </ul>
     </li>
 </ul>

src/app/tabs/courses/details/details.component.scss

@@ -53,6 +53,7 @@
 .segment-header {
     position: sticky;
     position: -webkit-sticky;
+    z-index: 1;
     left: 0;
     top: 0;
     background-color: var(--ash-black);
@@ -104,15 +105,26 @@
 .chapter-list {
     list-style: none;
 
-    li {
-        padding: 0 5%;
-        background-color: var(--ash-black);
-
+    .chapter {
         &.completed {
             .checkmark {
                 fill: var(--green);
             }
         }
+
+        &.active {
+            .container {
+                position: sticky;
+                position: -webkit-sticky;
+                top: 0;
+                z-index: 1;
+                border-bottom: 0px;
+            }
+
+            .arrow {
+                transform: rotate(90deg);
+            }
+        }
     }
 
     .container {
@@ -120,35 +132,121 @@
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        padding: 15px 0;
+        padding: 15px 5%;
+        background-color: var(--ash-black);
+        border-bottom: 1px solid var(--dark-grey);
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+
+            &.checkmark {
+                width: 25px;
+                height: 25px;
+                background-color: white;
+                border-radius: 50%;
+            }
+        }
+
+        .chapter-heading {
+            width: calc(100% - 100px);
+        }
+
+
+        label {
+            font-size: 16px;
+            font-weight: 500;
+            color: white;
+        }
+
+        p {
+            color: white;
+            font-size: 14px;
+        }
+    }
+}
+
+.topic-list {
+    list-style: none;
+    position: relative;
+    z-index: 0;
+
+    .topic {
+        display: flex;
+        width: 100%;
+        padding-left: 5%;
+        justify-content: space-between;
+        background-color: #333333;
+        position: relative;
+        overflow: visible;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: calc(5% + 9px);
+            top: 50%;
+            height: 100%;
+            width: 2px;
+            background-color: var(--light-grey);
+            z-index: 1;
+        }
+
+        &:last-child {
+            &::before {
+                display: none;
+            }
+        }
+
+        &.completed {
+            .checkmark {
+                fill: var(--green);
+            }
+            &::before {
+                background-color: var(--green);
+            }
+        }
+    }
+
+    .topic-container {
+        display: flex;
+        width: 90%;
+        padding: 15px;
+        background-color: var(--black);
+        border-bottom: 1px solid #333333;
+
+        .icon {
+            margin-top: 5px;
+        }
+
+        p {
+            font-size: 14px;
+            color: var(--light-grey);
+            padding-right: 10px;
+
+            .type {
+                color: white;
+                font-weight: 500;
+            }
+        }
     }
 
     .icon {
         width: 20px;
         height: 20px;
         fill: var(--light-grey);
+        align-self: flex-start;
+        position: relative;
+        z-index: 2;
 
         &.checkmark {
-            width: 25px;
-            height: 25px;
+            align-self: center;
             background-color: white;
             border-radius: 50%;
         }
-    }
-
-    .details {
-        width: calc(100% - 100px);
-    }
-
-
-    label {
-        font-size: 16px;
-        font-weight: 500;
-        color: white;
-    }
 
-    p {
-        color: white;
-        font-size: 14px;
+        &.download {
+            fill: var(--teal-green);
+        }
     }
 }

src/styles.scss

@@ -7,7 +7,6 @@
     box-sizing: border-box;
     line-height: 1.7;
     letter-spacing: 0.5px;
-    font-weight: 400;
     outline: none;
 }