added translate & bugfixes
This commit is contained in:
Chneemann
parent
66749aebb6
commit
2a1f01ccfb
15 changed files with 184 additions and 36 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<div class="header">
|
||||
<div class="title">Join 360</div>
|
||||
<div class="blue-bar"></div>
|
||||
<div class="metrics-txt">Key Metrics at a Glance</div>
|
||||
<div class="metrics-txt">
|
||||
{{ "summary.headlineDescription" | translate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left-container">
|
||||
|
|
@ -16,7 +18,7 @@
|
|||
</div>
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfTaskStatus("todo") }}</span>
|
||||
<p>To-do</p>
|
||||
<p>{{ "summary.todo" | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todo-done" routerLink="/board">
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
</div>
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfTaskStatus("done") }}</span>
|
||||
<p>Done</p>
|
||||
<p>{{ "summary.done" | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
<img src="./../../../assets/img/summary/urgent.svg" alt="" />
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfTaskStatusUrgent().length }}</span>
|
||||
<p>Done</p>
|
||||
<p>{{ "summary.urgent" | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
|
@ -45,9 +47,11 @@
|
|||
<div>
|
||||
@if (displayNumberOfTaskStatusUrgent().length) {
|
||||
<span>{{ nextUrgentTasks() }}</span>
|
||||
<p class="spacer">Upcoming Deadline</p>
|
||||
<p class="spacer">
|
||||
{{ "summary.upcomingDeadline" | translate }}
|
||||
</p>
|
||||
} @else {
|
||||
<p>No Deadline</p>
|
||||
<p>{{ "summary.noDeadline" | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,19 +63,31 @@
|
|||
<div class="tasks" routerLink="/board">
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfAllTasks() }}</span>
|
||||
<p>Task<br />in Board</p>
|
||||
<p>
|
||||
{{ "summary.taskBoard0" | translate }}<br />{{
|
||||
"summary.taskBoard1" | translate
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tasks" routerLink="/board">
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfTaskStatus("inprogress") }}</span>
|
||||
<p>Task in<br />Progress</p>
|
||||
<p>
|
||||
{{ "summary.taskProgress0" | translate }}<br />{{
|
||||
"summary.taskProgress1" | translate
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tasks" routerLink="/board">
|
||||
<div class="details">
|
||||
<span>{{ displayNumberOfTaskStatus("awaitfeedback") }}</span>
|
||||
<p>Awaiting<br />Feedback</p>
|
||||
<p>
|
||||
{{ "summary.taskAwaitingFeedback0" | translate }}<br />{{
|
||||
"summary.taskAwaitingFeedback1" | translate
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
src="./../../../../assets/img/header/logo.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
<div class="headline">Kanban Project Management Tool</div>
|
||||
<div class="headline">{{ "header.headline" | translate }}</div>
|
||||
<div class="left-frame">
|
||||
<div class="img-help" routerLink="help">
|
||||
<img src="./../../../../assets/img/header/help.svg" alt="" />
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@if (navbarVisible) {
|
||||
<nav class="navbar d-none">
|
||||
<div class="link" routerLink="imprint">
|
||||
<span>Legal Notice</span>
|
||||
</div>
|
||||
<div class="link" routerLink="privacy-policy">
|
||||
<span>Privacy Policy</span>
|
||||
<span>{{ "navbar.privacyPolicy" | translate }}</span>
|
||||
</div>
|
||||
<div class="link" routerLink="imprint">
|
||||
<span>{{ "navbar.legalNotice" | translate }}</span>
|
||||
</div>
|
||||
<div class="link" onclick="logout()">
|
||||
<span>Log out</span>
|
||||
<span>{{ "navbar.logout" | translate }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
} @else if (navbarLanguageVisible) {
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
active: langService.currentLang === 'en'
|
||||
}"
|
||||
>
|
||||
<span>English</span>
|
||||
<span>{{ "navbar.english" | translate }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="link"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
active: langService.currentLang === 'de'
|
||||
}"
|
||||
>
|
||||
<span>German</span>
|
||||
<span>{{ "navbar.german" | translate }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue