rework login page CSS

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

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;
}
}
}

View File

@ -1,35 +1,65 @@
{% extends "core/base.jinja" %} {% 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 %} {% block title %}
{% trans %}Login{% endtrans %} {% trans %}Login{% endtrans %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% if form.errors %}
<p>{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
{% endif %}
{% if next %} {% if next %}
{% if user.is_authenticated %} {% if user.is_authenticated %}
<p>{% trans %}Your account doesn't have access to this page. To proceed, <p>{% trans %}Your account doesn't have access to this page. To proceed,
please login with an account that has access.{% endtrans %}</p> please login with an account that has access.{% endtrans %}</p>
{% else %} {% else %}
<p>{% trans %}Please login or create an account to see this page.{% endtrans %}</p> <p>{% trans %}Please login or create an account to see this page.{% endtrans %}</p>
{% endif %}
{% endif %} {% endif %}
{% endif %}
<form method="post" action="{{ url('core:login') }}"> <form method="post" action="{{ url('core:login') }}">
{% csrf_token %} {% if form.errors %}
<p>{{ form.username.errors }}<label for="{{ form.username.name }}">{{ form.username.label }} <p class="danger">{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
</label><input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" /></p> <br>
<p>{{ form.password.errors }}<label for="{{ form.password.name }}">{{ form.password.label }}</label>{{ form.password }}</p> {% endif %}
<input type="hidden" name="next" value="{{ next }}">
<p><input type="submit" value="{% trans %}login{% endtrans %}"></p>
</form>
{# Assumes you setup the password_reset view in your URLconf #} {% csrf_token %}
<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>
<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 }}">
<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>
&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 %} {% endblock %}