Création de la page des véhicules

9735ce6a · Sofiane Lasri · a2d5a1b0 · 9735ce6a · 9735ce6a · 9735ce6a
Commit 9735ce6a authored 1 year ago by Sofiane Lasri
--- a/WSR/static/images/garage_1_dalle.jpg
+++ b/WSR/static/images/garage_1_dalle.jpg
--- a/WSR/static/scss/app.scss
+++ b/WSR/static/scss/app.scss
@@ -9,6 +9,9 @@
 // scss-docs-start import-stack
 // Configuration
 @import "../bootstrap-5.3.0/functions";
+
+$red: #D41010;
+
 @import "../bootstrap-5.3.0/variables";
 @import "../bootstrap-5.3.0/variables-dark";
 @import "../bootstrap-5.3.0/maps";
@@ -61,6 +64,11 @@ body {
  line-height: 1;
 }

+.bg-blurry-trans-black {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+}
+
 // Other
 header {
  display: flex;

--- a/WSR/static/scss/components.scss
+++ b/WSR/static/scss/components.scss
@@ -23,7 +23,7 @@
 }

 .vitrine {
-  margin-top: 32px;
+  margin-top: map-get($spacers, 4);
  display: flex;
  flex-direction: row;
  gap: map-get($spacers, 3);
@@ -221,3 +221,49 @@ footer {
    text-decoration: none;
  }
 }
+
+.cars-showcase {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: map-get($spacers, 3);
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: rgba(152, 152, 152, 0.25);
+    backdrop-filter: blur(16px)
+  }
+
+  .card {
+    width: auto;
+
+    .header {
+      margin-bottom: map-get($spacers, 2);
+      border: $white 2px solid;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+      }
+    }
+
+    .content {
+      .title {
+        color: $white;
+        font-size: 1.4rem;
+      }
+      .desc {
+        color: $light-gray;
+        line-height: 1;
+        font-size: 0.9rem;
+      }
+    }
+  }
+}
\ No newline at end of file
--- a/WSR/templates/base.html
+++ b/WSR/templates/base.html
@@ -6,7 +6,7 @@
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
-    <title>World Series Racing</title>
+    <title>{% block title %}{% endblock %}</title>
    {% compress css %}
        <link type="text/x-scss" href="{% static 'scss/app.scss' %}" rel="stylesheet" media="screen">
    {% endcompress %}
@@ -26,7 +26,8 @@

 {% block content %}{% endblock %}

-<footer class="container">
+<footer class="container-fluid bg-blurry-trans-black">
+    <div class="container">
        <div class="row">
            <div class="col">
                <div class="logo">
@@ -47,6 +48,7 @@
                <p>Juin 2023 - Sofiane LASRI-TRIENPONT<br><a href="/admin">Connexion à l'administration</a></p>
            </div>
        </div>
+    </div>
 </footer>
 <script type="text/javascript">
    // Si le footer n'est pas tout en bas de la page car il y a peu de contenu

--- a/WSR/templates/home.html
+++ b/WSR/templates/home.html
 {% extends 'base.html' %}
 {% load static %}

+{% block title %}World Series Racing{% endblock %}
+
 {% block content %}
 <div class="container vitrine">
    <div class="main-frame eurostile">

--- a/WSR/templates/vehicles.html
+++ b/WSR/templates/vehicles.html
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}WSR - Véhicules{% endblock %}
+
+{% block content %}
+    <style>
+    body {
+        background-image: url("{% static 'images/garage_1_dalle.jpg' %}");
+        background-size: cover;
+        background-position-x: center;
+        /* Pas bien, mais est-ce pire que de voir les artefacts de DALL-E ? */
+        background-position-y: -545px;
+        background-repeat: no-repeat;
+    }
+    </style>
+    <div class="container mt-4">
+        <div class="p-4 bg-white">
+            <h4 class="eurostile title text-danger">Nos véhicules</h4>
+            <p>En compétition, avoir un bon véhicule est essentiel pour gagner. Nous prenons un soin tout particulier à
+                choisir des partenaires de courses idéals pour nos pilotes.
+                <br>Chaque voiture est minutieusement préparée et réglée aux besoins des pilotes.</p>
+        </div>
+
+        <div class="p-4 mt-4 bg-blurry-trans-black cars-showcase">
+            {% for vehicle in vehicles %}
+                <div class="card">
+                    <div class="header">
+                        <img src="{% get_media_prefix %}{{ vehicle.image }}" alt="{{ vehicle.brand }} {{ vehicle.model }}">
+                    </div>
+                    <div class="content">
+                        <div class="title eurostile">{{ vehicle.brand }}</div>
+                        <div class="desc text-uppercase">{{ vehicle.model }}</div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
--- a/WSR/views.py
+++ b/WSR/views.py
@@ -97,7 +97,14 @@ def races_types(request):
    return None

 def vehicles(request):
-    return None
+    vehicles = Vehicle.objects.all()
+    return render(
+        request,
+        'vehicles.html',
+        {
+            'vehicles': vehicles
+        }
+    )

 def seasons(request):
    return None
\ No newline at end of file