From c5e0e633e8b84ea8093aa7727bec31d518815029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20P=C3=A9pin?= <kerl@wkerl.me>
Date: Sun, 7 Jun 2020 23:15:46 +0200
Subject: [PATCH] BDS: fancier home page

---
 bds/static/bds/css/bds.css       | 22 +++++++--
 bds/static/bds/images/logo.svg   | 15 ++++++
 bds/static/bds/images/logout.svg | 80 ++++++++++++++++++++++++++++++++
 bds/templates/bds/home.html      | 19 +++++++-
 bds/templates/bds/nav.html       | 25 +++++++---
 5 files changed, 147 insertions(+), 14 deletions(-)
 create mode 100644 bds/static/bds/images/logo.svg
 create mode 100644 bds/static/bds/images/logout.svg

diff --git a/bds/static/bds/css/bds.css b/bds/static/bds/css/bds.css
index 9bce2d92..fe9b2fa2 100644
--- a/bds/static/bds/css/bds.css
+++ b/bds/static/bds/css/bds.css
@@ -7,16 +7,23 @@ html, body {
 
 a {
   text-decoration: none;
-  color: inherit;
+  color: #a82305;
 }
 
 /* header */
 
 nav {
-  background: #3d2464;
-  width: 100%;
-  text-align: center;
-  padding: 0.4em 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  background: #3e2263;
+  height: 3em;
+  padding: 0.4em 1em;
+}
+
+nav a, nav a img {
+  height: 100%;
 }
 
 input[type="text"] {
@@ -24,6 +31,7 @@ input[type="text"] {
 }
 
 #search_autocomplete {
+  flex: 1;
   width: 480px;
   margin: 0;
   border: 0;
@@ -53,6 +61,10 @@ input[type="text"] {
   background: #e8554e;
 }
 
+.yourlabs-autocomplete ul li a {
+  color: inherit;
+}
+
 .autocomplete-item {
   display: block;
   width: 480px;
diff --git a/bds/static/bds/images/logo.svg b/bds/static/bds/images/logo.svg
new file mode 100644
index 00000000..15292488
--- /dev/null
+++ b/bds/static/bds/images/logo.svg
@@ -0,0 +1,15 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="300px" height="246px" viewBox="0 0 3000 2460" preserveAspectRatio="xMidYMid meet">
+<g id="layer101" fill="#ffffff" stroke="none">
+ <path d="M0 1230 l0 -1230 1500 0 1500 0 0 1230 0 1230 -1500 0 -1500 0 0 -1230z"/>
+ </g>
+<g id="layer102" fill="#3e2263" stroke="none">
+ <path d="M0 1230 l0 -1230 1500 0 1500 0 0 1230 0 1230 -1500 0 -1500 0 0 -1230z m1716 765 c103 -17 204 -46 284 -83 l55 -25 -40 -8 c-80 -16 -169 -10 -245 16 -123 42 -232 59 -385 59 -126 0 -278 -18 -341 -40 -13 -5 -16 -4 -9 4 14 15 166 60 254 76 102 19 315 19 427 1z m-703 -217 c15 -6 27 -13 27 -17 0 -4 -37 -25 -82 -47 -86 -43 -182 -120 -193 -155 -8 -26 32 -113 78 -167 44 -52 46 -62 10 -62 -39 1 -106 33 -165 80 -40 31 -54 38 -64 29 -21 -18 -17 -50 16 -116 57 -113 151 -199 259 -235 49 -16 51 -18 16 -13 -123 19 -260 151 -322 310 -15 39 -14 -81 1 -147 25 -107 55 -176 112 -251 49 -65 52 -73 38 -88 -21 -23 -104 -62 -216 -100 -51 -18 -97 -35 -102 -40 -4 -4 32 -10 80 -14 106 -9 256 13 317 48 l39 22 56 -33 c32 -18 114 -61 184 -95 80 -39 126 -67 123 -74 -6 -19 12 -16 19 3 9 24 28 5 22 -22 -7 -26 8 -34 18 -9 11 29 28 16 21 -18 -6 -30 -5 -31 10 -13 8 11 15 24 15 29 0 4 5 5 10 2 6 -3 8 -18 4 -33 -5 -26 -5 -26 10 -8 15 19 18 19 118 -12 113 -35 284 -72 329 -72 24 0 29 4 29 25 0 34 -36 125 -63 158 l-22 28 -59 -30 c-74 -39 -165 -43 -233 -10 -24 11 -43 25 -43 30 0 4 28 6 63 2 49 -4 71 -2 98 12 46 23 79 55 79 75 0 16 -48 66 -135 139 l-40 33 43 -23 c55 -30 166 -121 188 -154 9 -13 13 -29 9 -36 -15 -23 -100 -69 -129 -69 -17 0 -38 -5 -46 -10 -12 -8 -10 -10 10 -10 49 1 104 19 149 51 l45 31 24 -28 c33 -40 72 -128 79 -180 10 -79 -25 -96 -233 -114 -84 -7 -148 -7 -218 0 -106 12 -269 51 -317 76 -28 14 -31 13 -62 -10 -56 -43 -167 -89 -225 -94 l-55 -5 6 29 c2 16 14 55 26 86 21 57 27 112 15 142 -3 9 -34 38 -68 64 l-62 49 -104 7 c-166 12 -192 34 -83 70 34 12 65 24 68 28 4 4 -7 27 -24 52 -118 171 -124 402 -16 571 18 29 50 88 70 131 42 93 99 154 168 184 82 35 212 44 280 18z m540 -39 c60 -16 70 -41 75 -196 l5 -134 -39 3 -39 3 -5 114 c-4 93 -8 116 -22 125 -31 19 -41 -7 -47 -126 l-6 -113 -32 -3 c-41 -4 -44 6 -34 151 9 143 25 172 101 186 3 0 22 -4 43 -10z m322 -34 c0 -30 0 -30 -64 -33 l-64 -3 7 -130 7 -129 -35 0 -36 0 0 165 0 166 93 -3 92 -3 0 -30z m115 -55 l5 -84 18 27 c21 33 39 34 60 5 15 -22 16 -18 16 60 l1 82 35 0 35 0 -2 -162 -3 -163 -40 0 c-38 0 -41 2 -53 43 -16 49 -24 48 -42 -7 -12 -38 -16 -41 -50 -41 -34 0 -38 3 -44 31 -8 43 -8 284 1 293 4 4 19 6 33 4 24 -3 25 -6 30 -88z m370 -42 c193 -243 228 -505 100 -759 -61 -120 -195 -260 -328 -343 -66 -41 -60 -26 13 33 36 29 92 85 125 126 182 230 209 500 75 753 -42 79 -45 89 -45 163 0 44 4 79 9 79 5 0 28 -24 51 -52z m-1111 -294 c76 -30 94 -102 41 -156 -27 -27 -29 -32 -17 -47 34 -40 25 -100 -19 -120 -30 -13 -143 -15 -164 -1 -11 7 -15 42 -18 164 l-4 156 23 9 c37 15 115 13 158 -5z m571 -9 c84 -43 61 -135 -43 -173 -46 -18 -52 -23 -52 -48 0 -39 30 -42 79 -9 l37 25 -3 -41 c-4 -49 -32 -76 -90 -85 -32 -6 -41 -2 -68 24 -24 25 -30 39 -30 74 0 57 21 85 87 114 40 18 54 29 51 42 -5 29 -71 28 -111 -2 -19 -14 -36 -26 -39 -26 -11 0 -16 55 -7 72 24 45 131 63 189 33z m-303 -12 c56 -26 75 -65 71 -150 -3 -67 -6 -75 -38 -108 -43 -44 -94 -61 -146 -48 l-39 9 -3 144 c-1 79 0 150 2 157 8 19 110 17 153 -4z"/>
+ <path d="M1503 633 c4 -3 10 -3 14 0 3 4 0 7 -7 7 -7 0 -10 -3 -7 -7z"/>
+ <path d="M1532 448 c3 -7 15 -14 29 -16 23 -2 23 -2 5 13 -24 18 -39 20 -34 3z"/>
+ <path d="M1140 1231 c0 -45 10 -61 36 -61 26 0 64 32 64 53 0 23 -23 37 -62 37 -35 0 -38 -2 -38 -29z"/>
+ <path d="M1140 1070 c0 -35 17 -45 56 -36 20 5 25 12 22 34 -3 23 -8 27 -40 30 -36 3 -38 2 -38 -28z"/>
+ <path d="M1430 1151 c0 -72 3 -91 14 -91 28 0 47 13 61 41 31 60 10 121 -47 135 l-28 6 0 -91z"/>
+ </g>
+
+</svg>
diff --git a/bds/static/bds/images/logout.svg b/bds/static/bds/images/logout.svg
new file mode 100644
index 00000000..12489bbd
--- /dev/null
+++ b/bds/static/bds/images/logout.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns:ns1="http://sozi.baierouge.fr"
+    xmlns:cc="http://web.resource.org/cc/"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    id="Layer_1"
+    enable-background="new 0 0 40 40"
+    xml:space="preserve"
+    viewBox="0 0 40 40"
+    version="1.1"
+    y="0px"
+    x="0px"
+  >
+<polygon
+      points="36.351 32.435 25.5 36.271 25.5 3.94 36.351 6.242"
+      fill="#ffffff"
+  />
+<g
+      fill="#ffffff"
+    >
+	<path
+        d="m13.627 29.253l8.123-8.941c0.241-0.241 0.379-0.58 0.379-0.934s-0.138-0.693-0.379-0.934l-8.123-8.943c-0.346-0.348-0.853-0.44-1.286-0.238-0.436 0.203-0.717 0.662-0.717 1.171v3.193h-7.745c-0.658 0-1.191 0.572-1.191 1.277v8.943c0 0.705 0.533 1.276 1.191 1.276h7.745v3.194c0 0.509 0.281 0.969 0.716 1.172 0.434 0.204 0.94 0.112 1.287-0.236z"
+    />
+	<path
+        d="m13.627 29.253l8.123-8.941c0.241-0.241 0.379-0.58 0.379-0.934s-0.138-0.693-0.379-0.934l-8.123-8.943c-0.346-0.348-0.853-0.44-1.286-0.238-0.436 0.203-0.717 0.662-0.717 1.171v3.193h-7.745c-0.658 0-1.191 0.572-1.191 1.277v8.943c0 0.705 0.533 1.276 1.191 1.276h7.745v3.194c0 0.509 0.281 0.969 0.716 1.172 0.434 0.204 0.94 0.112 1.287-0.236z"
+    />
+</g
+  >
+<path
+      stroke-linejoin="round"
+      d="m24.166 6.224h-1.288c-1.78 0-3.223 1.442-3.223 3.223v3.981"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-miterlimit="10"
+      fill="none"
+  />
+<path
+      stroke-linejoin="round"
+      d="m19.655 25.495v3.733c0 1.78 1.442 3.223 3.223 3.223h1.288"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-miterlimit="10"
+      fill="none"
+  />
+<metadata
+    ><rdf:RDF
+      ><cc:Work
+        ><dc:format
+          >image/svg+xml</dc:format
+        ><dc:type
+            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
+        /><cc:license
+            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
+        /><dc:publisher
+          ><cc:Agent
+              rdf:about="http://openclipart.org/"
+            ><dc:title
+              >Openclipart</dc:title
+            ></cc:Agent
+          ></dc:publisher
+        ></cc:Work
+      ><cc:License
+          rdf:about="http://creativecommons.org/licenses/publicdomain/"
+        ><cc:permits
+            rdf:resource="http://creativecommons.org/ns#Reproduction"
+        /><cc:permits
+            rdf:resource="http://creativecommons.org/ns#Distribution"
+        /><cc:permits
+            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
+        /></cc:License
+      ></rdf:RDF
+    ></metadata
+  ></svg
+>
diff --git a/bds/templates/bds/home.html b/bds/templates/bds/home.html
index 2cf20e4a..1ae76227 100644
--- a/bds/templates/bds/home.html
+++ b/bds/templates/bds/home.html
@@ -1,7 +1,22 @@
 {% extends "bds/base.html" %}
 
 {% block content %}
-<div style="margin: auto; text-align: center; padding-top: 2em;">
-  Bienvenue sur le site du BDS!
+<div style="width: 60%; margin: auto; padding-top: 2em;">
+  Bienvenue sur GestioBDS&#8239;!
+
+  <br>
+  <br>
+
+  Le site est encore en développement.
+  <br>
+  Suivez notre avancement sur
+  <a href="https://git.eleves.ens.fr/klub-dev-ens/gestioCOF/merge_requests?milestone_title=Int%C3%A9gration+du+BDS">
+  cette milestone</a> sur le gitlab de l'ENS.
+  <br>
+  Faites vos remarques par mail à
+  <a href="mailto:klub-dev@ens.fr"><tt>klub-dev@ens.fr</tt></a>
+  ou en ouvrant une
+  <a href="#https://git.eleves.ens.fr/klub-dev-ens/gestioCOF/issues?milestone_title=Int%C3%A9gration+du+BDS">
+  issue</a>.
 </div>
 {% endblock %}
diff --git a/bds/templates/bds/nav.html b/bds/templates/bds/nav.html
index c7dbc70a..e1118caa 100644
--- a/bds/templates/bds/nav.html
+++ b/bds/templates/bds/nav.html
@@ -1,13 +1,24 @@
 {% load i18n %}
+{% load static %}
 
 <nav id="search-bar">
-  <input
-    type="text"
-    name="q"
-    id="search_autocomplete"
-    spellcheck="false"
-    placeholder="{% trans "Chercher une personne" %}" />
-  <div class="yourlabs-autocomplete"></div>
+  <a href="{% url "bds:home" %}">
+    <img src="{% static "bds/images/logo.svg" %}" alt="bds-logo">
+  </a>
+
+  <div>
+    <input
+      type="text"
+      name="q"
+      id="search_autocomplete"
+      spellcheck="false"
+      placeholder="{% trans "Chercher une personne" %}" />
+    <div class="yourlabs-autocomplete"></div>
+  </div>
+
+  <a href="#TODO">
+    <img src="{% static "bds/images/logout.svg" %}" alt="logout">
+  </a>
 </nav>
 
 <script type="text/javascript">