improve the css office-navigation-page

improve the broder logic

Author: shubhamkumar9199

src/app/navigation/navigation.component.scss

@@ -0,0 +1,55 @@
+:host {
+  display: block;
+}
+
+.container {
+  width: 100%;
+}
+
+.layout-row-wrap.responsive-column {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.flex-48 {
+  flex: 1 1 48%;
+  min-width: 320px;
+}
+
+mat-card {
+  padding: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+mat-card-content {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 12px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-label {
+  letter-spacing: 0.2px;
+}
+
+@media (768px <= width) {
+  mat-card-content {
+    grid-template-columns: 50% 50%;
+  }
+}
+
+@media (1200px <= width) {
+  .flex-48 {
+    flex-basis: 48%;
+  }
+
+  mat-card-content {
+    grid-template-columns: 50% 50%;
+    gap: 16px;
+  }
+}

src/app/navigation/office-navigation/office-navigation.component.html

@@ -1,4 +1,4 @@
-<mat-card-header class="layout-row gap-5percent header">
+<mat-card-header class="layout-row header">
   <fa-icon class="main-icon" icon="building" size="3x"></fa-icon>
   <mat-card-title-group>
     <div class="mat-typography">
@@ -7,19 +7,20 @@ <h2>
           {{ officeData.name }}
         </h2>
       </mat-card-title>
-      <mat-card-subtitle>
-        <p *ngIf="officeData.externalId">
-          {{ 'labels.inputs.External Id' | translate }}:<mifosx-external-identifier
-            externalId="{{ officeData.externalId }}"
-          ></mifosx-external-identifier>
-        </p>
-      </mat-card-subtitle>
     </div>
   </mat-card-title-group>
 </mat-card-header>
 
 <mat-card-content>
   <div class="layout-row-wrap">
+    <div class="flex-50 mat-body-strong" *ngIf="officeData.externalId">
+      {{ 'labels.inputs.External Id' | translate }}
+    </div>
+
+    <div class="flex-50" *ngIf="officeData.externalId">
+      <mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
+    </div>
+
     <div class="flex-50 mat-body-strong">
       {{ 'labels.inputs.Opened On' | translate }}
     </div>

src/app/navigation/office-navigation/office-navigation.component.scss

@@ -1,14 +1,108 @@
-h2 {
-  font-weight: 500;
+:host {
+  --header-icon-color: #000;
+  --header-title-color: #000;
+  --header-subtitle-color: #000;
+  --field-label-color: #212121;
+  --field-value-color: #000;
+  --border-color: #ddd;
 }
 
-.content {
-  div {
-    margin: 1rem 0;
+.header {
+  padding: 1.5rem 1.5rem 1rem;
+  align-items: center;
+  gap: 1rem;
+
+  .main-icon {
+    margin: 0;
+    color: var(--header-icon-color, #000);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  mat-card-title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+  }
+
+  mat-card-title h2 {
+    font-weight: 500;
+    font-size: 1.5rem;
+    color: var(--header-title-color, #000);
+    margin: 0;
+    line-height: 1.4;
+  }
+}
+
+mat-card-content {
+  padding: 1.5rem;
+
+  .layout-row-wrap {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    gap: 0.75rem 1.5rem;
+
+    @media (width <= 768px) {
+      grid-template-columns: 100%;
+      gap: 0.75rem;
+    }
+  }
+
+  .flex-50 {
+    padding: 0.625rem 0;
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child, :nth-last-child(2)) {
+      border-bottom: 1px solid var(--border-color, rgb(0 0 0 / 8%));
+    }
+  }
+
+  .mat-body-strong {
+    font-weight: 600;
+    color: var(--field-label-color);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    vertical-align: middle;
+  }
+
+  div:not(.mat-body-strong) {
+    color: var(--field-value-color);
+    font-size: 0.875rem;
     word-wrap: break-word;
+    line-height: 1.6;
+    vertical-align: middle;
+  }
+}
+
+@media (width <= 480px) {
+  .header {
+    padding: 1rem;
+
+    .main-icon {
+      margin-bottom: 0.5rem;
+    }
+
+    mat-card-title h2 {
+      font-size: 1.25rem;
+    }
+  }
+
+  mat-card-content {
+    padding: 1rem;
   }
 }
 
-.main-icon {
-  margin: 7px 0 0;
+:host-context(.dark-theme) {
+  --header-icon-color: #fff;
+  --header-title-color: #fff;
+  --header-subtitle-color: #e0e0e0;
+  --field-label-color: #e0e0e0;
+  --field-value-color: #d0d0d0;
+  --border-color: rgb(255 255 255 / 20%);
 }

src/app/navigation/office-navigation/office-navigation.component.ts

@@ -1,12 +1,6 @@
 /** Angular Imports */
 import { Component, Input } from '@angular/core';
-import {
-  MatCardHeader,
-  MatCardTitleGroup,
-  MatCardTitle,
-  MatCardSubtitle,
-  MatCardContent
-} from '@angular/material/card';
+import { MatCardHeader, MatCardTitleGroup, MatCardTitle, MatCardContent } from '@angular/material/card';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ExternalIdentifierComponent } from '../../shared/external-identifier/external-identifier.component';
 import { DateFormatPipe } from '../../pipes/date-format.pipe';
@@ -22,7 +16,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FaIconComponent,
     MatCardTitleGroup,
     MatCardTitle,
-    MatCardSubtitle,
     ExternalIdentifierComponent,
     DateFormatPipe
   ]