Layout: forms.

diff --git a/src/experiments/templates/experiments/main_switch.html b/src/experiments/templates/experiments/main_switch.html
index 2f866bc..c02ca48 100644 (file)
--- 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 %}
   <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"
       <button
           {% if exp.value %}
           disabled class="active"

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index fd03b4e..8f95d12 100644 (file)
--- 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;
     }
         margin-left: 50px;
         margin-right: 50px;
     }

+}

 
 

+.page-simple, .nice-controls {

     button, input[type=submit] {
         margin: 24px 0;
         height: 56px;
         background: #083F4D;
     button, input[type=submit] {
         margin: 24px 0;
         height: 56px;
         background: #083F4D;

+        border: none;

         border-radius: 3px;
         font-weight: 600;
         font-size: 20px;
         border-radius: 3px;
         font-weight: 600;
         font-size: 20px;


@@ -338,6 +341,15 @@ form {
         text-align: center;
         color: #FFFFFF;
         width: 340px;
         text-align: center;
         color: #FFFFFF;
         width: 340px;

+
+        &.active {
+            outline: 2px solid #083F4D;
+            outline-offset: 3px;
+        }
+        
+        &:disabled {
+            opacity: .8;
+        }

     }
 
     label {
     }
 
     label {


@@ -372,3 +384,20 @@ form {
         margin-right: 1em;
     }
 }
         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 39ef0e6..12bae59 100644 (file)
--- a/src/wolnelektury/templates/2022/base.html
+++ b/src/wolnelektury/templates/2022/base.html
@@ -60,6 +60,7 @@
 
     {% javascript '2022' %}
     {% javascript '2022_player' %}
 
     {% javascript '2022' %}
     {% javascript '2022_player' %}

+    {% block extrabody %}{% endblock %}

     {% include '2022/hotjar.html' %}
   </body>
 </html>
     {% 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 c32133f..09e19e3 100644 (file)
--- 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 forms_builder_tags %}

+{% load title %}
+
+{% block settings %}
+  {% title form.title %}
+{% endblock %}

 
 {% block 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 46d24cc..85d1e62 100644 (file)
--- 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 %}
 
 {% load honeypot %}
 {% load more %}
 

+

 <h1>{{ form.title }}</h1>
 
 <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>
     <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>
     </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>