Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design & translate

Browse source
This commit is contained in:
Chneemann 2024-04-28 00:52:17 +02:00
parent 7a3fe4e3ed
commit e1342d87f3
9 changed files with 78 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/components/board/board.component.html
View file

@ -1,13 +1,13 @@
<section> <section>
<div class="header"> <div class="header">
<div class="title">Board</div> <div class="title">{{ "board.headline" | translate }}</div>
<div class="search"> <div class="search">
<div> <div>
<input <input
#searchField #searchField
id="search-task" id="search-task"
type="text" type="text"
placeholder="Find Task" placeholder="{{ 'board.findTask' | translate }}"
[(ngModel)]="searchValue" [(ngModel)]="searchValue"
(input)="searchTask()" (input)="searchTask()"
/> />
@ -30,7 +30,7 @@
</div> </div>
<button class="btn" type="submit" (click)="addNewTaskOverlay('none')"> <button class="btn" type="submit" (click)="addNewTaskOverlay('none')">
<div class="btn-inside"> <div class="btn-inside">
<span>Add Task</span> <span>{{ "board.addTask" | translate }}</span>
<img src="./../../../assets/img/board/add_white.svg" alt="check" /> <img src="./../../../assets/img/board/add_white.svg" alt="check" />
</div> </div>
</button> </button>
@ -44,7 +44,7 @@
(drop)="dragDropService.drop($event, 'todo')" (drop)="dragDropService.drop($event, 'todo')"
> >
<div class="headline"> <div class="headline">
<span>To do</span <span>{{ "board.todo" | translate }}</span
><img ><img
src="./../../../assets/img/board/plus.svg" src="./../../../assets/img/board/plus.svg"
alt="add" alt="add"
@ -55,7 +55,7 @@
@for(task of getTaskStatus("todo"); track task) { @for(task of getTaskStatus("todo"); track task) {
<app-task [task]="task"></app-task> <app-task [task]="task"></app-task>
} @empty { } @empty {
<app-task-empty>No tasks</app-task-empty> <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
} }
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
(drop)="dragDropService.drop($event, 'inprogress')" (drop)="dragDropService.drop($event, 'inprogress')"
> >
<div class="headline"> <div class="headline">
<span>In progress</span <span>{{ "board.inProgress" | translate }}</span
><img ><img
src="./../../../assets/img/board/plus.svg" src="./../../../assets/img/board/plus.svg"
alt="add" alt="add"
@ -76,7 +76,7 @@
@for(task of getTaskStatus("inprogress"); track task) { @for(task of getTaskStatus("inprogress"); track task) {
<app-task [task]="task"></app-task> <app-task [task]="task"></app-task>
} @empty { } @empty {
<app-task-empty>No tasks</app-task-empty> <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
} }
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
(drop)="dragDropService.drop($event, 'awaitfeedback')" (drop)="dragDropService.drop($event, 'awaitfeedback')"
> >
<div class="headline"> <div class="headline">
<span>Await feedback</span <span>{{ "board.awaitFeedback" | translate }}</span
><img ><img
src="./../../../assets/img/board/plus.svg" src="./../../../assets/img/board/plus.svg"
alt="add" alt="add"
@ -97,7 +97,7 @@
@for(task of getTaskStatus("awaitfeedback"); track task) { @for(task of getTaskStatus("awaitfeedback"); track task) {
<app-task [task]="task"></app-task> <app-task [task]="task"></app-task>
} @empty { } @empty {
<app-task-empty>No tasks</app-task-empty> <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
} }
</div> </div>
</div> </div>
@ -107,7 +107,7 @@
(drop)="dragDropService.drop($event, 'done')" (drop)="dragDropService.drop($event, 'done')"
> >
<div class="headline"> <div class="headline">
<span>Done</span <span>{{ "board.done" | translate }}</span
><img ><img
src="./../../../assets/img/board/plus.svg" src="./../../../assets/img/board/plus.svg"
alt="add" alt="add"
@ -118,7 +118,7 @@
@for(task of getTaskStatus("done"); track task) { @for(task of getTaskStatus("done"); track task) {
<app-task [task]="task"></app-task> <app-task [task]="task"></app-task>
} @empty { } @empty {
<app-task-empty>No tasks</app-task-empty> <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
} }
</div> </div>
</div> </div>

7
src/app/components/board/board.component.scss
View file

@ -16,7 +16,7 @@ section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1080px; max-width: 1185px;
} }
.search { .search {
@ -82,7 +82,7 @@ d-none {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
height: 32px; height: 32px;
width: 165px; width: 175px;
padding: 8px 8px 8px 16px; padding: 8px 8px 8px 16px;
border-radius: 10px; border-radius: 10px;
border: 0; border: 0;
@ -101,7 +101,7 @@ d-none {
/*------------- HEADLINE -------------*/ /*------------- HEADLINE -------------*/
.content { .content {
max-width: calc(1080px + 32px); max-width: 1185px;
} }
.status { .status {
@ -138,6 +138,7 @@ d-none {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 32px; padding-right: 32px;
padding-top: 6px;
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
} }

9
src/app/components/board/board.component.ts
View file

@ -8,11 +8,18 @@ import { FirebaseService } from '../../services/firebase.service';
import { OverlayService } from '../../services/overlay.service'; import { OverlayService } from '../../services/overlay.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { SharedService } from '../../services/shared.service'; import { SharedService } from '../../services/shared.service';
import { TranslateModule } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-board', selector: 'app-board',
standalone: true, standalone: true,
imports: [CommonModule, TaskComponent, TaskEmptyComponent, FormsModule], imports: [
CommonModule,
TaskComponent,
TaskEmptyComponent,
FormsModule,
TranslateModule,
],
templateUrl: './board.component.html', templateUrl: './board.component.html',
styleUrl: './board.component.scss', styleUrl: './board.component.scss',
}) })

2
src/app/components/board/task/task-empty/task-empty.component.scss
View file

@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 243px; max-width: 264px;
height: 48px; height: 48px;
border-radius: 10px; border-radius: 10px;
border: 1px dashed var(--gray); border: 1px dashed var(--gray);

4
src/app/components/board/task/task.component.scss
View file

@ -1,5 +1,5 @@
section { section {
width: 246px; width: 270px;
margin: 15.5px 0; margin: 15.5px 0;
position: relative; position: relative;
} }
@ -9,7 +9,7 @@ section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 214px; width: 238px;
padding: 16px; padding: 16px;
border-radius: 24px; border-radius: 24px;
background-color: var(--white); background-color: var(--white);

23
src/app/components/summary/summary.component.scss
View file

@ -145,11 +145,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
p { p {
font-size: 16px; font-size: 18px;
font-weight: 400; font-weight: 400;
} }
span { span {
font-size: 21px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
.spacer { .spacer {
@ -244,8 +244,13 @@
} }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.left-container {
height: fit-content;
}
.todo-done, .todo-done,
.tasks { .tasks {
height: 120px;
.circle { .circle {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -257,6 +262,7 @@
} }
.urgent { .urgent {
height: 120px;
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -280,6 +286,15 @@
} }
} }
} }
.date {
p {
font-size: 16px;
}
span {
font-size: 21px;
}
}
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
@ -292,10 +307,6 @@
} }
} }
.left-container {
height: fit-content;
}
.todo-done, .todo-done,
.urgent, .urgent,
.tasks { .tasks {

8
src/app/shared/components/header/header.component.html
View file

@ -2,8 +2,12 @@
<img class="logo" src="./../../../../assets/img/header/logo.svg" alt="logo" /> <img class="logo" src="./../../../../assets/img/header/logo.svg" alt="logo" />
<div class="headline">{{ "header.headline" | translate }}</div> <div class="headline">{{ "header.headline" | translate }}</div>
<div class="navbar"> <div class="navbar">
<div class="img-help" routerLink="help"> <div class="img-help">
<img src="./../../../../assets/img/header/help.svg" alt="" /> <img
routerLink="help"
src="./../../../../assets/img/header/help.svg"
alt=""
/>
</div> </div>
<div class="img-language"> <div class="img-language">
<img <img

28
src/assets/i18n/de.json
View file

@ -27,18 +27,28 @@
"morning": "Guten Morgen", "morning": "Guten Morgen",
"afternoon": "Guten Tag", "afternoon": "Guten Tag",
"evening": "Guten Abend", "evening": "Guten Abend",
"todo": "Zu tun", "todo": "Erledigen",
"done": "Fertig", "done": "Erledigt",
"urgent": "Dringend", "urgent": "Dringend",
"upcomingDeadline": "Bevorstehende Frist", "upcomingDeadline": "Nächster Termin",
"noDeadline": "Keine Fristen", "noDeadline": "Keine Termine",
"taskBoard0": "Aufgaben", "taskBoard0": "Aktuelle",
"taskBoard1": "im Brett", "taskBoard1": "Aufgaben",
"taskProgress0": "Laufende", "taskProgress0": "Aufgaben in",
"taskProgress1": "Aufgaben", "taskProgress1": "Bearbeitung",
"taskAwaitingFeedback0": "Warten auf", "taskAwaitingFeedback0": "Warte auf",
"taskAwaitingFeedback1": "Rückmeldung" "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": { "help": {
"header": "Hilfe", "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.", "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.",

10
src/assets/i18n/en.json
View file

@ -39,6 +39,16 @@
"taskAwaitingFeedback0": "Awaiting", "taskAwaitingFeedback0": "Awaiting",
"taskAwaitingFeedback1": "Feedback" "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": { "help": {
"header": "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.", "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.",