css fixes for college licence page.

bcgov · Jul 13, 2024 · 06c9aba · 06c9aba
1 parent 06aa112
commit 06c9aba
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 33 deletions.
diff --git a/...e/pages/college-licence/college-licence-declaration/college-licence-declaration.page.scss b/...e/pages/college-licence/college-licence-declaration/college-licence-declaration.page.scss
@@ -14,6 +14,7 @@ p {
   --button-margin-right: 15px;
   --actions-padding: 0 20px;
   padding: 1.25rem 0.75rem;
+  padding-top: 0px !important;
 }
 .viewport-large {
   --box-padding: 40px 0;
@@ -30,6 +31,12 @@ p {
 .viewport-small {
   --box-padding: 0 0 20px;
   --field-max-width: 400px;
+  & .content {
+    padding: 0px !important;
+  }
+  & .actions {
+    padding: 0px !important;
+  }
 }
 .viewport-xsmall {
   & .college-licence {
@@ -55,9 +62,7 @@ p {
     flex-direction: column;
 
     & .header {
-     color:lightskyblue;
      color:skyblue;
-     padding-left: 5px;
     }
 
     & .college-licence {

diff --git a/...e/pages/college-licence/college-licence-information/college-licence-information.page.html b/...e/pages/college-licence/college-licence-information/college-licence-information.page.html
@@ -1,3 +1,23 @@
+<div class="container breadcrumb-top" uiPidpInjectViewportCss>
+  <nav class="breadcrumb">
+    <ul>
+      <li>
+        <a (click)="onBack()">Home</a>
+      </li>
+      <li>
+        <a class="fa-duotone">
+          <fa-icon [icon]="faAngleRight">
+          </fa-icon>
+        </a>
+      </li>
+      <li>
+        <a>
+          College Licence
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
 <div>
   <app-college-licence-declaration [disableCollegeCode]=true [disableCollegeLicenceNumber]=true>
   </app-college-licence-declaration>
@@ -15,8 +35,8 @@
         <div class="card-header-icon">
           <div class="card-icon">
             <img
-              src="/assets/images/icons/credit-card.svg"
-              alt="creditcard" />
+              src="/assets/images/college-licence-logo.svg"
+              alt="college-licence-logo" />
           </div>
         </div>
         <div class="licence-detail-box">
@@ -36,13 +56,9 @@ <h2>College information</h2>
                 />
               </div>
               <div
-                class="status-terminated" *ngIf="certification.statusCode==='TERMINATED'">
+                class="status-non-active" *ngIf="certification.statusCode !=='ACTIVE'">
                 <label>Status Code:</label>
-                <span>Terminated</span>
-                <img
-                  src="/assets/images/icons/icon-check-circle.svg"
-                  alt="cross circle"
-                />
+                <span>{{certification.statusCode}}</span>
               </div>
             <app-college-licence-information-detail
               class="licence-detail"
@@ -63,15 +79,10 @@ <h2>College information</h2>
   </div>
   <div class="actions">
     <span>
-      <button mat-stroked-button type="button" color="primary">
+      <button mat-stroked-button type="button" (click)="onBack()" color="primary">
         Back
       </button>
     </span>
-    <span class="actions-continue">
-        <button mat-flat-button uiPageFooterAction type="submit" color="primary">
-          Continue
-        </button>
-    </span>
   </div>
 
 </section>
diff --git a/...e/pages/college-licence/college-licence-information/college-licence-information.page.scss b/...e/pages/college-licence/college-licence-information/college-licence-information.page.scss
@@ -4,9 +4,40 @@ $darkgrey: pidp.$bcgov-color-text;
 
 .viewport-all {
   flex: 1;
+  padding-left: 0px;
   .header {
     background-color: $lightgrey;
   }
+
+  .breadcrumb-top {
+    padding-bottom: 0px !important;
+  }
+  .breadcrumb ul {
+    list-style: none;
+    top: 0;
+    right: 0;
+    padding: 0px;
+  }
+
+  .breadcrumb fa-icon {
+    height: 12px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .breadcrumb ul li {
+    display: inline;
+  }
+
+  .breadcrumb a,
+  .text-button {
+    text-decoration: none;
+    color: pidp.$bcgov-color-button-focus-outline;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 27px;
+    word-wrap: break-word;
+  }
   & .licences-box {
     & .licences-licence-box {
       border: solid 1px $darkgrey;
@@ -19,6 +50,7 @@ $darkgrey: pidp.$bcgov-color-text;
   }
   & .actions {
     margin-top: 20px;
+    margin-bottom: 4rem;
     & button {
       margin-top: 1rem;
       width: 75px;
@@ -52,6 +84,30 @@ $darkgrey: pidp.$bcgov-color-text;
     }
   }
 
+  & .licences-box {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    & .card-styles {
+      border-radius: 1.25rem;
+      border: 1px solid #ccc;
+      background: #fff;
+      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+      width: 37rem;
+      height: 11.875rem;
+      padding: 1.25rem;
+
+      h2 {
+        color: #036;
+        font-size: 1.5rem;
+        font-weight: 700;
+        padding-top: 0.25rem;
+        margin-bottom: 0;
+      }
+
+    }
+  }
   .status-active {
     display: flex;
     justify-content: start;
@@ -75,7 +131,7 @@ $darkgrey: pidp.$bcgov-color-text;
     }
   }
 
-  .status-terminated {
+  .status-non-active {
     display: flex;
     justify-content: start;
     align-items: center;
@@ -92,29 +148,16 @@ $darkgrey: pidp.$bcgov-color-text;
       margin-right: 5px;
     }
 
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
   }
 
-  & .actions-continue {
-    padding: var(--actions-padding);
-    & button:not(:last-of-type) {
-      margin-right: var(--button-margin-right);
-    }
-    button {
-      margin-left: 25px;
-      width: 100px;
-    }
-  }
 }
 .viewport-large,
 .viewport-medium,
 .viewport-small {
   display: flex;
   flex-direction: column;
-  // max-width: 800px;
+  padding-bottom: 0px;
+  padding-left: 0px !important;
   & .header {
     padding: 6px 20px;
   }
@@ -179,14 +222,28 @@ $darkgrey: pidp.$bcgov-color-text;
     }
   }
 }
+
+.viewport-small {
+  .breadcrumb {
+    margin: 0px 20px 0px 0px;
+  }
+}
+
 .viewport-xsmall {
   display: flex;
   flex-direction: column;
   max-width: 640px;
   padding-top: 20px;
+  padding-left: 0px !important;
+  padding-bottom: 0px;
   & .header {
     padding: 6px 20px;
   }
+
+  .breadcrumb {
+    margin: 0px 20px 0px 20px;
+  }
+
   & .info-box {
     margin: 5px 0;
     padding: 0 15px;
@@ -226,10 +283,19 @@ $darkgrey: pidp.$bcgov-color-text;
       }
     }
   }
+
+  & .licence-detail-content {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-gap: 3px;
+  }
+
   & .card-styles {
     padding: 1rem;
     // max-width: 400px;
     width: auto !important;
+    height:21rem !important;
     h2 {
       font-size: 1.25rem;
     }
@@ -249,4 +315,8 @@ $darkgrey: pidp.$bcgov-color-text;
       }
     }
   }
+
+  & .actions {
+    margin-left: 1rem;
+  }
 }
diff --git a/...ile/pages/college-licence/college-licence-information/college-licence-information.page.ts b/...ile/pages/college-licence/college-licence-information/college-licence-information.page.ts
@@ -7,7 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, catchError, map, of, tap } from 'rxjs';
 
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faStethoscope } from '@fortawesome/free-solid-svg-icons';
+import { faStethoscope, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 
 import { InjectViewportCssClassDirective } from '@bcgov/shared/ui';
 
@@ -46,6 +46,7 @@ export class CollegeLicenceInformationPage implements OnInit {
   public title: string;
   public collegeCertifications$!: Observable<CollegeCertification[]>;
   public alerts: ProfileStatusAlert[] = [];
+  public faAngleRight = faAngleRight;
 
   public constructor(
     private route: ActivatedRoute,

diff --git a/workspace/apps/pidp/src/assets/images/college-licence-logo.svg b/workspace/apps/pidp/src/assets/images/college-licence-logo.svg