forked from DGNum/gestiojeux
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.
This commit is contained in:
Guillaume Bertholon
parent
8f6ef82f99
commit
be99a76829
27 changed files with 155 additions and 237 deletions
|
|
@ -8,16 +8,13 @@ header {
|
|||
color: $header_text_color;
|
||||
padding: 0 30px;
|
||||
|
||||
border-bottom: 4px solid $header_border_color;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
a {
|
||||
display: block;
|
||||
|
||||
padding: 0 20px;
|
||||
color: $header_text_color;
|
||||
font-size: $font_size;
|
||||
text-decoration: none;
|
||||
}
|
||||
padding: 0 20px;
|
||||
color: $header_text_color;
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
header h1 a {
|
||||
display: block;
|
||||
padding: 0 20px;
|
||||
color: #f6fbfd;
|
||||
font-size: 16pt;
|
||||
text-decoration: none; }
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
color: #f6fbfd;
|
||||
font-size: 16pt; }
|
||||
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 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch; }
|
||||
.indexbar a {
|
||||
text-align: center;
|
||||
flex: 1 1 0;
|
||||
/*.indexbar {
|
||||
width: 100%;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base_minimal.html" %}
|
||||
{% extends "small_page.html" %}
|
||||
|
||||
{% block "content" %}
|
||||
<h1>Requête invalide</h1>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base.html" %}
|
||||
{% extends "small_page.html" %}
|
||||
|
||||
{% block "content" %}
|
||||
<h1>Accès refusé</h1>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base_minimal.html" %}
|
||||
{% extends "small_page.html" %}
|
||||
|
||||
{% block "content" %}
|
||||
<h1>Page introuvable</h1>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends "base_minimal.html" %}
|
||||
{% extends "small_page.html" %}
|
||||
|
||||
{% block "content" %}
|
||||
<h1>Incident technique</h1>
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
@ -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 – 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 %}
|
||||
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
{% load static %}
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GestioJeux</title>
|
||||
<link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" />
|
||||
<link rel="shortcut icon" type="image/png" href="/static/img/favicon.png"/>
|
||||
<script src="{% static "js/jquery-3.4.1.min.js" %}"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GestioJeux</title>
|
||||
<link type="text/css" rel="stylesheet" href="{% static "css/style.css" %}" />
|
||||
<link rel="shortcut icon" type="image/png" href="/static/img/favicon.png"/>
|
||||
<script src="{% static "js/jquery-3.4.1.min.js" %}"></script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<header>
|
||||
<h1>
|
||||
<a href="{% url "mainsite:home" %}">
|
||||
GestioJeux
|
||||
</a>
|
||||
</h1>
|
||||
<h1>GestioJeux</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> #}
|
||||
|
|
|
|||
3
mainsite/templates/small_page.html
Normal file
3
mainsite/templates/small_page.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block "main_content_class" %}small_page{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue