design & translate
This commit is contained in:
Chneemann
parent
7a3fe4e3ed
commit
e1342d87f3
9 changed files with 78 additions and 35 deletions
|
|
@ -1,13 +1,13 @@
|
|||
<section>
|
||||
<div class="header">
|
||||
<div class="title">Board</div>
|
||||
<div class="title">{{ "board.headline" | translate }}</div>
|
||||
<div class="search">
|
||||
<div>
|
||||
<input
|
||||
#searchField
|
||||
id="search-task"
|
||||
type="text"
|
||||
placeholder="Find Task"
|
||||
placeholder="{{ 'board.findTask' | translate }}"
|
||||
[(ngModel)]="searchValue"
|
||||
(input)="searchTask()"
|
||||
/>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
<button class="btn" type="submit" (click)="addNewTaskOverlay('none')">
|
||||
<div class="btn-inside">
|
||||
<span>Add Task</span>
|
||||
<span>{{ "board.addTask" | translate }}</span>
|
||||
<img src="./../../../assets/img/board/add_white.svg" alt="check" />
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
(drop)="dragDropService.drop($event, 'todo')"
|
||||
>
|
||||
<div class="headline">
|
||||
<span>To do</span
|
||||
<span>{{ "board.todo" | translate }}</span
|
||||
><img
|
||||
src="./../../../assets/img/board/plus.svg"
|
||||
alt="add"
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
@for(task of getTaskStatus("todo"); track task) {
|
||||
<app-task [task]="task"></app-task>
|
||||
} @empty {
|
||||
<app-task-empty>No tasks</app-task-empty>
|
||||
<app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
(drop)="dragDropService.drop($event, 'inprogress')"
|
||||
>
|
||||
<div class="headline">
|
||||
<span>In progress</span
|
||||
<span>{{ "board.inProgress" | translate }}</span
|
||||
><img
|
||||
src="./../../../assets/img/board/plus.svg"
|
||||
alt="add"
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
@for(task of getTaskStatus("inprogress"); track task) {
|
||||
<app-task [task]="task"></app-task>
|
||||
} @empty {
|
||||
<app-task-empty>No tasks</app-task-empty>
|
||||
<app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
(drop)="dragDropService.drop($event, 'awaitfeedback')"
|
||||
>
|
||||
<div class="headline">
|
||||
<span>Await feedback</span
|
||||
<span>{{ "board.awaitFeedback" | translate }}</span
|
||||
><img
|
||||
src="./../../../assets/img/board/plus.svg"
|
||||
alt="add"
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
@for(task of getTaskStatus("awaitfeedback"); track task) {
|
||||
<app-task [task]="task"></app-task>
|
||||
} @empty {
|
||||
<app-task-empty>No tasks</app-task-empty>
|
||||
<app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
(drop)="dragDropService.drop($event, 'done')"
|
||||
>
|
||||
<div class="headline">
|
||||
<span>Done</span
|
||||
<span>{{ "board.done" | translate }}</span
|
||||
><img
|
||||
src="./../../../assets/img/board/plus.svg"
|
||||
alt="add"
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
@for(task of getTaskStatus("done"); track task) {
|
||||
<app-task [task]="task"></app-task>
|
||||
} @empty {
|
||||
<app-task-empty>No tasks</app-task-empty>
|
||||
<app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ section {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1080px;
|
||||
max-width: 1185px;
|
||||
}
|
||||
|
||||
.search {
|
||||
|
|
@ -82,7 +82,7 @@ d-none {
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
width: 165px;
|
||||
width: 175px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
|
|
@ -101,7 +101,7 @@ d-none {
|
|||
/*------------- HEADLINE -------------*/
|
||||
|
||||
.content {
|
||||
max-width: calc(1080px + 32px);
|
||||
max-width: 1185px;
|
||||
}
|
||||
|
||||
.status {
|
||||
|
|
@ -138,6 +138,7 @@ d-none {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 32px;
|
||||
padding-top: 6px;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,18 @@ import { FirebaseService } from '../../services/firebase.service';
|
|||
import { OverlayService } from '../../services/overlay.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { SharedService } from '../../services/shared.service';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-board',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TaskComponent, TaskEmptyComponent, FormsModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
TaskComponent,
|
||||
TaskEmptyComponent,
|
||||
FormsModule,
|
||||
TranslateModule,
|
||||
],
|
||||
templateUrl: './board.component.html',
|
||||
styleUrl: './board.component.scss',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 243px;
|
||||
max-width: 264px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed var(--gray);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
section {
|
||||
width: 246px;
|
||||
width: 270px;
|
||||
margin: 15.5px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ section {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 214px;
|
||||
width: 238px;
|
||||
padding: 16px;
|
||||
border-radius: 24px;
|
||||
background-color: var(--white);
|
||||
|
|
|
|||
|
|
@ -145,11 +145,11 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
span {
|
||||
font-size: 21px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.spacer {
|
||||
|
|
@ -244,8 +244,13 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
.left-container {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.todo-done,
|
||||
.tasks {
|
||||
height: 120px;
|
||||
.circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -257,6 +262,7 @@
|
|||
}
|
||||
|
||||
.urgent {
|
||||
height: 120px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -280,6 +286,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
span {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
|
|
@ -292,10 +307,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.left-container {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.todo-done,
|
||||
.urgent,
|
||||
.tasks {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
<img class="logo" src="./../../../../assets/img/header/logo.svg" alt="logo" />
|
||||
<div class="headline">{{ "header.headline" | translate }}</div>
|
||||
<div class="navbar">
|
||||
<div class="img-help" routerLink="help">
|
||||
<img src="./../../../../assets/img/header/help.svg" alt="" />
|
||||
<div class="img-help">
|
||||
<img
|
||||
routerLink="help"
|
||||
src="./../../../../assets/img/header/help.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="img-language">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -27,18 +27,28 @@
|
|||
"morning": "Guten Morgen",
|
||||
"afternoon": "Guten Tag",
|
||||
"evening": "Guten Abend",
|
||||
"todo": "Zu tun",
|
||||
"done": "Fertig",
|
||||
"todo": "Erledigen",
|
||||
"done": "Erledigt",
|
||||
"urgent": "Dringend",
|
||||
"upcomingDeadline": "Bevorstehende Frist",
|
||||
"noDeadline": "Keine Fristen",
|
||||
"taskBoard0": "Aufgaben",
|
||||
"taskBoard1": "im Brett",
|
||||
"taskProgress0": "Laufende",
|
||||
"taskProgress1": "Aufgaben",
|
||||
"taskAwaitingFeedback0": "Warten auf",
|
||||
"upcomingDeadline": "Nächster Termin",
|
||||
"noDeadline": "Keine Termine",
|
||||
"taskBoard0": "Aktuelle",
|
||||
"taskBoard1": "Aufgaben",
|
||||
"taskProgress0": "Aufgaben in",
|
||||
"taskProgress1": "Bearbeitung",
|
||||
"taskAwaitingFeedback0": "Warte auf",
|
||||
"taskAwaitingFeedback1": "Rückmeldung"
|
||||
},
|
||||
"board": {
|
||||
"headline": "Brett",
|
||||
"todo": "Zu Erledigen",
|
||||
"inProgress": "In Bearbeitung",
|
||||
"awaitFeedback": "Warte auf Rückmeldung",
|
||||
"done": "Erledigt",
|
||||
"addTask": "Hinzufügen",
|
||||
"findTask": "Aufgabe suchen",
|
||||
"noTasks": "Keine Aufgaben"
|
||||
},
|
||||
"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.",
|
||||
|
|
|
|||
|
|
@ -39,6 +39,16 @@
|
|||
"taskAwaitingFeedback0": "Awaiting",
|
||||
"taskAwaitingFeedback1": "Feedback"
|
||||
},
|
||||
"board": {
|
||||
"headline": "Board",
|
||||
"todo": "To-do",
|
||||
"inProgress": "In progress",
|
||||
"awaitFeedback": "Await feedback",
|
||||
"done": "Done",
|
||||
"addTask": "Add Task",
|
||||
"findTask": "Find Task",
|
||||
"noTasks": "No tasks"
|
||||
},
|
||||
"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.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue