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

style: refine layout and UI elements for improved visual consistency

Browse source
This commit is contained in:
Chneemann 2025-04-20 08:46:32 +02:00
parent 28acea1663
commit f895e2900b
14 changed files with 43 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/auth/auth.component.scss
View file

@ -3,7 +3,7 @@
@use "./../../../assets/style/auth-layout.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(./../../../assets/img/backgrounds/home.png);
}

2
frontend/src/app/components/auth/forgot-password/forgot-password.component.scss
View file

@ -2,6 +2,6 @@
@use "./../../../../assets/style/auth-layout.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/login.png);
}

6
frontend/src/app/components/auth/login/login.component.scss
View file

@ -4,7 +4,7 @@
@use "./../../../../assets/style/checkbox.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/login.png);
}
@ -24,7 +24,6 @@ section {
a {
font-size: 18px;
font-weight: 700;
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover {
@ -38,8 +37,7 @@ section {
gap: 24px;
p {
font-size: 18px;
font-weight: 700;
color: $black;
font-weight: 400;
}
}
}

2
frontend/src/app/components/auth/register/register.component.scss
View file

@ -3,6 +3,6 @@
@use "./../../../../assets/style/checkbox.scss" as *;
section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url(./../../../../assets/img/backgrounds/register.png);
}

4
frontend/src/app/components/home/browse/browse.component.html
View file

@ -5,7 +5,7 @@
@if (playMovie === "") {
<app-header
(moviesChange)="onMoviesChange($event)"
[browse]="true"
[showFullLogo]="false"
></app-header>
<!-- Hero Banner -->
<app-hero-banner
@ -99,7 +99,7 @@
</div>
} } @if (!isLoading && movies.length === 0) {
<!-- If the database is empty -->
<app-header [browse]="true"></app-header>
<app-header [showFullLogo]="false"></app-header>
<div class="error">
<h2>Unfortunately there are no films available in the database.</h2>
</div>

4
frontend/src/app/components/home/home.component.scss
View file

@ -1,4 +1,4 @@
section {
width: 100vw;
height: 100vh;
width: 100dvw;
height: 100dvh;
}

10
frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss
View file

@ -12,13 +12,13 @@
transition: 300ms ease-in-out;
cursor: pointer;
p {
color: white;
color: $white;
font-size: 18px;
font-weight: 600;
margin: 0 4px 0 0;
}
&:not(:disabled):hover {
background-color: white;
background-color: $white;
border: 1px solid $pure-blue;
p {
transition: 300ms ease-in-out;
@ -31,9 +31,9 @@
}
}
&:disabled {
background-color: lightblue;
color: color-mix(in srgb, white 90%, black 10%);
border: 1px solid lightblue;
background-color: $dark-gray;
color: color-mix(in srgb, $white 90%, $black 10%);
border: 1px solid $dark-gray;
cursor: default;
}
.icon {

8
frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss
View file

@ -13,7 +13,7 @@
transition: 300ms ease-in-out;
cursor: pointer;
&:not(:disabled):hover {
background-color: white;
background-color: $white;
border: 1px solid $pure-blue;
.icon {
transition: 300ms ease-in-out;
@ -22,9 +22,9 @@
}
}
&:disabled {
background-color: lightblue;
color: color-mix(in srgb, white 90%, black 10%);
border: 1px solid lightblue;
background-color: $dark-gray;
color: color-mix(in srgb, $white 90%, $black 10%);
border: 1px solid $dark-gray;
cursor: default;
}
.icon {

22
frontend/src/app/shared/components/header/header.component.html
View file

@ -1,5 +1,15 @@
<header>
@if (browse) {
@if (showFullLogo) {
<div class="logo-full" routerLink="/">
<img src="./../../../../assets/img/logo_full.svg" alt="" />
</div>
<div class="logo-mobile" routerLink="/">
<img src="./../../../../assets/img/logo_ci.svg" alt="" />
</div>
<div class="btn">
<app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
</div>
} @else {
<div class="logo" (click)="backToOverview([])">
<img src="./../../../../assets/img/logo_ci.svg" alt="" />
</div>
@ -10,15 +20,5 @@
(click)="logout()"
></app-btn-large>
</div>
} @else {
<div class="logo-full" routerLink="/">
<img src="./../../../../assets/img/logo_full.svg" alt="" />
</div>
<div class="logo-mobile" routerLink="/">
<img src="./../../../../assets/img/logo_ci.svg" alt="" />
</div>
<div class="btn">
<app-btn-large [value]="'Log in'" routerLink="/login"></app-btn-large>
</div>
}
</header>

2
frontend/src/app/shared/components/header/header.component.ts
View file

@ -10,7 +10,7 @@ import { Router, RouterLink } from '@angular/router';
styleUrl: './header.component.scss',
})
export class HeaderComponent {
@Input() browse: boolean = false;
@Input() showFullLogo: boolean = true;
@Output() moviesChange = new EventEmitter<any[]>();
constructor(private router: Router) {}

15
frontend/src/assets/style/auth-layout.scss
View file

@ -10,8 +10,8 @@ section {
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
width: 100dvw;
height: 100dvh;
text-align: center;
background-size: cover;
background-position: center;
@ -21,20 +21,18 @@ section {
.content {
width: 520px;
height: fit-content;
padding: 43px 56px;
padding: 32px;
border-radius: 48px;
background-color: $white;
background-color: rgba(30, 28, 33, 0.85);
.headline {
font-size: 48px;
font-weight: 700;
color: $blue;
margin-bottom: 24px;
}
}
.note {
p {
color: $black;
font-size: 18px;
font-weight: 400;
margin: 36px 0 24px 0;
@ -42,7 +40,6 @@ section {
a {
font-size: 18px;
font-weight: 700;
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover {
@ -55,7 +52,7 @@ section {
@media screen and (max-width: 660px) {
.content {
padding: 43px 24px;
padding: 28px;
.headline {
font-size: 36px;
}
@ -70,6 +67,6 @@ section {
@media screen and (max-width: 400px) {
.content {
padding: 24px 18px;
padding: 24px;
}
}

12
frontend/src/assets/style/checkbox.scss
View file

@ -11,7 +11,6 @@
}
.container {
color: $black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -19,8 +18,7 @@
cursor: pointer;
a {
font-size: 16px;
font-weight: 400;
color: $blue;
font-weight: 700;
text-decoration: none;
cursor: pointer;
&:hover {
@ -43,14 +41,14 @@
left: 0;
height: 22px;
width: 22px;
box-shadow: 1px 1px 3px rgba($black, 0.3);
background-color: rgba($black, 0.1);
box-shadow: 1px 1px 3px rgba($white, 0.3);
background-color: rgba($white, 0.1);
transition: background-color 300ms ease-in-out;
}
.container:hover input ~ .checkmark {
box-shadow: 1px 1px 3px rgba($black, 0.5);
background-color: rgba($black, 0.3);
box-shadow: 1px 1px 3px rgba($white, 0.5);
background-color: rgba($white, 0.3);
}
.container input:checked ~ .checkmark {

1
frontend/src/assets/style/colors.scss
View file

@ -2,6 +2,7 @@
$white: #fff;
$black: #000;
$gray: #ababab;
$dark-gray: #5e5e5e;
$blue: #2e3edf;
$pure-blue: #0000ff;
$light-blue: #969eef;

3
frontend/src/assets/style/form.scss
View file

@ -12,7 +12,6 @@ form {
padding: 12px 18px;
box-sizing: border-box;
background: transparent;
color: $blue;
border: 1px solid $blue;
border-radius: 12px;
font-size: 18px;
@ -21,7 +20,7 @@ form {
transition: background-color 250ms ease-in-out, color 250ms ease-in-out,
border-color 250ms ease-in-out;
&::placeholder {
color: rgba($blue, 0.6);
color: rgba($white, 0.6);
}
&:focus {
outline: none;