responsive design & translate
This commit is contained in:
Chneemann
parent
a4ff000e23
commit
6fd7c76c24
10 changed files with 132 additions and 99 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue