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>
<div class="code_container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
<body>
<header>
<app-header></app-header>
</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({
selector: 'app-footer',
templateUrl: './footer.component.html',
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 {
background-color: #1976D2;
background-color: #494b92;
padding: .5rem 1rem;
display: flex;
flex-direction: row;
align-items: center;
@ -13,19 +9,19 @@
gap: 4rem;
}
.right_part {
.left_part {
display: flex;
flex-direction: row;
gap: 4rem;
}
.right_part .logo_container {
.left_part .logo_container {
display: flex;
flex-direction: row;
gap: 2rem;
}
.right_part .menu {
.left_part .menu {
display: flex;
flex-direction: row;
gap: 2rem;
@ -33,7 +29,7 @@
align-items: center;
}
.right_part .menu a {
.left_part .menu a {
color: white;
text-decoration: none;
}
@ -57,7 +53,7 @@
color: white;
}
.left_part {
.right_part {
display: flex;
flex-direction: row;
align-items: center;
@ -65,10 +61,10 @@
color: white;
}
.gitea_logo_container .gitea-logo {
width: 4rem;
height: auto;
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="logo_container">
<img class="sandkasten-logo"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" />
<h2 class="logo_title">{{ title }}</h2>
</div>
<div class="left_part">
<div class="logo_container">
<img class="sandkasten-logo"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" />
<h2 class="logo_title">{{ title }}</h2>
</div>
<nav class="menu">
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Accueil</a>
<nav class="menu">
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Accueil</a>
<a
routerLink="editor"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Editeur</a>
</nav>
</div>
<a
routerLink="editor"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Editeur</a>
</nav>
</div>
<div class="left_part">
<a href="https://codefirst.iut.uca.fr/git/sandkasten"
class="gitea_logo_container">
<img class="gitea-logo"
[src]="gitea_logo" alt="Logo-Gitea" />
</a>
<p>Version : {{ version }}</p>
</div>
<div class="right_part">
<a href="https://codefirst.iut.uca.fr/git/sandkasten"
class="gitea_logo_container">
<img class="gitea-logo"
[src]="gitea_logo" alt="Logo-Gitea" />
</a>
<p>Version : {{ version }}</p>
</div>
</div>

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

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {Router} from "@angular/router";
@Component({
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 {
width: 100%;
@ -12,4 +6,4 @@
button{
font-size: 20px;
}
}

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

@ -1,6 +1,9 @@
<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">
<button (click)="onContinue()">Continuer vers l'éditeur</button>
<button (click)="onContinue()">Try it now !</button>
</div>
</div>

3
sandkasten/src/styles.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save