From 6275cf74fda611a4786960b99981983addb8d7d5 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?=
 <Jeremy@iMac-de-Jeremy-2.fritz.box>
Date: Tue, 14 Feb 2017 17:06:19 +0100
Subject: [PATCH] Forms template

---
 app/static/src/sass/global/_forms.scss | 97 +++++++++++++++++++++-----
 app/templates/pages/form.html          | 94 +++++++++++++++++--------
 2 files changed, 143 insertions(+), 48 deletions(-)

diff --git a/app/static/src/sass/global/_forms.scss b/app/static/src/sass/global/_forms.scss
index 6224c665..25266fcc 100644
--- a/app/static/src/sass/global/_forms.scss
+++ b/app/static/src/sass/global/_forms.scss
@@ -20,26 +20,34 @@
 
 $module: ".form";
 
+
 #{$module} {
 
-    @include margin-top(2);
+    p {
+        @include margin(0);
+    }
+
+    .form-group {
+        @include margin-bottom(.5);
+    }
 
     input[type="submit"] {
         @extend .button;
-        margin-left: 200px !important;
+        width: 100%;
         display: inline-block;
     }
 
     label {
-        width: 200px;
-        text-align: right;
-        display: inline-block;
+        text-align: left;
+        display: block;
         vertical-align: top;
 
         @include padding(0.25 1 0.25 0);
-        @include font-size(m);
+        @include font-size(s);
         @include line-height(1);
         @include typeface(sans-serif);
+        font-weight: weight(bold);
+        text-transform: uppercase;
 
         @include mq($until: xs) {
             width: 100%;
@@ -48,20 +56,22 @@ $module: ".form";
         }
     }
 
-    .errorlist {
-        list-style-type: none;
-        padding: 0;
-        padding-left: 200px;
-        @include margin-left(1);
-        margin: 0;
-
-        color: red;
+    .help-block {
         @include font-size(xs);
-        @include line-height(1);
 
-        @include mq($until: xs) {
-            padding-left: 0;
+        .has-error & {
+            color: $color-accent;
+        }
+    }
+
+    .has-error  {
+        .help-block, label {
+            color: $color-accent;
         }
+        input[type="text"], input[type="email"], input[type="password"], textarea, select {
+            border-color: $color-accent;
+        }
+
     }
 
     input[type="text"], input[type="email"], input[type="password"], textarea {
@@ -69,12 +79,17 @@ $module: ".form";
         @include font-size(m);
         @include line-height(1);
         @include padding(.25 .25);
+        display: block;
 
         @include transition(all 0.25s ease-in-out);
 
         outline: 0;
-        border: 1px solid $color-black;
-        width: calc(100% - 220px);
+        border: 0;
+        border-bottom: 1px solid white;
+        width: 100%;
+        color: white;
+
+        background: rgba(#50E3C2, 0.05);
 
         &:focus {
             border-color: $color-main;
@@ -86,4 +101,48 @@ $module: ".form";
 
     }
 
+    select {
+
+        @include font-size(m);
+        @include line-height(1);
+        @include padding(.25 .25);
+
+       width: 100%;
+       overflow: hidden;
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       padding-right: 28px;
+       border-radius: 0;
+       border: 0;
+       border-bottom: 1px solid white;
+       outline: 0;
+       -webkit-appearance: none;
+       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#FFFFFF" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+
+       &:focus {
+           border-bottom: 1px solid $color-main;
+           background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#{$color-main}" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+       }
+
+    }
+
+    select::-ms-expand {
+        display: none;
+    }
+
+}
+
+.form-errors {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    @include margin-bottom(1);
+
+    @include font-size(s);
+    @include line-height(1);
+
+    @include mq($until: xs) {
+        padding-left: 0;
+    }
 }
diff --git a/app/templates/pages/form.html b/app/templates/pages/form.html
index df287981..24cfba82 100644
--- a/app/templates/pages/form.html
+++ b/app/templates/pages/form.html
@@ -1,37 +1,73 @@
 {% extends "pages/page.html" %}
+{% load i18n mezzanine_tags keyword_tags pages_tags organization_tags %}
+
+{% with page as object %}
+
+    {% block page_class %}
+        custompage
+    {% endblock %}
+
+    {% block body_class %}
+        {% with page.get_ascendants|last as top_level_parent %}
+            {% if top_level_parent.get_content_model.weaving_css_class %}
+            pattern pattern-bg {{ top_level_parent.get_content_model.weaving_css_class }}
+            {% endif %}
+        {% endwith %}
+    {% endblock %}
+
+    {% block page_title %}
+        {% editable page.title %}
+            <h1 class="section-title section-title--uppercase section-title--main">{{ page.title }}</h1>
+        {% endeditable %}
+    {% endblock %}
+
+    {% block page_content %}
+
+        <div class="row">
+
+            {% if page.form.content %}
+                <div class="col-md-8">
+
+                    {% if page.form.content %}
+                        {% editable page.form.content %}
+                            {{ page.form.content|richtext_filters|safe }}
+                        {% endeditable %}
+                    {% endif %}
+
+                </div>
+            {% endif %}
+            <div class="{% if page.form.content %}col-md-8{% else %}col-md-16{% endif %}">
+
+                {% if request.GET.sent %}
+
+                    {% editable page.form.response %}
+                        {{ page.form.response|richtext_filters|safe }}
+                    {% endeditable %}
+
+                {% else %}
+
+                    {% errors_for form %}
+
+                    <form class="mezzanine-form form" method="post"{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
+                        {% fields_for form %}
+                        <div class="form-actions">
+                            <input class="button" type="submit"
+                                value="{% if page.form.button_text %}{{ page.form.button_text }}{% else %}{% trans "Submit" %}{% endif %}">
+                        </div>
+                    </form>
+                {% endif %}
+
+            </div>
 
-{% load mezzanine_tags i18n %}
-
-{% block main %}
-{{ block.super }}
-{% if request.GET.sent %}
-    {% editable page.form.response %}
-    {{ page.form.response|richtext_filters|safe }}
-    {% endeditable %}
-{% else %}
-    {% with page.form as page_form %}
-    {% editable page_form.content %}
-    {{ page_form.content|richtext_filters|safe }}
-    {% endeditable %}
-    {% endwith %}
-
-    {% errors_for form %}
-
-    <form class="mezzanine-form" method="post"{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
-        {% fields_for form %}
-        <div class="form-actions">
-            <input class="btn btn-primary btn-lg" type="submit"
-                value="{% if page.form.button_text %}{{ page.form.button_text }}{% else %}{% trans "Submit" %}{% endif %}">
         </div>
-    </form>
-{% endif %}
 
-{% endblock %}
+    {% endblock %}
 
+{% endwith %}
 
 {% block extra_js %}
-{{ block.super }}
-<script>
-$(function() {$('.mezzanine-form :input:visible:enabled:first').focus();});
-</script>
+    {{ block.super }}
+    <script>
+    $(function() {$('.mezzanine-form :input:visible:enabled:first').focus();});
+    </script>
 {% endblock %}
-- 
2.39.5