clean code design
This commit is contained in:
Chneemann
parent
d2e6f3f519
commit
36ae9dc0dd
14 changed files with 124 additions and 186 deletions
|
|
@ -1,12 +1,10 @@
|
|||
<div [ngClass]="{ 'blur-background': sharedService.isAnyDialogOpen }">
|
||||
<div class="container">
|
||||
<app-sidebar></app-sidebar>
|
||||
<main>
|
||||
<app-header></app-header>
|
||||
<div class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</main>
|
||||
<app-header></app-header>
|
||||
<div class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
<app-sidebar-mobile></app-sidebar-mobile>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
app-header {
|
||||
position: fixed;
|
||||
left: 232px;
|
||||
height: 96px;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
app-sidebar {
|
||||
width: 232px;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
app-sidebar-mobile {
|
||||
|
|
@ -16,24 +24,13 @@ app-sidebar-mobile {
|
|||
height: 80px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
min-width: calc(100vw - 232px);
|
||||
}
|
||||
|
||||
app-header {
|
||||
height: 96px;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: calc(100% - 128px);
|
||||
min-width: calc(100vw - 296px);
|
||||
height: 100vh;
|
||||
padding: 64px 0 0 64px;
|
||||
position: fixed;
|
||||
top: 96px;
|
||||
left: 232px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 64px;
|
||||
background-color: var(--bgContent);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -44,20 +41,13 @@ app-header {
|
|||
|
||||
@media screen and (max-width: 910px) {
|
||||
.main-content {
|
||||
position: absolute;
|
||||
top: 96px;
|
||||
width: calc(100vw - 64px);
|
||||
height: calc(100vh - 240px);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
main {
|
||||
min-width: calc(100vw);
|
||||
left: 0;
|
||||
bottom: 80px;
|
||||
}
|
||||
|
||||
app-header {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
app-sidebar {
|
||||
|
|
@ -65,14 +55,12 @@ app-header {
|
|||
}
|
||||
|
||||
app-sidebar-mobile {
|
||||
position: fixed;
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.main-content {
|
||||
width: calc(100vw - 32px);
|
||||
padding: 32px 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,3 @@
|
|||
section {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
left: 339px;
|
||||
width: calc(100vw - 747px);
|
||||
min-height: calc(100vh - 208px);
|
||||
padding: 64px 48px 48px 48px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -189,45 +180,11 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
section {
|
||||
position: unset;
|
||||
box-shadow: unset;
|
||||
width: calc(100vw - 312px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-right: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
section {
|
||||
width: calc(100vw - 296px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 910px) {
|
||||
section {
|
||||
width: calc(100vw - 48px);
|
||||
min-height: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.btns {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section {
|
||||
width: calc(100vw - 36px);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -53,8 +53,10 @@
|
|||
} }
|
||||
</div>
|
||||
</div>
|
||||
<app-contact-detail
|
||||
[ngClass]="{ 'd-none': !showAllUsers && currentUserId == undefined }"
|
||||
[currentUserId]="currentUserId"
|
||||
></app-contact-detail>
|
||||
<div class="right-frame">
|
||||
<app-contact-detail
|
||||
[ngClass]="{ 'd-none': !showAllUsers && currentUserId == undefined }"
|
||||
[currentUserId]="currentUserId"
|
||||
></app-contact-detail>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
section {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-inside {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -39,17 +33,25 @@ section {
|
|||
}
|
||||
|
||||
.left-frame {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
left: -64px;
|
||||
position: fixed;
|
||||
top: 96px;
|
||||
left: 232px;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
min-height: calc(100vh - 128px);
|
||||
height: 100%;
|
||||
background-color: var(--white);
|
||||
padding-top: 32px;
|
||||
box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
|
||||
overflow: auto;
|
||||
}
|
||||
.right-frame {
|
||||
position: fixed;
|
||||
top: 96px;
|
||||
left: 632px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 32px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
|
@ -119,7 +121,7 @@ section {
|
|||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%; /* Adjust this width as necessary */
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 20px;
|
||||
|
|
@ -145,11 +147,17 @@ section {
|
|||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.left-frame {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
left: -64px;
|
||||
width: calc(100vw - 232px);
|
||||
right: 0;
|
||||
width: auto;
|
||||
background-color: var(--bgContent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.right-frame {
|
||||
top: 96px;
|
||||
left: 232px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.contact {
|
||||
|
|
@ -161,10 +169,15 @@ section {
|
|||
|
||||
@media screen and (max-width: 910px) {
|
||||
.left-frame {
|
||||
left: 0;
|
||||
bottom: 80px;
|
||||
padding: 0;
|
||||
left: -16px;
|
||||
width: calc(100vw - 16px);
|
||||
min-height: calc(100vh - 176px);
|
||||
}
|
||||
|
||||
.right-frame {
|
||||
top: 96px;
|
||||
left: 0;
|
||||
bottom: 80px;
|
||||
}
|
||||
|
||||
.btn-inside {
|
||||
|
|
@ -194,10 +207,8 @@ section {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.left-frame {
|
||||
top: -32px;
|
||||
left: -16px;
|
||||
width: calc(100vw);
|
||||
.right-frame {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.first-letter {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
section {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -192,11 +188,11 @@ section {
|
|||
.header {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
padding-left: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.metrics-txt {
|
||||
padding-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.blue-bar {
|
||||
position: absolute;
|
||||
|
|
@ -209,16 +205,16 @@ section {
|
|||
|
||||
@media screen and (max-width: 650px) {
|
||||
.left-container {
|
||||
width: calc(100vw - 80px);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.todo-done,
|
||||
.urgent,
|
||||
.tasks {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
height: 150px;
|
||||
border-radius: 30px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
|
@ -227,6 +223,8 @@ section {
|
|||
|
||||
.urgent {
|
||||
margin: 20px 0;
|
||||
padding: 6px;
|
||||
width: auto;
|
||||
img {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
|
@ -285,15 +283,6 @@ section {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
section {
|
||||
width: calc(100vw - 48px);
|
||||
}
|
||||
|
||||
.left-container {
|
||||
width: calc(100vw - 32px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
.title {
|
||||
font-size: 47px;
|
||||
|
|
@ -303,11 +292,16 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.left-container {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.todo-done,
|
||||
.urgent,
|
||||
.tasks {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 30px;
|
||||
padding: 6px;
|
||||
.line {
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -321,17 +315,21 @@ section {
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks {
|
||||
height: 120px;
|
||||
border-radius: 30px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.details {
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 365px) {
|
||||
.todo-done,
|
||||
.urgent,
|
||||
.tasks {
|
||||
|
|
@ -351,10 +349,10 @@ section {
|
|||
|
||||
.date {
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
<section>
|
||||
<div class="header">
|
||||
<img
|
||||
class="logo"
|
||||
src="./../../../../assets/img/header/logo.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
<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="" />
|
||||
</div>
|
||||
<div class="img-language" (click)="toggleLanguage()">
|
||||
<img src="./../../../../assets/img/header/language.svg" alt="" />
|
||||
</div>
|
||||
<div class="img-user" (click)="toggleNavbar()">
|
||||
{{
|
||||
this.userService.getUserDetails(
|
||||
userService.getCurrentUserId(),
|
||||
"initials"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div class="header">
|
||||
<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>
|
||||
<div class="img-language">
|
||||
<img
|
||||
class="img-lang"
|
||||
(click)="toggleLanguage()"
|
||||
src="./../../../../assets/img/header/language.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="img-user" (click)="toggleNavbar()">
|
||||
{{
|
||||
this.userService.getUserDetails(
|
||||
userService.getCurrentUserId(),
|
||||
"initials"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<app-navbar *ngIf="navbarVisible" [navbarVisible]="navbarVisible"></app-navbar>
|
||||
<app-navbar
|
||||
*ngIf="navbarLanguageVisible"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
section {
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 232px);
|
||||
height: 93px;
|
||||
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -15,10 +12,9 @@ section {
|
|||
padding-left: 116px;
|
||||
}
|
||||
|
||||
.left-frame {
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -62,9 +58,14 @@ section {
|
|||
/*------------- RESPONSIVE -------------*/
|
||||
|
||||
@media screen and (max-width: 910px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class HeaderComponent {
|
|||
}
|
||||
if (
|
||||
!targetElement.closest('app-navbar') &&
|
||||
!targetElement.closest('.img-language')
|
||||
!targetElement.closest('.img-lang')
|
||||
) {
|
||||
this.navbarLanguageVisible = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
section {
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
padding-right: 64px;
|
||||
margin-bottom: 32px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--gray);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
section {
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
padding-right: 64px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -29,20 +29,18 @@
|
|||
[ngClass]="{
|
||||
active: langService.currentLang === 'en'
|
||||
}"
|
||||
(click)="langService.switchLanguage('en')"
|
||||
>
|
||||
<span (click)="langService.switchLanguage('en')">{{
|
||||
"navbar.english" | translate
|
||||
}}</span>
|
||||
<span>{{ "navbar.english" | translate }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="link"
|
||||
[ngClass]="{
|
||||
active: langService.currentLang === 'de'
|
||||
}"
|
||||
(click)="langService.switchLanguage('de')"
|
||||
>
|
||||
<span (click)="langService.switchLanguage('de')">{{
|
||||
"navbar.german" | translate
|
||||
}}</span>
|
||||
<span>{{ "navbar.german" | translate }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.navbar {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 96px;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
border-radius: 20px 0 20px 20px;
|
||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.language {
|
||||
|
|
@ -52,8 +52,3 @@ span {
|
|||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/*------------- RESPONSIVE -------------*/
|
||||
|
||||
@media screen and (max-width: 910px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
section {
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
padding-right: 64px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
Loading…
Reference in a new issue