From 7bc61c00286672b6d39f6e45ed948b2c858cc2de Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 28 Oct 2022 10:57:08 +0200
Subject: [PATCH] Layout: forms.

---
 .../templates/experiments/main_switch.html    |  6 ++-
 src/wolnelektury/static/2022/more.scss        | 29 ++++++++++++++
 src/wolnelektury/templates/2022/base.html     |  1 +
 .../templates/forms/form_detail.html          |  7 +++-
 .../templates/forms/includes/built_form.html  | 39 ++++++++++++-------
 5 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/experiments/templates/experiments/main_switch.html b/src/experiments/templates/experiments/main_switch.html
index 2f866bce5..c02ca488a 100644
--- a/src/experiments/templates/experiments/main_switch.html
+++ b/src/experiments/templates/experiments/main_switch.html
@@ -9,8 +9,10 @@
   <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/MH1Asimulator.JPG" style="width:100%">
 
   {% for exp in request.EXPERIMENTS.values %}
-    <div class="experiment" data-slug="{{ exp.slug }}">
-      {{ exp.name }}
+    <div class="experiment nice-controls" data-slug="{{ exp.slug }}">
+      <span>
+        {{ exp.name }}
+      </span>
       <button
           {% if exp.value %}
           disabled class="active"
diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index fd03b4e12..8f95d12f9 100644
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -323,11 +323,14 @@ form {
         margin-left: 50px;
         margin-right: 50px;
     }
+}
 
+.page-simple, .nice-controls {
     button, input[type=submit] {
         margin: 24px 0;
         height: 56px;
         background: #083F4D;
+        border: none;
         border-radius: 3px;
         font-weight: 600;
         font-size: 20px;
@@ -338,6 +341,15 @@ form {
         text-align: center;
         color: #FFFFFF;
         width: 340px;
+
+        &.active {
+            outline: 2px solid #083F4D;
+            outline-offset: 3px;
+        }
+        
+        &:disabled {
+            opacity: .8;
+        }
     }
 
     label {
@@ -372,3 +384,20 @@ form {
         margin-right: 1em;
     }
 }
+
+
+.experiment {
+    display: flex;
+    align-items: center;
+}
+
+
+
+.page-simple {
+    .form-info {
+        h2 {
+            font-size: 1.5em;
+            margin-top: 0;
+        }
+    }
+}
diff --git a/src/wolnelektury/templates/2022/base.html b/src/wolnelektury/templates/2022/base.html
index 39ef0e6d4..12bae5959 100644
--- a/src/wolnelektury/templates/2022/base.html
+++ b/src/wolnelektury/templates/2022/base.html
@@ -60,6 +60,7 @@
 
     {% javascript '2022' %}
     {% javascript '2022_player' %}
+    {% block extrabody %}{% endblock %}
     {% include '2022/hotjar.html' %}
   </body>
 </html>
diff --git a/src/wolnelektury/templates/forms/form_detail.html b/src/wolnelektury/templates/forms/form_detail.html
index c32133f53..09e19e30a 100644
--- a/src/wolnelektury/templates/forms/form_detail.html
+++ b/src/wolnelektury/templates/forms/form_detail.html
@@ -1,5 +1,10 @@
-{% extends form.base_template|default:"base/base.html" %}
+{% extends form.base_template|default:request.EXPERIMENTS.layout.value|yesno:"2022/base_simple.html,base/base.html" %}
 {% load forms_builder_tags %}
+{% load title %}
+
+{% block settings %}
+  {% title form.title %}
+{% endblock %}
 
 {% block title %}{{ form.title }}{% endblock %}
 
diff --git a/src/wolnelektury/templates/forms/includes/built_form.html b/src/wolnelektury/templates/forms/includes/built_form.html
index 46d24ccdd..85d1e62f8 100644
--- a/src/wolnelektury/templates/forms/includes/built_form.html
+++ b/src/wolnelektury/templates/forms/includes/built_form.html
@@ -1,25 +1,34 @@
 {% load honeypot %}
 {% load more %}
 
+
 <h1>{{ form.title }}</h1>
 
-    <div class="form-info" style="margin-bottom:2em;">
-	{{ form.intro|first_part:"---"|safe }}
-    </div>
+{{ form_for_form.media }}
+<form method="POST" action="{{ form.get_absolute_url }}" {% if form_for_form.is_multipart %}enctype="multipart/form-data"{% endif %} class="submit-form">
+  {% csrf_token %}
+  {% render_honeypot_field %}
+
+  <div class="form-info" style="margin-bottom:2em;">
+    {{ form.intro|first_part:"---"|safe }}
+  </div>
 
-    {{ form_for_form.media }}
-    <form method="POST" action="{{ form.get_absolute_url }}" {% if form_for_form.is_multipart %}enctype="multipart/form-data"{% endif %} class="submit-form">
-    {% csrf_token %}
-    {% render_honeypot_field %}
+  {% if request.EXPERIMENTS.layout.value %}
+    {{ form_for_form.as_p }}
+    {% if form_for_form.fields %}
+      <button>{{ form.button_text }}</button>
+    {% endif %}
+  {% else %}
     <table>
-        {{ form_for_form.as_table }}
-        {% if form_for_form.fields %}
-            <tr><td></td><td><button>{{ form.button_text }}</button></td></tr>
-        {% endif %}
+      {{ form_for_form.as_table }}
+      {% if form_for_form.fields %}
+        <tr><td></td><td><button>{{ form.button_text }}</button></td></tr>
+      {% endif %}
     </table>
-    </form>
+  {% endif %}
 
 
-    <div class="form-info" style="margin-top:2em;">
-	{{ form.intro|second_part:"---"|safe }}
-    </div>
+  <div class="form-info" style="margin-top:2em;">
+    {{ form.intro|second_part:"---"|safe }}
+  </div>
+</form>
-- 
2.20.1