style: Responsive Design hinzugefügt (#170)

SE-TINF22B2 · May 10, 2024 · aefbf8d · aefbf8d
1 parent 5503334
commit aefbf8d
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 176 deletions.
diff --git a/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss b/frontend/src/app/components/atoms/stopbutton/stopbutton.component.scss
@@ -11,7 +11,6 @@
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.8px;
-  line-height: 20px;
   margin: 0;
   outline: none;
   padding: 13px 13px;
@@ -24,14 +23,15 @@
   -webkit-user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  width: 20vw;
-  height: 5vh;
+  width: 90px;
+  height: 40px;
   margin-top: 15px;
   position: fixed;
-  top: 20vh;
-  right: 0;
-  margin-right: 3vw;
-  padding: 2vw;
+  top: 150px;
+  left: 50%; /* Horizontale Ausrichtung auf 50% des Elternelements (hier: Bildschirmbreite) */
+  transform: translateX(-50%);
+  margin-left: 150px;
+
 }
 
 .stopbutton:after {
@@ -72,3 +72,9 @@
   font-weight: 100;
   font-size: 10px;
 }
+
+@media screen and (max-width: 360px) {
+  .stopbutton {
+    margin-left: 130px;
+  }
+}
diff --git a/frontend/src/app/components/atoms/timer/timer.component.scss b/frontend/src/app/components/atoms/timer/timer.component.scss
@@ -1,5 +1,5 @@
 h2 {
   margin: 0;
   margin-top: 10px;
-  font-size: 5vw;
+  font-size: 16px;
 }
diff --git a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss
@@ -1,15 +1,17 @@
 .main {
   position: fixed;
   bottom: 0;
+  left: 50%; /* Horizontale Ausrichtung auf 50% des Elternelements (hier: Bildschirmbreite) */
+  transform: translateX(-50%); /* Verschiebe das Element um -50% seiner eigenen Breite nach links, um es zu zentrieren */
   width: 100%;
+  max-width: 428px;
   background-color: inherit;
   z-index: 2;
-  left: 0;
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: end;
+
 
   .window {
     height: 100vh;
@@ -87,7 +89,7 @@
 
   .start-button {
     width: 60%;
-    height: 15%;
+    height: 12%;
     border-radius: 18px;
     color: var(--font);
     font-weight: bold;
@@ -96,3 +98,4 @@
     background-color: var(--grey);
   }
 }
+
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.scss b/frontend/src/app/components/organisms/loginform/loginform.component.scss
@@ -18,6 +18,7 @@ p.create-account {
   justify-content: center;
   align-self: center;
   margin-right: 8px;
+  margin-top: 8px;
 
   .img {
     height: 15px;
@@ -35,6 +36,7 @@ p.create-account {
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     width: 65%;
+    max-width: 400px;
     z-index: 1;
     -webkit-transition: all 0.3s ease;
     background-color: var(--background-black);
@@ -91,3 +93,20 @@ p.create-account {
     justify-content: space-between;
   }
 }
+
+@media screen and (min-width: 429px) {
+  .login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .center {
+      width: 65%;
+      max-width: 300px;
+      z-index: 1;
+      background-color: var(--background-black);
+      padding: 15px;
+      border-radius: 16px;
+      margin-top: 0;
+    }
+  }
+}
diff --git a/frontend/src/app/components/organisms/roadmap/roadmap.component.scss b/frontend/src/app/components/organisms/roadmap/roadmap.component.scss
@@ -1,12 +1,17 @@
 .map {
-  height: 100%;
-  padding-top: 20vh;
+  margin-top: 90px;
+  height: 75vh;
   display: flex;
-  justify-content: center;
   flex-direction: column;
   align-items: center;
+  overflow: hidden;
+  overflow-y: scroll;
+  background-color: var(--background-black);
 }
 
+.map::-webkit-scrollbar {
+  display: none;
+}
 /* Nur jeder zweite Button */
 .button {
   margin-right: 50px;

diff --git a/frontend/src/app/components/organisms/signupform/signupform.component.scss b/frontend/src/app/components/organisms/signupform/signupform.component.scss
@@ -1,101 +1,4 @@
 
-p.create-account {
-  font-size: 0.8rem;
-  text-align: center;
-  margin-top: 20px;
-
-  a {
-    font-weight: bold;
-    color: var(--white);
-    text-decoration: none;
-    margin-top: 20px;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-}
-
-.eyeimg {
-  justify-content: center;
-  align-self: center;
-  margin-right: 8px;
-
-  .img {
-    height: 15px;
-    width: 15px;
-  }
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .center {
-    position: absolute;
-    top: calc(50% - 10%);
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    width: 65%;
-    z-index: 1;
-    -webkit-transition: all 0.3s ease;
-    background-color: var(--background-black);
-    padding: 15px;
-    border-radius: 16px;
-    margin-top: 14%;
-
-    .form-title {
-      color: var(--white);
-      font-size: 1.7em;
-      text-align: center;
-      margin-top: 30px;
-    }
-
-    .form-holder {
-      border-radius: 15px;
-      background-color: #fff;
-      border: 1px solid #eee;
-      overflow: hidden;
-      margin-top: 50px;
-      opacity: 1;
-      visibility: visible;
-      -webkit-transition: all 0.3s ease;
-    }
-
-    .button {
-      background-color: var(--green);
-      color: var(--font);
-      border: 0;
-      font-weight: bolder;
-      border-radius: 15px;
-      display: block;
-      margin: 15px auto;
-      margin-top: 10px;
-      padding: 15px 45px;
-      width: 100%;
-      font-size: 13px;
-      cursor: pointer;
-      opacity: 1;
-      visibility: visible;
-      -webkit-transition: all 0.3s ease;
-
-      &:hover {
-        transition: all 0.1s ease;
-        background-color: var(--white);
-        color: var(--font);
-      }
-    }
-  }
-
-  .password {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-  }
-}
-
-
-
 p.create-account {
     font-size: 0.8rem;
     text-align: center;
@@ -116,6 +19,7 @@ p.create-account {
     justify-content: center;
     align-self: center;
     margin-right: 8px;
+    margin-top: 8px;
 
     .img {
       height: 15px;
@@ -136,6 +40,7 @@ p.create-account {
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         width: 65%;
+        max-width: 400px;
         z-index: 5;
         -webkit-transition: all .3s ease;
         background-color: var(--background-black);
@@ -197,4 +102,20 @@ p.create-account {
       }
 }
 
+@media screen and (min-width: 429px) {
+  .login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .center {
+      width: 65%;
+      max-width: 300px;
+      z-index: 1;
+      background-color: var(--background-black);
+      padding: 15px;
+      border-radius: 16px;
+      margin-top: 0;
+    }
+  }
+}
 
diff --git a/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss b/frontend/src/app/components/organisms/statistic-header/statistic-header.component.scss
@@ -3,7 +3,8 @@
   padding: 0;
   background-color: var(--black-2);
   width: 100%;
-  height: 20vh;
+  max-width: 428px;
+  height: 130px;
   position: fixed;
   top: 0;
   z-index: 1;
@@ -15,8 +16,8 @@
   }
 
   img {
-    width: 50vw;
-    height: 10vh;
+    width: 150px;
+    height: 50px;
     margin: 0;
     padding: 0;
     background: none;
@@ -42,7 +43,7 @@
       h2 {
         margin: 0;
         margin-top: 10px;
-        font-size: 5vw;
+        font-size: 16px;
       }
     }
 
@@ -57,7 +58,7 @@
       h2 {
         margin: 0;
         margin-top: 10px;
-        font-size: 5vw;
+        font-size: 16px;
       }
     }
 
@@ -75,7 +76,7 @@
       h2 {
         margin: 0;
         margin-top: 7px;
-        font-size: 5vw;
+        font-size: 16px;
       }
     }
   }

diff --git a/frontend/src/app/components/pages/landingpage/landingpage.component.html b/frontend/src/app/components/pages/landingpage/landingpage.component.html
@@ -1,9 +1,11 @@
-<div class="main">
-  <h1 class="h1-1">Welcome to</h1>
-  <img class="img" src="../../../../assets/logo/logo_1_white.svg" />
-  <h1 class="h1-2">Lets Start</h1>
-  <div class="auth">
-    <button class="button" (click)="login()">Login</button>
-    <button class="button" (click)="signup()">Sign up</button>
+<div class="center-container">
+  <div class="main">
+    <h1 class="h1-1">Welcome to</h1>
+    <img class="img" src="../../../../assets/logo/logo_1_white.svg" />
+    <h1 class="h1-2">Lets Start</h1>
+    <div class="auth">
+      <button class="button" (click)="login()">Login</button>
+      <button class="button" (click)="signup()">Sign up</button>
+    </div>
   </div>
 </div>