Merge pull request #164 from Chris3444/master

css fix small screens
tfobz · May 19, 2023 · e456582 · e456582
2 parents 3c0135c + ded1418
commit e456582
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
@@ -1,6 +1,6 @@
 
 <mat-toolbar color="primary" [class.flex-start]="menuPoints.length < 1">
-  <button *ngIf="back" [routerLink]="back" mat-icon-button class="icon" aria-label="back">
+  <button *ngIf="back" [routerLink]="back" mat-icon-button class="icon" aria-label="back" class = "back">
     <mat-icon>keyboard_backspace</mat-icon>
   </button>
   <button mat-icon-button [routerLink]="['/emission']" class="logo">
@@ -10,7 +10,7 @@
 
   <span *ngIf="menuPoints.length>1; else settings">
     <button [matMenuTriggerFor]="menu" aria-label="menu" style="display: flex;" class="menu">
-      <span style="margin-right: 5px; margin-top: 5%; font-size: medium;">Menu</span>
+      <span style="margin-right: 5px; margin-top: 5%;" class="menuname">Menu</span>
       <mat-icon>more_vert</mat-icon>
     </button>
 

diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss
@@ -36,6 +36,31 @@ img {
   img{
     height: 50%;
   }
+  .menuname{
+    font-size: small;
+  }
+}
+@media screen and (max-width: 400px) {
+  .mat-toolbar {
+    font-size: smaller;
+  }
+  .menuname{
+    font-size: smaller;
+    margin-right: 1px;
+  }
+  .menu{
+    margin-right: 2px;
+    margin-left: 2px;
+  }
+  .back{
+    height: 50%;
+  }
+
+}
+@media screen and (max-width: 350px) {
+  .menuname{
+    display: none;
+  }
 }
 .mat-toolbar-row, .mat-toolbar-single-row {
   white-space: wrap;

diff --git a/src/styles.scss b/src/styles.scss
@@ -35,6 +35,7 @@ html, body {
   // min-width: 100vh !important;
   width:100%;
   height:100%;
+  min-width: 280px;
 }
 // // Foreground Elements