Layout fixes for mobile

ddashwood · Jul 11, 2023 · 8b9ca7b · 8b9ca7b
1 parent a0b2f59
commit 8b9ca7b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/MealPlan/ClientApp/src/app/app.component.css b/MealPlan/ClientApp/src/app/app.component.css
@@ -0,0 +1,9 @@
+img.top-banner {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: left;
+    height: 118px;
+    object-fit: cover;
+    object-position: left;
+  }
diff --git a/MealPlan/ClientApp/src/app/app.component.html b/MealPlan/ClientApp/src/app/app.component.html
@@ -1,6 +1,6 @@
 <body>
   <main class="container">
-    <img src="assets/img/banner.png" alt="banner">
+    <img src="assets/img/banner.png" class="top-banner" alt="banner">
     <app-nav-menu></app-nav-menu>
     <router-outlet></router-outlet>
   </main>

diff --git a/MealPlan/ClientApp/src/app/app.component.ts b/MealPlan/ClientApp/src/app/app.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'app';

diff --git a/MealPlan/ClientApp/src/app/nav-menu/nav-menu.component.html b/MealPlan/ClientApp/src/app/nav-menu/nav-menu.component.html
@@ -3,7 +3,11 @@
     <div class="container">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
         aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
-        <span class="navbar-toggler-icon"></span>
+        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+          <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+          <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+        </svg>
       </button>
       <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [ngClass]="{ show: isExpanded }">
         <ul class="navbar-nav flex-grow">