From b75a1ff7d1900c202ffec85bd22b3cbd87556f7a Mon Sep 17 00:00:00 2001
From: Sean Sylver <ssylver@VividSolutions.com>
Date: Thu, 12 Dec 2024 15:53:50 -0800
Subject: [PATCH 1/3] WFNEWS-2493 adjust highlight card css for mobile

---
 .../cards/highlights-card/highlights-card.component.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
index 3f8ef8c42..989fc61cf 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
@@ -6,6 +6,11 @@
 }
 
 .highlight-card {
+    @media screen and (max-width: 500px) {
+        width: 50vw;
+        min-width: 100px;
+        min-height: 370px;
+    }
     border-radius: var(--8, 8px);
     font-family: "Noto sans", "BCSans", "Open Sans", Verdana, Arial, sans-serif;
     background: #f5f6f9;
@@ -58,6 +63,9 @@
 }
 
 .highlight-tags {
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -93,4 +101,5 @@
     line-height: 19px;
     position: absolute;
     bottom: 16px;
+    right: 16px;
 }
\ No newline at end of file

From 3a2b2cfd495909aceeb6a52c01d01e92d2356d8e Mon Sep 17 00:00:00 2001
From: Sean Sylver <ssylver@VividSolutions.com>
Date: Mon, 16 Dec 2024 15:12:19 -0800
Subject: [PATCH 2/3] Fixed height for thumbnails

---
 .../cards/highlights-card/highlights-card.component.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
index 989fc61cf..fb05ef505 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
@@ -7,7 +7,7 @@
 
 .highlight-card {
     @media screen and (max-width: 500px) {
-        width: 50vw;
+        width: 65vw;
         min-width: 100px;
         min-height: 370px;
     }
@@ -30,6 +30,9 @@
     padding: 16px;
 
     &-title {
+        @media screen and (max-width: 500px) {
+            font-size: 18px;
+        }
         color: var(--Secondary-800, #181A2A);
         font-size: 20px;
         font-style: normal;
@@ -57,8 +60,10 @@
     img,
     .thumbnail-image {
         width: 100%;
-        height: 135px;
+        height: 125px;
         border-radius: var(--8, 8px);
+        object-fit: scale-down;
+        background-color: #DFE5EE;
     }
 }
 

From bca4cff8fb3ad6465115d2dc98e76f555a823876 Mon Sep 17 00:00:00 2001
From: Sean Sylver <ssylver@VividSolutions.com>
Date: Mon, 16 Dec 2024 15:49:03 -0800
Subject: [PATCH 3/3] Remove tags from UI, fix storybook

---
 .../highlights-card.component.html            |  8 -----
 .../highlights-card.component.scss            | 30 -------------------
 .../highlights-card.component.stories.ts      | 11 ++++++-
 3 files changed, 10 insertions(+), 39 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.html b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.html
index b4ad7185f..b11561709 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.html
@@ -4,14 +4,6 @@
             <div class="highlight-thumbnail">
                 <img [src]="post.thumbnail.url" [alt]="post.thumbnail.alt" *ngIf="post.thumbnail.url">
             </div>
-            <div class="highlight-tags">
-                <div class="highlight-tag">
-                    Prevention
-                </div>
-                <div class="highlight-tag" *ngFor="let fireCentre of post.fireCentres">
-                    {{fireCentre}}
-                </div>
-            </div>
             <div class="highlight-info-title">
                 {{post.title}}
             </div>
diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
index fb05ef505..4b398e299 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.scss
@@ -67,36 +67,6 @@
     }
 }
 
-.highlight-tags {
-    @media screen and (max-width: 500px) {
-        display: none;
-    }
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: #000;
-    text-align: center;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 21px;
-    border-radius: var(--4, 4px);
-    flex-wrap: wrap;
-    margin-bottom: 8px;
-}
-
-.highlight-tag {
-    display: inline-block;
-    padding: 4px 12px;
-    border-radius: 4px;
-    font-size: 14px;
-    color: #333;
-    white-space: nowrap; // Prevents text from wrapping inside tags
-    background: #DFE5EE;
-    margin: 0 8px 8px 0;
-}
-
-
 .highlight-date {
     left: 16px;
     color: var(--Black-2, #484848);
diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.stories.ts b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.stories.ts
index 34e5b6c2a..11384ba87 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.stories.ts
+++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/cards/highlights-card/highlights-card.component.stories.ts
@@ -3,6 +3,7 @@ import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
+import { AppConfigService } from '@wf1/core-ui';
 
 // Mock HTTP Client
 class MockHttpClient {
@@ -43,6 +44,13 @@ class MockHttpClient {
   }
 }
 
+class MockAppConfigService {
+  // Provide mock methods or data as needed
+  getConfig() {
+    return of({}); // Mock response
+  }
+}
+
 
 const meta: Meta<HighlightsCardComponent> = {
   title: 'Cards/HighlightsCardComponent',
@@ -56,7 +64,8 @@ const meta: Meta<HighlightsCardComponent> = {
       ],
       declarations: [HighlightsCardComponent],
       providers: [
-        { provide: HttpClient, useClass: MockHttpClient }
+        { provide: HttpClient, useClass: MockHttpClient },
+        { provide: AppConfigService, useClass: MockAppConfigService }
       ]
     })
   ]