move things in about page, style footer 🎨

src/app/app.component.html

@@ -10,9 +10,9 @@
 				<main [@routeAnimations]="prepareRoute(outlet)">
 					<router-outlet #outlet></router-outlet>
 				</main>
-				<app-footer></app-footer>
 				<app-feedback></app-feedback>
 			</div>
 		</div>
+		<app-footer></app-footer>
 	</mat-sidenav-content>
 </mat-sidenav-container>

src/app/core/components/footer/footer.component.html

@@ -1,5 +1,5 @@
-<footer class="footer">
-	<div class="content has-text-centered">
+<footer class="footer main-footer">
+	<div class="content container">
 		<p>
 			<img class="app-logo logo" *ngIf="env.appLogo" src="{{ env.appLogo }}" alt="{{ env.appTitle }}" />
 
@@ -30,22 +30,42 @@
 			<div class="columns">
 				<div class="column">
 					<h3 class="title is-3">Framasoft</h3>
-					L’association,Notre charte,Contacter Framasoft,Statistiques,État des services
+					<ul>
+						<li>L’association,</li>
+						<li>Notre charte,</li>
+						<li>Contacter Framasoft,</li>
+						<li>Statistiques,</li>
+						<li>État des services</li>
+					</ul>
 				</div>
 				<div class="column">
 					<h3 class="title is-3">Communauté</h3>
-					Framacolibri,Participer,Bénévolat valorisé,Partenaires,Charte de modération
+					<ul>
+						<li>Framacolibri,</li>
+						<li>Participer,</li>
+						<li>Bénévolat valorisé,</li>
+						<li>Partenaires,</li>
+						<li>Charte de modération</li>
+					</ul>
 				</div>
 				<div class="column">
 					<h3 class="title is-3">Framadate</h3>
-					Entraide,Guides et astuces,Mentions légales,CGU,Crédits
+					<ul>
+						<li>Entraide,</li>
+						<li>Guides et astuces,</li>
+						<li>Mentions légales,</li>
+						<li>CGU,</li>
+						<li>Crédits</li>
+					</ul>
 				</div>
 				<div class="column">
 					<form action="#">
-						<label for="subscribe_newsletter">
-							<i class="fa fa-enveloppe"></i>
-							Inscrivez-vous à la newsletter
-						</label>
+						<h3 class="title is-3">
+							<label for="subscribe_newsletter">
+								<i class="fa fa-enveloppe"></i>
+								Inscrivez-vous à la newsletter
+							</label>
+						</h3>
 						<input type="text" class="input" id="subscribe_newsletter" />
 						<button class="button is-outlined is-primary" (click)="subscribeToNewsletter()">
 							S'inscrire

src/app/features/administration/administration.component.scss

@@ -0,0 +1,5 @@
+:host {
+	> .columns {
+		margin-top: 0;
+	}
+}

src/app/features/administration/stepper/stepper.component.html

@@ -1,5 +1,5 @@
 <section class="creation-stepper" id="creation_stepper">
-	<div class="shortcuts">
+	<div class="shortcuts" *ngIf="show_shortcuts">
 		<a
 			class="shortcut"
 			href="#"

src/app/features/administration/stepper/stepper.component.scss

@@ -2,7 +2,7 @@
 
 .step-bar-container {
 	margin: 1em 0;
-	height: 0.5em;
+	height: 0.6em;
 	display: inline-block;
 	min-width: 1px;
 	background: $border-color !important;
@@ -10,7 +10,7 @@
 }
 .step-bar-progress {
 	position: relative;
-	top: -0.6em;
+	top: -0.5em;
 	left: 0;
 	height: 0.5em;
 	display: inline-block;

src/styles/partials/_form-controls.scss

@@ -10,3 +10,8 @@
 	border-radius: 0.25em;
 	color: $font_color;
 }
+
+.is-finish {
+	background: $success_color;
+	color: $white;
+}

src/styles/partials/_forms.scss

@@ -18,7 +18,9 @@ select.is-hovered,
 app-step-one,
 app-step-two,
 app-step-three,
-app-step-four {
+app-step-four,
+app-step-six,
+app-step-seven {
 	padding: 2em 2.5em;
 	display: block;
 }
@@ -284,11 +286,6 @@ mat-checkbox {
 	}
 }
 
-.step-container {
-	padding: 1em 2em;
-	@extend .container, .is-widescreen;
-}
-
 // resume de la création de sondage
 .step-resume {
 	.content {

src/styles/partials/global.scss

@@ -4,14 +4,33 @@ html {
 	font-size: 1rem; /* 10px */
 	color: $font_color;
 }
+
 main {
 	min-height: 90vh;
 }
+
 .min-height {
 	margin-top: 1em;
 	margin-bottom: 1em;
 	min-height: 50vh;
 }
+
 .content {
 	padding: 1em;
 }
+
+.main-footer {
+	background: $primary-color;
+	color: $white;
+
+	.title {
+		color: $white;
+	}
+
+	.content {
+		ul {
+			padding: 0;
+			margin-left: 0;
+		}
+	}
+}

src/styles/variables.scss

@@ -41,6 +41,7 @@ $d-error: #ffecee;
 $d-error-text: #d51b38;
 
 // interpretations in app
+$success_color: $d-success-text;
 $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;