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 *; @use "./../../../assets/style/auth-layout.scss" as *;
section { 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); 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 *; @use "./../../../../assets/style/auth-layout.scss" as *;
section { 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); 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 *; @use "./../../../../assets/style/checkbox.scss" as *;
section { 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); url(./../../../../assets/img/backgrounds/login.png);
} }
@ -24,7 +24,6 @@ section {
a { a {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $blue;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -38,8 +37,7 @@ section {
gap: 24px; gap: 24px;
p { p {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 400;
color: $black;
} }
} }
} }

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

@ -3,6 +3,6 @@
@use "./../../../../assets/style/checkbox.scss" as *; @use "./../../../../assets/style/checkbox.scss" as *;
section { 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); url(./../../../../assets/img/backgrounds/register.png);
} }

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

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

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

@ -1,4 +1,4 @@
section { section {
width: 100vw; width: 100dvw;
height: 100vh; 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; transition: 300ms ease-in-out;
cursor: pointer; cursor: pointer;
p { p {
color: white; color: $white;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin: 0 4px 0 0; margin: 0 4px 0 0;
} }
&:not(:disabled):hover { &:not(:disabled):hover {
background-color: white; background-color: $white;
border: 1px solid $pure-blue; border: 1px solid $pure-blue;
p { p {
transition: 300ms ease-in-out; transition: 300ms ease-in-out;
@ -31,9 +31,9 @@
} }
} }
&:disabled { &:disabled {
background-color: lightblue; background-color: $dark-gray;
color: color-mix(in srgb, white 90%, black 10%); color: color-mix(in srgb, $white 90%, $black 10%);
border: 1px solid lightblue; border: 1px solid $dark-gray;
cursor: default; cursor: default;
} }
.icon { .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; transition: 300ms ease-in-out;
cursor: pointer; cursor: pointer;
&:not(:disabled):hover { &:not(:disabled):hover {
background-color: white; background-color: $white;
border: 1px solid $pure-blue; border: 1px solid $pure-blue;
.icon { .icon {
transition: 300ms ease-in-out; transition: 300ms ease-in-out;
@ -22,9 +22,9 @@
} }
} }
&:disabled { &:disabled {
background-color: lightblue; background-color: $dark-gray;
color: color-mix(in srgb, white 90%, black 10%); color: color-mix(in srgb, $white 90%, $black 10%);
border: 1px solid lightblue; border: 1px solid $dark-gray;
cursor: default; cursor: default;
} }
.icon { .icon {

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

@ -1,5 +1,15 @@
<header> <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([])"> <div class="logo" (click)="backToOverview([])">
<img src="./../../../../assets/img/logo_ci.svg" alt="" /> <img src="./../../../../assets/img/logo_ci.svg" alt="" />
</div> </div>
@ -10,15 +20,5 @@
(click)="logout()" (click)="logout()"
></app-btn-large> ></app-btn-large>
</div> </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> </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', styleUrl: './header.component.scss',
}) })
export class HeaderComponent { export class HeaderComponent {
@Input() browse: boolean = false; @Input() showFullLogo: boolean = true;
@Output() moviesChange = new EventEmitter<any[]>(); @Output() moviesChange = new EventEmitter<any[]>();
constructor(private router: Router) {} constructor(private router: Router) {}

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

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

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

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

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

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

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

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