From db87712c6342e9eeb8edc8afbc92b6abcc19d4b5 Mon Sep 17 00:00:00 2001
From: Hansolo1103 <87228155+Hansolo1103@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:47:59 +0530
Subject: [PATCH 1/3] Updated grid.hbs issue #608

The grid.hbs file needed some tweaking for optimizing the grid system.
---
 components/layout/grid/grid.hbs | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/layout/grid/grid.hbs b/components/layout/grid/grid.hbs
index e785baec..bbf713ef 100644
--- a/components/layout/grid/grid.hbs
+++ b/components/layout/grid/grid.hbs
@@ -1,36 +1,36 @@
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--12 m-b300">12 Columns</div>
+  <div class="g--12 m-b100 m--full">12 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--9 m-b300">1: 9 Columns</div>
-  <div class="g--3 m-b300">2: 3 Columns</div>
+  <div class="g--9 m-b100 m--full m--half">1: 9 Columns</div>
+  <div class="g--3 m-b100 m--full m--half">2: 3 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--8 m-b300">1: 8 Columns</div>
-  <div class="g--4 m-b300">2: 4 Columns</div>
+  <div class="g--8 m-b100 m--full m--half">1: 8 Columns</div>
+  <div class="g--4 m-b100 m--full m--half">2: 4 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--7 m-b300">1: 7 Columns</div>
-  <div class="g--5 m-b300">2: 5 Columns</div>
+  <div class="g--7 m-b100 m--full m--half">1: 7 Columns</div>
+  <div class="g--5 m-b100 m--full m--half">2: 5 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--6 m-b300">1: 6 Columns</div>
-  <div class="g--6 m-b300">2: 6 Columns</div>
+  <div class="g--6 m-b100 m--full m--half">1: 6 Columns</div>
+  <div class="g--6 m-b100 m--full m--half">2: 6 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--4 m-b300">1: 4 Columns</div>
-  <div class="g--4 m-b300">2: 4 Columns</div>
-  <div class="g--4 m-b300">3: 4 Columns</div>
+  <div class="g--4 m-b100 m--full m--half">1: 4 Columns</div>
+  <div class="g--4 m-b100 m--full m--half">2: 4 Columns</div>
+  <div class="g--4 m-b100 m--full m--half">3: 4 Columns</div>
 </div>
 
 <div class="g{{#if variant}} {{variant}}{{/if}}">
-  <div class="g--3 m-b300">1: 3 Columns</div>
-  <div class="g--3 m-b300">2: 3 Columns</div>
-  <div class="g--3 m-b300">3: 3 Columns</div>
-  <div class="g--3 m-b300">4: 3 Columns</div>
+  <div class="g--3 m-b100 m--full m--half">1: 3 Columns</div>
+  <div class="g--3 m-b100 m--full m--half">2: 3 Columns</div>
+  <div class="g--3 m-b100 m--full m--half">3: 3 Columns</div>
+  <div class="g--3 m-b100 m--full m--half">4: 3 Columns</div>
 </div>

From 4026c5b5e68e7f9fe0e33231c0800ec045f14392 Mon Sep 17 00:00:00 2001
From: Hansolo1103 <87228155+Hansolo1103@users.noreply.github.com>
Date: Sat, 2 Mar 2024 20:08:24 +0530
Subject: [PATCH 2/3] Update news-landing-page.hbs

The {{new.title}} within the <h3> tag will now be limited to 3 lines with an ellipsis.
The department name {{new.position}} is now placed below the title within the <h3> tag with the .news_position class.
---
 .../news-landing-page/news-landing-page.hbs   | 130 +++++++++---------
 1 file changed, 65 insertions(+), 65 deletions(-)

diff --git a/components/base/news/news-landing-page/news-landing-page.hbs b/components/base/news/news-landing-page/news-landing-page.hbs
index 34d6acfa..60c9f2de 100644
--- a/components/base/news/news-landing-page/news-landing-page.hbs
+++ b/components/base/news/news-landing-page/news-landing-page.hbs
@@ -1,82 +1,82 @@
 <div class="b b--fw">
-	<div class="b-c">
-		{{> @section_header }}
-		<div class="g">
-			{{#each news as |new|}}
-			<div class="g--12 news-card m-t500">
-          <div class="g">
-            <div class="g--7 news-column">
-              <div class="thumb-and-title">
-                <div class="thumb-and-flag">
-                  <svg
-                    class="svg-date-flag n--a-date-flag"
-                    id="Layer_1"
-                    data-name="Layer 1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 34.08 44.31"
-                  >
-                    <title>{{new.date}}</title>
-                    <path
-                      d="M32.26,42.16l-15.3-7-15.3,7v-40h30.6Z"
-                      fill="#ffffff"
-                      stroke="#ECECEC"
-                      stroke-miterlimit="10"
-                    />
-                  </svg>
+  <div class="b-c">
+    {{> @section_header }}
+    <div class="g">
+      {{#each news as |new|}}
+      <div class="g--12 news-card m-t500">
+        <div class="g">
+          <div class="g--7 news-column">
+            <div class="thumb-and-title">
+              <div class="thumb-and-flag">
+                <svg
+                  class="svg-date-flag n--a-date-flag"
+                  id="Layer_1"
+                  data-name="Layer 1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 34.08 44.31"
+                >
+                  <title>{{new.date}}</title>
+                  <path
+                    d="M32.26,42.16l-15.3-7-15.3,7v-40h30.6Z"
+                    fill="#ffffff"
+                    stroke="#ECECEC"
+                    stroke-miterlimit="10"
+                  />
+                </svg>
 
-                  <p
-                    class="svg-date-flag n--a-date-flag-text date-flag-text"
-                  >
-                    {{new.date}}
-                  </p>
+                <p
+                  class="svg-date-flag n--a-date-flag-text date-flag-text"
+                >
+                  {{new.date}}
+                </p>
 
-                  <div class="g--12">
-                    <div class="news-card--thumb-wrapper">
-                      <img
-                        src="{{new.image.url}}"
-                        alt="{{new.title}}"
-                        typeof="foaf:Image"
-                      />
-                    </div>
+                <div class="g--12">
+                  <div class="news-card--thumb-wrapper">
+                    <img
+                      src="{{new.image.url}}"
+                      alt="{{new.title}}"
+                      typeof="foaf:Image"
+                    />
                   </div>
                 </div>
+              </div>
 
-                <div class="news-column--left">
-                  <h3 class="title">
-                    <a href="{{new.href}}">{{new.title}}</a>
-                    <span class="news_positon">{{new.position}}</span>
-                  </h3>
-                </div>
+              <div class="news-column--left">
+                <h3 class="title">
+                  <a href="{{new.href}}">{{new.title}}</a>
+                  <span class="news_positon">{{new.position}}</span>
+                </h3>
               </div>
             </div>
+          </div>
 
-            <div class="g--5 news-column--right">
-              <div class="g">
-                <div class="g--12 optional-news-layout">
-                  <div class="intro-text">
-                    <p>{{new.description}}</p>
-                  </div>
+          <div class="g--5 news-column--right">
+            <div class="g">
+              <div class="g--12 optional-news-layout">
+                <div class="intro-text">
+                  <p>{{new.description}}</p>
+                </div>
 
-                  <div class="icon-wrapper">
-                    <div class="di">
-                      <div class="di-ic">
-                        <a
-                          href="/departments/innovation-and-technology" title="Innovation and Technology" class="di-a di-tt"
-                        >
-                          <img
-                            typeof="foaf:Image"
-                            src="/images/b-dark.svg" alt="Innovation and Technology" class="di-i"
-                          />
-                        </a>
-                      </div>
+                <div class="icon-wrapper">
+                  <div class="di">
+                    <div class="di-ic">
+                      <a
+                        href="/departments/innovation-and-technology" title="Innovation and Technology" class="di-a di-tt"
+                      >
+                        <img
+                          typeof="foaf:Image"
+                          src="/images/b-dark.svg" alt="Innovation and Technology" class="di-i"
+                        />
+                      </a>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-			</div>
-			{{/each}}
-		</div>
-	</div>
+        </div>
+      </div>
+      {{/each}}
+    </div>
+  </div>
 </div>

From 47b1050a058ce663377fea41a4e55b73191b27b8 Mon Sep 17 00:00:00 2001
From: Hansolo1103 <87228155+Hansolo1103@users.noreply.github.com>
Date: Sat, 2 Mar 2024 20:19:47 +0530
Subject: [PATCH 3/3] Update _news_card.styl

Added .news_position span style for the department name to display below the title.
Updated h3.title style to include:
display: -webkit-box for multi-line ellipsis support.
-webkit-line-clamp: 3 to limit the title to 3 lines.
-webkit-box-orient: vertical to make the ellipsis appear vertically.
overflow: hidden and text-overflow: ellipsis for handling overflow.
---
 stylesheets/components/news/_news_card.styl | 243 +++++++++++++++++++-
 1 file changed, 239 insertions(+), 4 deletions(-)

diff --git a/stylesheets/components/news/_news_card.styl b/stylesheets/components/news/_news_card.styl
index 889e0330..37593df6 100644
--- a/stylesheets/components/news/_news_card.styl
+++ b/stylesheets/components/news/_news_card.styl
@@ -11,7 +11,7 @@
 */ 
 
 .news-card
-  position relative
+  position: relative
   background-color: $white
   max-height: 190px
 
@@ -34,7 +34,7 @@
       display: block
 
   h3.title
-    font-size:  responsive 16px 26px
+    font-size: responsive 16px 26px
     font-style: italic
     font-family: "Lora", serif
     color: $optimistic-blue-dark
@@ -45,23 +45,258 @@
     font-weight: 400
     overflow: hidden
     text-align: left
+    display: -webkit-box
+    -webkit-line-clamp: 3
+    -webkit-box-orient: vertical
+    text-overflow: ellipsis
 
     @media $media-xlarge-max
-      font-size:  responsive 18px 24px 
+      font-size: responsive 18px 24px 
     
     a
       display: inline-block
       text-transform: none
 
-    span
+    span.news_position
       display: block
       color: $body-text 
       padding-top: 20px
       text-transform: uppercase
+      margin-top: 8px
 
       @media $media-xlarge
         display: none
 
+  &--thumb-wrapper
+    display: flex
+
+    @media $media-xlarge-max
+      display: block
+
+    img
+      min-width: 190px
+
+      @media $media-xlarge-max
+        min-width: 100%
+        max-height: 230px
+        height: 230px
+        width: 100%
+        object-fit: cover
+        vertical-align: top
+        object-position: center
+  
+  .news-column
+    padding-top: 0px
+
+    @media $media-xlarge-max
+      width: 100%
+      max-width: 100%
+
+    .thumb-and-title
+      display: flex
+      justify-content: normal
+
+      @media $media-xlarge-max
+        width: 100%
+        max-width: 100%
+        display: block
+
+      .thumb-and-flag
+        //margin-right: 10px
+
+      @media $media-small-max
+        flex-direction: column
+
+    &--left
+      border: 0
+      padding-left: 20px
+      padding-bottom: 20px
+
+      @media $media-xlarge-max
+        height: 100%
+        min-height: 230px
+        padding-right: 20px
+
+    &--right
+      display: inline-flex
+      padding-left: 1.5em
+      border-top: 0
+      border-right: 0
+      border-bottom: 0
+      border-left: 1px
+      border-style: dashed
+      border-color: $grey-100
+
+      @media $media-large
+        display: block
+      
+      @media $media-xlarge-max
+        display: none
+    
+    &--left, &--right
+      padding-top: 20px
+      @media $media-small-max
+        padding: 10px 15px
+
+  .optional-news-layout
+    display: flex
+    flex-direction: row
+    margin-right: 0
+
+    .icon-wrapper
+      display: inline-flex
+      min-width: 56px
+      margin-right: 0
+
+      @media $media-xlarge-max
+        display: block
+      
+      .di
+        margin: 0
+        display: inline-flex
+
+    .intro-text
+      color: $body-text
+      font-size: 16px
+      font-style: normal
+      font-family: "Lora", serif
+      line-height: 26px
+      margin: 0 10px 0 0
+      overflow: hidden
+
+      @media $media-xxlarge-max
+        max-height: 160px
+        line-height: 22px;
+
+      p 
+        margin: 0
+.news-card.g--12:nth-child(1n)
+  margin-right: 1rem
+
+.featured-news 
+  height: 335px
+  max-height: 335px
+  overflow: hidden
+
+  @media $media-xlarge-max
+    width: 100%
+    max-width: 100%
+    max-height: 100%
+    height: 100%
+    display: block
+
+  h3.title
+    font-size: 28px
+    line-height: 35px
+    margin-bottom: 30px
+
+  h3.title span
+    padding-top: 40px
+
+  .news-column--right
+    padding-top: 2.5rem
+    padding-left: 2.5rem
+    border: none
+
+    p
+      border-top: 1px dashed #e0e0e0
+      padding-top: 30px
+      padding-bottom: 30px
+      width: 112%
+      font-size: 18px
+      line-height: 30px
+
+    @media $media-xlarge-max
+      padding: 2rem
+
+  .g--6
+    margin-right: 0
+    margin-left: 0
+    max-height: inherit
+
+    @media $media-xlarge-max
+      width: 100%
+      max-width: 100%
+      display: block
+
+  .news-card--thumb-wrapper, .thumb-and-title
+    max-height: inherit
+
+  img
+    min-width: 100%
+    object-fit: cover
+    @media $media-xlarge-max
+      max-height: 400px
+      height: inherit
+      display: block
+/* 
+
+    NEWS
+
+    Base:
+        news-card
+    
+    Modifier: 
+        sm = small
+
+*/ 
+
+.news-card
+  position: relative
+  background-color: $white
+  max-height: 190px
+
+  @media $media-xlarge-max
+    max-height: 650px
+    width: 47%
+    max-width: 47%
+    margin-right: 1rem
+
+    .g
+      display: block
+
+  @media $media-medium-max
+    width: 100%
+    max-width: 100%
+    display: inline-block
+    height: 100%
+
+    .g
+      display: block
+
+  h3.title
+    font-size: responsive 16px 26px
+    font-style: italic
+    font-family: "Lora", serif
+    color: $optimistic-blue-dark
+    text-transform: none
+    letter-spacing: .4px
+    margin: 0
+    line-height: 30px
+    font-weight: 400
+    overflow: hidden
+    text-align: left
+    display: -webkit-box
+    -webkit-line-clamp: 3
+    -webkit-box-orient: vertical
+    text-overflow: ellipsis
+
+    @media $media-xlarge-max
+      font-size: responsive 18px 24px 
+    
+    a
+      display: inline-block
+      text-transform: none
+
+    span.news_position
+      display: block
+      color: $body-text 
+      padding-top: 20px
+      text-transform: uppercase
+      margin-top: 8px
+
+      @media $media-xlarge
+        display: none
 
   &--thumb-wrapper
     display: flex