[TASK] style list view

static/css/skeleton.css

@@ -263,6 +263,7 @@ input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
+input[type="time"],
 textarea,
 select {
   height: 38px;
@@ -280,6 +281,7 @@ input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
+input[type="time"],
 textarea {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -295,6 +297,7 @@ input[type="text"]:focus,
 input[type="tel"]:focus,
 input[type="url"]:focus,
 input[type="password"]:focus,
+input[type="time"]:focus,
 textarea:focus,
 select:focus {
   border: 1px solid #222;
@@ -461,6 +464,11 @@ there.
   justify-content: end;
 }
 
+.content-align-bottom {
+  display: flex;
+  align-items: flex-end;
+}
+
 .font-base {
   font-size: 1.2rem !important;
 }
@@ -490,6 +498,14 @@ there.
   margin-bottom: 3rem;
 }
 
+.mr-2 {
+  margin-right: 2rem;
+}
+
+.mt-1 {
+  margin-top: 1rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -522,6 +538,22 @@ there.
   color: #fff;
 }
 
+.text-red {
+  color: red;
+}
+
 .text-center {
   text-align: center;
 }
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.data-block[data-needed="true"] {
+  border: 3px solid red;
+}

templates/base.html.tera

@@ -35,8 +35,8 @@
     <div class="bg-gray p-1 mb-3">
       <div class="container content-center-end">
         {% if user.is_admin %}	
-          <a class="button button-primary mb-0 font-base light" href="/">🚣</a>
+          <a class="button mb-0 mr-2" href="/">🚣</a>
-          <a class="button button-primary mb-0 font-base light" href="/user">👥</a>
+          <a class="button mb-0 mr-2" href="/user">👥</a>
         {% endif %}
         <a class="button button-primary mb-0 font-base light" href="/logout">LOGOUT</a>
       </div>
@@ -56,7 +56,7 @@
       {% endif %}
       {% if flash.0 == "error" %}
         <div class="row">
-          <div class="one-column p-1 text-white bg-red mb-3 light text-center">
+          <div class="one-column p-1 text-white bg-red mb-3 bold text-center">
             {{ flash.1 }}
           </div>
         </div>

templates/index.html.tera

@@ -6,23 +6,53 @@
 	{% set day = day_with_trip.day %}
 	{% set day_string = day.day | date(format="%Y-%m-%d") %}
 	{% set trips = day_with_trip.trips %}
-  <div class="bg-gray p-3 mb-1">
-    <strong class="block">{{ day.day | date(format="%d.%m.%Y")}}</strong>
-
-    {% if day.planned_amount_cox > 0%}
 
   {% set cox = trips | filter(attribute="user.is_cox", value=true) %}
   {% set amount_cox = cox | length %}
-		{% set rowers = trips | filter(attribute="user.is_cox", value=false) %}
+  {% set cox_needed = amount_cox < day.planned_amount_cox %}
-		{% if amount_cox < day.planned_amount_cox %}
+
-			{% set cox_left = day.planned_amount_cox - amount_cox %}
+  <div class="bg-gray p-3 mb-1 data-block" data-needed="{{ cox_needed}}">
-			Es {{ cox_left | pluralize(singular="wird", plural="werden")}} noch {{ cox_left }} Steuerperson{{ cox_left | pluralize(plural="en")}} gesucht!<br />
+    <strong class="block">{{ day.day | date(format="%d.%m.%Y")}}</strong>
+
+    {% if user.is_admin %}
+		<details class="text-right" style="margin-top: -3rem;">
+			<summary class="button">&#x270e;</summary>
+			<form method="post" class="text-left" action="/day">
+				<input type="hidden" name="_method" value="put" />
+				<input type="hidden" name="day" value="{{ day_string }}" />
+				<div class="row content-align-bottom">
+					<div class="three columns">
+						<label for="planned_amount_cox">Steuerpersonen</label>
+						<input class="u-full-width" type="number" id="planned_amount_cox" name="planned_amount_cox" value="{{ day.planned_amount_cox }}">
+					</div>
+					<div class="three columns">
+						<label for="planned_starting_time">Abfahrtszeit</label>
+						<input class="u-full-width" type="time" id="planned_starting_time" name="planned_starting_time" value="{% if day.planned_starting_time %}{{ day.planned_starting_time }}{% else %}17:00{%endif%}">
+					</div>
+					<div class="three columns">
+						<label for="open_registration">Registrierung offen</label>
+						<input class="u-full-width" type="checkbox" id="open_registration" name="open_registration" {% if not day or day.open_registration %} checked="true" {% endif %}/>
+					</div>
+					<div class="three columns">
+						<input class="button-primary" type="submit" value="Speichern">
+					</div>
+
+				</div>
+			</form>
+		</details>
 	{% endif %}
-		Geplante Abfahrtszeit: {{ day.planned_starting_time }}<br />
 
-		{{ trips | length }} angemeldete Person{{ trips | length | pluralize(plural="en") }}: {{ cox | length }} Steuerperson{{ cox | length | pluralize(plural="en") }} ({% for c in cox %}{{ c.user.name }} {% endfor %}), {{ rowers | length }} Ruderer:
+    {% if day.planned_amount_cox > 0%}
+      {% set rowers = trips | filter(attribute="user.is_cox", value=false) %}
+      {% if cox_needed %}
+        {% set cox_left = day.planned_amount_cox - amount_cox %}
+        <div class="block text-red">Es {{ cox_left | pluralize(singular="wird", plural="werden")}} noch {{ cox_left }} Steuerperson{{ cox_left | pluralize(plural="en")}} gesucht!</div>
+      {% endif %}
+      <strong class="block mt-1">Abfahrtszeit: {{ day.planned_starting_time }} Uhr</strong>
 
-		<ol>
+		  <div style="max-width: 75%">{{ trips | length }} angemeldete Person{{ trips | length | pluralize(plural="en") }}: {{ cox | length }} Steuerperson{{ cox | length | pluralize(plural="en") }} ({% for c in cox %}{{ c.user.name }} {% endfor %}), {{ rowers | length }} Ruderer:</div>
+
+      <ol style="max-width: 75%">
       {% for r in rowers %}
         <li>
           {{ r.user.name }} (angemeldet seit {{ r.trip.created }})
@@ -41,12 +71,12 @@
       </ol>
 
       {% if day.open_registration or user.is_cox %}
-			<details>
+        <details class="text-right" style="margin-top: -6rem;">
           <summary class="button">&plus;</summary>
-				<form method="post" action="/register">
+          <form method="post" class="text-left" action="/register">
             <input type="hidden" name="_method" value="put" />
             <input type="hidden" name="day" value="{{ day_string }}" />
-					<div class="row">
+            <div class="row content-align-bottom">
               <div class="six columns">
                 <label for="name">Name</label>
                 <input class="u-full-width" type="text" id="name" name="name" value="{{ user.name }}" />
@@ -63,40 +93,12 @@
     {% else %}
       (Noch) keine Ausfahrt geplant
     {% endif %}
-	
-	{% if user.is_admin %}
-		<details>
-			<summary class="button">&#x270e;</summary>
-			<form method="post" action="/day">
-				<input type="hidden" name="_method" value="put" />
-				<input type="hidden" name="day" value="{{ day_string }}" />
-				<div class="row">
-					<div class="three columns">
-						<label for="planned_amount_cox">Geplante Steuerpersonen</label>
-						<input class="u-full-width" type="number" id="planned_amount_cox" name="planned_amount_cox" value="{{ day.planned_amount_cox }}">
-					</div>
-					<div class="three columns">
-						<label for="planned_starting_time">Geplante Abfahrtszeit</label>
-						<input class="u-full-width" type="time" id="planned_starting_time" name="planned_starting_time" value="{% if day.planned_starting_time %}{{ day.planned_starting_time }}{% else %}17:00{%endif%}">
-					</div>
-					<div class="three columns">
-						<label for="open_registration">Registrierung offen</label>
-						<input class="u-full-width" type="checkbox" id="open_registration" name="open_registration" {% if not day or day.open_registration %} checked="true" {% endif %}/>
-					</div>
-					<div class="three columns">
-						<input class="button-primary" type="submit" value="Speichern">
-					</div>
-
-				</div>
-			</form>
-		</details>
-	{% endif %}
   </div>
 {% endfor %}
 
 
 {% if user.is_cox %}
-	<a class="button" href="/?all">Alle heurigen Ausfahrten anzeigen</a>
+	<a class="button button-primary light font-base mb-3" href="/?all">Alle heurigen Ausfahrten anzeigen</a>
 {% endif %}
 
 {% endblock content %}