From cce5afc9e139c17a2a7e59b0ef70cdbdab65dd09 Mon Sep 17 00:00:00 2001
From: Philipp <vellerphilipp@gmail.com>
Date: Fri, 2 Sep 2016 10:43:47 +0200
Subject: [PATCH] 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

---
 .../ideas/templates/euth_ideas/idea_form.html | 46 +++++++++++--------
 .../includes/project_list_tile.html           | 22 ---------
 .../static/scss/components/_dividers.scss     | 17 ++-----
 .../static/scss/components/_ideas.scss        |  4 ++
 .../static/scss/components/_projects.scss     | 16 -------
 euth_wagtail/static/scss/core/_buttons.scss   | 15 ++++++
 euth_wagtail/static/scss/core/_type.scss      |  8 +++-
 7 files changed, 56 insertions(+), 72 deletions(-)
 delete mode 100644 euth/projects/templates/euth_projects/includes/project_list_tile.html

diff --git a/euth/ideas/templates/euth_ideas/idea_form.html b/euth/ideas/templates/euth_ideas/idea_form.html
index a17dda39f..09406e47b 100644
--- a/euth/ideas/templates/euth_ideas/idea_form.html
+++ b/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>
diff --git a/euth/projects/templates/euth_projects/includes/project_list_tile.html b/euth/projects/templates/euth_projects/includes/project_list_tile.html
deleted file mode 100644
index 9b848780c..000000000
--- a/euth/projects/templates/euth_projects/includes/project_list_tile.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% load static thumbnail %}
-<div class="project-list-tile">
-    {% if project.image %}
-    <a href="{% url 'project-detail' project.slug %}" class="col-md-2 col-sm-2 col-xs-3 project-tile-image-link" style="background-size: cover; background-image: url({{ project.image.url }});">
-    </a>
-    {% else %}
-    <a href="{% url 'project-detail' project.slug %}" class="col-md-2 col-sm-2 col-xs-3 project-tile-image-link" style="background-size: cover; background-image: url({% static 'images/logo.png' %})">
-    </a>
-    {% endif %}
-    <div class="project-tile-body col-md-10 col-md-offset-2 col-sm-10 col-sm-offset-2 col-xs-9 col-xs-offset-3">
-        <h2 class="project-tile-title">
-            <a href="{% url 'project-detail' project.slug %}">
-            {{ project.name }}
-            </a>
-        </h2>
-        <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>
diff --git a/euth_wagtail/static/scss/components/_dividers.scss b/euth_wagtail/static/scss/components/_dividers.scss
index 40fbb6cd7..ff7c58964 100644
--- a/euth_wagtail/static/scss/components/_dividers.scss
+++ b/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
-    }
-}
\ No newline at end of file
+}
diff --git a/euth_wagtail/static/scss/components/_ideas.scss b/euth_wagtail/static/scss/components/_ideas.scss
index dfcd448d4..4b3792945 100644
--- a/euth_wagtail/static/scss/components/_ideas.scss
+++ b/euth_wagtail/static/scss/components/_ideas.scss
@@ -254,3 +254,7 @@
         line-height: $tile-list-thumbnail-size;
     }
 }
+
+.proposals-project {
+    @include rem(margin-bottom, 30px);
+}
diff --git a/euth_wagtail/static/scss/components/_projects.scss b/euth_wagtail/static/scss/components/_projects.scss
index 7349e5594..92480421e 100644
--- a/euth_wagtail/static/scss/components/_projects.scss
+++ b/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;
diff --git a/euth_wagtail/static/scss/core/_buttons.scss b/euth_wagtail/static/scss/core/_buttons.scss
index 90d91070e..1f73c7f26 100644
--- a/euth_wagtail/static/scss/core/_buttons.scss
+++ b/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;
+        }
+    }
+}
diff --git a/euth_wagtail/static/scss/core/_type.scss b/euth_wagtail/static/scss/core/_type.scss
index 5272f35ae..c6f85670a 100644
--- a/euth_wagtail/static/scss/core/_type.scss
+++ b/euth_wagtail/static/scss/core/_type.scss
@@ -3,4 +3,10 @@ html {
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
\ No newline at end of file
+}
+
+.sans-serif {
+    font-family: $font-family-sans-serif;
+    // for headings
+    font-weight: bold;
+}