Commentary UI

src/app/match-details/match-details.page.html

@@ -11,7 +11,7 @@
         </div>
     </section>
     
-    <div class="segment-holder" [ngClass]="{'no-bg' : selectedSegment === 'MATCH' && selectedRoster === 'LIVE'} ">
+    <div class="segment-holder">
         <section class="segments" [ngClass]="{'active': selectedSegment === 'MATCH' }">
             <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
             <button (click)="selectedSegment = 'MATCH'"> Match </button>
@@ -153,6 +153,72 @@
     <ng-container *ngIf="selectedSegment === 'MATCH'">
         <div class="commentary-container" *ngIf="selectedRoster === 'LIVE'">
             
+            <header>
+                <h5> Commentary </h5>
+            </header>
+
+            <ul>
+                <li>
+                    <div class="over-data">
+                        <label> 0.1 </label>
+                        <span>
+                            2
+                        </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
+                    </p>
+                </li>
+
+                <li>
+                    <div class="over-data">
+                        <label> 0.2 </label>
+                        <span>
+                            0
+                        </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
+                    </p>
+                </li>
+
+                <li>
+                    <div class="over-data">
+                        <label> 0.3 </label>
+                        <span class="boundary">
+                            4
+                        </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
+                    </p>
+                </li>
+
+                <li>
+                    <div class="over-data">
+                        <label> 0.4 </label>
+                        <span class="six">
+                            6
+                        </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
+                    </p>
+                </li>
+
+                <li>
+                    <div class="over-data">
+                        <label> 0.5 </label>
+                        <span class="wicket">
+                            W
+                        </span>
+                    </div>
+                    <p>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
+                    </p>
+                </li>
+            </ul>
+            
         </div>
     
         <div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">

src/app/match-details/match-details.page.scss

@@ -2,13 +2,70 @@
 
 
 .commentary-container {
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0px;
-    height: calc(100vh - 70px);
+    padding-bottom: 60px;
     width: 100%;
     z-index: 0;
-    margin-top: -80px;
+
+    header {
+        padding: 0 5%;
+        color: $green;
+        font-size: 14px;
+    }
+
+    ul {
+        list-style: none;
+        color: lighten($brand-blue, 20%);
+        line-height: 1.5;
+        padding: 0;
+    }
+
+    li {
+        padding: 10px 5% 10px 5px;
+        display: flex;
+        border-bottom: 2px solid $brand-blue;
+        justify-content: space-between;
+    }
+
+    .over-data {
+        width: 50px;
+
+        label {
+            display: block;
+            font-size: 16px;
+            font-weight: 600;
+            text-align: center;
+        }
+
+        span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: darken($brand-blue, 30%);
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            color: white;
+            font-size: 14px;
+            margin: 10px auto;
+
+            &.boundary {
+                background-color: $green;
+            }
+
+            &.six {
+                background-color: $green;
+            }
+
+            &.wicket {
+                background-color: lighten($brand-red, 15%);
+            }
+        }
+    }
+
+    p {
+        width: calc(100% - 55px);
+        margin: 0;
+    }
 }
 
 @keyframes popOut {
@@ -77,7 +134,7 @@
     display: flex;
     justify-content: center;
     overflow: hidden;
-    background-color: rgba($blue-grey, 0.5);
+    background: linear-gradient(to right, lighten($brand-red, 15%), darken($brand-blue, 20%) 80%);
 
     &.change-bg {
         background-color: rgba($blue-grey, 0.3);
@@ -193,14 +250,8 @@
     z-index: 1;
     width: 100%;
     padding: 20px 0;
-    background-color: darken($brand-blue, 20%);
-    box-shadow: 0px 0px 10px -2px darken($brand-blue, 20%);
+    background: linear-gradient(to bottom, darken($brand-blue, 20%) 50%, transparent);
     transition: background-color 0.3s, box-shadow 0.3s;
-
-    &.no-bg {
-        background-color: transparent;
-        box-shadow: 0px 0px 0px $brand-blue;
-    }
 }
 
 .segments {