feat(ui): mets en forme la page d'accueil

main
Jérôme Lebleu 2021-12-20 19:48:43 +01:00
Parent 8f96a865a3
révision edbab8dd8b
8 fichiers modifiés avec 96 ajouts et 4 suppressions

Voir le fichier

@ -4,6 +4,7 @@
"stylelint-prettier/recommended"
],
"rules": {
"selector-class-pattern": null,
"scss/at-function-named-arguments": null,
"scss/at-mixin-argumentless-call-parentheses": "never",
"scss/at-rule-conditional-no-parentheses": true

BIN
assets/img/poubelle.png Normal file

Fichier binaire non affiché.

Après

Largeur:  |  Hauteur:  |  Taille: 5.7 KiB

BIN
assets/img/velo.png Normal file

Fichier binaire non affiché.

Après

Largeur:  |  Hauteur:  |  Taille: 14 KiB

Voir le fichier

@ -4,6 +4,7 @@
.topbar {
position: relative;
z-index: 20;
padding: $navbar-padding-y $navbar-padding-x;
background-color: $orange-lighter;
}
@ -31,6 +32,7 @@
font-size: 1.5rem;
line-height: 1;
color: $gray;
pointer-events: auto;
background: transparent;
border: 2px solid currentColor;
border-radius: 2px;

Voir le fichier

@ -22,4 +22,5 @@
@import 'components/topbar';
// Pages spécifiques
@import 'pages/home';
@import 'pages/registration';

Voir le fichier

@ -0,0 +1,77 @@
// -----------------------------------------------------------------------------
// Styles de la page d'accueil
// -----------------------------------------------------------------------------
.home-page {
.topbar {
pointer-events: none;
background: transparent;
}
.topbar-container {
display: none;
}
}
.home-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
a {
color: $white;
transition: padding 0.15s ease-in-out, opacity 0.15s ease-in-out;
&:hover,
&:focus {
opacity: 0.9;
}
}
}
.home-wrapper,
.home__depot,
.home__reservation {
display: flex;
flex-direction: column;
align-items: stretch;
}
.home__depot,
.home__reservation {
flex: 1 0 0%;
justify-content: space-between;
padding: 1rem;
}
.home__depot {
background: linear-gradient(
45deg,
$green,
$green 50%,
tint-color($green, 30%)
);
border-bottom: 2px solid rgba($white, 0.75);
&:hover,
&:focus {
padding-bottom: 2rem;
}
}
.home__reservation {
background: linear-gradient(
225deg,
$brown,
$brown 50%,
tint-color($brown, 30%)
);
&:hover,
&:focus {
padding-top: 2rem;
}
}

Voir le fichier

@ -32,7 +32,7 @@
{% icon "menu" %}
</button>
<div class="container flex-grow-1">
<div class="topbar-container container flex-grow-1">
<div class="d-flex">
<a class="topbar-brand d-none d-md-block" href="{% url "home" %}">
Bike'Eco

Voir le fichier

@ -1,5 +1,5 @@
{% extends "base.html" %}
{% load navtag %}
{% load navtag static %}
{% block nav %}
{% nav "home" %}
@ -7,7 +7,18 @@
{% endblock %}
{% block content_container %}
<div class="container">
<h1 class="title my-3">Bienvenue dans Bike'Eco !</h1>
<div class="home-wrapper">
<a href="#" class="home__depot">
<div class="text-end">
<img class="img-fluid" src="{% static "img/poubelle.png" %}" alt="">
</div>
<h2 class="title mb-0 text-start">Alerte dépôts sauvages</h2>
</a>
<a href="#" class="home__reservation">
<h2 class="title mb-0 text-end">Réservation de vélos</h2>
<div class="text-start">
<img class="img-fluid" src="{% static "img/velo.png" %}" alt="">
</div>
</a>
</div>
{% endblock %}