sandkasten
/
sandkasten-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the Header and Landing Page responsive and the Light/Dark mode.

Browse Source
pull/5/head
Colin FRIZOT 1 year ago
parent d51cb3957f
commit b7aeed4321
13 changed files with 513 additions and 82 deletions
Show Stats Download Patch File Download Diff File

4
src/app/app.component.html
Unescape View File

@ -1,9 +1,7 @@
<body [ngClass]="themeClass"> <body [ngClass]="themeClass">
<div [ngClass]="themeClass" class="app"> <div [ngClass]="themeClass" class="app">
<button (click)="toggleTheme()">Toggle Theme</button>
<header> <header>
<app-header [ngClass]="themeClass" [themeClass]="themeClass"></app-header> <app-header [ngClass]="themeClass" [themeClass]="themeClass" [themeService]="themeService"></app-header>
</header> </header>
<main> <main>

8
src/app/app.component.scss
Unescape View File

@ -1,15 +1,19 @@
@import '../styles'; @import '../styles';
body {
overflow: hidden;
transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
body.light-theme { body.light-theme {
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
/* Autres styles pour le thème clair */
} }
body.dark-theme { body.dark-theme {
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
/* Autres styles pour le thème sombre */
} }
.app { .app {

2
src/app/app.component.ts
Unescape View File

@ -9,7 +9,7 @@ import { ThemeService } from './services/theme.service';
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
themeClass = 'light-theme'; themeClass = 'light-theme';
constructor(private themeService: ThemeService) {} constructor(public themeService: ThemeService) {}
ngOnInit() { ngOnInit() {
this.themeService.isDarkTheme.subscribe((isDark) => { this.themeService.isDarkTheme.subscribe((isDark) => {

86
src/app/components/header/header.component.html
Unescape View File

@ -10,13 +10,11 @@
</div> </div>
<div class="right_part"> <div class="right_part">
<nav class="right_part--menu"> <div class="right_part--menu_mobile" (click)="openCloseMenu(); $event.stopPropagation();">
<a Menu
routerLink="" </div>
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'HeaderPage.Home' | translate }} </a>
<nav class="right_part--menu">
<a <a
routerLink="editor" routerLink="editor"
routerLinkActive="active" routerLinkActive="active"
@ -36,10 +34,24 @@
>{{ 'HeaderPage.Contact' | translate }}</a> >{{ 'HeaderPage.Contact' | translate }}</a>
</nav> </nav>
<select (change)="onLanguageChange($event)"> <div class="right_part--bottom">
<div class="right_part--toggles">
<div class="wrapper">
<div class="toggle">
<input class="toggle-input" type="checkbox" (click)="toggleTheme()" [checked]="isCheck"/>
<div class="toggle-bg"></div>
<div class="toggle-switch">
<div class="toggle-switch-figure"></div>
<div class="toggle-switch-figureAlt"></div>
</div>
</div>
</div>
<select class="right_part__lang" (change)="onLanguageChange($event)">
<option value="fr">🇫🇷 Français</option> <option value="fr">🇫🇷 Français</option>
<option value="en">🇬🇧 English</option> <option value="en">🇬🇧 English</option>
</select> </select>
</div>
<div class="right_part__connexion"> <div class="right_part__connexion">
<!--Login--> <!--Login-->
@ -63,4 +75,64 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mobile_menu" [ngClass]="{'opened': isMenuOpen}" #menuRef>
<div class="mobile_menu--wrapper">
<div class="mobile_menu--toggles">
<div class="wrapper">
<div class="toggle">
<input class="toggle-input" type="checkbox" (click)="toggleTheme()" [checked]="isCheck"/>
<div class="toggle-bg"></div>
<div class="toggle-switch">
<div class="toggle-switch-figure"></div>
<div class="toggle-switch-figureAlt"></div>
</div>
</div>
</div>
<select class="right_part__lang" (change)="onLanguageChange($event)">
<option value="fr">🇫🇷 Français</option>
<option value="en">🇬🇧 English</option>
</select>
</div>
<nav class="mobile_menu--menu">
<a
routerLink="editor"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'HeaderPage.Editor' | translate }}</a>
<a
routerLink="documentation"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'HeaderPage.Documentation' | translate }}</a>
<a
routerLink="contact"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'HeaderPage.Contact' | translate }}</a>
</nav>
<div class="mobile_menu__connexion">
<!--Login-->
<div class="right_part__connexion--login">
<span>Log In</span>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_67_222)">
<path d="M15 28.8462C11.4456 28.8462 8.214 27.495 5.7624 25.2936C7.1148 22.0764 10.2576 20.3334 14.9862 20.3334C19.7196 20.3334 22.8696 22.1598 24.231 25.3842C21.7806 27.5796 18.5484 28.8462 15 28.8462ZM15.1668 7.6662C18.123 7.6662 20.3334 9.9534 20.3334 12.993C20.3334 16.119 18.0084 18.6666 15.1668 18.6666C12.3252 18.6666 10.0002 16.119 10.0002 12.993C10.0002 9.9534 12.2106 7.6662 15.1668 7.6662ZM15 0C6.7158 0 0 6.7158 0 15C0 15.549 0.0336 16.0896 0.0912 16.623C0.1104 16.8 0.1458 16.9716 0.171 17.1468C0.222 17.5002 0.2748 17.8524 0.3498 18.1974C0.3936 18.4002 0.4512 18.5964 0.5034 18.7956C0.5844 19.1046 0.6672 19.4118 0.7668 19.713C0.8352 19.9182 0.9126 20.118 0.9888 20.319C1.0968 20.6046 1.2102 20.886 1.335 21.1626C1.4244 21.3612 1.5198 21.5568 1.6182 21.7506C1.7532 22.0182 1.896 22.2804 2.0466 22.5384C2.1558 22.7256 2.2656 22.9098 2.3826 23.0916C2.5458 23.3454 2.7186 23.5908 2.8962 23.8338C3.0204 24.0042 3.1422 24.1746 3.2736 24.3384C3.4686 24.5832 3.6762 24.816 3.8856 25.0476C4.0176 25.194 4.1448 25.344 4.2828 25.4844C4.5258 25.7334 4.7826 25.965 5.0418 26.196C5.1456 26.2884 5.2392 26.391 5.346 26.481L5.3484 26.4744C8.04719 28.7544 11.467 30.0036 15 30C18.5284 30.004 21.9442 28.7581 24.6414 26.4834C24.6421 26.4854 24.6427 26.4874 24.6432 26.4894C24.7464 26.403 24.8376 26.304 24.9372 26.2146C25.2024 25.9794 25.4652 25.7424 25.713 25.4892C25.8498 25.35 25.9752 25.2018 26.106 25.0572C26.3172 24.8238 26.5266 24.5892 26.7228 24.3426C26.8536 24.1794 26.9754 24.009 27.099 23.8398C27.2772 23.5968 27.4512 23.3502 27.6144 23.0958C28.0087 22.4779 28.3592 21.8331 28.6632 21.1662C28.788 20.8896 28.902 20.6082 29.0106 20.3226C29.0868 20.121 29.1642 19.9212 29.232 19.7154C29.3322 19.4142 29.415 19.107 29.496 18.7974C29.5482 18.5982 29.6058 18.402 29.6496 18.1998C29.7252 17.8542 29.778 17.5014 29.829 17.1474C29.8542 16.9722 29.8896 16.8012 29.9088 16.6242C29.9658 16.0902 30 15.5496 30 15C30 6.7158 23.2842 0 15 0Z" fill="#605FFC"/>
</g>
<defs>
<clipPath id="clip0_67_222">
<rect width="30" height="30" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<!--Register-->
<div class="right_part__connexion--register">
<span>Register Now</span>
</div>
</div>
</div>
</div>
</div>

316
src/app/components/header/header.component.scss
Unescape View File

@ -1,17 +1,61 @@
@import '../../../styles'; @import '../../../styles';
//region Colors
$color-sun: #E4C74D;
$color-cloud-inner: #FFFFFF;
$color-cloud-outer: #D4D4D2;
$color-parent-outer: #81C0D5;
$color-parent-inner: #C0E6F6;
$color-moon-inner: #FFFDF2;
$color-moon-outer: #DEE1C5;
$color-stars: #FCFCFC;
// endregion
//region Mixins
@mixin crater($top, $left, $size) {
content: '';
position: absolute;
top: $top;
left: $left;
width: $size;
height: $size;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid $color-moon-outer;
}
@mixin cloudBubble($top, $right, $width, $height, $deg) {
content: '';
display: block;
position: relative;
top: $top;
right: $right;
width: $width;
height: $height;
border: 8px solid $color-cloud-outer;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotateZ($deg);
background-color: $color-cloud-inner;
}
//endregion
$theme-transition: all .3s ease-in-out;
.header { .header {
padding: 0 1rem; position: relative;
padding: 1rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 4rem; gap: 2rem;
.left_part { .left_part {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 4rem;
&__logo { &__logo {
&--container{ &--container{
@ -28,6 +72,130 @@
} }
} }
.right_part, .mobile_menu {
// Dark mode button
.wrapper {
text-align: center;
.toggle {
position: relative;
display: inline-block;
width: 100px;
padding: 4px;
border-radius: 40px;
}
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
.toggle-bg {
position: absolute;
top: -4px;
left: -4px;
width: 100%;
height: 100%;
background-color: $color-parent-inner;
border-radius: 40px;
border: 4px solid $color-parent-outer;
transition: all .1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid red;
border-radius: 40px;
z-index: 2;
opacity: 0;
&:checked ~ .toggle-switch {
margin-left: 0;
border-color: $color-moon-outer;
background-color: $color-moon-inner;
}
&:checked ~ .toggle-bg {
background-color: #484848;
border-color: #202020;
}
&:checked ~ .toggle-switch .toggle-switch-figure {
margin-left: 40px;
opacity: 0;
transform: scale(0.1);
}
&:checked ~ .toggle-switch .toggle-switch-figureAlt {
transform: scale(1);
}
}
.toggle-switch {
position: relative;
width: 30px;
height: 30px;
margin-left: 60px;
background-color: #F5EB42;
border: 4px solid $color-sun;
border-radius: 50%;
transition: all .1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
.toggle-switch-figure {
position: absolute;
bottom: -14px;
left: -50px;
display: block;
width: 80px;
height: 30px;
border: 8px solid $color-cloud-outer;
border-radius: 20px;
background-color: #fff;
transform: scale(0.4);
transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940);
&:after {
@include cloudBubble(-65px, -42px, 15px, 15px, 70deg);
}
&:before {
@include cloudBubble(-25px, -10px, 30px, 30px, 30deg);
}
}
.toggle-switch-figureAlt {
@include crater(5px, 2px, 2px);
box-shadow:
42px -7px 0 -3px $color-stars,
75px -10px 0 -3px $color-stars,
54px 4px 0 -4px $color-stars,
83px 7px 0 -2px $color-stars,
63px 18px 0 -4px $color-stars,
44px 23px 0 -2px $color-stars,
78px 21px 0 -3px $color-stars;
transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: scale(0);
&:before {
@include crater(-6px, 12px, 7px);
}
&:after {
@include crater(10px, 6px, 2px);
}
}
}
}
}
.right_part { .right_part {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -37,25 +205,55 @@
&--menu { &--menu {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
a { a {
color: $color-black; color: $color-black;
text-decoration: none; text-decoration: none;
white-space: nowrap;
transition: $theme-transition;
} }
} }
&__connexion { &--menu_mobile {
cursor: pointer;
display: none;
z-index: 100;
}
&--bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2rem; gap: 2rem;
align-items: center;
}
&--toggles {
display: flex;
flex-direction: row;
gap: 2rem;
align-items: center;
}
&__lang {
height: fit-content;
}
&__connexion {
display: flex;
flex-direction: row;
gap: 1rem;
&--login { &--login {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: .5rem;
color: $color-purple; color: $color-purple;
white-space: nowrap;
} }
&--register { &--register {
@ -63,9 +261,70 @@
border: 1px solid $color-black; border: 1px solid $color-black;
border-radius: 10px; border-radius: 10px;
padding: .75rem 2rem; padding: .75rem 2rem;
white-space: nowrap;
transition: border .3s ease-in-out;
} }
} }
} }
.mobile_menu {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100vh;
background: $color-white;
transform: translateX(100%);
z-index: 99;
transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, background .3s ease-in-out;
&.opened {
transform: translateX(0);
box-shadow: $color-black 0 0 5px 0;
}
&--wrapper {
//padding-top: 6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3rem;
height: 100%;
}
&--toggles {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
&--menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
a {
color: $color-black;
text-decoration: none;
white-space: nowrap;
transition: $theme-transition;
}
}
&__connexion {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
} }
.dark-theme { .dark-theme {
@ -81,11 +340,58 @@
} }
} }
} }
.mobile_menu {
background: $color-light-black;
&.opened {
box-shadow: $color-white 0 0 5px 0;
}
&--menu {
a {
color: $color-white;
}
}
&__connexion {
&--register {
border-color: $color-white;
}
}
}
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.header {
.right_part {
flex-direction: column-reverse;
&--menu_mobile {
display: flex;
}
&--menu {
display: none;
}
&__connexion {
display: none;
}
&--toggles {
display: none;
}
}
}
}
@media(max-width: 767px) {
.header {
.mobile_menu {
width: 75%;
}
}
} }

32
src/app/components/header/header.component.ts
Unescape View File

@ -1,5 +1,6 @@
import {Component, Input, OnInit} from '@angular/core'; import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
import { TranslationService } from '../../services/translation.service'; import { TranslationService } from '../../services/translation.service';
import {ThemeService} from "../../services/theme.service";
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
@ -11,13 +12,22 @@ export class HeaderComponent implements OnInit {
version!: string; version!: string;
sandkasten_logo!: string; sandkasten_logo!: string;
gitea_logo!: string; gitea_logo!: string;
isMenuOpen!: boolean;
isCheck!: boolean;
@ViewChild('menuRef') menuRef!: ElementRef;
@Input() themeClass!: string; @Input() themeClass!: string;
@Input() themeService!: ThemeService;
ngOnInit(): void { ngOnInit(): void {
this.title = 'Sandkasten'; this.title = 'Sandkasten';
this.version = '1.0'; this.version = '1.0';
this.sandkasten_logo = 'assets/img/logo.png'; this.sandkasten_logo = 'assets/img/logo.png';
this.gitea_logo = 'assets/img/gitea.png'; this.gitea_logo = 'assets/img/gitea.png';
this.isMenuOpen = false;
this.isCheck = false;
} }
// Instanciation du service pour les actions de traduction // Instanciation du service pour les actions de traduction
@ -28,8 +38,22 @@ export class HeaderComponent implements OnInit {
this.translationService.onLanguageChange(event); this.translationService.onLanguageChange(event);
} }
// Méthode pour récupérer le drapeau de la langue courante toggleTheme() {
getFlagImageUrl(): string { this.themeService.toggleDarkTheme();
return this.translationService.getFlagImageUrl(); this.themeService.isDarkTheme.subscribe(value => {
this.isCheck = value;
})
}
openCloseMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
@HostListener('document:click', ['$event'])
clickout(event: any) {
// If the menu is open and click is outside the menu, we close it
if (this.isMenuOpen && !this.menuRef.nativeElement.contains(event.target)) {
this.isMenuOpen = false;
}
} }
} }

2
src/app/components/landing-page/landing-page.component.html
Unescape View File

@ -1,4 +1,4 @@
<div class="landing-page"> <div class="landing-page" [ngClass]="themeClass">
<div class="landing-page--container"> <div class="landing-page--container">
<h2 class="landing-page--title">{{ 'LandingPage.Welcome' | translate}}</h2> <h2 class="landing-page--title">{{ 'LandingPage.Welcome' | translate}}</h2>
<span class="landing-page--subtitle">{{ 'LandingPage.Description' | translate}}</span> <span class="landing-page--subtitle">{{ 'LandingPage.Description' | translate}}</span>

26
src/app/components/landing-page/landing-page.component.scss
Unescape View File

@ -7,6 +7,8 @@
gap: 2rem; gap: 2rem;
color: $color-black; color: $color-black;
transition: color .3s ease-in-out;
&--container { &--container {
display: flex; display: flex;
@ -31,7 +33,31 @@
background: $color-purple; background: $color-purple;
border-radius: 10px; border-radius: 10px;
width: fit-content; width: fit-content;
white-space: nowrap;
color: $color-white;
}
@media(max-width: 1024px) {
padding: 4rem;
flex-direction: column;
gap: 1rem;
&--title {
font-size: 4rem;
}
}
@media(max-width: 767px) {
padding: 2rem;
&--title {
font-size: 2.5rem;
}
}
&.dark-theme {
color: $color-white; color: $color-white;
} }
} }

12
src/app/components/landing-page/landing-page.component.ts
Unescape View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import {ThemeService} from "../../services/theme.service";
@Component({ @Component({
selector: 'app-landing-page', selector: 'app-landing-page',
@ -7,9 +8,14 @@ import { Router } from '@angular/router';
styleUrls: ['./landing-page.component.scss'] styleUrls: ['./landing-page.component.scss']
}) })
export class LandingPageComponent implements OnInit{ export class LandingPageComponent implements OnInit{
constructor(private router: Router){} themeClass!: string;
ngOnInit(): void {
constructor(private router: Router, private themeService: ThemeService){}
ngOnInit() {
this.themeService.isDarkTheme.subscribe(value => {
value ? this.themeClass = 'dark-theme' : this.themeClass = 'light-theme';
})
} }
// Si click sur "Run", on redirige vers la page d'édition // Si click sur "Run", on redirige vers la page d'édition
onContinue():void{ onContinue():void{

4
src/app/services/translation.service.ts
Unescape View File

@ -14,8 +14,4 @@ export class TranslationService {
this.translate.use(this.language); this.translate.use(this.language);
console.log(this.language); console.log(this.language);
} }
getFlagImageUrl(): string {
return `../../assets/img/${this.language}_flag.jpg`;
}
} }

1
src/assets/i18n/en.json
Unescape View File

@ -5,7 +5,6 @@
"Try" : "Try it now !" "Try" : "Try it now !"
}, },
"HeaderPage": { "HeaderPage": {
"Home" : "Home",
"Editor" : "Editor", "Editor" : "Editor",
"Documentation" : "Documentation", "Documentation" : "Documentation",
"Contact" : "Contact us" "Contact" : "Contact us"

1
src/assets/i18n/fr.json
Unescape View File

@ -5,7 +5,6 @@
"Try" : "Essayez maintenant !" "Try" : "Essayez maintenant !"
}, },
"HeaderPage": { "HeaderPage": {
"Home" : "Accueil",
"Editor" : "Éditeur", "Editor" : "Éditeur",
"Documentation" : "Documentation", "Documentation" : "Documentation",
"Contact" : "Nous contacter" "Contact" : "Nous contacter"

1
src/styles.scss
Unescape View File

@ -5,6 +5,7 @@
$color-purple: #605FFC; $color-purple: #605FFC;
$color-white: #FFFFFF; $color-white: #FFFFFF;
$color-black: #000000; $color-black: #000000;
$color-light-black: #333333;
//endregion //endregion
* { * {

Write Preview
Loading…
Cancel
Save