- added stylesheet entries for tables/forms, small changes to templates

app/static/style.css

@@ -1,12 +1,20 @@
+/* STYLESHEET */
+/* Sets styles for menu/page design, tables (mostly for DIVs) and input forms*/
+
+/* SECTION: MENU/PAGE DESIGN */
+
+/* THE PAGE TOP MENU/TITLE */
 div.tops { background-color:#006699;
             color:white;
             padding:5px;
             padding-left:20px;
+            padding-right:20px;
             overflow:hidden;
             border-radius:5px;
             border:0px solid black;
 }
 
+/* NOTICE WHEN USER IS LOGGED IN */
 div.loggedin { background-color:#009966;
                 color:white;
                 padding:5px;
@@ -16,6 +24,7 @@ div.loggedin { background-color:#009966;
                 border:0px solid black;
 }
 
+/* BORDER AND PADDING FOR MAIN CONTENT */
 div.mainblock { background-color:white;
                 color:black;
                 padding:5px;
@@ -25,6 +34,7 @@ div.mainblock { background-color:white;
                 border:1px solid black;
 }
 
+/* MENU ITEM */
 div.item {  float:left;
             margin:3px;
             padding:5px;
@@ -39,14 +49,65 @@ div.item {  float:left;
             text-decoration:none;
 }
 
+/* MENU ITEM HOVER: greenish */
 div.item:hover { background-color:#00AA88;
 }
 
+/* MENU ITEM CLICK: orange, doesn't seem to work on chromium, but whatever */
 div.item:active { background-color:AA8800;
 }
 
+/* SECTION: GENERAL */
+
 .center {   text-align:center;
 }
 
 .right  {   float:right;
+}
+
+/* SECTION: TABLES */
+
+/* HEAD: Green, white font */
+th { background-color: #CF4C50;
+     color: white;
+}
+
+/* CONTENT: padded by 5px */
+th, td { border:1px solid #888888;
+         padding:5px;
+}
+
+/* TABLE: Single border around cells, full width */
+table { border-collapse: collapse;
+        width: 100%;
+}
+
+/* ROWS: Every second gray */
+tr:nth-child(even) {background-color: #f2f2f2
+}
+
+/* HOVERING OVER ROWS: Something red */
+tr:hover {background-color: #ffe5e5
+}
+
+/* SECTION: INPUT FORMS */
+
+input[type=text], input[type=password], input[type=number], input[type=email] {
+    width: 100%;
+    max-width: 300px;
+    padding: 10px;
+    margin: 8px 0px;
+    box-sizing: border-box;
+}
+
+input[type=button], input[type=submit], input[type=reset] {
+    width: 100%;
+    max-width: 300px;
+    background-color: #006699;
+    border: none;
+    color: white;
+    padding: 10px 10px;
+    text-decoration: none;
+    margin: 8px 0px;
+    cursor: pointer;
 }

app/templates/base.html

@@ -18,7 +18,7 @@
 		<h1> {{ title }} - Baroness</h1>
 		<a href="/index"><div class="item">Home</div></a>
 		{% if user %}
-		<a href="/logout"><div class="item">Logout</div></a>
+		<a href="/logout"><div class="item" style="float:right;">Logout</div></a>
 		<a href="/consume"><div class="item">Konsumieren</div></a>
 		<a href="/personal"><div class="item">Personal</div></a>
 		{% if user.isbaron %}
@@ -27,7 +27,7 @@
 		<a href="/manage_users"><div class="item">Konsumentenverwaltung</div></a>
 		{% endif %}
 		{% else %}
-		<a href="/login"><div class="item right">Login</div></a>
+		<a href="/login"><div class="item" style="float:right;">Login</div></a>
 		{% endif %}
 	</div>
 	{% if user %}

app/templates/login.html

@@ -3,15 +3,15 @@
 {% block content %}
 	<h3>TODO: </h3>
 	<ul>
-		<li>encrypt and salt passwords</li>
+		<li>TODO?</li>
 	</ul>
 	<h1> Login </h1>
 	{% if error %}
 		<p>{{ error }}</p>
 	{% endif %}
 	<form name="login" method="post" action="/login">
-		Username:<input type="text" name=username required placeholder="Username"><br>
+		Username:<br><input type="text" name=username required placeholder="Username"><br>
-		Passwort:<input type="password" name=password required placeholder="Password"><br>
+		Passwort:<br><input type="password" name=password required placeholder="Password"><br>
-		<input type="submit" value="Login">
+				 <input type="submit" value="Login">
 	</form>
 {% endblock %}

app/templates/manage_beverages.html

@@ -26,5 +26,5 @@
 		{% endfor %}
     </table>
     <br />
-    <a href=/manage_beverages/add>Getränk Hinzufügen</a></li>
+    <a href=/manage_beverages/add><div class="item">Getränk Hinzufügen</div></a>
 {% endblock %}

app/templates/manage_beverages_add.html

@@ -1,7 +1,7 @@
 {% extends "base.html"%}
 {% set title = "Produkt hinzufügen" %}
 {% block content %}
-	<h1> Produkt hinzufügen</h1>
+	<h1>Konsumat hinzufügen</h1>
 	{% if error %}
 		<p>Fehler: {{ error }}</p>
 	{% endif %}
@@ -10,8 +10,8 @@
 	{% endif %}
 	<p> TODO: many </p>
 	<form name="user" method="post" action="/manage_beverages/add">
-		Produktname:<input type="text" name="name" required><br>
+		Produktname:<br><input type="text" name="name" required><br>
-		Preis:<input type="number" name="price" step="any" required value="0.0" /> € <br>
+		Preis:<br><input type="number" name="price" step="any" required value="0.0" /> € <br>
 		Angezeigt: <input type="checkbox" name="isshown" checked /><br>
 		<input type="submit" value="Hinzufügen">
 	</form>

app/templates/manage_beverages_edit.html

@@ -1,7 +1,7 @@
 {% extends "base.html"%}
 {% set title = "Konsumat bearbeiten" %}
 {% block content %}
-	<h1> {{product_to_edit.name}} bearbeiten</h1>
+	<h1>Konsumat {{product_to_edit.name}} bearbeiten</h1>
 	{% if error %}
 		<p>Fehler: {{ error }}</p>
 	{% else %}
@@ -9,9 +9,9 @@
 		<p>{{ success }}</p>
 	{% endif %}
 	<form name="product" method="post" action="/manage_beverages/edit">
-		Userid: <input type="text" name="id" required value="{{product_to_edit.id}}" readonly="readonly" /> <br>
+		ProduktID:<br><input type="text" name="id" required value="{{product_to_edit.id}}" readonly="readonly" /> <br>
-		Username:<input type="text" name="name" required value="{{product_to_edit.name}}" /> <br>
+		ProduktName:<br><input type="text" name="name" required value="{{product_to_edit.name}}" /> <br>
-        Preis:<input type="number" name="price" step="any" required value="{{product_to_edit.price}}" /> € <br>
+        Preis:<br><input type="number" name="price" step="any" required value="{{product_to_edit.price}}" /> € <br>
 		Angezeigt: <input type="checkbox" name="isshown" {% if product_to_edit.isshown %} checked {% endif %} /><br>
 		<input type="submit" value="Übernehmen" />
 	</form>

app/templates/manage_users.html

@@ -30,5 +30,5 @@
 		{% endfor %}
 	</table>
 	<br />
-	<a href=/manage_users/add>User Hinzufügen</a>
+	<a href=/manage_users/add><div class="item">User Hinzufügen</div></a>
 {% endblock %}

app/templates/manage_users_add.html

@@ -1,7 +1,7 @@
 {% extends "base.html"%}
 {% set title = "Konsumentin hinzufügen" %}
 {% block content %}
-	<h1> Konsumentin hinzufügen</h1>
+	<h1>Konsumentin hinzufügen</h1>
 	{% if error %}
 		<p>Fehler: {{ error }}</p>
 	{% endif %}
@@ -10,12 +10,12 @@
 	{% endif %}
 	<p> TODO: many </p>
 	<form name="user" method="post" action="/manage_users/add">
-		Username:<input type="text" name=username required placeholder="Username"><br>
+		Username:<br><input type="text" name=username required placeholder="Username"><br>
-		Passwort:<input type="password" name=password1 required placeholder="Password"><br>
+		Passwort:<br><input type="password" name=password1 required placeholder="Password"><br>
-		Passwort wiederholen:<input type="password" name=password2 required placeholder="Password"><br>
+		Passwort wiederholen:<br><input type="password" name=password2 required placeholder="Password"><br>
-		Name:<input type="text" name=longname required placeholder="Vorname Nachname"><br>
+		Name:<br><input type="text" name=longname required placeholder="Vorname Nachname"><br>
-		Email:<input type="email" name=email required placeholder="petra@fet.at"><br>
+		Email:<br><input type="email" name=email required placeholder="petra@fet.at"><br>
-		Euml ID:<input type="text" name=rfid_id required placeholder="0xDEADBEEF"><br>
+		Euml ID:<br><input type="text" name=rfid_id required placeholder="0xDEADBEEF"><br>
 		<input type="submit" value="Hinzufügen">
 	</form>
 {% endblock %}

app/templates/manage_users_edit.html

@@ -1,7 +1,7 @@
 {% extends "base.html"%}
 {% set title = "Konsumentin bearbeiten" %}
 {% block content %}
-	<h1> {{user.name}} bearbeiten</h1>
+	<h1>Konsumentin {{user_to_edit.name}} bearbeiten</h1>
 	{% if error %}
 		<p>Fehler: {{ error }}</p>
 	{% else %}
@@ -9,11 +9,11 @@
 		<p>{{ success }}</p>
 	{% endif %}
 	<form name="user" method="post" action="/manage_users/edit">
-		Userid: <input type="text" name="id" required value="{{user_to_edit.id}}" readonly="readonly" /> <br>
+		Userid:<br><input type="text" name="id" required value="{{user_to_edit.id}}" readonly="readonly" /> <br>
-		Username:<input type="text" name="username" required value="{{user_to_edit.name}}" /> <br>
+		Username:<br><input type="text" name="username" required value="{{user_to_edit.name}}" /> <br>
-		Name:<input type="text" name="longname" required value="{{user_to_edit.longname}}" /><br>
+		Name:<br><input type="text" name="longname" required value="{{user_to_edit.longname}}" /><br>
-		Email:<input type="email" name="email" required value="{{user_to_edit.email}}" /><br>
+		Email:<br><input type="email" name="email" required value="{{user_to_edit.email}}" /><br>
-		Euml ID:<input type="text" name="rfid_id" required value="{{user_to_edit.rfid_id}}" /><br>
+		Euml ID:<br><input type="text" name="rfid_id" required value="{{user_to_edit.rfid_id}}" /><br>
 		Geschwärzt: <input type="checkbox" name="isblack"  {% if user_to_edit.isblack %} checked {% endif %} /> <br>
 		Baron: <input type="checkbox" name="isbaron" {% if user_to_edit.isbaron %} checked {% endif %} /> <br>
 		Angezeigt: <input type="checkbox" name="isshown" {% if user_to_edit.isshown %} checked {% endif %} /><br>