Simplify header and adapt auth pages style

Having a title in the header is worse than a normal title inside the
page. Restore the border to compensate.

gestiojeux/urls.py

@@ -21,9 +21,8 @@ from django.conf.urls.static import static
 urlpatterns = [
     path("admin/", admin.site.urls),
     path("inventory/", include("inventory.urls")),
-    path("accounts/", include("gestiojeux_auth.urls")),
+    path("auth/", include("gestiojeux_auth.urls")),
     path("", include("mainsite.urls")),
-
 ]
 
 if settings.DEBUG:

gestiojeux_auth/admin.py

@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.

gestiojeux_auth/apps.py

@@ -2,8 +2,4 @@ from django.apps import AppConfig
 
 
 class GestiojeuxAuthConfig(AppConfig):
-    name = 'gestiojeux_auth'
+    name = "gestiojeux_auth"
-
-    def ready(self):
-        from . import signals
-

gestiojeux_auth/cas_backend.py

@@ -12,4 +12,3 @@ class GestioJeuxCASBackend(CASBackend):
         casUser = CasUser(user=user)
         casUser.save()
         return user
-

gestiojeux_auth/templates/registration/login.html

@@ -0,0 +1,16 @@
+{% extends "small_page.html" %}
+
+{% block "title" %}
+{% endblock %}
+
+{% block "content" %}
+<h1>Connexion par mot de passe</h1>
+
+<form method="post" action="{% url "gestiojeux_auth:password_login" %}?next={{ next|urlencode }}">
+  {% csrf_token %}
+  {{ form.as_p }}
+  <button type="submit">Connexion</button>
+  <input type="hidden" name="next" value="{{ next }}" />
+</form>
+{% endblock %}
+

gestiojeux_auth/templates/registration/login_switch.html

@@ -0,0 +1,18 @@
+{% extends "small_page.html" %}
+
+{% block "content" %}
+<h1>Mode de connexion</h1>
+
+<div class="btn_row">
+<a href="{{ cas_url }}">
+  Compte clipper
+
+</a>
+<a href="{{ pass_url }}">
+  Mot de passe
+</a>
+</div>
+
+<p>Si vous êtes exté·e et que vous n'avez pas encore de compte, demandez en un.</p>
+{% endblock %}
+

gestiojeux_auth/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

gestiojeux_auth/urls.py

@@ -1,6 +1,6 @@
 from django.urls import include, path
 import django.contrib.auth.views as dj_auth_views
-from .views import login, logout 
+from .views import login, logout
 import django_cas_ng.views
 
 app_name = "gestiojeux_auth"
@@ -23,5 +23,5 @@ accounts_patterns = [
 ]
 
 urlpatterns = [
-        path("", include(accounts_patterns)),
+    path("", include(accounts_patterns)),
 ]

gestiojeux_auth/views.py

@@ -30,7 +30,7 @@ def login(req):
             "cas_url": reverse("gestiojeux_auth:cas_ng_login"),
         }
 
-    return render(req, "login_switch.html", context=context)
+    return render(req, "registration/login_switch.html", context=context)
 
 
 @login_required
@@ -38,6 +38,15 @@ def logout(req):
     CAS_BACKEND_NAME = "django_cas_ng.backends.CASBackend"
     if req.session["_auth_user_backend"] != CAS_BACKEND_NAME:
         auth_logout(req)
+        if "next" in req.GET:
+            return redirect(req.GET["next"])
         return redirect("mainsite:home")
-    return redirect("gestiojeux_auth:cas_ng_logout")
 
+    if "next" in req.GET:
+        return redirect(
+            "{}?next={}".format(
+                reverse("gestiojeux_auth:cas_ng_logout"),
+                urlquote(req.GET["next"], safe=""),
+            )
+        )
+    return redirect("gestiojeux_auth:cas_ng_logout")

inventory/templates/inventory/game.html

@@ -1,14 +1,12 @@
 {% extends "base.html" %}
 
-{% block "title" %}
-  Inventaire du club Jeux
-{% endblock %}
-
 {% block "content" %}
-  <h2>{{ game.title }}</h2>
+  <h1>{{ game.title }}</h1>
 
   <div id="game_infos">
+    {% if game.image %}
     <img src="{{ game.image.url }}" alt="{{ game.title }}"/>
+    {% endif %}
 
     <div id="details">
       <p><i class="fa fa-fw fa-bookmark"></i> {{ game.category }}</p>

inventory/templates/inventory/inventory.html

@@ -1,14 +1,12 @@
 {% extends "base.html" %}
 
-{% block "title" %}
-  Inventaire du club Jeux
-{% endblock %}
-
 {% block "content" %}
+  <h1>Inventaire du club Jeux</h1>
+
   Il y a {{ game_list|length }} jeux en salle jeux&nbsp;:
   <ul>
     {% for game in game_list %}
-      <li><a href="{% url "inventory:game" game.slug %}">{{game.title}}</a></li>
+      <li><a href="{{ game.get_absolute_url }}">{{game.title}}</a></li>
     {% endfor %}
   </ul>
 {% endblock %}

mainsite/scss/header.scss

@@ -8,16 +8,13 @@ header {
     color: $header_text_color;
     padding: 0 30px;
 
+    border-bottom: 4px solid $header_border_color;
+
     h1 {
         margin: 0;
-        a {
+        padding: 0 20px;
-            display: block;
+        color: $header_text_color;
-
+        font-size: $font_size;
-            padding: 0 20px;
-            color: $header_text_color;
-            font-size: $font_size;
-            text-decoration: none;
-        }
     }
 
     nav {
@@ -27,7 +24,7 @@ header {
         flex: 1 1 100px;
     }
 
-    nav a, a.login {
+    a {
         display: block;
         margin: 0;
         padding: 10px 20px;
@@ -47,6 +44,11 @@ header {
         &:focus {
             background-color: darken($header_bg_color, 10%);
             box-shadow: none;
+            color: $page_link_hover_color;
         }
     }
+
+    .username {
+        font-size: 12pt;
+    }
 }

mainsite/scss/params.scss

@@ -3,6 +3,7 @@ $page_text_color: #250f2d;
 $page_link_color: #2b153f;
 $page_link_hover_color: #180c23;
 $page_width: 800px;
+$small_page_width: 500px;
 
 $help_text_color: rgba($page_text_color, .65);
 
@@ -11,17 +12,11 @@ $font_family: "Open Sans";
 
 $small_screen_font_size: 12pt;
 
-$header_height: 125px;
-$header_logo_maxwidth: 300px;
 $header_bg_color: #6bb8c4;
 $header_text_color: #f6fbfd;
-$header_infos_font_size: 28pt;
 $header_infos_font_family: "Kalam";
 $header_border_color: #51808c;
-$header_horizontal_padding: 80px;
-
 $nav_font_size: 18pt;
-$nav_height: 55px;
 
 $footer_bg_color: $header_bg_color;
 $footer_font_size: 12pt;

mainsite/scss/style.scss

@@ -30,13 +30,6 @@ body {
     }
 }
 
-body > h1 {
-    margin: 0;
-    background-color: $header_border_color;
-    color: $header_text_color;
-    text-align: center;
-}
-
 main {
     display: flex;
     justify-content: center;
@@ -49,6 +42,10 @@ main {
     padding: 20px;
     margin-bottom: 50px;
     text-align: justify;
+
+    &.small_page {
+      width: $small_page_width; 
+    }
 }
 
 footer {
@@ -67,6 +64,11 @@ footer {
     }
 }
 
+h1 {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
 a {
     text-decoration: underline;
     color: $page_link_color;
@@ -175,28 +177,6 @@ button, .btn_row a {
     direction: rtl;
 }
 
-.team_infos {
-    margin: 25px 0;
-    padding: 0;
-    p, ul {
-        margin: 10px;
-    }
-}
-
-.invite_link {
-    display: flex;
-
-    input {
-        flex: 1 0 200px;
-        margin: 10px 5px;
-    }
-    button {
-        min-width: 45px;
-        font-size: 12pt;
-    }
-}
-
-
 table {
     border-collapse: collapse;
     width: 100%;
@@ -219,7 +199,7 @@ iframe {
     border: 2px solid $header_border_color;
 }
 
-.indexbar {
+/*.indexbar {
     width: 100%;
     display: flex;
     justify-content: center;
@@ -256,7 +236,7 @@ iframe {
             border-radius: 0 1ex 1ex 0;
         }
     }
-}
+}*/
 
 #game_infos {
     display: flex;

mainsite/static/css/style.css

@@ -6,21 +6,19 @@ header {
   align-content: stretch;
   background-color: #6bb8c4;
   color: #f6fbfd;
-  padding: 0 30px; }
+  padding: 0 30px;
+  border-bottom: 4px solid #51808c; }
   header h1 {
-    margin: 0; }
+    margin: 0;
-    header h1 a {
+    padding: 0 20px;
-      display: block;
+    color: #f6fbfd;
-      padding: 0 20px;
+    font-size: 16pt; }
-      color: #f6fbfd;
-      font-size: 16pt;
-      text-decoration: none; }
   header nav {
     display: flex;
     justify-content: left;
     margin: 0 20px;
     flex: 1 1 100px; }
-  header nav a, header a.login {
+  header a {
     display: block;
     margin: 0;
     padding: 10px 20px;
@@ -28,14 +26,17 @@ header {
     color: #f6fbfd;
     font-size: 18pt;
     text-decoration: none; }
-    header nav a:hover, header a.login:hover {
+    header a:hover {
       background-color: #48a6b4;
       color: #180c23; }
-    header nav a.current, header a.login.current {
+    header a.current {
       background-color: #51808c; }
-    header nav a:focus, header a.login:focus {
+    header a:focus {
       background-color: #48a6b4;
-      box-shadow: none; }
+      box-shadow: none;
+      color: #180c23; }
+  header .username {
+    font-size: 12pt; }
 
 form {
   display: flex;
@@ -183,12 +184,6 @@ body {
     body {
       font-size: 12pt; } }
 
-body > h1 {
-  margin: 0;
-  background-color: #51808c;
-  color: #f6fbfd;
-  text-align: center; }
-
 main {
   display: flex;
   justify-content: center;
@@ -199,6 +194,8 @@ main {
   padding: 20px;
   margin-bottom: 50px;
   text-align: justify; }
+  #main_content.small_page {
+    width: 500px; }
 
 footer {
   background-color: #6bb8c4;
@@ -213,6 +210,10 @@ footer {
     bottom: 0.3ex;
     left: 0.2ex; } }
 
+h1 {
+  font-size: 1.5em;
+  font-weight: bold; }
+
 a {
   text-decoration: underline;
   color: #2b153f;
@@ -333,21 +334,6 @@ button, .btn_row a {
   unicode-bidi: bidi-override;
   direction: rtl; }
 
-.team_infos {
-  margin: 25px 0;
-  padding: 0; }
-  .team_infos p, .team_infos ul {
-    margin: 10px; }
-
-.invite_link {
-  display: flex; }
-  .invite_link input {
-    flex: 1 0 200px;
-    margin: 10px 5px; }
-  .invite_link button {
-    min-width: 45px;
-    font-size: 12pt; }
-
 table {
   border-collapse: collapse;
   width: 100%;
@@ -364,32 +350,44 @@ iframe {
   height: 400px;
   border: 2px solid #51808c; }
 
-.indexbar {
+/*.indexbar {
-  width: 100%;
+    width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: stretch; }
-  .indexbar a {
-    text-align: center;
-    flex: 1 1 0;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: stretch;
-    color: #040206;
-    text-decoration: none;
-    border-radius: 0; }
-    .indexbar a span {
-      margin: auto 5px; }
-    .indexbar a:first-child {
-      border-radius: 1ex 0 0 1ex; }
-    .indexbar a:nth-child(odd) {
-      background-color: rgba(107, 184, 196, 0.75); }
-    .indexbar a:nth-child(even) {
-      background-color: rgba(107, 184, 196, 0.6); }
-    .indexbar a:last-child {
-      border-radius: 0 1ex 1ex 0; }
 
+    a {
+        text-align: center;
+        flex: 1 1 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+
+        color: $indexbar_text_color;
+        text-decoration: none;
+
+        border-radius: 0;
+
+        span {
+            margin: auto 5px;
+        }
+
+        &:first-child {
+            border-radius: 1ex 0 0 1ex;
+        }
+        &:nth-child(odd) {
+            background-color: $indexbar_bg_color_1;
+        }
+        &:nth-child(even) {
+            background-color: $indexbar_bg_color_2;
+        }
+        &:last-child {
+            border-radius: 0 1ex 1ex 0;
+        }
+    }
+}*/
 #game_infos {
   display: flex;
   align-items: center;

mainsite/templates/400.html

@@ -1,4 +1,4 @@
-{% extends "base_minimal.html" %}
+{% extends "small_page.html" %}
 
 {% block "content" %}
 <h1>Requête invalide</h1>

mainsite/templates/403.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "small_page.html" %}
 
 {% block "content" %}
 <h1>Accès refusé</h1>

mainsite/templates/404.html

@@ -1,4 +1,4 @@
-{% extends "base_minimal.html" %}
+{% extends "small_page.html" %}
 
 {% block "content" %}
 <h1>Page introuvable</h1>

mainsite/templates/500.html

@@ -1,4 +1,4 @@
-{% extends "base_minimal.html" %}
+{% extends "small_page.html" %}
 
 {% block "content" %}
 <h1>Incident technique</h1>

mainsite/templates/base.html

@@ -9,13 +9,8 @@
   <body>
     {% include "partials/header.html" %}
 
-    <h1>
-      {% block "title" %}
-      {% endblock %}
-    </h1>
-
     <main>
-      <div id="main_content">
+      <div id="main_content" class="{% block "main_content_class" %}{% endblock %}">
         {% include "partials/messages.html" %}
 
         {% block "content" %}

mainsite/templates/login.html

@@ -1,36 +0,0 @@
-{% extends "base.html" %}
-
-{% block "content" %}
-<div id="content-area">
-	{% if form.errors %}
-	<p>Login ou mot de passe incorrect</p>
-	{% endif %}
-
-	{% if next %}
-	{% if user.is_authenticated %}
-	<p>Accès non autorisé.</p>
-	{% else %}
-	<p>Merci de vous connecter.</p>
-	{% endif %}
-	{% endif %}
-
-	<form method="post" action="{% url "gestiojeux_auth:password_login" %}?next={{ next|urlencode }}">
-		{% csrf_token %}
-		<table>
-			<tr>
-				<td>{{ form.username.label_tag }}</td>
-				<td>{{ form.username }}</td>
-			</tr>
-			<tr>
-				<td>{{ form.password.label_tag }}</td>
-				<td>{{ form.password }}</td>
-			</tr>
-		</table>
-
-		<input type="submit" value="connexion" />
-		<input type="hidden" name="next" value="{{ next }}" />
-	</form>
-</div>
-
-{% endblock %}
-

mainsite/templates/login_switch.html

@@ -1,33 +0,0 @@
-{% extends "base.html" %}
-
-{% block "content" %}
-<div id="main-login-container" class="container">
-    <div class="row row-centered">
-    <div class="col-xs-10 col-sm-8 col-md-8 col-centered">
-        <header>
-            <div class="banner">
-                <h1>GestioJeux &ndash; Mode de connexion</h1>
-            </div>
-        </header>
-        <div class="container-fluid">
-        <div class="row" style="margin:0;">
-            <a aria-label="Compte clipper"
-                    href="{{ cas_url }}">
-                <div class="col-xs-12 col-sm-6" id="login_clipper">
-                    Compte clipper
-                </div>
-            </a>
-            <a  aria-label="Extérieur" 
-                    href="{{ pass_url }}">
-                <div class="col-xs-12 col-sm-6" id="login_outsider">
-                    Extérieur
-                </div>
-            </a>
-        </div>
-        </div>
-    </div>
-    </div>
-</div>
-
-{% endblock %}
-

mainsite/templates/mainsite/home.html

@@ -1,9 +1,6 @@
 {% extends "base.html" %}
 
-{% block "title" %}
-  Bienvenue en salle Jeux
-{% endblock %}
-
 {% block "content" %}
-  Site d'inventaire et de gestion du club Jeux de l'ENS.
+<h1>Bienvenue en salle Jeux</h1>
+Site d'inventaire et de gestion du club Jeux de l'ENS.
 {% endblock %}

mainsite/templates/mainsite/login.html

@@ -1,11 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<a href="{{ cas_url }}">
-  <button class="login-btn">Clipper</button>
-</a>
-<a href="{{ pass_url }}">
-  <button class="login-btn">Mot de passe</button>
-</a>
-{% endblock content %}
-

mainsite/templates/partials/head.html

@@ -1,8 +1,8 @@
 {% load static %}
 
-    <meta charset="utf-8">
+<meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GestioJeux</title>
+<title>GestioJeux</title>
-    <link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" />
+<link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" />
-    <link rel="shortcut icon" type="image/png" href="/static/img/favicon.png"/>
+<link rel="shortcut icon" type="image/png" href="/static/img/favicon.png"/>
-    <script src="{% static "js/jquery-3.4.1.min.js" %}"></script>
+<script src="{% static "js/jquery-3.4.1.min.js" %}"></script>

mainsite/templates/partials/header.html

@@ -1,17 +1,18 @@
 <header>
-  <h1>
+  <h1>GestioJeux</h1>
-    <a href="{% url "mainsite:home" %}">
+
-      GestioJeux
-    </a>
-  </h1>  
   {% with url_name=request.resolver_match.url_name %}
   <nav>
     <a {% if url_name == "home" %}class="current"{% endif %} href="{% url "mainsite:home" %}"><i class="fa fa-home" aria-hidden="true"></i></a>
     <a {% if url_name == "inventory" %}class="current"{% endif %} href="{% url "inventory:inventory" %}">Inventaire</a>
     <a {% if url_name == "suggestions" %}class="current"{% endif %} href="">Suggestions</a>
+    {% if request.user.is_staff %}
+    <a href="{% url "admin:index" %}">Admin</a>
+    {% endif %}
   </nav>
   {% if request.user.is_authenticated %}
-  <a class="logout" href="{% url "gestiojeux_auth:logout" %}?next=/">Déconnexion</a>
+  <div class="username">{{ request.user.username }}</div>
+  <a class="login" href="{% url "gestiojeux_auth:logout" %}?next={{ request.get_full_path }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
   {% else %} <a class="login" href="{% url "gestiojeux_auth:login" %}?next={{ request.get_full_path }}">Connexion</a>
   {% endif %}
   {# <a class="login" href="">Logout</a> #}

mainsite/templates/small_page.html

@@ -0,0 +1,3 @@
+{% extends "base.html" %}
+
+{% block "main_content_class" %}small_page{% endblock %}