From 19d956ef6a2654362e9c3d5c1e5b9fb484cfb6ce Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 9 Aug 2024 04:34:51 +0200
Subject: [PATCH] update responsive design

---
 .../app/components/auth/auth.component.scss   | 19 +++++++++++++++
 .../components/footer/footer.component.scss   | 10 ++++++++
 .../components/header/header.component.html   |  5 +++-
 .../components/header/header.component.scss   | 24 ++++++++++++++++++-
 frontend/src/assets/style/auth-layout.scss    | 14 +++++++++++
 frontend/src/assets/style/form.scss           | 10 ++++++++
 6 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/auth/auth.component.scss b/frontend/src/app/components/auth/auth.component.scss
index 3ec83a6..0c222a0 100644
--- a/frontend/src/app/components/auth/auth.component.scss
+++ b/frontend/src/app/components/auth/auth.component.scss
@@ -53,3 +53,22 @@ form {
   padding: 6px;
   width: 57%;
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 550px) {
+  form {
+    flex-direction: column;
+    width: 90%;
+    input {
+      width: 100%;
+    }
+  }
+
+  .error-msg {
+    position: relative;
+    padding: 0;
+    height: 12px;
+    margin-bottom: 8px;
+  }
+}
diff --git a/frontend/src/app/shared/components/footer/footer.component.scss b/frontend/src/app/shared/components/footer/footer.component.scss
index 793a6a8..c12844c 100644
--- a/frontend/src/app/shared/components/footer/footer.component.scss
+++ b/frontend/src/app/shared/components/footer/footer.component.scss
@@ -22,3 +22,13 @@ footer {
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 350px) {
+  footer {
+    a {
+      padding: 0 24px;
+    }
+  }
+}
diff --git a/frontend/src/app/shared/components/header/header.component.html b/frontend/src/app/shared/components/header/header.component.html
index 074a09d..9d4fc46 100644
--- a/frontend/src/app/shared/components/header/header.component.html
+++ b/frontend/src/app/shared/components/header/header.component.html
@@ -11,9 +11,12 @@
     ></app-btn-large>
   </div>
   } @else {
-  <div class="logo" routerLink="/">
+  <div class="logo-full" routerLink="/">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
+  <div class="logo-mobile" routerLink="/">
+    <img src="./../../../../assets/img/logo_ci.svg" alt="" />
+  </div>
   <div class="btn">
     <app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
   </div>
diff --git a/frontend/src/app/shared/components/header/header.component.scss b/frontend/src/app/shared/components/header/header.component.scss
index 4243183..29cec00 100644
--- a/frontend/src/app/shared/components/header/header.component.scss
+++ b/frontend/src/app/shared/components/header/header.component.scss
@@ -13,7 +13,9 @@ header {
   z-index: 1;
 }
 
-.logo {
+.logo,
+.logo-full,
+.logo-mobile {
   cursor: pointer;
   img {
     filter: drop-shadow(1px 1px 3px $black);
@@ -21,3 +23,23 @@ header {
     height: 32px;
   }
 }
+
+.logo-mobile {
+  display: none;
+}
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 700px) {
+  header {
+    padding: 10px 24px;
+  }
+
+  .logo-full {
+    display: none;
+  }
+
+  .logo-mobile {
+    display: block;
+  }
+}
diff --git a/frontend/src/assets/style/auth-layout.scss b/frontend/src/assets/style/auth-layout.scss
index 3c2f03d..70827d7 100644
--- a/frontend/src/assets/style/auth-layout.scss
+++ b/frontend/src/assets/style/auth-layout.scss
@@ -48,3 +48,17 @@ section {
     }
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 660px) {
+  .content {
+    padding: 43px 24px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .content {
+    width: 80%;
+  }
+}
diff --git a/frontend/src/assets/style/form.scss b/frontend/src/assets/style/form.scss
index 232c81d..07f6591 100644
--- a/frontend/src/assets/style/form.scss
+++ b/frontend/src/assets/style/form.scss
@@ -44,3 +44,13 @@ form {
     font-weight: 400 !important;
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 600px) {
+  form {
+    input {
+      width: 100%;
+    }
+  }
+}