From 2a1f01ccfb1acbde9acac6f0a8716359fad01f48 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 30 Mar 2024 21:25:07 +0100 Subject: [PATCH] added translate & bugfixes --- src/app/app.component.scss | 7 ++++ .../components/summary/summary.component.html | 34 ++++++++++++++----- .../components/summary/summary.component.scss | 26 ++++++++++++-- .../components/summary/summary.component.ts | 4 +-- .../components/header/header.component.html | 2 +- .../components/header/header.component.scss | 10 +++--- .../components/header/header.component.ts | 3 +- .../components/help/help.component.scss | 21 +++++++++--- .../components/imprint/imprint.component.scss | 16 ++++++++- .../components/navbar/navbar.component.html | 14 ++++---- .../components/navbar/navbar.component.scss | 6 ++++ .../components/navbar/navbar.component.ts | 3 +- .../privacy-policy.component.scss | 16 ++++++++- src/assets/i18n/de.json | 29 +++++++++++++++- src/assets/i18n/en.json | 29 +++++++++++++++- 15 files changed, 184 insertions(+), 36 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 1b168b3..41b9bb4 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -20,6 +20,7 @@ main { display: flex; flex-direction: column; height: 100vh; + min-width: calc(100vw - 232px); } app-header { @@ -43,9 +44,15 @@ app-header { height: calc(100vh - 240px); padding: 32px; } + + main { + min-width: calc(100vw); + } + app-sidebar { display: none; } + app-sidebar-mobile { display: unset; } diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html index 31dfc84..326bc0d 100644 --- a/src/app/components/summary/summary.component.html +++ b/src/app/components/summary/summary.component.html @@ -2,7 +2,9 @@
Join 360
-
Key Metrics at a Glance
+
+ {{ "summary.headlineDescription" | translate }} +
@@ -16,7 +18,7 @@
{{ displayNumberOfTaskStatus("todo") }} -

To-do

+

{{ "summary.todo" | translate }}

@@ -25,7 +27,7 @@
{{ displayNumberOfTaskStatus("done") }} -

Done

+

{{ "summary.done" | translate }}

@@ -36,7 +38,7 @@
{{ displayNumberOfTaskStatusUrgent().length }} -

Done

+

{{ "summary.urgent" | translate }}

@@ -45,9 +47,11 @@
@if (displayNumberOfTaskStatusUrgent().length) { {{ nextUrgentTasks() }} -

Upcoming Deadline

+

+ {{ "summary.upcomingDeadline" | translate }} +

} @else { -

No Deadline

+

{{ "summary.noDeadline" | translate }}

}
@@ -59,19 +63,31 @@
{{ displayNumberOfAllTasks() }} -

Task
in Board

+

+ {{ "summary.taskBoard0" | translate }}
{{ + "summary.taskBoard1" | translate + }} +

{{ displayNumberOfTaskStatus("inprogress") }} -

Task in
Progress

+

+ {{ "summary.taskProgress0" | translate }}
{{ + "summary.taskProgress1" | translate + }} +

{{ displayNumberOfTaskStatus("awaitfeedback") }} -

Awaiting
Feedback

+

+ {{ "summary.taskAwaitingFeedback0" | translate }}
{{ + "summary.taskAwaitingFeedback1" | translate + }} +

diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss index 33105ec..d8806f7 100644 --- a/src/app/components/summary/summary.component.scss +++ b/src/app/components/summary/summary.component.scss @@ -118,6 +118,7 @@ section { display: flex; flex-direction: column; align-items: center; + width: 130px; p { padding: 0 24px; font-size: 20px; @@ -190,8 +191,9 @@ section { @media screen and (max-width: 700px) { .header { flex-direction: column; - align-items: flex-start; + align-items: start; padding-left: 0; + width: 100%; height: 100%; .metrics-txt { padding-left: 0; @@ -264,6 +266,7 @@ section { } .details { + width: 100px; p { font-size: 16px; } @@ -291,11 +294,19 @@ section { height: 100%; } + .header { + .title { + font-size: 47px; + } + .metrics-txt { + font-size: 20px; + } + } + .todo-done, .urgent, .tasks { width: 100%; - height: 120px; border-radius: 30px; .line { height: 80px; @@ -312,7 +323,15 @@ section { } } -@media screen and (max-width: 350px) { +@media screen and (max-width: 400px) { + .details { + p { + font-size: 12px; + } + } +} + +@media screen and (max-width: 365px) { .todo-done, .urgent, .tasks { @@ -320,6 +339,7 @@ section { } .details { + width: 70px; p { padding: 0 12px; font-size: 14px; diff --git a/src/app/components/summary/summary.component.ts b/src/app/components/summary/summary.component.ts index c0afd38..e5d78d0 100644 --- a/src/app/components/summary/summary.component.ts +++ b/src/app/components/summary/summary.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; import { TaskService } from '../../services/task.service'; -import { Task } from '../../interfaces/task.interface'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-summary', standalone: true, - imports: [RouterModule], + imports: [RouterModule, TranslateModule], templateUrl: './summary.component.html', styleUrl: './summary.component.scss', }) diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html index c973657..21ebe1c 100644 --- a/src/app/shared/components/header/header.component.html +++ b/src/app/shared/components/header/header.component.html @@ -5,7 +5,7 @@ src="./../../../../assets/img/header/logo.svg" alt="logo" /> -
Kanban Project Management Tool
+
{{ "header.headline" | translate }}
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss index acb0ae0..2411d92 100644 --- a/src/app/shared/components/header/header.component.scss +++ b/src/app/shared/components/header/header.component.scss @@ -43,10 +43,12 @@ section { display: flex; align-items: center; width: 56px; - cursor: pointer; - &:hover { - filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg) - brightness(92%) contrast(92%); + img { + cursor: pointer; + &:hover { + filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg) + brightness(92%) contrast(92%); + } } } diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index c6a51be..b22509e 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/src/app/shared/components/header/header.component.ts @@ -2,11 +2,12 @@ import { Component, HostListener } from '@angular/core'; import { RouterModule } from '@angular/router'; import { NavbarComponent } from '../navbar/navbar.component'; import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-header', standalone: true, - imports: [RouterModule, NavbarComponent, CommonModule], + imports: [RouterModule, NavbarComponent, CommonModule, TranslateModule], templateUrl: './header.component.html', styleUrl: './header.component.scss', }) diff --git a/src/app/shared/components/help/help.component.scss b/src/app/shared/components/help/help.component.scss index 749ffbe..2b83f09 100644 --- a/src/app/shared/components/help/help.component.scss +++ b/src/app/shared/components/help/help.component.scss @@ -1,4 +1,8 @@ section { + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; padding-right: 64px; a { text-decoration: none; @@ -48,7 +52,7 @@ h3 { margin-top: 24px; td:first-child { display: flex; - font-size: 27px; + font-size: 20px; font-weight: 700; margin-right: 35px; } @@ -69,9 +73,18 @@ h3 { } } -@media (max-width: 634px) { +@media screen and (max-width: 500px) { h1 { - font-size: 36px; - font-weight: 700; + font-size: 47px; + } + + h2 { + font-size: 27px; + } + + .content-table { + td:first-child { + margin-right: 12px; + } } } diff --git a/src/app/shared/components/imprint/imprint.component.scss b/src/app/shared/components/imprint/imprint.component.scss index ce1e9af..830b792 100644 --- a/src/app/shared/components/imprint/imprint.component.scss +++ b/src/app/shared/components/imprint/imprint.component.scss @@ -1,5 +1,8 @@ section { + max-width: 100%; word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; padding-right: 64px; } @@ -12,7 +15,7 @@ section { width: 32px; height: 32px; cursor: pointer; - margin-left: 48px; + margin-left: 12px; &:hover { width: 36px; height: 36px; @@ -25,6 +28,7 @@ section { h1 { font-size: 61px; font-weight: 700; + width: 85%; padding-bottom: 24px; } @@ -61,3 +65,13 @@ a { padding-right: 0; } } + +@media screen and (max-width: 500px) { + h1 { + font-size: 47px; + } + + h2 { + font-size: 27px; + } +} diff --git a/src/app/shared/components/navbar/navbar.component.html b/src/app/shared/components/navbar/navbar.component.html index 8388639..ba03b73 100644 --- a/src/app/shared/components/navbar/navbar.component.html +++ b/src/app/shared/components/navbar/navbar.component.html @@ -1,13 +1,13 @@ @if (navbarVisible) { } @else if (navbarLanguageVisible) { @@ -19,7 +19,7 @@ active: langService.currentLang === 'en' }" > - English + {{ "navbar.english" | translate }}
- German + {{ "navbar.german" | translate }}
} diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss index a7a4ae0..06a1154 100644 --- a/src/app/shared/components/navbar/navbar.component.scss +++ b/src/app/shared/components/navbar/navbar.component.scss @@ -25,6 +25,12 @@ border-radius: 8px; color: var(--white); cursor: pointer; + span { + width: 118px; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; + } &:hover { background-color: var(--very-dark-blue); span { diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts index 1227d0b..69b4764 100644 --- a/src/app/shared/components/navbar/navbar.component.ts +++ b/src/app/shared/components/navbar/navbar.component.ts @@ -3,11 +3,12 @@ import { RouterModule } from '@angular/router'; import { HeaderComponent } from '../header/header.component'; import { LanguageService } from '../../../services/language.service'; import { CommonModule } from '@angular/common'; +import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-navbar', standalone: true, - imports: [RouterModule, HeaderComponent, CommonModule], + imports: [RouterModule, HeaderComponent, CommonModule, TranslateModule], templateUrl: './navbar.component.html', styleUrl: './navbar.component.scss', }) diff --git a/src/app/shared/components/privacy-policy/privacy-policy.component.scss b/src/app/shared/components/privacy-policy/privacy-policy.component.scss index e31b6fd..e96845f 100644 --- a/src/app/shared/components/privacy-policy/privacy-policy.component.scss +++ b/src/app/shared/components/privacy-policy/privacy-policy.component.scss @@ -1,5 +1,8 @@ section { + max-width: 100%; word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; padding-right: 64px; } @@ -12,7 +15,7 @@ section { width: 32px; height: 32px; cursor: pointer; - margin-left: 48px; + margin-left: 12px; &:hover { width: 36px; height: 36px; @@ -25,6 +28,7 @@ section { h1 { font-size: 61px; font-weight: 700; + width: 80%; } h2 { @@ -67,3 +71,13 @@ a { padding-right: 0; } } + +@media screen and (max-width: 500px) { + h1 { + font-size: 47px; + } + + h2 { + font-size: 27px; + } +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index ac60abc..c15eb8e 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -1,4 +1,31 @@ { + "header": { + "headline": "Kanban Projektmanagement Werkzeug" + }, + "navbar": { + "privacyPolicy": "Datenschutzerklärung", + "legalNotice": "Rechtlicher Hinweis", + "logout": "Abmelden", + "english": "Englisch", + "german": "Deutsch" + }, + "summary": { + "headlineDescription": "Schlüsselmetriken auf einen Blick", + "morning": "Guten Morgen", + "afternoon": "Guten Tag", + "evening": "Guten Abend", + "todo": "Zu tun", + "done": "Fertig", + "urgent": "Dringend", + "upcomingDeadline": "Bevorstehende Frist", + "noDeadline": "Keine Fristen", + "taskBoard0": "Aufgaben", + "taskBoard1": "im Brett", + "taskProgress0": "Laufende", + "taskProgress1": "Aufgaben", + "taskAwaitingFeedback0": "Warten auf", + "taskAwaitingFeedback1": "Rückmeldung" + }, "help": { "header": "Hilfe", "welcome": "Willkommen auf der Hilfeseite für Join, Ihrem Leitfaden für die Verwendung unseres Kanban-Projektmanagement-Tools. Hier erhalten Sie einen Überblick darüber, was Join ist, wie Sie davon profitieren können und wie Sie es verwenden.", @@ -23,7 +50,7 @@ "footer": "Viel Spaß bei der Nutzung von Join!" }, "imprint": { - "headline": "Imprint", + "headline": "Rechtliche Hinweise (Impressum)", "tmg": "Angaben gemäß §5 TMG", "contact": "Kontakt", "tel": "Telefon", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 6a3a156..817797d 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -1,4 +1,31 @@ { + "header": { + "headline": "Kanban Project Management Tool" + }, + "navbar": { + "privacyPolicy": "Privacy policy", + "legalNotice": "Legal notice", + "logout": "Abmelden", + "english": "English", + "german": "German" + }, + "summary": { + "headlineDescription": "Key Metrics at a Glance", + "morning": "Good Morning", + "afternoon": "Good Afternoon", + "evening": "Good Evening", + "todo": "To-do", + "done": "Done", + "urgent": "Urgent", + "upcomingDeadline": "Upcoming Deadline", + "noDeadline": "No Deadline", + "taskBoard0": "Tasks in", + "taskBoard1": "Board", + "taskProgress0": "Tasks in", + "taskProgress1": "Progress", + "taskAwaitingFeedback0": "Awaiting", + "taskAwaitingFeedback1": "Feedback" + }, "help": { "header": "Help", "welcome": "Welcome to the help page for Join, your guide to using our kanban project management tool. Here, we'll provide an overview of what Join is, how it can benefit you, and how to use it.", @@ -23,7 +50,7 @@ "footer": "Enjoy using Join!" }, "imprint": { - "headline": "Imprint", + "headline": "Legal notice (Imprint)", "tmg": "Information according to §5 TMG", "contact": "Contact", "tel": "Telephone",