Merge pull request 'feat(template): improve responsiveness' (#3) from weva/matemat:main into main

Reviewed-on: s3lph/matemat#3

templates/login.html

@@ -5,15 +5,19 @@
   <h1>Welcome</h1>
 
   {# Show a username/password login form #}
-  <form method="post" action="/login" id="loginform" accept-charset="UTF-8">
-    <label class="form-label" for="login-username">Username: </label>
-    <input class="form-control" id="login-username" type="text" name="username"/><br/>
-
-    <label class="form-label" for="login-password">Password: </label>
-    <input class="form-control" id="login-password" type="password" name="password"/><br/>
-
+  <form method="post" action="/login" accept-charset="UTF-8" id="loginform" class="row gy-2 gx-3 align-items-center">
+    <div class="col-auto">
+      <label class="visually-hidden" for="login-username">Username</label>
+      <input class="form-control" id="login-username" type="text" name="username" placeholder="Username" />
+    </div>
+    <div class="col-auto">
+      <label class="visually-hidden" for="login-password">Password</label>
+      <input class="form-control" id="login-password" type="password" name="password" placeholder="Password" />
+    </div>
+    <div class="col-auto">
       <input class="btn btn-primary" type="submit" value="Login">
       <a class="btn btn-secondary" href="/">Cancel</a>
+   </div>
   </form>
 
   {{ super() }}
@@ -23,3 +27,4 @@
 {% block eanwebsocket %}
   document.location = "/?ean=" + e.data;
 {% endblock %}
+

templates/productlist.html

@@ -38,7 +38,7 @@
 <div class="row itemlist">
   {% for product in products %}
     {# Show an item per product, consisting of the name, image, price and stock, triggering a purchase on click #}
-    <div class="col-sm-1 g-4">
+    <div class="col-xl-1 col-md-2 col-sm-3 col-4 g-4">
       {% if product.custom_price %}
 	<a class="card h-100 text-bg-light" onclick="setup_custom_price({{ product.id }}, '{{ product.name}}');">
       {% else %}

templates/userlist.html

@@ -5,7 +5,7 @@
   <div class="row itemlist">
     {% for user in users %}
       {# Show an item per user, consisting of the username, and the avatar, linking to the touchkey login #}
-      <div class="col-sm-1 g-4">
+      <div class="col-xl-1 col-md-2 col-sm-3 col-4 g-4 g-4">
 	<a class="card h-100 text-bg-light" href="/touchkey?uid={{ user.id }}&username={{ user.name }}{% if buyproduct %}&buypid={{ buyproduct.id }}{% endif %}">
 	  <div class="card-header">
 	      {{ user.name }}