Merge pull request #118 from Vauhtijuoksu/develop

Minor tweaks to time constraints

Author: jiisloth

static/css/_globals.scss

@@ -147,14 +147,29 @@ body {
     flex-direction: row;
   justify-content: center;
   .tc-col-times{
-    width: 3em;
+    width: auto;
+    .tc-time-start, .tc-time-end {
+      width: 3em
+    }
+    .tc-time-dash {
+      width: 0.8em;
+    }
   }
   .tc-col{
     display: flex;
     flex-direction: column;
     .tc-row{
       height: 1.3em;
       padding: 1px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &.tc-time{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
       .tc-input{
         width: 100%;
         height: 100%;
@@ -252,14 +267,14 @@ body {
     margin: auto;
     line-height: 0.9em;
     &:after{
-      content: "🠋"
+      content: "⮟"
     }
   }
   .tc-hour-input {
     float: right;
     margin: 0.2em;
     &:after{
-      content: "🠊"
+      content: "➤"
     }
   }
   .tc-score-indicators {
@@ -453,8 +468,28 @@ body {
   }
   .field-time-constraints{
     font-size: 0.9rem;
-    .hide-if-small{
-      display: none;
+    .tc-col {
+      .tc-row {
+        height: 2em;
+        .tc-input {
+          line-height: 1.6em;
+
+        }
+        &.tc-time{
+          flex-direction: column;
+          justify-content: center;
+          .tc-time-start, .tc-time-end {
+            font-size: 0.7em;
+            line-height: 1;
+
+          }
+          .tc-time-dash {
+            font-size: 0.6em;
+            height: 4px;
+            line-height: 4px;
+          }
+        }
+      }
     }
   }
 }

templates/marathon/plugins/fields/gdprCheck.html

@@ -13,9 +13,9 @@
             <div class="field-input">
                 <input class="form-check-input" type="checkbox" name="{{ field.name }}" {{ field.field.required }} id="{{ field.id_for_label }}">
             </div>
-                {% with splitlabel=field.label|split:"%%" %}
-                    <label for="{{ field.id_for_label }}">{{ splitlabel.0 }}<a href="{{ gdpr_url }}">{{ splitlabel.1 }}</a>{{ splitlabel.2 }}</label>
-                {% endwith %}
+            {% with splitlabel=field.label|split:"%%" %}
+                <label for="{{ field.id_for_label }}">{{ splitlabel.0 }}<a href="{{ gdpr_url }}">{{ splitlabel.1 }}</a>{{ splitlabel.2 }}</label>
+            {% endwith %}
         </div>
         <div class="field-help-text">
             {{ field.help_text }}

templates/marathon/plugins/fields/timeConstraints.html

@@ -13,7 +13,7 @@
     <div class="field-row">
         <div class="field-label tc-label-row">
             <label for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %}*{% endif %}</label>
-            <div class="tc-legend"><div class="ok"></div> Käy, <div class="maybe"></div> Ehkä, <div class="notok"></div> Ei käy</div>
+            <div class="tc-legend"><div class="ok"></div> Käy,<div class="notok"></div> Ei käy,  <div class="maybe"></div> Ehkä</div>
         </div>
         <script>
             function set_focus(elId) {
@@ -22,7 +22,7 @@
         </script>
         <div class="hidden-inputs">
             <input class="hidden-input" type="text" name="{{ field.name }}" required id="{{ field.id_for_label }}" onfocus="set_focus('dummy-{{ field.id_for_label }}')">
-            <input class="hidden-input dummy-input" type="text" id="dummy-{{ field.id_for_label }}">
+            <input class="hidden-input dummy-input" type="checkbox" id="dummy-{{ field.id_for_label }}">
         </div>
         <div class="field-time-constraints">
             {% with ''|center:24 as range %}
@@ -36,29 +36,21 @@
                 <div class="tc-col tc-col-times">
                     <div class="tc-day"></div>
                     {% for _ in range %}
-                        <div class="tc-row">
+                        <div class="tc-row tc-time">
                             {% with start=forloop.counter|add:'-1' %}
-                                {{ start|stringformat:".2d" }}:00
+                                <div class="tc-time-start">
+                                    {{ start|stringformat:".2d" }}:00
+                                </div>
+                                <div class="tc-time-dash">
+                                    -
+                                </div>
+                                <div class="tc-time-end">
+                                    {{ forloop.counter|stringformat:".2d" }}:00
+                                </div>
                             {% endwith %}
                         </div>
                     {% endfor %}
                 </div>
-                <div class="tc-col tc-col-autosize hide-if-small">
-                    <div class="tc-day"></div>
-                    {% for _ in range %}
-                        <div class="tc-row">
-                            -
-                        </div>
-                    {% endfor %}
-                </div>
-                <div class="tc-col tc-col-times hide-if-small">
-                    <div class="tc-day"></div>
-                    {% for _ in range %}
-                        <div class="tc-row">
-                            {{ forloop.counter|stringformat:".2d" }}:00
-                        </div>
-                    {% endfor %}
-                </div>
                 <div class="tc-col tc-col-autosize">
                     <div class="tc-day"></div>
                     {% for _ in range %}