klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-01 07:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework login page CSS

Browse Source
This commit is contained in:
Julien Constant 2023-03-12 04:30:37 +01:00
parent 63b898be35
commit e324f32fde
2 changed files with 130 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
core/static/user/login.scss Normal file
View File

@ -0,0 +1,78 @@
html,
body {
box-sizing: border-box;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#page {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#quick_notif,
#info_boxes,
#page > nav {
display: none !important;
}
#content {
display: flex;
flex-direction: column;
padding: 10px !important;
box-shadow: none !important;
background-color: white !important;
margin: 0;
> div,
> form {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 500px;
> div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
> label {
width: 100%;
@media (min-width: 500px) {
width: 300px;
}
}
}
> input,
> div > input {
box-sizing: border-box;
width: 100%;
max-width: 500px;
@media (min-width: 500px) {
max-width: 300px;
}
}
> .danger,
> div > error {
color: red;
text-align: center;
}
}
}

52
core/templates/core/login.jinja
View File

@ -1,14 +1,16 @@
{% extends "core/base.jinja" %}
{%- block additional_css -%}
<link rel="stylesheet" href="{{ scss('core/override.scss') }}">
<link rel="stylesheet" href="{{ scss('user/login.scss') }}">
{%- endblock -%}
{% block title %}
{% trans %}Login{% endtrans %}
{% endblock %}
{% block content %}
{% if form.errors %}
<p>{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
@ -20,16 +22,44 @@
{% endif %}
<form method="post" action="{{ url('core:login') }}">
{% if form.errors %}
<p class="danger">{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
<br>
{% endif %}
{% csrf_token %}
<p>{{ form.username.errors }}<label for="{{ form.username.name }}">{{ form.username.label }}
</label><input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" /></p>
<p>{{ form.password.errors }}<label for="{{ form.password.name }}">{{ form.password.label }}</label>{{ form.password }}</p>
<div>
<label for="{{ form.username.name }}">{{ form.username.label }}</label>
<input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" />
{{ form.username.errors }}
</div>
<div>
<label for="{{ form.password.name }}">{{ form.password.label }}</label>
{{ form.password }}
{{ form.password.errors }}
</div>
<input type="hidden" name="next" value="{{ next }}">
<p><input type="submit" value="{% trans %}login{% endtrans %}"></p>
</form>
<input type="submit" value="{% trans %}Login{% endtrans %}">
{# Assumes you setup the password_reset view in your URLconf #}
<p><a href="{{ url('core:password_reset') }}">{% trans %}Lost password?{% endtrans %}</a></p>
<p><a href="{{ url('core:register') }}">{% trans %}Create account{% endtrans %}</a></p>
<p>
<a href="{{ url('core:password_reset') }}">{% trans %}Lost password?{% endtrans %}</a>
&nbsp;&nbsp;
<a href="{{ url('core:register') }}">{% trans %}Create account{% endtrans %}</a>
</p>
</form>
{% endblock %}
{% block additional_js %}
<script defer>
$(() => {
$("#info_boxes").remove();
$("#page > nav").remove();
$("#quick_notif").remove();
})
</script>
{% endblock %}