design 11-11-22

src/app/home/home.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar class="toolbar-bg-color">
-    <img src="../../../assets/icon/logo-fm99.png" class="head-img">
+    <img src="../../../assets/icon/fm99-logo-2021-3.svg" class="head-img">
     <ion-buttons slot="end">
       <ion-menu-button>
         <ion-icon src="../assets/icon/menu-svgrepo-com.svg" color="warning"></ion-icon>
@@ -14,27 +14,30 @@
     <ng-template swiperSlide><img src="../../../assets/img-static/fb-Ad-2.jpeg" alt=""></ng-template>
     <ng-template swiperSlide><img src="../../../assets/img-static/fb-Ad-3.jpeg" alt=""></ng-template>
   </swiper>
-  <!-- <div id="container">
-    <fa-icon [icon]="['fas', 'graduation-cap']"></fa-icon>
-    <hr>
-    <strong>Ready to create an app?</strong>
-    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer"
-        href="https://ionicframework.com/docs/components">UI Components</a></p>
-  </div> -->
   <ion-grid class="ion-padding-vertical">
     <ion-row>
+      <ion-col size="8" class="bg-color-2">
+      </ion-col>
+      <ion-col size="4">
+      </ion-col>
+    </ion-row>
+    <ion-row class="bg-color-1">
       <ion-col>
-        <h2>ข่าวกีฬา</h2>
-        <hr>
+        <h2 class="color-3">ข่าวกีฬา</h2>
       </ion-col>
     </ion-row>
-    <ion-row *ngFor="let news of newsdata | slice:0:4">
+    <ion-row *ngFor="let news of newsdata | slice:0:4" class="bg-color-1 last-child-pad-bottom">
       <ion-col size="5">
         <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" />
       </ion-col>
       <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail' , news.id]"><span
-            [innerHTML]="news.title.rendered"></span>
-        </a>
+            [innerHTML]="news.title.rendered"></span></a>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="4">
+      </ion-col>
+      <ion-col size="8" class="bg-color-3">
       </ion-col>
     </ion-row>
   </ion-grid>
@@ -45,17 +48,29 @@
 
   <ion-grid class="ion-padding-vertical">
     <ion-row>
+      <ion-col size="8" class="bg-color-2">
+      </ion-col>
+      <ion-col size="4">
+      </ion-col>
+    </ion-row>
+    <ion-row class="bg-color-1">
       <ion-col>
-        <h2>รายการย้อนหลัง</h2>
-        <hr>
+        <h2 class="color-3">รายการย้อนหลัง</h2>
       </ion-col>
     </ion-row>
     <div *ngIf="ytalldata">
-      <ion-row *ngFor="let ytdata of ytalldata['items']| slice:0:4">
+      <ion-row *ngFor="let ytdata of ytalldata['items']| slice:0:4" class="bg-color-1">
         <ion-col size="5">
           <img [src]="ytdata.snippet.thumbnails.high.url" [style.width]="'100%'" />
         </ion-col>
-        <ion-col class="ion-align-self-center"><a href="https://www.youtube.com/watch?v={{ytdata.id.videoId}}"><span [innerHTML]="ytdata.snippet.title"></span></a></ion-col>
+        <ion-col class="ion-align-self-center"><a href="https://www.youtube.com/watch?v={{ytdata.id.videoId}}"><span
+              [innerHTML]="ytdata.snippet.title"></span></a></ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="4">
+        </ion-col>
+        <ion-col size="8" class="bg-color-3">
+        </ion-col>
       </ion-row>
     </div>
   </ion-grid>
@@ -63,4 +78,4 @@
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
   </ion-grid>
 
-</ion-content>
+</ion-content>

src/app/home/home.page.scss

@@ -21,6 +21,8 @@ ion-content {
   line-height: 1.3em;
 }
 
-ion-row {
-  background-color: #fcfcfc !important;
-}
+// ion-row {
+//   background-color: #fcfcfce3 !important;
+// }
+
+

src/app/navtabs/navtabs.page.html

@@ -1,23 +1,27 @@
-
+<!-- <ion-fab vertical="bottom" horizontal="center" translucent="true">
+  <ion-fab-button routerLink="/tabs/add-post">
+    <ion-icon name="add-outline"></ion-icon>
+  </ion-fab-button>
+</ion-fab> -->
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="home">
+    <ion-tab-button tab="home" layout="icon-top">
       <ion-icon name="globe"></ion-icon>
-      <!-- <ion-label>Home</ion-label> -->      
+      <!-- <ion-label>Home</ion-label> -->
     </ion-tab-button>
-    <ion-tab-button tab="news">
+    <ion-tab-button tab="news" layout="icon-top">
       <ion-icon name="football"></ion-icon>
       <!-- <ion-label>News</ion-label> -->
     </ion-tab-button>
-    <ion-tab-button tab="#">
-      <ion-icon name="play-circle"></ion-icon>
+    <ion-tab-button tab="#" layout="icon-top">
+      <ion-icon name="play-circle" size="large"></ion-icon>
       <!-- <ion-label>Audio</ion-label> -->
-    </ion-tab-button>  
-    <ion-tab-button tab="youtube">
+    </ion-tab-button>
+    <ion-tab-button tab="youtube" layout="icon-top">
       <ion-icon name="logo-youtube"></ion-icon>
       <!-- <ion-label>Youtube</ion-label> -->
-    </ion-tab-button>  
-    <ion-tab-button tab="#">
+    </ion-tab-button>
+    <ion-tab-button tab="#" layout="icon-top">
       <ion-icon name="videocam"></ion-icon>
       <!-- <ion-label>Video</ion-label> -->
     </ion-tab-button>

src/app/navtabs/navtabs.page.scss

@@ -95,4 +95,38 @@
 //   &.tab-selected::before {
 //     background-color: var(--ion-color-primary);
 //   }
-// }
+// }
+
+// ion-tab-bar {
+//     bottom: 20px;
+//     position: relative;
+//     border-radius: 16px;
+//     width: 92%;
+//     margin: 0 auto;
+    
+//   }
+
+  ion-tab-button {
+    --color: var(--ion-color-medium);
+    --color-selected: var(--ion-color-primary);
+    --background-focused:#ff600d;
+    --background-focused-opacity:0.5;
+  
+    &::before {
+      background-color: transparent;
+      display: block;
+      content: "";
+      margin: 0 auto;
+      width: 20px;
+      height: 2px;
+    }
+  
+    &.tab-selected::before {
+      background-color: var(--ion-color-primary);
+    }
+  } 
+
+  // ion-tab-button.tab-selected {
+  //   --background: var(--ion-color-dark) !important;
+  //   --color-selected: var(--ion-color-light);
+  // }

src/app/news-detail/news-detail.page.html

@@ -16,15 +16,17 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-grid>
-    <ion-row>
-      <ion-col *ngIf="data">
-        <div [innerHTML]="data?.title.rendered" class="title-txt-1"></div>        
-          <img [src]="data.better_featured_image.source_url" [style.width]="'100%'" />          
-          <div [innerHTML]="data.content.rendered"></div>      
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <div *ngIf="data">
+    <img [src]="data.better_featured_image.source_url" [style.width]="'100%'" />
+    <ion-grid >
+      <ion-row>
+        <ion-col class="bg-color-1">
+          <h2 [innerHTML]="data?.title.rendered" class="title-txt-1"></h2>
+          <div [innerHTML]="data.content.rendered" class="content-txt-1"></div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
   <ion-grid>
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
   </ion-grid>

src/app/news-detail/news-detail.page.scss

@@ -1,3 +1,9 @@
-ion-row {
-    background-color: #fcfcfc !important;
-}
+// ion-row {
+//     background-color: #fcfcfc !important;
+// }
+.content-txt-1 {
+    font-family: K2D !important;
+    font-size: 1em;
+    line-height: 1.3em;
+    color: darkslategray;
+}

src/app/news/news.page.html

@@ -11,8 +11,10 @@
 <ion-content>
   <ion-grid>
     <ion-row>
-      <ion-col>
-        <h2>ข่าวกีฬา</h2>
+      <ion-col size="10" class="bg-color-4">
+        <h2 class="color-1">ข่าวกีฬา</h2>
+      </ion-col>
+      <ion-col size="2" class="bg-color-3">        
       </ion-col>
     </ion-row>
   </ion-grid>
@@ -24,7 +26,7 @@
     </ion-row>
   </ion-grid>
   <ion-grid>
-    <ion-card *ngFor="let news of newsdata" class="list-card-margin">
+    <ion-card *ngFor="let news of newsdata" class="list-card-margin bg-color-1">
       <img src="{{news.better_featured_image.source_url}}" />
       <ion-card-header>
         <a [routerLink]="['../news-detail' , news.id]">

src/app/news/news.page.scss

@@ -1,6 +1,6 @@
-ion-row {
-    background-color: #fcfcfc !important;
-}
+// ion-row {
+//     background-color: #fcfcfc !important;
+// }
 
 .list-card-margin {
     margin: 0 0 10px 0;
@@ -28,4 +28,7 @@ ion-card-content {
     color: darkslategray;
 }
 
-
+.header-tab {
+    background: rgb(2,0,36);
+background: linear-gradient(156deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(7,65,158,1) 43%, rgba(4,122,195,1) 82%, rgba(0,212,255,1) 100%);
+}

src/app/youtube/youtube.page.html

@@ -11,9 +11,10 @@
 <ion-content>
   <ion-grid>
     <ion-row>
-      <ion-col>
-        <h2>รายการย้อนหลัง</h2>
-        <hr>
+      <ion-col size="10" class="bg-color-4">
+        <h2 class="color-1">รายการย้อนหลัง</h2>
+      </ion-col>
+      <ion-col size="2" class="bg-color-6">        
       </ion-col>
     </ion-row>
   </ion-grid>

src/app/youtube/youtube.page.scss

@@ -1,6 +1,6 @@
-ion-row {
-    background-color: #fcfcfc !important;
-}
+// ion-row {
+//     background-color: #fcfcfc !important;
+// }
 
 .list-card-margin {
     margin: 0 0 10px 0;

src/global.scss

@@ -86,8 +86,7 @@
 
 ion-content {
   // --ion-background-color: #111D12;
-  --background: url('./assets/img-static/bg-content-min.jpg') no-repeat 
-center/cover;
+  --background: url('./assets/img-static/bg-content-min.jpg') no-repeat center/cover;
 }
 
 
@@ -102,7 +101,7 @@ h2 {
   font-size: 1.3em;
   margin-top: 5px;
   margin-bottom: 0px;
-  color: darkorange;
+  // color: darkorange;
 
 }
 
@@ -111,7 +110,7 @@ h3 {
   font-size: 1.3em;
   margin-top: 5px;
   margin-bottom: 0px;
-  color: darkorange;
+  // color: darkorange;
 }
 
 .head-img {
@@ -119,6 +118,8 @@ h3 {
   display: flex;
   margin-left: 10px;
   margin-top: 5px;
+  // --box-shadow: 0 0 3px 0 var(--ion-color-medium);
+
 }
 
 // ion-toolbar {
@@ -143,4 +144,68 @@ hr {
 
 a {
   text-decoration: none;
-}
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.bg-color-1 {
+  background: rgb(2,0,36);
+  background: linear-gradient(190deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, rgba(233,233,233,1) 61%, rgba(255,255,255,1) 90%, rgba(213,213,213,1) 100%);
+}
+
+.bg-color-2 {
+  background-color: rgb(74, 156, 224);
+}
+
+.bg-color-3 {
+  background-color: darkorange;
+}
+
+.bg-color-4 {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.bg-color-6 {
+  background-color:#c32020;
+}
+
+.color-1 {
+  color: #fff;
+}
+
+.color-2 {
+  color: rgb(74, 156, 224);
+}
+
+.color-3 {
+  color: darkorange;
+}
+
+.color-4 {
+  color: #0f4c75;
+}
+
+.color-5 {
+  color: #3282b8;
+}
+
+.color-6 {
+  color: #c32020;
+}
+
+ion-row.last-child-pad-bottom {
+
+  // padding-bottom: 15px;
+  // background: black;
+  // heading:last-child
+  :last-child {
+    // background: black;
+    // padding-bottom: 21px;
+  }
+}
+
+// ion-row.last-child-pad-bottom:last-child {
+//   background: black;
+// }