clean code

This commit is contained in:
Chneemann 2024-05-26 19:23:53 +02:00
parent 54e766802f
commit 5f7667af30
12 changed files with 82 additions and 82 deletions

View file

@ -52,14 +52,6 @@
} }
} }
.dieableEdit {
color: rgba(0, 0, 0, 0.5) !important;
cursor: context-menu !important;
&:hover {
font-weight: 400 !important;
}
}
.closeBtn { .closeBtn {
display: flex; display: flex;
justify-content: center; justify-content: center;

View file

@ -1,5 +1,5 @@
<section (mouseleave)="mouseLeave()"> <section (mouseleave)="mouseLeave()">
<div [ngClass]="{ posiotionDataFromPc: hasFile, '': !hasFile }"> <div [ngClass]="{ positionDataFromPc: hasFile, '': !hasFile }">
@if(hasFile){ @if(hasFile){
<div <div
class="fileBox" class="fileBox"
@ -83,7 +83,7 @@
} @if(downloadFilesService.uploadFiles.length >= 1){ } @if(downloadFilesService.uploadFiles.length >= 1){
<p <p
[ngClass]="{ [ngClass]="{
showWanrningNotice: downloadFilesService.uploadFiles.length >= 1 showWarningNotice: downloadFilesService.uploadFiles.length >= 1
}" }"
class="warningMessage" class="warningMessage"
> >

View file

@ -47,10 +47,11 @@ section {
} }
} }
.sendIconDisabled{ .sendIconDisabled {
padding: 6px; padding: 6px;
transform: 0.3 ease-in-out; transform: 0.3 ease-in-out;
filter: brightness(0) saturate(100%) invert(78%) sepia(4%) saturate(4098%) hue-rotate(207deg) brightness(99%) contrast(98%); filter: brightness(0) saturate(100%) invert(78%) sepia(4%) saturate(4098%)
hue-rotate(207deg) brightness(99%) contrast(98%);
} }
.verticalLine { .verticalLine {
@ -86,7 +87,7 @@ app-emoji-picker {
z-index: 3; z-index: 3;
} }
.posiotionDataFromPc { .positionDataFromPc {
margin-top: -40px; margin-top: -40px;
display: flex; display: flex;
width: 60px; width: 60px;
@ -114,7 +115,7 @@ app-emoji-picker {
height: 100vh; height: 100vh;
} }
.showWanrningNotice { .showWarningNotice {
animation: shwoWN 0.3s ease-in-out; animation: shwoWN 0.3s ease-in-out;
} }
@ -176,7 +177,7 @@ app-emoji-picker {
display: flex; display: flex;
} }
.warningMessage{ .warningMessage {
color: red; color: red;
} }
@ -234,8 +235,8 @@ app-emoji-picker {
padding-bottom: 54px; padding-bottom: 54px;
margin: 12px; margin: 12px;
} }
.warningMessage{ .warningMessage {
font-size: 12px; font-size: 12px;
} }
} }

View file

@ -1,4 +1,4 @@
<div class="avatarSektion"> <section>
<app-start-header [display]="'none'"></app-start-header> <app-start-header [display]="'none'"></app-start-header>
<div class="avatarContainer"> <div class="avatarContainer">
<div class="avatarTop"> <div class="avatarTop">
@ -11,7 +11,7 @@
> >
</app-small-btn> </app-small-btn>
</div> </div>
<span>{{ 'chooseAvatar.header' | translate }}</span> <span>{{ "chooseAvatar.header" | translate }}</span>
</div> </div>
<div class="viewAvatarContainer"> <div class="viewAvatarContainer">
@ -29,7 +29,9 @@
/> />
</div> </div>
<div class="chooseAvatarContainer"> <div class="chooseAvatarContainer">
<div><span>{{ 'chooseAvatar.avatarInfo' | translate }}</span></div> <div>
<span>{{ "chooseAvatar.avatarInfo" | translate }}</span>
</div>
<div class="mobileImgContainer"> <div class="mobileImgContainer">
<img <img
(click)="chooseExistAvatar(i)" (click)="chooseExistAvatar(i)"
@ -41,17 +43,19 @@
</div> </div>
<div class="ownAvatarContainer"> <div class="ownAvatarContainer">
<div>{{ 'chooseAvatar.ownAvatar' | translate }}</div> <div>{{ "chooseAvatar.ownAvatar" | translate }}</div>
<div> <div>
<button class="BtnUpload" (click)="fileInput.click()"> <button class="BtnUpload" (click)="fileInput.click()">
{{ 'chooseAvatar.avatarBtn' | translate }} {{ "chooseAvatar.avatarBtn" | translate }}
</button> </button>
</div> </div>
</div> </div>
<div class="avatarBottom"> <div class="avatarBottom">
<button class="hoverBtn" (click)="loginService.register()">{{ 'chooseAvatar.Btn' | translate }}</button> <button class="hoverBtn" (click)="loginService.register()">
{{ "chooseAvatar.Btn" | translate }}
</button>
</div> </div>
</div> </div>
<app-footer></app-footer> <app-footer></app-footer>
</div> </section>

View file

@ -3,8 +3,8 @@
font-family: Nunito; font-family: Nunito;
} }
.avatarSektion { section {
@include SektionBody; @include SectionBody;
} }
.avatarContainer { .avatarContainer {
@include Card; @include Card;

View file

@ -77,11 +77,11 @@ export class ChooseAvatarComponent {
this.loginService.getAvatarUrl(url); this.loginService.getAvatarUrl(url);
}) })
.catch((error) => .catch((error) =>
console.error('Fehler beim Abrufen der Download-URL:', error) console.error('Error retrieving the download URL:', error)
); );
}) })
.catch((error) => { .catch((error) => {
console.error('Fehler beim Hochladen:', error); console.error('Upload error:', error);
}); });
} }

View file

@ -1,4 +1,4 @@
<div class="registerSektion"> <section>
<app-start-header [display]="'none'"></app-start-header> <app-start-header [display]="'none'"></app-start-header>
<div class="registerContainer"> <div class="registerContainer">
<div class="registerTop"> <div class="registerTop">
@ -12,12 +12,10 @@
> >
</app-small-btn> </app-small-btn>
</div> </div>
<span> {{ 'createAccount.header' | translate }}</span> <span> {{ "createAccount.header" | translate }}</span>
</div> </div>
<div class="registerInfoText"> <div class="registerInfoText">
<span <span>{{ "createAccount.infoText" | translate }}</span>
>{{ 'createAccount.infoText' | translate }}</span
>
</div> </div>
<form <form
(ngSubmit)="onSubmit(contactForm)" (ngSubmit)="onSubmit(contactForm)"
@ -38,7 +36,7 @@
[ngClass]="{ aktivInput: nameField.valid && nameField.touched }" [ngClass]="{ aktivInput: nameField.valid && nameField.touched }"
/> />
@if (!nameField.valid && nameField.touched) { @if (!nameField.valid && nameField.touched) {
<p class="error">{{ 'createAccount.errorText' | translate }}</p> <p class="error">{{ "createAccount.errorText" | translate }}</p>
} }
</div> </div>
<div class="inputContainer"> <div class="inputContainer">
@ -56,16 +54,16 @@
pattern="[^@]+@[^.]+\..+" pattern="[^@]+@[^.]+\..+"
/> />
@if (!emailField.valid && emailField.touched) { @if (!emailField.valid && emailField.touched) {
<p class="error">{{ 'createAccount.errorText2' | translate }}</p> <p class="error">{{ "createAccount.errorText2" | translate }}</p>
} }
</div> </div>
<div class="inputContainer"> <div class="inputContainer">
<img class="iconP" src="./assets/img/login/lock.png" alt="" /> <img class="iconP" src="./assets/img/login/lock.png" alt="" />
<input <input
class="inputField" class="inputField"
#passwordField="ngModel" #passwordField="ngModel"
minlength="6" minlength="6"
maxlength="16" maxlength="16"
[(ngModel)]="loginService.password" [(ngModel)]="loginService.password"
name="password" name="password"
placeholder="{{ 'createAccount.inputField3' | translate }}" placeholder="{{ 'createAccount.inputField3' | translate }}"
@ -78,10 +76,15 @@
cols="30" cols="30"
rows="10" rows="10"
/> />
<img class="passwordEye" (click)="loginService.togglePasswordVisibility()" [src]="loginService.passwordIcon" alt="Toggle visibility"> <img
class="passwordEye"
(click)="loginService.togglePasswordVisibility()"
[src]="loginService.passwordIcon"
alt="Toggle visibility"
/>
@if (!passwordField.valid && passwordField.touched) { @if (!passwordField.valid && passwordField.touched) {
<p class="error"> <p class="error">
{{ 'createAccount.errorText3' | translate }} {{ "createAccount.errorText3" | translate }}
</p> </p>
} }
</div> </div>
@ -97,10 +100,10 @@
/> />
</div> </div>
<span <span
>{{ 'createAccount.midText' | translate }} >{{ "createAccount.midText" | translate }}
<span class="fontColor" routerLink="/privacy-policy" <span class="fontColor" routerLink="/privacy-policy"
>{{ 'createAccount.midText2' | translate }} </span >{{ "createAccount.midText2" | translate }} </span
>{{ 'createAccount.midText3' | translate }}</span >{{ "createAccount.midText3" | translate }}</span
> >
</div> </div>
<div class="registerBottom"> <div class="registerBottom">
@ -108,10 +111,10 @@
[ngClass]="{ aktivButton: isChecked && contactForm.valid }" [ngClass]="{ aktivButton: isChecked && contactForm.valid }"
[disabled]="!isChecked || !contactForm.valid" [disabled]="!isChecked || !contactForm.valid"
> >
{{ 'createAccount.Btn' | translate }} {{ "createAccount.Btn" | translate }}
</button> </button>
</div> </div>
</form> </form>
</div> </div>
<app-footer></app-footer> <app-footer></app-footer>
</div> </section>

View file

@ -1,6 +1,6 @@
@import "../../../shared/components/login/mixins/mixin.scss"; @import "../../../shared/components/login/mixins/mixin.scss";
.registerSektion { section {
@include SektionBody; @include SectionBody;
} }
.registerContainer { .registerContainer {
@include Card; @include Card;

View file

@ -9,23 +9,25 @@
z-index: 5; z-index: 5;
top: 110px; top: 110px;
right: 20px; right: 20px;
@include displayFlex();
flex-direction: column;
padding: 24px; padding: 24px;
.boxHeader { form {
width: 360px; @include displayFlex();
@include displayFlex($j: space-between); flex-direction: column;
} .boxHeader {
.profileImg { width: 360px;
width: 200px; @include displayFlex($j: space-between);
height: 200px; }
object-fit: cover; .profileImg {
border-radius: 50%; width: 200px;
margin: 56px; height: 200px;
} object-fit: cover;
p { border-radius: 50%;
color: red; margin: 56px;
margin-bottom: 16px; }
p {
color: red;
margin-bottom: 16px;
}
} }
} }
@ -140,23 +142,26 @@
right: 15vw; right: 15vw;
left: 15vw; left: 15vw;
padding: 24px; padding: 24px;
.boxHeader { form {
width: 100%; .boxHeader {
padding: 0 12px; width: 100%;
padding: 0 12px;
p {
font-size: 21px;
font-weight: 700;
}
}
.profileImg {
width: 120px;
height: 120px;
margin: 18px;
}
p { p {
font-size: 21px; font-size: 13px;
font-weight: 700;
} }
} }
.profileImg {
width: 120px;
height: 120px;
margin: 18px;
}
p {
font-size: 13px;
}
} }
.detailsBox { .detailsBox {
width: 100%; width: 100%;
padding: 0 12px; padding: 0 12px;

View file

@ -11,7 +11,7 @@
(click)="closeCurrentProfile()" (click)="closeCurrentProfile()"
></app-small-btn> ></app-small-btn>
</div> </div>
<img src="{{ i.avatar }}" class="profileImg" (click)="showSideMenu()" /> <img src="{{ i.avatar }}" class="profileImg" />
<div class="detailsBox"> <div class="detailsBox">
<div class="editBtnPosition"> <div class="editBtnPosition">
<p class="name">{{ i.firstName }} {{ i.lastName }}</p> <p class="name">{{ i.firstName }} {{ i.lastName }}</p>

View file

@ -27,11 +27,6 @@ export class EditUserComponent {
constructor(public userService: UserService) {} constructor(public userService: UserService) {}
/** Toggles the side menu. */
showSideMenu() {
this.openEditUserValue = !this.openEditUserValue;
}
/** Opens the edit user section. */ /** Opens the edit user section. */
openEditUser() { openEditUser() {
this.openEditUserValue = true; this.openEditUserValue = true;

View file

@ -1,4 +1,4 @@
@mixin SektionBody { @mixin SectionBody {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;