From 6fd7c76c2401f4b2bd4a0205015152b1e2913719 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 28 Apr 2024 11:18:00 +0200
Subject: [PATCH] responsive design & translate

---
 src/app/components/board/board.component.html |   2 +-
 src/app/components/board/board.component.scss | 124 +++++++++---------
 .../task/task-empty/task-empty.component.scss |   2 +-
 .../sidebar-mobile.component.html             |   8 +-
 .../sidebar-mobile.component.ts               |   3 +-
 .../components/sidebar/sidebar.component.html |  42 +++---
 .../components/sidebar/sidebar.component.scss |  15 ++-
 .../components/sidebar/sidebar.component.ts   |  13 +-
 src/assets/i18n/de.json                       |  11 +-
 src/assets/i18n/en.json                       |  11 +-
 10 files changed, 132 insertions(+), 99 deletions(-)

diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index 6b9164e..1dbd3d3 100644
--- a/src/app/components/board/board.component.html
+++ b/src/app/components/board/board.component.html
@@ -2,7 +2,7 @@
   <div class="header">
     <div class="title">{{ "board.headline" | translate }}</div>
     <div class="search">
-      <div>
+      <div class="search-inner">
         <input
           #searchField
           id="search-task"
diff --git a/src/app/components/board/board.component.scss b/src/app/components/board/board.component.scss
index 4e1602b..2f51f23 100644
--- a/src/app/components/board/board.component.scss
+++ b/src/app/components/board/board.component.scss
@@ -23,44 +23,46 @@ section {
   display: flex;
   align-items: center;
   position: relative;
-  padding-right: 32px;
-  input {
-    width: 312px;
-    padding: 8px 16px;
-    align-items: center;
-    border-radius: 10px;
-    border: 1px solid var(--gray);
-  }
-  .line {
-    position: absolute;
-    top: 8px;
-    right: 250px;
-    height: 18px;
-    width: 1px;
-    background-color: var(--gray);
-    margin: 0 6px;
-  }
-  .icon-clear {
-    position: absolute;
-    top: 7px;
-    right: 225px;
-    cursor: pointer;
-    &:hover {
-      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
+  .search-inner {
+    position: relative;
+    input {
+      width: 312px;
+      padding: 8px 16px;
+      align-items: center;
+      border-radius: 10px;
+      border: 1px solid var(--gray);
+    }
+    .line {
+      position: absolute;
+      top: 8px;
+      right: 30px;
+      height: 18px;
+      width: 1px;
+      background-color: var(--gray);
+      margin: 0 6px;
+    }
+    .icon-clear {
+      position: absolute;
+      top: 7px;
+      right: 10px;
+      cursor: pointer;
+      &:hover {
+        filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
+      }
+      filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
+        brightness(94%) contrast(86%);
+      width: 20px;
+      height: 20px;
+    }
+    .icon-search {
+      position: absolute;
+      top: 4px;
+      right: 8px;
+      filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
+        brightness(94%) contrast(86%);
+      width: 25px;
+      height: 25px;
     }
-    filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
-      brightness(94%) contrast(86%);
-    width: 20px;
-    height: 20px;
-  }
-  .icon-search {
-    position: absolute;
-    top: 4px;
-    right: 223px;
-    filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
-      brightness(94%) contrast(86%);
-    width: 25px;
-    height: 25px;
   }
 }
 
@@ -82,7 +84,7 @@ d-none {
   justify-content: space-around;
   align-items: center;
   height: 32px;
-  width: 175px;
+  width: fit-content;
   padding: 8px 8px 8px 16px;
   border-radius: 10px;
   border: 0;
@@ -137,6 +139,7 @@ d-none {
 .column {
   display: flex;
   flex-direction: column;
+  width: 270px;
   padding-right: 32px;
   padding-top: 6px;
   &:first-child {
@@ -148,16 +151,20 @@ d-none {
 
 @media screen and (max-width: 1100px) {
   .search {
-    input {
-      width: 220px;
+    .search-inner {
+      input {
+        width: 220px;
+      }
     }
   }
 }
 
 @media screen and (max-width: 1020px) {
   .search {
-    input {
-      width: 150px;
+    .search-inner {
+      input {
+        width: 150px;
+      }
     }
   }
 
@@ -166,12 +173,15 @@ d-none {
   }
 }
 
-@media screen and (max-width: 897px) {
+@media screen and (max-width: 910px) {
   .search {
-    input {
-      width: 220px;
+    .search-inner {
+      input {
+        width: 280px;
+      }
     }
   }
+
   .status {
     justify-content: center;
   }
@@ -188,18 +198,12 @@ d-none {
   }
 
   .search {
-    padding-right: 0;
-    input {
-      width: calc(100vw - 113px);
-    }
-    .line {
-      right: 35px;
-    }
-    .icon-clear {
-      right: 12px;
-    }
-    .icon-search {
-      right: 10px;
+    width: 100%;
+    .search-inner {
+      width: 100%;
+      input {
+        width: calc(100% - 34px);
+      }
     }
   }
 
@@ -243,10 +247,4 @@ d-none {
   .details {
     width: calc(100vw - 55px);
   }
-
-  .search {
-    input {
-      width: calc(100vw - 80px);
-    }
-  }
 }
diff --git a/src/app/components/board/task/task-empty/task-empty.component.scss b/src/app/components/board/task/task-empty/task-empty.component.scss
index 342c73f..68d511e 100644
--- a/src/app/components/board/task/task-empty/task-empty.component.scss
+++ b/src/app/components/board/task/task-empty/task-empty.component.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  max-width: 264px;
+  max-width: 268px;
   height: 48px;
   border-radius: 10px;
   border: 1px dashed var(--gray);
diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html
index 804a6d2..656e5fe 100644
--- a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html
+++ b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html
@@ -11,7 +11,7 @@
         src="./../../../../../assets/img/sidebar/summary.svg"
         alt="summary"
       />
-      <p>Summary</p>
+      <p>{{ "sidebar.summary" | translate }}y</p>
     </div>
     <div
       class="nav-links"
@@ -21,7 +21,7 @@
       }"
     >
       <img src="./../../../../../assets/img/sidebar/board.svg" alt="board" />
-      <p>Board</p>
+      <p>{{ "sidebar.board" | translate }}</p>
     </div>
     <div
       class="nav-links"
@@ -34,7 +34,7 @@
         src="./../../../../../assets/img/sidebar/add-task.svg"
         alt="addtask"
       />
-      <p>Add Tasks</p>
+      <p>{{ "sidebar.addTask" | translate }}</p>
     </div>
     <div
       class="nav-links"
@@ -47,7 +47,7 @@
         src="./../../../../../assets/img/sidebar/contacts.svg"
         alt="contacts"
       />
-      <p>Contacts</p>
+      <p>{{ "sidebar.contacts" | translate }}</p>
     </div>
   </nav>
 </section>
diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts
index b0972c8..994095f 100644
--- a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts
+++ b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-sidebar-mobile',
   standalone: true,
-  imports: [RouterModule, CommonModule],
+  imports: [RouterModule, CommonModule, TranslateModule],
   templateUrl: './sidebar-mobile.component.html',
   styleUrl: './sidebar-mobile.component.scss',
 })
diff --git a/src/app/shared/components/sidebar/sidebar.component.html b/src/app/shared/components/sidebar/sidebar.component.html
index 05cb722..e7d0cbd 100644
--- a/src/app/shared/components/sidebar/sidebar.component.html
+++ b/src/app/shared/components/sidebar/sidebar.component.html
@@ -7,52 +7,60 @@
       class="nav-links-inner"
       routerLink="summary"
       [ngClass]="{
-        active: currentPath == 'summary'
+        active: currentPath == 'summary',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span
-        >Summary</span
-      >
+      <img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span>{{
+        "sidebar.summary" | translate
+      }}</span>
     </div>
     <div
       id="navLinkAddTask"
       class="nav-links-inner"
       routerLink="add-task"
       [ngClass]="{
-        active: currentPath == 'add-task'
+        active: currentPath == 'add-task',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span
-        >Add Task</span
-      >
+      <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span>{{
+        "sidebar.addTask" | translate
+      }}</span>
     </div>
     <div
       id="navLinkBoard"
       class="nav-links-inner"
       routerLink="board"
       [ngClass]="{
-        active: currentPath == 'board'
+        active: currentPath == 'board',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/board.svg" alt="board" /><span>Board</span>
+      <img src="./assets/img/sidebar/board.svg" alt="board" /><span>{{
+        "sidebar.board" | translate
+      }}</span>
     </div>
     <div
       id="navLinkContacts"
       class="nav-links-inner"
       routerLink="contacts"
       [ngClass]="{
-        active: currentPath == 'contacts'
+        active: currentPath == 'contacts',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span
-        >Contacts</span
-      >
+      <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span>{{
+        "sidebar.contacts" | translate
+      }}</span>
     </div>
   </nav>
 
   <div class="reference">
-    <div routerLink="privacy-policy">Privacy Policy</div>
-    <div routerLink="imprint">Legal Notice</div>
-    <div onclick="logout()">Log out</div>
+    <div routerLink="privacy-policy">
+      {{ "sidebar.privacyPolicy" | translate }}
+    </div>
+    <div routerLink="imprint">{{ "sidebar.legalNotice" | translate }}</div>
+    <div onclick="logout()">{{ "sidebar.logout" | translate }}</div>
   </div>
 </section>
diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss
index b316c52..84c987f 100644
--- a/src/app/shared/components/sidebar/sidebar.component.scss
+++ b/src/app/shared/components/sidebar/sidebar.component.scss
@@ -16,15 +16,16 @@ section {
 nav {
   display: flex;
   flex-direction: column;
+  width: 232px;
 }
 
 .nav-links-inner {
   display: flex;
   justify-content: left;
   align-items: center;
-  padding: 4px 56px;
+  padding: 4px 0;
+  padding-left: 56px;
   height: 46px;
-  width: 120px;
   cursor: pointer;
   img {
     width: 30px;
@@ -32,10 +33,8 @@ nav {
     padding-right: 8px;
   }
   span {
-    display: flex;
-    align-items: center;
+    text-align: center;
     font-size: 16px;
-    width: 100%;
     color: var(--light-gray);
   }
   &:hover {
@@ -50,13 +49,17 @@ nav {
   background-color: var(--very-dark-blue);
 }
 
+.switch-language {
+  padding-left: 43px;
+}
+
 .reference {
   display: flex;
   align-items: center;
   flex-direction: column;
   margin-bottom: 30px;
   div {
-    width: 105px;
+    width: 216px;
     padding: 8px;
     display: flex;
     text-align: center;
diff --git a/src/app/shared/components/sidebar/sidebar.component.ts b/src/app/shared/components/sidebar/sidebar.component.ts
index a1c1649..5759194 100644
--- a/src/app/shared/components/sidebar/sidebar.component.ts
+++ b/src/app/shared/components/sidebar/sidebar.component.ts
@@ -1,18 +1,23 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../../../services/language.service';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [RouterModule, CommonModule],
+  imports: [RouterModule, CommonModule, TranslateModule],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.scss',
 })
-export class SidebarComponent {
+export class SidebarComponent implements OnInit {
   currentPath: string = '';
 
-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    public languageService: LanguageService
+  ) {}
 
   ngOnInit(): void {
     this.getCurrentPath();
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 803d68d..8aed44b 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -9,6 +9,15 @@
     "english": "Englisch",
     "german": "Deutsch"
   },
+  "sidebar": {
+    "summary": "Übersicht",
+    "addTask": "Neue Aufgabe",
+    "board": "Brett",
+    "contacts": "Kontakte",
+    "privacyPolicy": "Datenschutzerklärung",
+    "legalNotice": "Rechtlicher Hinweis",
+    "logout": "Abmelden"
+  },
   "contact-dialog-form": {
     "btn-delete": "Löschen",
     "btn-save": "Sichern",
@@ -45,7 +54,7 @@
     "inProgress": "In Bearbeitung",
     "awaitFeedback": "Warte auf Rückmeldung",
     "done": "Erledigt",
-    "addTask": "Hinzufügen",
+    "addTask": "Neue Aufgabe",
     "findTask": "Aufgabe suchen",
     "noTasks": "Keine Aufgaben"
   },
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index ead5367..e59a906 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -5,10 +5,19 @@
   "navbar": {
     "privacyPolicy": "Privacy policy",
     "legalNotice": "Legal notice",
-    "logout": "Abmelden",
+    "logout": "Log out",
     "english": "English",
     "german": "German"
   },
+  "sidebar": {
+    "summary": "Summary",
+    "addTask": "Add Task",
+    "board": "Board",
+    "contacts": "Contacts",
+    "privacyPolicy": "Privacy policy",
+    "legalNotice": "Legal notice",
+    "logout": "Log out"
+  },
   "contact-dialog-form": {
     "btn-delete": "Delete",
     "btn-save": "Save",