Release 15 - Revamp #38
9 changed files with 145 additions and 92 deletions
|
|
@ -92,29 +92,6 @@ main > h1 {
|
|||
.horizontalbuttonlist .button, .horizontalbuttonlist button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
/***/
|
||||
.pinpad {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 30vw;
|
||||
}
|
||||
.pinpad table {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.pinpad table tr, .pinpad td {
|
||||
padding: unset;
|
||||
background: unset;
|
||||
}
|
||||
.pinpad tr td button {
|
||||
height: 4.0rem;
|
||||
width: 4.1rem;
|
||||
font-size: 1.16rem;
|
||||
margin: .2rem !important;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.userlistcontainer {
|
||||
width: 95vw;
|
||||
|
|
|
|||
|
|
@ -122,7 +122,6 @@ main {
|
|||
.dropdownbutton {
|
||||
width: fit-content;
|
||||
z-index: 190;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -142,7 +141,6 @@ main {
|
|||
transition: opacity 100ms;
|
||||
}
|
||||
.dropdownchoice {
|
||||
box-shadow: none;
|
||||
border-radius: 0 !important;
|
||||
margin: 0;
|
||||
margin-top: -1px;
|
||||
|
|
|
|||
11
app/static/css/simple-keyboard.css
Normal file
11
app/static/css/simple-keyboard.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/*!
|
||||
*
|
||||
* simple-keyboard v3.5.22
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;max-width:272px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"â—„"}.hg-candidate-box-next:before{content:"â–ş"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;background:#d0d0d0;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}
|
||||
24
app/static/css/simple-keyboard_dark.css
Normal file
24
app/static/css/simple-keyboard_dark.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.simple-keyboard.darkTheme.numeric {
|
||||
width: 13rem;
|
||||
}
|
||||
.simple-keyboard.darkTheme {
|
||||
width: 50rem;
|
||||
max-width: 100%;
|
||||
margin-top: 2rem;
|
||||
background: transparent;
|
||||
}
|
||||
.simple-keyboard.darkTheme .hg-button {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--glass-bg);
|
||||
color: white;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--glass-border-color);
|
||||
}
|
||||
.simple-keyboard.darkTheme .hg-button:active,
|
||||
.simple-keyboard.darkTheme .hg-button:hover {
|
||||
color: white;
|
||||
background: var(--glass-bg-hover);
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
(() => {
|
||||
|
||||
// Define variables
|
||||
|
||||
let usernameInputElement;
|
||||
let passwordInputElement;
|
||||
let submitButton;
|
||||
|
|
@ -11,77 +10,43 @@
|
|||
let pinpadButtons;
|
||||
let userlistContainerElement;
|
||||
|
||||
|
||||
// Add event listeners after DOM Content loaded
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// elements
|
||||
|
||||
usernameInputElement = document.getElementById("id_username");
|
||||
passwordInputElement = document.getElementById("id_password");
|
||||
submitButton = document.getElementById("submit_login");
|
||||
passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
|
||||
pwOverlayCancelButton = document.getElementById("pwocancel");
|
||||
userlistContainerElement = document.getElementById("userlistcontainer");
|
||||
|
||||
userlistButtons = document.getElementsByClassName("userlistbutton");
|
||||
pinpadButtons = document.getElementsByClassName("pinpadbtn");
|
||||
|
||||
// event listeners
|
||||
|
||||
// [...<html-collection>] converts an html collection to an array
|
||||
|
||||
[...userlistButtons].forEach(element => {
|
||||
element.addEventListener("click", () => {
|
||||
set_username(element.dataset.username);
|
||||
show_password_overlay();
|
||||
})
|
||||
});
|
||||
|
||||
[...pinpadButtons].forEach(element => {
|
||||
element.addEventListener("click", () => {
|
||||
pinpad_press(element.dataset.btn);
|
||||
})
|
||||
})
|
||||
|
||||
pwOverlayCancelButton.addEventListener("click", () => {
|
||||
hide_password_overlay();
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
function set_username(username) {
|
||||
usernameInputElement.value = username;
|
||||
}
|
||||
|
||||
function show_password_overlay() {
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
passwordOverlayElement.classList.remove("nodisplay");
|
||||
userlistContainerElement.classList.add("nodisplay");
|
||||
|
||||
}
|
||||
|
||||
function hide_password_overlay() {
|
||||
|
||||
passwordOverlayElement.classList.add("nodisplay");
|
||||
userlistContainerElement.classList.remove("nodisplay");
|
||||
passwordInputElement.value = "";
|
||||
|
||||
}
|
||||
|
||||
function pinpad_press(key) {
|
||||
if (key == "enter") {
|
||||
submitButton.click();
|
||||
}
|
||||
else if (key == "x") {
|
||||
passwordInputElement.value = "";
|
||||
}
|
||||
else {
|
||||
passwordInputElement.value += key;
|
||||
}
|
||||
}
|
||||
|
||||
})()
|
||||
12
app/static/js/simple-keyboard.js
Normal file
12
app/static/js/simple-keyboard.js
Normal file
File diff suppressed because one or more lines are too long
82
app/static/js/simple-keyboard_configure.js
Normal file
82
app/static/js/simple-keyboard_configure.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
(() => {
|
||||
// layouts derived from
|
||||
// https://github.com/simple-keyboard/simple-keyboard-layouts/blob/master/src/lib/layouts/
|
||||
const layout_de = {
|
||||
default: [
|
||||
"^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
|
||||
"{tab} q w e r t z u i o p \u00FC +",
|
||||
"{lock} a s d f g h j k l \u00F6 \u00E4 #",
|
||||
"{shift} < y x c v b n m , . - {shift}",
|
||||
".com @ {space}",
|
||||
],
|
||||
shift: [
|
||||
'\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
|
||||
"{tab} Q W E R T Z U I O P \u00DC *",
|
||||
"{lock} A S D F G H J K L \u00D6 \u00C4 '",
|
||||
"{shift} > Y X C V B N M ; : _ {shift}",
|
||||
".com @ {space}",
|
||||
],
|
||||
}
|
||||
const layout_en = {
|
||||
default: [
|
||||
"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
|
||||
"{tab} q w e r t y u i o p [ ] \\",
|
||||
"{lock} a s d f g h j k l ; '",
|
||||
"{shift} z x c v b n m , . / {shift}",
|
||||
".com @ {space}",
|
||||
],
|
||||
shift: [
|
||||
"~ ! @ # $ % ^ & * ( ) _ + {bksp}",
|
||||
"{tab} Q W E R T Y U I O P { } |",
|
||||
'{lock} A S D F G H J K L : "',
|
||||
"{shift} Z X C V B N M < > ? {shift}",
|
||||
".com @ {space}",
|
||||
],
|
||||
}
|
||||
const layout_numeric = {
|
||||
default: [
|
||||
"1 2 3",
|
||||
"4 5 6",
|
||||
"7 8 9",
|
||||
"{bksp} . ,"
|
||||
]
|
||||
}
|
||||
// Configure keyboard when all DOM content has loaded
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Get element to send input to
|
||||
let keyboardInputElement = document.querySelector(".keyboard-input");
|
||||
// Get language code
|
||||
let layoutCode = document.getElementById("keyboard").dataset.layout;
|
||||
// Determine keyboard layout (default: en)
|
||||
let layout;
|
||||
switch (layoutCode) {
|
||||
case "de":
|
||||
layout = layout_de;
|
||||
break;
|
||||
case "numeric":
|
||||
layout = layout_numeric;
|
||||
break;
|
||||
default:
|
||||
layout = layout_en;
|
||||
}
|
||||
// determine if the numeric class has to be added
|
||||
if (layoutCode == "numeric") {
|
||||
theme = "hg-theme-default darkTheme numeric"
|
||||
}
|
||||
else {
|
||||
theme = "hg-theme-default darkTheme"
|
||||
}
|
||||
// virtual keyboard
|
||||
const Keyboard = window.SimpleKeyboard.default;
|
||||
const myKeyboard = new Keyboard({
|
||||
theme: theme,
|
||||
// choose german layout if language is de,
|
||||
// else choose english layout
|
||||
layout: layout,
|
||||
onChange: (input) => {
|
||||
keyboardInputElement.value = input;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
})()
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
{% block headAdditional %}
|
||||
<link rel="stylesheet" href="/static/css/appform.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
|
||||
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
<div class="forminput">
|
||||
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
|
||||
<span>
|
||||
<input type="number" name="depositamount" id="depositamount" max="9999.99" min="1.00" step="0.01" autofocus>
|
||||
<input type="number" name="depositamount" id="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,6 +36,11 @@
|
|||
|
||||
</form>
|
||||
|
||||
<!-- Virtual Keyboard -->
|
||||
<div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
|
||||
<script src="/static/js/simple-keyboard.js"></script>
|
||||
<script src="/static/js/simple-keyboard_configure.js"></script>
|
||||
|
||||
<script src="/static/js/deposit.js"></script>
|
||||
<script src="/static/js/autoreload.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
{% 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">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -19,48 +21,23 @@
|
|||
{% 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" placeholder='{% translate "Password/PIN" %}'>
|
||||
|
||||
<div class="pinpad">
|
||||
<table>
|
||||
<tr>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="1">1</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="2">2</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="3">3</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="4">4</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="5">5</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="6">6</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="7">7</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="8">8</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="9">9</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="x">x</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="0">0</button></td>
|
||||
<td><button type="button" class="pinpadbtn" data-btn="enter">⏎</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h1>{% translate "Choose your account" %}</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue