From 8599f49857b0eab793d1ee1065f2e819e732a01f Mon Sep 17 00:00:00 2001 From: W13R <9070224-W13R@users.noreply.gitlab.com> Date: Fri, 4 Nov 2022 20:35:28 +0100 Subject: [PATCH] Refactored CSS and HTML templates and polished UI (#10), changed JavaScript variable names to camelCase, adjusted filenames and some url parameter names in urlpatterns, and more. --- .../{baseLayout.html => baselayout.html} | 9 +- application/app/templates/deposit.html | 26 ++-- ...{globalMessage.html => globalmessage.html} | 2 +- application/app/templates/history.html | 9 +- application/app/templates/index.html | 10 +- application/app/templates/order.html | 84 ++++++------ .../templates/registration/logged_out.html | 4 +- .../app/templates/registration/login.html | 42 +++--- application/app/templates/statistics.html | 25 ++-- application/app/templates/supply.html | 41 +++--- .../{userPanel.html => userpanel.html} | 28 ++-- application/app/urls.py | 2 +- application/app/views.py | 16 +-- application/locale/de/LC_MESSAGES/django.po | 24 ++-- static/css/appform.css | 61 +++++++++ ...umberInput.css => custom_number_input.css} | 13 +- static/css/deposit.css | 3 - static/css/history.css | 2 +- static/css/index.css | 15 ++- static/css/login.css | 33 +++-- static/css/main.css | 124 ++++++------------ static/css/order.css | 3 - static/css/statistics.css | 30 ++--- static/css/supply.css | 6 - ...mNumberInput.js => custom_number_input.js} | 14 +- static/js/deposit.js | 22 ++-- static/js/login.js | 56 ++++---- static/js/main.js | 14 +- static/js/order.js | 54 ++++---- static/js/supply.js | 32 ++--- 30 files changed, 401 insertions(+), 403 deletions(-) rename application/app/templates/{baseLayout.html => baselayout.html} (84%) rename application/app/templates/{globalMessage.html => globalmessage.html} (65%) rename application/app/templates/{userPanel.html => userpanel.html} (56%) create mode 100644 static/css/appform.css rename static/css/{customNumberInput.css => custom_number_input.css} (78%) delete mode 100644 static/css/deposit.css delete mode 100644 static/css/order.css delete mode 100644 static/css/supply.css rename static/js/{customNumberInput.js => custom_number_input.js} (64%) diff --git a/application/app/templates/baseLayout.html b/application/app/templates/baselayout.html similarity index 84% rename from application/app/templates/baseLayout.html rename to application/app/templates/baselayout.html index ced9bb8..7d0a5e3 100644 --- a/application/app/templates/baseLayout.html +++ b/application/app/templates/baselayout.html @@ -16,13 +16,13 @@ -
+
- {% include "globalMessage.html" %} + {% include "globalmessage.html" %} {% if user.is_authenticated %} - {% include "userPanel.html" %} + {% include "userpanel.html" %} {% endif %} @@ -30,14 +30,13 @@ {% if user.is_authenticated or "accounts/login/" in request.path or "accounts/logout/" in request.path or "admin/logout/" in request.path %} -

{% block heading %}{% endblock %}

{% block content %}{% endblock %}
{% else %} -
+
{% translate "An error occured. Please log out and log in again." %}
log out diff --git a/application/app/templates/deposit.html b/application/app/templates/deposit.html index dac6950..cec4ef2 100644 --- a/application/app/templates/deposit.html +++ b/application/app/templates/deposit.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} @@ -7,29 +7,29 @@ {% endblock %} {% block headAdditional %} - + {% endblock %} -{% block heading %} - {% translate "Deposit" %} -{% endblock %} {% block content %} -
+ {% csrf_token %} -
-
{% translate "Amount" %} {{ currency_suffix }}:
-
+

{% translate "Deposit" %}

+ +
+ {% translate "Amount" %} {{ currency_suffix }}: + + +
-
+
-
+
{% translate "cancel" %} - +
diff --git a/application/app/templates/globalMessage.html b/application/app/templates/globalmessage.html similarity index 65% rename from application/app/templates/globalMessage.html rename to application/app/templates/globalmessage.html index f6995fa..83fd733 100644 --- a/application/app/templates/globalMessage.html +++ b/application/app/templates/globalmessage.html @@ -1,5 +1,5 @@ {% if global_message != "" %} -
+
{{ global_message }}
{% endif %} \ No newline at end of file diff --git a/application/app/templates/history.html b/application/app/templates/history.html index ff43b23..7abd1f3 100644 --- a/application/app/templates/history.html +++ b/application/app/templates/history.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} @@ -10,12 +10,11 @@ {% endblock %} -{% block heading %} - {% translate "History" %} -{% endblock %} {% block content %} +

{% translate "History" %}

+ {% if history %} @@ -25,7 +24,7 @@ {% for h in history %} - + {% endfor %}
{{ h.0 }}{{ h.1 }}{{ h.1 }}
diff --git a/application/app/templates/index.html b/application/app/templates/index.html index 9836e32..3756b0b 100644 --- a/application/app/templates/index.html +++ b/application/app/templates/index.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} @@ -10,15 +10,13 @@ {% endblock %} -{% block heading %} - {% translate "Available Drinks" %} -{% endblock %} - {% block content %} +

{% translate "Available Drinks" %}

+ {% if available_drinks %} -
    +
      {% for drink in available_drinks %} {% if drink.do_not_count %}
    • diff --git a/application/app/templates/order.html b/application/app/templates/order.html index 5c72755..d720197 100644 --- a/application/app/templates/order.html +++ b/application/app/templates/order.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} {% load l10n %} @@ -8,13 +8,10 @@ {% endblock %} {% block headAdditional %} - - + + {% endblock %} -{% block heading %} - {% translate "Order" %} -{% endblock %} {% block content %} @@ -22,66 +19,67 @@ {% if user.balance > 0 or user.allow_order_with_negative_balance %} -
      + {% csrf_token %} -
      -
      {% translate "Drink" %}:
      -
      {{ drink.product_name }}
      -
      +

      {% translate "Order" %}

      -
      -
      {% translate "Price per Item" %} ({{ currency_suffix }}):
      -
      {{ drink.price }}
      +
      + {% translate "Drink" %}: + {{ drink.product_name }} +
      +
      + {% translate "Price per Item" %} ({{ currency_suffix }}): + + {{ drink.price }} +
      {% if not drink.do_not_count %} -
      -
      {% translate "Available" %}:
      -
      {{ drink.available }}
      +
      + {% translate "Available" %}: + {{ drink.available }}
      {% endif %} -
      -
      {% translate "Count" %}:
      -
      - - - {% if drink.do_not_count %} - - {% else %} - - {% endif %} - - -
      +
      + {% translate "Sum" %} ({{ currency_suffix }}): + {{ drink.price }}
      -
      -
      {% translate "Sum" %} ({{ currency_suffix }}):
      -
      {{ drink.price }}
      +
      + {% translate "Count" %}: + + + {% if drink.do_not_count %} + + {% else %} + + {% endif %} + +
      - -
      - +
      -
      + + +
      {% translate "cancel" %} - +
      - + {% else %} -
      +

      {% translate "Your balance is too low to order a drink." %}

      {% translate "back" %}
      @@ -90,7 +88,7 @@ {% else %} -
      +

      {% translate "This drink is not available." %}

      {% translate "back" %}
      diff --git a/application/app/templates/registration/logged_out.html b/application/app/templates/registration/logged_out.html index 4f36790..38bb024 100644 --- a/application/app/templates/registration/logged_out.html +++ b/application/app/templates/registration/logged_out.html @@ -1,5 +1,5 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} @@ -13,7 +13,7 @@ {% block content %} -
      +
      {% translate "Logged out! You will be redirected shortly." %}

      {% translate "Click here if automatic redirection does not work." %} diff --git a/application/app/templates/registration/login.html b/application/app/templates/registration/login.html index 184022f..4323c9e 100644 --- a/application/app/templates/registration/login.html +++ b/application/app/templates/registration/login.html @@ -1,5 +1,5 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} {% load static %} @@ -15,14 +15,14 @@ {% block content %} {% if error_message %} -

      {{ error_message }}

      +

      {{ error_message }}

      {% endif %} -
      +
      -
      +
      -
      + {% csrf_token %}

      {% translate "Log in" %}

      @@ -31,30 +31,30 @@
      - - - + + + - - - + + + - - - + + + - - - + + +
      -
      - +
      +
      @@ -65,10 +65,10 @@

      {% translate "Choose your account" %}

      -
      +
        {% for user_ in user_list %} -
      • +
      • {% if user_.first_name %} diff --git a/application/app/templates/statistics.html b/application/app/templates/statistics.html index cc340fd..662e7d4 100644 --- a/application/app/templates/statistics.html +++ b/application/app/templates/statistics.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} @@ -11,18 +11,15 @@ {% endblock %} -{% block heading %} - {% translate "Statistics" %} -{% endblock %} - - {% block content %} -
        +

        {% translate "Statistics" %}

        -
        +
        -
        +
        + +

        {% translate "Your orders per drink" %}

        {% if noyopd %} @@ -42,7 +39,7 @@ {% endif %} -
        +

        {% translate "All orders per drink" %}

        {% if noaopd %}
        @@ -62,7 +59,7 @@ {% endif %} -
        +

        {% translate "Your orders per month (last 12 months)" %}

        {% if yopml12m %}
        @@ -82,7 +79,7 @@ {% endif %} -
        +

        {% translate "All orders per month (last 12 months)" %}

        {% if aopml12m %}
        @@ -102,7 +99,7 @@ {% endif %} -
        +

        {% translate "Your orders per weekday" %}

        {% if yopwd %}
        @@ -122,7 +119,7 @@ {% endif %} -
        +

        {% translate "All orders per weekday" %}

        {% if aopwd %}
        diff --git a/application/app/templates/supply.html b/application/app/templates/supply.html index 0f62ad5..fabb224 100644 --- a/application/app/templates/supply.html +++ b/application/app/templates/supply.html @@ -1,4 +1,4 @@ -{% extends "baseLayout.html" %} +{% extends "baselayout.html" %} {% load i18n %} {% load l10n %} @@ -8,48 +8,49 @@ {% endblock %} {% block headAdditional %} - - + + {% endblock %} -{% block heading %} - {% translate "Supply" %} -{% endblock %} {% block content %} {% if user.is_superuser or user.allowed_to_supply %} - + {% csrf_token %} -
        -
        {% translate "Description" %}:
        - +

        {% translate "Supply" %}

        + +
        + {% translate "Description" %}: + + +
        -
        -
        {% translate "Price" %} ({{ currency_suffix }}):
        -
        - -
        +
        + {% translate "Price" %} ({{ currency_suffix }}): + + +
        -
        +
        -
        +
        {% translate "cancel" %} - +
        - + {% else %} -
        +

        {% translate "You are not allowed to view this site." %}

        {% translate "back" %}
        diff --git a/application/app/templates/userPanel.html b/application/app/templates/userpanel.html similarity index 56% rename from application/app/templates/userPanel.html rename to application/app/templates/userpanel.html index 7e95ff6..7a15a36 100644 --- a/application/app/templates/userPanel.html +++ b/application/app/templates/userpanel.html @@ -1,8 +1,8 @@ {% load i18n %} {% load static %} -
        -
        +
        +
        {% if user.first_name != "" %} @@ -12,30 +12,30 @@ {% endif %}  -  {% if user.balance < 0.01 %} - {% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }} + {% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }} {% else %} {% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }} {% endif %}
        -
        - Home - {% translate "Deposit" %} +
        + Home + {% translate "Deposit" %} {% translate "Logout" %} - diff --git a/application/app/urls.py b/application/app/urls.py index 788ecd9..70feadd 100644 --- a/application/app/urls.py +++ b/application/app/urls.py @@ -6,7 +6,7 @@ from .admin import adminSite urlpatterns = [ path('', views.index), - path('order//', views.order), + path('order//', views.order), path('history/', views.history), path('deposit/', views.deposit), path('statistics/', views.statistics), diff --git a/application/app/views.py b/application/app/views.py index f380851..33e4b49 100644 --- a/application/app/views.py +++ b/application/app/views.py @@ -84,9 +84,9 @@ def history(request): return render(request, "history.html", context) @login_required -def order(request, drinkID): +def order(request, drinkid): try: - drink_ = Drink.objects.get(pk=drinkID) + drink_ = Drink.objects.get(pk=drinkid) context = { "drink": drink_ } @@ -148,10 +148,10 @@ def api_order_drink(request): if user.allow_order_with_negative_balance or user.balance > 0: - drinkID = int(request.POST["drinkID"]) - amount = int(request.POST["numberOfDrinks"]) + drinkid = int(request.POST["drinkid"]) + amount = int(request.POST["numberofdrinks"]) - drink = Drink.objects.get(pk=drinkID) + drink = Drink.objects.get(pk=drinkid) if ((drink.do_not_count and drink.available > 0) or (drink.available >= amount)) and not drink.deleted: Order.objects.create(drink=drink, user=user, amount=amount) @@ -175,7 +175,7 @@ def api_deposit(request): try: - amount = decimal.Decimal(request.POST["depositAmount"]) + amount = decimal.Decimal(request.POST["depositamount"]) if 0.00 < amount < 9999.99: # create transaction @@ -202,8 +202,8 @@ def api_supply(request): try: - price = decimal.Decimal(request.POST["supplyPrice"]) - description = str(request.POST["supplyDescription"]) + price = decimal.Decimal(request.POST["supplyprice"]) + description = str(request.POST["supplydescription"]) if 0.00 < price < 9999.99 and (user.allowed_to_supply or user.is_superuser): # create transaction diff --git a/application/locale/de/LC_MESSAGES/django.po b/application/locale/de/LC_MESSAGES/django.po index 997e989..efc8657 100644 --- a/application/locale/de/LC_MESSAGES/django.po +++ b/application/locale/de/LC_MESSAGES/django.po @@ -25,7 +25,7 @@ msgstr "Django Administrator" msgid "Django administration" msgstr "Django Administration" -#: application/app/templates/baseLayout.html:41 +#: application/app/templates/baselayout.html:41 msgid "An error occured. Please log out and log in again." msgstr "Ein Fehler ist aufgetreten. Bitte ab- und wieder anmelden." @@ -34,7 +34,7 @@ msgid "Drinks - Deposit" msgstr "Getränke - Einzahlen" #: application/app/templates/deposit.html:14 -#: application/app/templates/userPanel.html:23 +#: application/app/templates/userpanel.html:23 msgid "Deposit" msgstr "Einzahlen" @@ -58,7 +58,7 @@ msgid "Drinks - History" msgstr "Getränke - Verlauf" #: application/app/templates/history.html:14 -#: application/app/templates/userPanel.html:30 +#: application/app/templates/userpanel.html:30 msgid "History" msgstr "Verlauf" @@ -178,7 +178,7 @@ msgid "Drinks - Statistics" msgstr "Getränke - Statistiken" #: application/app/templates/statistics.html:15 -#: application/app/templates/userPanel.html:31 +#: application/app/templates/userpanel.html:31 msgid "Statistics" msgstr "Statistiken" @@ -235,7 +235,7 @@ msgid "Drinks - Supply" msgstr "Getränke - Beschaffung" #: application/app/templates/supply.html:16 -#: application/app/templates/userPanel.html:36 +#: application/app/templates/userpanel.html:36 msgid "Supply" msgstr "Beschaffung" @@ -255,25 +255,25 @@ msgstr "Senden" msgid "You are not allowed to view this site." msgstr "Dir fehlt die Berechtigung, diese Seite anzuzeigen." -#: application/app/templates/userPanel.html:9 -#: application/app/templates/userPanel.html:11 +#: application/app/templates/userpanel.html:9 +#: application/app/templates/userpanel.html:11 msgid "User" msgstr "Benutzer" -#: application/app/templates/userPanel.html:15 -#: application/app/templates/userPanel.html:17 +#: application/app/templates/userpanel.html:15 +#: application/app/templates/userpanel.html:17 msgid "Balance" msgstr "Saldo" -#: application/app/templates/userPanel.html:24 +#: application/app/templates/userpanel.html:24 msgid "Logout" msgstr "Abmelden" -#: application/app/templates/userPanel.html:27 +#: application/app/templates/userpanel.html:27 msgid "Account" msgstr "Account" -#: application/app/templates/userPanel.html:38 +#: application/app/templates/userpanel.html:38 msgid "Change Password" msgstr "Passwort ändern" diff --git a/static/css/appform.css b/static/css/appform.css new file mode 100644 index 0000000..5c727b5 --- /dev/null +++ b/static/css/appform.css @@ -0,0 +1,61 @@ +.appform { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: max-content; + font-size: 1.1rem; +} +.appform > .forminfo { + width: 100%; + text-align: left; + margin: .4rem 0; +} +.forminfo > span:first-child { + margin-right: 1rem; +} +.forminfo > span:last-child { + float: right; +} +.appform > .forminput { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: .8rem 0; + gap: 1rem; +} +.appform > .statusinfo { + margin-top: .5rem; +} +.appform > .formbuttons { + border-top: 1px solid var(--glass-border-color); + padding-top: 1rem; + margin-top: 1rem; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1rem; +} +.formbuttons button, .formbuttons .button { + box-sizing: content-box; + font-size: 1rem; + width: fit-content; +} +.formheading { + text-align: left; + width: 100%; + margin-top: 0; +} +@media only screen and (max-width: 700px) { + .appform > .forminput { + flex-direction: column; + gap: .5rem; + } + .formheading { + text-align: center; + } +} \ No newline at end of file diff --git a/static/css/customNumberInput.css b/static/css/custom_number_input.css similarity index 78% rename from static/css/customNumberInput.css rename to static/css/custom_number_input.css index 4df663f..375f0de 100644 --- a/static/css/customNumberInput.css +++ b/static/css/custom_number_input.css @@ -1,30 +1,29 @@ /* custom number input */ -.customNumberInput { +.customnumberinput { display: flex; flex-direction: row; height: 2.2rem; - width: 100% !important; } -.customNumberInput button { +.customnumberinput button { min-width: 2.5rem !important; width: 2.5rem !important; padding: 0; margin: 0; height: 100%; } -.customNumberInput-minus { +.customnumberinput-minus { border-bottom-right-radius: 0; border-top-right-radius: 0; z-index: 10; } -.customNumberInput-plus { +.customnumberinput-plus { border-bottom-left-radius: 0; border-top-left-radius: 0; z-index: 10; } -.customNumberInput input[type="number"] { +.customnumberinput input[type="number"] { max-height: 100%; - width: 5rem; + width: 4rem; padding: 0; margin: 0; font-size: .9rem; diff --git a/static/css/deposit.css b/static/css/deposit.css deleted file mode 100644 index 3b4ff50..0000000 --- a/static/css/deposit.css +++ /dev/null @@ -1,3 +0,0 @@ -#depositAmount { - width: 10rem; -} \ No newline at end of file diff --git a/static/css/history.css b/static/css/history.css index cb0ce7a..6c87d89 100644 --- a/static/css/history.css +++ b/static/css/history.css @@ -9,7 +9,7 @@ padding-bottom: .4rem !important; font-size: .95rem; } -.history .historyDate { +.history .historydate { margin-left: auto; text-align: right; font-size: .8rem !important; diff --git a/static/css/index.css b/static/css/index.css index b5caa67..a89df5d 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,4 +1,4 @@ -.availableDrinksList { +.availabledrinkslist { width: 50%; max-width: 45rem; list-style: none; @@ -9,13 +9,13 @@ justify-content: start; align-items: center; } -.availableDrinksList li { +.availabledrinkslist li { display: flex; width: 100%; height: fit-content; margin-bottom: .6rem; } -.availableDrinksList li a { +.availabledrinkslist li a { display: flex; width: 100%; align-items: center; @@ -25,20 +25,21 @@ text-decoration: none; font-size: 1rem; } -.availableDrinksList li a span:first-child { +.availabledrinkslist li a span:first-child { margin-right: 1rem !important; + text-align: left; } -.availableDrinksList li a span:last-child { +.availabledrinkslist li a span:last-child { margin-left: auto; text-align: right; font-size: 1rem; } /* mobile devices */ @media only screen and (max-width: 700px) { - .availableDrinksList { + .availabledrinkslist { width: 95%; } - .availableDrinksList li a { + .availabledrinkslist li a { width: calc(100vw - (2 * .8rem)) !important; padding: .8rem !important; } diff --git a/static/css/login.css b/static/css/login.css index 6414c2d..13776e9 100644 --- a/static/css/login.css +++ b/static/css/login.css @@ -1,15 +1,11 @@ /* login page */ -body.overflowHidden { - overflow-y: hidden !important; - overflow-x: hidden !important; -} main { margin-top: 2vh; } main > h1 { display: none; } -.userlistContainer { +.userlistcontainer { display: flex; flex-direction: column; align-items: center; @@ -47,10 +43,10 @@ main > h1 { text-align: center; padding: .8rem 1.1rem; } -.userlistButton { +.userlistbutton { font-size: 1.1rem; } -.passwordOverlayContainer { +.passwordoverlaycontainer { position: absolute; top: 0; width: 100vw; @@ -62,30 +58,41 @@ main > h1 { background: var(--page-background); z-index: 40; } -.passwordOverlay { +.passwordoverlay { display: flex; flex-direction: column; justify-content: start; align-items: center; } -.passwordOverlay > form { +.passwordoverlay > form { min-width: unset; width: fit-content; } -.passwordOverlay > form > h1 { +.passwordoverlay > form > h1 { margin-top: 2rem; margin-bottom: 2rem; } -form input[type="password"], form input[type="text"] { +/* loginform */ +.loginform { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.loginform input[type="password"], form input[type="text"] { width: 94%; padding-top: .5rem; padding-bottom: .5rem; font-size: 1rem; margin: .1rem 0; } -form .horizontalButtonList { +.loginform .horizontalbuttonlist { margin-top: 1.5rem; } +.horizontalbuttonlist .button, .horizontalbuttonlist button { + font-size: 1rem; +} +/***/ .pinpad { margin-top: 1.5rem; margin-bottom: 0; @@ -109,7 +116,7 @@ form .horizontalButtonList { margin: .2rem !important; } @media only screen and (max-width: 700px) { - .userlistContainer { + .userlistcontainer { width: 95vw; } .userlist { diff --git a/static/css/main.css b/static/css/main.css index c9cb878..8b999b7 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -6,8 +6,8 @@ --color: #fafafa; --color-error: rgb(255, 70, 70); /** glass **/ - --glass-bg-dropDown: #3a3b44ef; - --glass-bg-dropDown-hover: #55565efa; + --glass-bg-dropdown: #3a3b44ef; + --glass-bg-dropdown-hover: #55565efa; --glass-bg-color1: #ffffff31; --glass-bg-color2: #ffffff1a; --glass-bg-hover-color1: #ffffff46; @@ -16,18 +16,18 @@ --glass-border-color: #ffffff77; --glass-bg: linear-gradient(var(--glass-bg-color1), var(--glass-bg-color2)); --glass-bg-hover: linear-gradient(var(--glass-bg-hover-color1), var(--glass-bg-hover-color2)); - --glass-corner-radius: .3rem; + --glass-corner-radius: .5rem; /** page background **/ --page-background-color1: #131d25; --page-background-color2: #311d30; --page-background: linear-gradient(-190deg, var(--page-background-color1), var(--page-background-color2)); /** global message banner **/ - --bg-globalMessage: linear-gradient(135deg, #4b351c, #411d52, #1c404b); + --bg-globalmessage: linear-gradient(135deg, #4b351c, #411d52, #1c404b); } @supports(backdrop-filter: blur(10px)) { :root { - --glass-bg-dropDown: #ffffff1a; - --glass-bg-dropDown-hover: #ffffff46; + --glass-bg-dropdown: #ffffff1a; + --glass-bg-dropdown-hover: #ffffff46; --glass-blur: blur(18px); } } @@ -42,7 +42,7 @@ body { color: var(--color); overflow-x: hidden; } -.baseLayout { +.baselayout { display: flex; flex-direction: column; justify-content: start; @@ -60,7 +60,7 @@ main { width: 100%; margin-top: 5vh; } -.userPanel { +.userpanel { display: flex; flex-direction: row; justify-content: center; @@ -69,21 +69,21 @@ main { font-size: 1rem; width: 94%; } -.userInfo > span { +.userinfo > span { font-size: 1.1rem; vertical-align: middle; } -.userInfo > img { +.userinfo > img { vertical-align: middle; width: 1.8rem; height: 1.8rem; margin: .5rem; } -.userPanel > .horizontalButtonList { +.userpanel > .horizontalbuttonlist { margin-left: auto; margin-right: 0; } -.userBalanceWarn { +.userbalancewarn { color: var(--color-error); font-weight: bold; } @@ -95,19 +95,16 @@ main { width: 100%; flex-grow: 1; } -main > h1 { - margin-top: 0; -} -.globalMessage { +.globalmessage { width: 100vw; z-index: 999; display: flex; justify-content: center; align-items: center; - background: var(--bg-globalMessage); + background: var(--bg-globalmessage); padding: .3rem 0; } -.globalMessage div { +.globalmessage div { width: 96%; text-align: center; word-break: keep-all; @@ -115,24 +112,24 @@ main > h1 { box-sizing: border-box; } /* DROP DOWN MENUS */ -.dropDownMenu { +.dropdownmenu { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-radius: var(--glass-corner-radius); } -.dropDownButton { +.dropdownbutton { width: fit-content; z-index: 190; box-shadow: none; text-align: center; justify-content: center; } -.dropDownButton, .dropDownChoice { +.dropdownbutton, .dropdownchoice { font-size: 1rem; } -.dropDownList { +.dropdownlist { position: absolute; display: flex; flex-direction: column; @@ -144,35 +141,35 @@ main > h1 { opacity: 0%; transition: opacity 100ms; } -.dropDownChoice { +.dropdownchoice { box-shadow: none; border-radius: 0 !important; margin: 0; margin-top: -1px; text-align: center; justify-content: center; - background: var(--glass-bg-dropDown) !important; + background: var(--glass-bg-dropdown) !important; backdrop-filter: none !important; } -.dropDownChoice:hover { - background: var(--glass-bg-dropDown-hover) !important; +.dropdownchoice:hover { + background: var(--glass-bg-dropdown-hover) !important; } -.dropDownList :first-child { +.dropdownlist :first-child { border-top-left-radius: var(--glass-corner-radius) !important; border-top-right-radius: var(--glass-corner-radius) !important; } -.dropDownList :last-child { +.dropdownlist :last-child { border-bottom-left-radius: var(--glass-corner-radius) !important; border-bottom-right-radius: var(--glass-corner-radius) !important; } -.dropDownVisible .dropDownList { +.dropdownvisible .dropdownlist { opacity: 100%; visibility: visible; pointer-events: visible; } /* FOOTER */ .footer { - z-index: 990; + z-index: 900; display: flex; flex-direction: row; justify-content: center; @@ -181,6 +178,7 @@ main > h1 { margin-top: auto; padding-top: 3rem; padding-bottom: .3rem; + text-align: center; } .footer div { font-size: .95rem; @@ -236,47 +234,6 @@ th { text-align: left; border-bottom: 1px solid var(--color); } -/* FORMS */ -form { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-width: 18rem; - height: max-content; -} -form .row { - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - margin: .2rem 0; -} -form .row .column { - display: flex; - flex-direction: row; -} -form h1 { - font-size: 1.6rem; - margin-bottom: 2rem; -} -form { - font-size: 1.1rem; -} -form .customNumberInput { - width: 100%; -} -form .statusInfo { - margin-top: .5rem; -} -form .horizontalButtonList { - margin-top: 2rem; - width: 100%; -} -form .button, form button { - font-size: 1rem; -} /* BUTTONS & OTHER INPUT ELEMENTS */ .button, button { display: flex; @@ -322,8 +279,8 @@ input[type="text"], input[type="password"], input[type="number"] { border: none; border-radius: var(--glass-corner-radius); } -/**** CUSTOM CLASSES ****/ -.centeringFlex { +/**** OTHER CLASSES ****/ +.centeringflex { width: 100%; height: 100%; display: flex; @@ -333,22 +290,25 @@ input[type="text"], input[type="password"], input[type="number"] { text-align: center; padding: 2rem 1rem; } -.horizontalButtonList { +.horizontalbuttonlist { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; } -.horizontalButtonList > .button, .horizontalButtonList > button, .horizontalButtonList > div { +.horizontalbuttonlist > .button, .horizontalbuttonlist > button, .horizontalbuttonlist > div { margin: 0 .5rem; } -.errorText { +.errortext { margin-top: 1rem; color: var(--color-error); } .nodisplay { display: none !important; } +.heading { + margin-top: 0; +} /* MISC / GENERAL */ h1 { text-align: center; @@ -357,25 +317,25 @@ h1 { /* MOBILE OPTIMIZATIONS */ @media only screen and (max-width: 700px) { main { - margin-top: 1.5rem; + margin-top: 2rem; } - .globalMessage span { + .globalmessage span { width: 90%; } - .userPanel { + .userpanel { flex-direction: column; justify-content: start; align-items: center; } - .userPanel > .horizontalButtonList { + .userpanel > .horizontalbuttonlist { margin-right: 0; margin-left: 0; margin-top: .5rem; justify-content: center; flex-wrap: wrap; } - .userPanel > .horizontalButtonList > .button, - .userPanel > .horizontalButtonList > .dropDownMenu { + .userpanel > .horizontalbuttonlist > .button, + .userpanel > .horizontalbuttonlist > .dropdownmenu { margin: 0.25rem; } } \ No newline at end of file diff --git a/static/css/order.css b/static/css/order.css deleted file mode 100644 index 3d2685b..0000000 --- a/static/css/order.css +++ /dev/null @@ -1,3 +0,0 @@ -form { - width: 22rem; -} \ No newline at end of file diff --git a/static/css/statistics.css b/static/css/statistics.css index 9416b17..5abc145 100644 --- a/static/css/statistics.css +++ b/static/css/statistics.css @@ -1,15 +1,11 @@ -.mainContainer { +.maincontainer { min-width: 70vw; display: flex; flex-direction: column; align-items: center; justify-content: start; } -.statsHeading { - min-width: max-content; - margin-top: 0; -} -.tablesContainer { +.tablescontainer { display: flex; flex-direction: column; align-items: center; @@ -17,7 +13,7 @@ width: 95%; margin-top: 2rem; } -.statisticsTable { +.statisticstable { margin-bottom: 2rem; padding-bottom: 1rem; display: flex; @@ -26,38 +22,32 @@ align-items: center; text-align: center; } -.statisticsTable h1 { +.statisticstable h1 { margin-top: 0; font-size: 1.2rem; text-align: left; min-width: 10rem; text-align: center; } -.statisticsTable table { +.statisticstable table { min-width: 20vw; width: fit-content; } -.statisticsTable th:last-child { +.statisticstable th:last-child { text-align: right; } -.statisticsTable td:last-child { +.statisticstable td:last-child { text-align: right; } @media only screen and (max-width: 700px) { - .statisticsTable h1 { + .statisticstable h1 { min-width: 90vw; } - .statisticsTable table { + .statisticstable table { min-width: 80vw; } - .statisticsTable { + .statisticstable { margin-bottom: 2rem; padding-bottom: 1rem; } - .statsHeading { - margin-left: 0; - margin-right: 0; - padding-top: 1rem; - padding-bottom: 2rem; - } } \ No newline at end of file diff --git a/static/css/supply.css b/static/css/supply.css deleted file mode 100644 index a149993..0000000 --- a/static/css/supply.css +++ /dev/null @@ -1,6 +0,0 @@ -form { - width: 24rem; -} -#supplyPrice { - width: 10rem; -} \ No newline at end of file diff --git a/static/js/customNumberInput.js b/static/js/custom_number_input.js similarity index 64% rename from static/js/customNumberInput.js rename to static/js/custom_number_input.js index fd50680..299e02b 100644 --- a/static/js/customNumberInput.js +++ b/static/js/custom_number_input.js @@ -1,18 +1,18 @@ { document.addEventListener("DOMContentLoaded", () => { - // get all customNumberInput Elements - let custom_number_inputs = document.getElementsByClassName("customNumberInput"); - // Add Event Handler to the elements of the customNumberInputs - [...custom_number_inputs].forEach(element => { + // get all customnumberinput Elements + let customNumberInputElements = document.getElementsByClassName("customnumberinput"); + // Add Event Handler to the elements of the customnumberinputs + [...customNumberInputElements].forEach(element => { // number input - let numberFieldElement = element.getElementsByClassName("customNumberInputField")[0]; + let numberFieldElement = element.getElementsByClassName("customnumberinput-field")[0]; // minus button - element.getElementsByClassName("customNumberInput-minus")[0].addEventListener("click", () => { + element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => { alterCustomNumberField(numberFieldElement, -1) }); // plus button - element.getElementsByClassName("customNumberInput-plus")[0].addEventListener("click", () => { + element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => { alterCustomNumberField(numberFieldElement, +1) }); }) diff --git a/static/js/deposit.js b/static/js/deposit.js index fb3242c..4e8905d 100644 --- a/static/js/deposit.js +++ b/static/js/deposit.js @@ -2,21 +2,21 @@ document.addEventListener("DOMContentLoaded", () => { // elements - let deposit_form = document.getElementById("depositForm"); - let status_info = document.getElementById("statusInfo"); - let deposit_submit_button = document.getElementById("depositSubmitBtn"); + let depositForm = document.getElementById("depositform"); + let statusInfo = document.getElementById("statusinfo"); + let depositSubmitButton = document.getElementById("depositsubmitbtn"); // event listener for deposit form // this implements a custom submit method - deposit_form.addEventListener("submit", (event) => { + depositForm.addEventListener("submit", (event) => { - deposit_submit_button.disabled = true; + depositSubmitButton.disabled = true; event.preventDefault(); // Don't do the default submit action! let xhr = new XMLHttpRequest(); - let formData = new FormData(deposit_form); + let formData = new FormData(depositForm); xhr.addEventListener("load", (event) => { @@ -24,20 +24,20 @@ document.addEventListener("DOMContentLoaded", () => { response_ = event.target.responseText; if (status_ == 200 && response_ == "success") { - status_info.innerText = "Success. Redirecting soon."; + statusInfo.innerText = "Success. Redirecting soon."; window.location.replace("/"); } else { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured. Redirecting in 5 seconds..."; + statusInfo.classList.add("errortext"); + statusInfo.innerText = "An error occured. Redirecting in 5 seconds..."; window.setTimeout(() => { window.location.replace("/") }, 5000); } }) xhr.addEventListener("error", (event) => { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured. Redirecting in 5 seconds..."; + statusInfo.classList.add("errortext"); + statusInfo.innerText = "An error occured. Redirecting in 5 seconds..."; window.setTimeout(() => { window.location.replace("/") }, 5000); }) diff --git a/static/js/login.js b/static/js/login.js index aea0630..47c2b9f 100644 --- a/static/js/login.js +++ b/static/js/login.js @@ -2,14 +2,14 @@ // Define variables - let username_input; - let password_input; - let submit_button; - let password_overlay; - let pw_overlay_cancel; - let userlist_buttons; - let pinpad_buttons; - let userlist_container; + let usernameInputElement; + let passwordInputElement; + let submitButton; + let passwordOverlayElement; + let pwOverlayCancelButton; + let userlistButtons; + let pinpadButtons; + let userlistContainerElement; // Add event listeners after DOM Content loaded @@ -18,34 +18,34 @@ // elements - username_input = document.getElementById("id_username"); - password_input = document.getElementById("id_password"); - submit_button = document.getElementById("submit_login"); - password_overlay = document.getElementById("passwordOverlayContainer"); - pw_overlay_cancel = document.getElementById("pwoCancel"); - userlist_container = document.getElementById("userlistContainer"); + 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"); - userlist_buttons = document.getElementsByClassName("userlistButton"); - pinpad_buttons = document.getElementsByClassName("pinpadBtn"); + userlistButtons = document.getElementsByClassName("userlistbutton"); + pinpadButtons = document.getElementsByClassName("pinpadbtn"); // event listeners // [...] converts an html collection to an array - [...userlist_buttons].forEach(element => { + [...userlistButtons].forEach(element => { element.addEventListener("click", () => { set_username(element.dataset.username); show_password_overlay(); }) }); - [...pinpad_buttons].forEach(element => { + [...pinpadButtons].forEach(element => { element.addEventListener("click", () => { pinpad_press(element.dataset.btn); }) }) - pw_overlay_cancel.addEventListener("click", () => { + pwOverlayCancelButton.addEventListener("click", () => { hide_password_overlay(); }); @@ -53,34 +53,34 @@ function set_username(username) { - username_input.value = username; + usernameInputElement.value = username; } function show_password_overlay() { window.scrollTo(0, 0); - password_overlay.classList.remove("nodisplay"); - userlist_container.classList.add("nodisplay"); + passwordOverlayElement.classList.remove("nodisplay"); + userlistContainerElement.classList.add("nodisplay"); } function hide_password_overlay() { - password_overlay.classList.add("nodisplay"); - userlist_container.classList.remove("nodisplay"); - password_input.value = ""; + passwordOverlayElement.classList.add("nodisplay"); + userlistContainerElement.classList.remove("nodisplay"); + passwordInputElement.value = ""; } function pinpad_press(key) { if (key == "enter") { - submit_button.click(); + submitButton.click(); } else if (key == "x") { - password_input.value = ""; + passwordInputElement.value = ""; } else { - password_input.value += key; + passwordInputElement.value += key; } } diff --git a/static/js/main.js b/static/js/main.js index 8fdc085..58b2373 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,17 +1,17 @@ document.addEventListener("DOMContentLoaded", () => { - let dropDownMenuElement = document.getElementById("dropDownMenu"); - let dropDownMenuButtonElement = document.getElementById("dropDownMenuButton"); + let dropdownmenuElement = document.getElementById("dropdownmenu"); + let dropdownmenuButtonElement = document.getElementById("dropdownmenu-button"); - if (dropDownMenuButtonElement != null) { + if (dropdownmenuButtonElement != null) { - dropDownMenuButtonElement.addEventListener("click", () => { + dropdownmenuButtonElement.addEventListener("click", () => { - if (dropDownMenuElement.classList.contains("dropDownVisible")) { - dropDownMenuElement.classList.remove("dropDownVisible"); + if (dropdownmenuElement.classList.contains("dropdownvisible")) { + dropdownmenuElement.classList.remove("dropdownvisible"); } else { - dropDownMenuElement.classList.add("dropDownVisible"); + dropdownmenuElement.classList.add("dropdownvisible"); } }) diff --git a/static/js/order.js b/static/js/order.js index 8451e8c..46f88b6 100644 --- a/static/js/order.js +++ b/static/js/order.js @@ -2,54 +2,54 @@ document.addEventListener("DOMContentLoaded", () => { // elements - let order_number_of_drinks_input = document.getElementById("numberOfDrinks"); - let order_number_of_drinks_btn_a = document.getElementById("numberOfDrinksBtnA"); - let order_number_of_drinks_btn_b = document.getElementById("numberOfDrinksBtnB"); - let order_sum_element = document.getElementById("orderCalculatedSum"); + let orderNumberofdrinksInput = document.getElementById("numberofdrinks"); + let orderNumberofdrinksBtnA = document.getElementById("numberofdrinks-btn-minus"); + let orderNumberofdrinksBtnB = document.getElementById("numberofdrinks-btn-plus"); + let orderSumElement = document.getElementById("ordercalculatedsum"); - let order_form = document.getElementById("orderForm"); - let status_info = document.getElementById("statusInfo"); - let order_submit_button = document.getElementById("orderSubmitBtn"); + let orderFormElement = document.getElementById("orderform"); + let statusInfoElement = document.getElementById("statusinfo"); + let orderSubmitButton = document.getElementById("ordersubmitbtn"); // calculate & display sum - let order_price_per_drink = parseFloat(document.getElementById("pricePerDrink").dataset.drinkPrice); + let orderPricePerDrink = parseFloat(document.getElementById("priceperdrink").dataset.drinkPrice); - function calculate_and_display_sum() { + function calculateAndDisplaySum() { setTimeout(() => { - let number_of_drinks = parseFloat(order_number_of_drinks_input.value); - if (isNaN(number_of_drinks)) { - number_of_drinks = 1; + let numberOfDrinks = parseFloat(orderNumberofdrinksInput.value); + if (isNaN(numberOfDrinks)) { + numberOfDrinks = 1; } - let calculated_sum = order_price_per_drink * number_of_drinks; - order_sum_element.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum); + let calculated_sum = orderPricePerDrink * numberOfDrinks; + orderSumElement.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum); }, 25); } - order_number_of_drinks_input.addEventListener("input", calculate_and_display_sum); - order_number_of_drinks_btn_a.addEventListener("click", calculate_and_display_sum); - order_number_of_drinks_btn_b.addEventListener("click", calculate_and_display_sum); + orderNumberofdrinksInput.addEventListener("input", calculateAndDisplaySum); + orderNumberofdrinksBtnA.addEventListener("click", calculateAndDisplaySum); + orderNumberofdrinksBtnB.addEventListener("click", calculateAndDisplaySum); // custom submit method - order_form.addEventListener("submit", (event) => { + orderFormElement.addEventListener("submit", (event) => { - order_submit_button.disabled = true; + orderSubmitButton.disabled = true; event.preventDefault(); // Don't do the default submit action! - if (isNaN(parseFloat(order_number_of_drinks_input.value))) { - order_number_of_drinks_input.value = 1; + if (isNaN(parseFloat(orderNumberofdrinksInput.value))) { + orderNumberofdrinksInput.value = 1; } let xhr = new XMLHttpRequest(); - let formData = new FormData(order_form); + let formData = new FormData(orderFormElement); xhr.addEventListener("load", (event) => { @@ -57,20 +57,20 @@ document.addEventListener("DOMContentLoaded", () => { response_ = event.target.responseText; if (status_ == 200 && response_ == "success") { - status_info.innerText = "Success."; + statusInfoElement.innerText = "Success."; window.location.replace("/"); } else { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured."; + statusInfoElement.classList.add("errortext"); + statusInfoElement.innerText = "An error occured."; window.setTimeout(() => { window.location.reload() }, 5000); } }) xhr.addEventListener("error", (event) => { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured."; + statusInfoElement.classList.add("errortext"); + statusInfoElement.innerText = "An error occured."; window.setTimeout(() => { window.location.reload() }, 5000); }) diff --git a/static/js/supply.js b/static/js/supply.js index 054b08d..90e8340 100644 --- a/static/js/supply.js +++ b/static/js/supply.js @@ -2,28 +2,28 @@ document.addEventListener("DOMContentLoaded", () => { // elements - let supply_description = document.getElementById("supplyDescription"); - let supply_price = document.getElementById("supplyPrice"); + let supplyDescriptionElement = document.getElementById("supplydescription"); + let supplyPriceElement = document.getElementById("supplyprice"); - let supply_form = document.getElementById("supplyForm"); - let status_info = document.getElementById("statusInfo"); - let supply_submit_button = document.getElementById("supplySubmitBtn"); + let supplyFormElement = document.getElementById("supplyform"); + let statusInfoElement = document.getElementById("statusinfo"); + let supplySubmitButton = document.getElementById("supplysubmitbtn"); // custom submit method - supply_form.addEventListener("submit", (event) => { + supplyFormElement.addEventListener("submit", (event) => { - supply_submit_button.disabled = true; + supplySubmitButton.disabled = true; event.preventDefault(); // Don't do the default submit action! - if (isNaN(parseFloat(supply_price.value)) || supply_description.value == "") { - status_info.innerText = "Please enter a description and price." - supply_submit_button.disabled = false; + if (isNaN(parseFloat(supplyPriceElement.value)) || supplyDescriptionElement.value == "") { + statusInfoElement.innerText = "Please enter a description and price." + supplySubmitButton.disabled = false; } let xhr = new XMLHttpRequest(); - let formData = new FormData(supply_form); + let formData = new FormData(supplyFormElement); xhr.addEventListener("load", (event) => { @@ -31,20 +31,20 @@ document.addEventListener("DOMContentLoaded", () => { response_ = event.target.responseText; if (status_ == 200 && response_ == "success") { - status_info.innerText = "Success."; + statusInfoElement.innerText = "Success."; window.location.replace("/"); } else { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured."; + statusInfoElement.classList.add("errortext"); + statusInfoElement.innerText = "An error occured."; window.setTimeout(() => { window.location.reload() }, 5000); } }) xhr.addEventListener("error", (event) => { - status_info.classList.add("errorText"); - status_info.innerText = "An error occured."; + statusInfoElement.classList.add("errortext"); + statusInfoElement.innerText = "An error occured."; window.setTimeout(() => { window.location.reload() }, 5000); })