adjust the proposal creation page

change texts,
add label and image upload hint,
add button-row so buttons don't break lines on mobile,
remove old template and styles for it,
remove help text links and style,
add class for sans-serif headings

euth/ideas/templates/euth_ideas/idea_form.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
-{% load widget_tweaks i18n base_tags %}
+{% load widget_tweaks i18n thumbnail base_tags %}
 {% block content %}
-<div class="container-narrow">
+<div class="container">
     <div class="action-bar">
         <nav class="navbar navbar-default navbar-static">
             <ul class="nav navbar-nav">
@@ -11,23 +11,26 @@
             </ul>
         </nav>
     </div>
-    {% include "euth_projects/includes/project_list_tile.html" with project=project %}
 
     {% if mode == 'create' %}
     <div class="black-divider">
-        {% trans 'create new idea'%}
-        <a href="">
-            <span class='black-divider-info'><i class="fa fa-question" aria-hidden="true"></i></span>
-        </a>
+        {% trans 'create new proposal for this project'%}
     </div>
     {% elif mode == 'update' %}
     <div class="black-divider">
         {% trans 'update idea'%}
-        <a href="">
-            <span class='black-divider-info'><i class="fa fa-question" aria-hidden="true"></i></span>
-        </a>
     </div>
     {% endif %}
+    <div class="proposals-project">
+        <h3 class="sans-serif">
+            {{ project.name }}
+        </h3>
+        <p class="project-tile-teaser">{{ project.description | truncatechars:185 }}</p>
+        <div class="avatar-small">
+            <img src="{{ project.organisation.logo|thumbnail_url:'avatar_small'}}"></img>
+            <div class="name">{{ project.organisation }}</div>
+        </div>
+    </div>
     <div class="general-form">
         <form enctype="multipart/form-data" action="{{ request.path }}" method="post">
             {% csrf_token %}
@@ -53,20 +56,25 @@
             <div class="form-group">
                 <div class="input-group form-control-upload row">
                     <div class="col-sm-8 col-md-9">
+                        <label>Upload a picture</label>
+                        <p class="text-warning">Please make sure the image is at least 1300x600 px in dimensions and at most 5 MB in file size.</p>
                         {{ form.image|add_class:"form-control form-control-file"}}
                     </div>
                 </div>
                 {{ form.image.errors }}
             </div>
-
-
-            <button type="submit" class="submit-button">{% trans 'post'%}</button>
-            {% if mode == 'create' %}
-            <a href="{% url 'project-detail' project.slug %}" class="cancel-button">{% trans 'cancel'%}</a>
-            {% elif mode == 'update' %}
-            <a href="{% url 'idea-detail' idea.slug %}" class="cancel-button">{% trans 'cancel'%}</a>
-            {% endif %}
-
+            <div class="row button-row">
+                <div class="col-xs-6 col-sm-2">
+                    <button type="submit" class="submit-button">{% trans 'post'%}</button>
+                </div>
+                <div class="col-xs-6">
+                    {% if mode == 'create' %}
+                    <a href="{% url 'project-detail' project.slug %}" class="cancel-button">{% trans 'cancel'%}</a>
+                    {% elif mode == 'update' %}
+                    <a href="{% url 'idea-detail' idea.slug %}" class="cancel-button">{% trans 'cancel'%}</a>
+                    {% endif %}
+                </div>
+            </div>
         </form>
     </div>
 </div>

euth_wagtail/static/scss/components/_dividers.scss

@@ -1,20 +1,9 @@
 .black-divider {
-    @include rem(margin, 40px 0px 40px 0px);
-    @include rem(padding, 21px 0px 21px 18px);
+    @include rem(margin, 40px 0);
+    @include rem(padding, 20px 40px 20px 20px);
     @include rem(font-size, 18px);
     background: $black;
     color: white;
     text-transform: uppercase;
-    text-align: justify;
     position: relative;
-
-    .black-divider-info {
-        background-color: white;
-        position: absolute;
-        right:13px;
-        width: 25px;
-        border-radius: 50%;
-        color: $black;
-        text-align: center
-    }
-}
+}

euth_wagtail/static/scss/components/_ideas.scss

@@ -254,3 +254,7 @@
         line-height: $tile-list-thumbnail-size;
     }
 }
+
+.proposals-project {
+    @include rem(margin-bottom, 30px);
+}

euth_wagtail/static/scss/components/_projects.scss

@@ -23,22 +23,6 @@
     float: left;
 }
 
-.project-list-tile {
-    @extend .tile-list;
-    box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.1);
-
-
-    .project-tile-image-link {
-        @extend .tile-image-link;
-    }
-
-    .project-tile-body {
-        border: none;
-        @include rem(padding, 0px 107px 0px 0px);
-
-    }
-}
-
 .project-tile {
     @extend %tile;
     min-height: 390px;

euth_wagtail/static/scss/core/_buttons.scss

@@ -113,3 +113,18 @@
     }
 
 }
+
+.button-row {
+    @media (max-width: $screen-xs) {
+        a, button {
+            width: 100%;
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+    @media (min-width: $screen-xs) {
+        .col-xs-6 {
+            width: auto;
+        }
+    }
+}

euth_wagtail/static/scss/core/_type.scss

@@ -3,4 +3,10 @@ html {
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
+}
+
+.sans-serif {
+    font-family: $font-family-sans-serif;
+    // for headings
+    font-weight: bold;
+}