ChaoticByte/drinks-manager
1
1
Fork 0
Code Issues Pull requests Projects Releases 20 Packages Wiki Activity Actions

Redesigned the user interface #23

Browse source
This commit is contained in:
ChaoticByte 2023-02-17 22:01:09 +01:00
parent f7048d1e9f
commit d93591bcb2
32 changed files with 846 additions and 1297 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/templates/registration/logged_out.html
View file

@ -1,24 +1,19 @@
{% extends "baselayout.html" %}
{% load i18n %}
{% block title %}
{% translate "Drinks - Logged Out" %}
{% translate "Drinks - Logged Out" %}
{% endblock %}
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/login.css">
<link rel="stylesheet" href="/static/css/login.css">
{% endblock %}
{% block content %}
<div class="centeringflex">
{% translate "Logged out! You will be redirected shortly." %}
<br><br>
<a href="/">{% translate "Click here if automatic redirection does not work." %}</a>
</div>
<script src="/static/js/logged_out.js"></script>
{% endblock %}
<div class="flex flex-center flex-column gap-1rem">
{% translate "Logged out! You will be redirected shortly." %}
<a href="/">{% translate "Click here if automatic redirection does not work." %}</a>
</div>
<script src="/static/js/logged_out.js"></script>
{% endblock %}

100
app/templates/registration/login.html
View file

@ -5,66 +5,56 @@
{% load static %}
{% block title %}
{% translate "Drinks - Login" %}
{% translate "Drinks - Login" %}
{% endblock %}
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/login.css">
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
{% endblock %}
{% block content %}
{% if error_message %}
<p class="errortext">{{ error_message }}</p>
{% endif %}
<div class="passwordoverlaycontainer nodisplay" id="passwordoverlaycontainer">
<div class="passwordoverlay">
<form method="post" action="{% url 'login' %}" class="loginform">
{% csrf_token %}
<h1>{% translate "Log in" %}</h1>
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
<div class="horizontalbuttonlist">
<button type="button" id="pwocancel">{% translate "cancel" %}</button>
<input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
</div>
</form>
</div>
<!-- Virtual Keyboard -->
{% get_current_language as LANGUAGE_CODE %}
<div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
<script src="/static/js/simple-keyboard.js"></script>
<script src="/static/js/simple-keyboard_configure.js"></script>
{% if error_message %}
<p class="errortext">{{ error_message }}</p>
{% endif %}
<div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
<div class="passwordoverlay">
<h1>{% translate "Log in" %}</h1>
<form method="post" action="{% url 'login' %}" class="flex flex-center loginform">
{% csrf_token %}
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
<input type="password" name="password" autocomplete="current-password" required="" id="id_password" class="keyboard-input" placeholder='{% translate "Password/PIN" %}'>
<div class="buttons">
<button type="button" id="pwocancel">{% translate "cancel" %}</button>
<input class="button" id="submit_login" type="submit" value='{% translate "login" %}' />
</div>
</form>
</div>
<!-- Virtual Keyboard -->
{% get_current_language as LANGUAGE_CODE %}
<div id="keyboard" class="simple-keyboard" data-layout="{{LANGUAGE_CODE}}"></div>
<script src="/static/js/simple-keyboard.js"></script>
<script src="/static/js/simple-keyboard_configure.js"></script>
</div>
<div class="flex flex-column flex-center">
<h1>{% translate "Choose your account" %}</h1>
<div class="userlistcontainer" id="userlistcontainer">
<ul class="userlist">
{% for user_ in user_list %}
<li class="userlistbutton button" data-username="{{ user_.username }}">
<img src="/profilepictures/{{ user_.profile_picture_filename|urlencode }}">
<div>
{% if user_.first_name %}
{% if user_.last_name %}
{{ user_.last_name }},
{% endif %}
{{ user_.first_name }}
{% else %}
{{ user_.username }}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
<script src="/static/js/login.js"></script>
{% endblock %}
<ul class="flex flex-center flex-wrap userlist">
{% for user_ in user_list %}
<li class="flex flex-center userlistbutton button" data-username="{{ user_.username }}">
<img src="/profilepictures/{{ user_.profile_picture_filename|urlencode }}">
<div class="flex flex-center">
{% if user_.first_name %}
{% if user_.last_name %}
{{ user_.last_name }},
{% endif %}
{{ user_.first_name }}
{% else %}
{{ user_.username }}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
<script src="/static/js/login.js"></script>
{% endblock %}