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

footer + visu

Browse Source
contact
Matis MAZINGUE 2 years ago
parent 38a093a083
commit cc60508546
11 changed files with 103 additions and 62 deletions
Show Stats Download Patch File Download Diff File

8
sandkasten/src/app/app.component.css
Unescape View File

@ -1 +1,7 @@
body{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
margin: 0;
}

20
sandkasten/src/app/app.component.html
Unescape View File

@ -1,5 +1,15 @@
<app-header></app-header> <body>
<div class="code_container">
<router-outlet></router-outlet> <header>
</div> <app-header></app-header>
<app-footer></app-footer> </header>
<main>
<router-outlet></router-outlet>
</main>
<footer>
<app-footer></app-footer>
</footer>
</body>

18
sandkasten/src/app/footer/footer.component.css
Unescape View File

@ -0,0 +1,18 @@
.footer {
background-color: #494b92;
padding: .5rem 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 4rem;
}
.sandkasten-logo {
width: 4rem;
height: auto;
aspect-ratio: 1;
}

10
sandkasten/src/app/footer/footer.component.html
Unescape View File

@ -1 +1,9 @@
<p>footer works!</p> <div class="footer" >
<img class="sandkasten-logo"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" />
</div>

9
sandkasten/src/app/footer/footer.component.ts
Unescape View File

@ -1,10 +1,15 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css'] styleUrls: ['./footer.component.css']
}) })
export class FooterComponent { export class FooterComponent implements OnInit {
sandkasten_logo!: string;
ngOnInit(): void {
this.sandkasten_logo = 'assets/img/logo.png';
}
} }

18
sandkasten/src/app/header/header.component.css
Unescape View File

@ -1,11 +1,7 @@
.header-card {
}
.toolbar { .toolbar {
background-color: #1976D2; background-color: #494b92;
padding: .5rem 1rem; padding: .5rem 1rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -13,19 +9,19 @@
gap: 4rem; gap: 4rem;
} }
.right_part { .left_part {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 4rem; gap: 4rem;
} }
.right_part .logo_container { .left_part .logo_container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2rem; gap: 2rem;
} }
.right_part .menu { .left_part .menu {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2rem; gap: 2rem;
@ -33,7 +29,7 @@
align-items: center; align-items: center;
} }
.right_part .menu a { .left_part .menu a {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
@ -57,7 +53,7 @@
color: white; color: white;
} }
.left_part { .right_part {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -65,10 +61,10 @@
color: white; color: white;
} }
.gitea_logo_container .gitea-logo { .gitea_logo_container .gitea-logo {
width: 4rem; width: 4rem;
height: auto; height: auto;
aspect-ratio: 1; aspect-ratio: 1;
} }

63
sandkasten/src/app/header/header.component.html
Unescape View File

@ -1,39 +1,38 @@
<div class="header-card"> <div class="toolbar" role="banner">
<div class="toolbar" role="banner">
<div class="right_part"> <div class="left_part">
<div class="logo_container"> <div class="logo_container">
<img class="sandkasten-logo" <img class="sandkasten-logo"
routerLink="" routerLink=""
routerLinkActive="active" routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }" [routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" /> [src]="sandkasten_logo" alt="Logo-Sandkasten" />
<h2 class="logo_title">{{ title }}</h2> <h2 class="logo_title">{{ title }}</h2>
</div> </div>
<nav class="menu"> <nav class="menu">
<a <a
routerLink="" routerLink=""
routerLinkActive="active" routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }" [routerLinkActiveOptions]="{ exact: true }"
>Accueil</a> >Accueil</a>
<a <a
routerLink="editor" routerLink="editor"
routerLinkActive="active" routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }" [routerLinkActiveOptions]="{ exact: true }"
>Editeur</a> >Editeur</a>
</nav> </nav>
</div> </div>
<div class="left_part"> <div class="right_part">
<a href="https://codefirst.iut.uca.fr/git/sandkasten" <a href="https://codefirst.iut.uca.fr/git/sandkasten"
class="gitea_logo_container"> class="gitea_logo_container">
<img class="gitea-logo" <img class="gitea-logo"
[src]="gitea_logo" alt="Logo-Gitea" /> [src]="gitea_logo" alt="Logo-Gitea" />
</a> </a>
<p>Version : {{ version }}</p> <p>Version : {{ version }}</p>
</div>
</div> </div>
</div> </div>

1
sandkasten/src/app/header/header.component.ts
Unescape View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {Router} from "@angular/router";
@Component({ @Component({
selector: 'app-header', selector: 'app-header',

8
sandkasten/src/app/landing-page/landing-page.component.css
Unescape View File

@ -1,9 +1,3 @@
.landing-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.landing-links { .landing-links {
width: 100%; width: 100%;
@ -12,4 +6,4 @@
button{ button{
font-size: 20px; font-size: 20px;
} }

7
sandkasten/src/app/landing-page/landing-page.component.html
Unescape View File

@ -1,6 +1,9 @@
<div class="landing-block"> <div class="landing-block">
<img src="../assets/img/logo.png" alt="logo" />
<a>Bienvenue sur Sandkasten !</a>
<a>Sandkasten est un site vous permettant de tester votre code.</a>
<div class="landing-links"> <div class="landing-links">
<button (click)="onContinue()">Continuer vers l'éditeur</button> <button (click)="onContinue()">Try it now !</button>
</div> </div>
</div> </div>

3
sandkasten/src/styles.css
Unescape View File

@ -7,7 +7,8 @@ body {
} }
button { button {
background-color: transparent; background-color: #1dd21d;
border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 10px; padding: 5px 10px;
border: none; border: none;

Write Preview
Loading…
Cancel
Save