apps/ideas/mapideas/topics: add image checkbox, reformat idea/topic/i…

…deamap detail, change ideaimage to reflect format, add translatable helptext fixes #1859 fixes #1860 fixes #1858
liqd · May 27, 2020 · 6042495 · 6042495
1 parent b46270d
commit 6042495
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 58 deletions.
diff --git a/euth/communitydebate/forms.py b/euth/communitydebate/forms.py
@@ -2,11 +2,15 @@
 
 from adhocracy4.categories import forms as category_forms
 from euth.contrib import widgets
+from euth.contrib.mixins import ImageRightOfUseMixin
 
 from . import models
 
 
-class TopicForm(category_forms.CategorizableFieldMixin, forms.ModelForm):
+class TopicForm(category_forms.CategorizableFieldMixin,
+                ImageRightOfUseMixin,
+                forms.ModelForm):
+
     class Meta:
         model = models.Topic
         fields = ['name', 'description', 'image', 'category']

diff --git a/euth/communitydebate/templates/euth_communitydebate/topic_detail.html b/euth/communitydebate/templates/euth_communitydebate/topic_detail.html
@@ -36,10 +36,6 @@
             </nav>
         </div>
 
-        {% if topic.image %}
-        <img class="idea-image" src="{{ topic.image | thumbnail_url:'idea_image'}}" style="width: 100%;">
-        {% endif %}
-
         <div class="idea-body">
             <div class="idea-title">
                 <h1>{{ topic.name }}</h1>
@@ -51,31 +47,44 @@ <h1>{{ topic.name }}</h1>
                 {% if author_is_moderator %} <span class="badge badge-subtle">{% trans 'Moderator' %}</span> {% endif %}
             </div>
 
-            {% if topic.category %}
-            <span class="badge badge-secondary label-xs">{{ topic.category }}</span>
-            {% endif %}
+            <div class="row">
+                <div class="{% if topic.image %}col-md-6{% else %}col{% endif %}">
 
-            <div class="idea-description">
-                <p>{{ topic.description |safe }}</p>
-            </div>
+                    {% if topic.category %}
+                    <span class="badge badge-secondary label-xs">{{ topic.category }}</span>
+                    {% endif %}
 
-            <div class="idea-ratings">
-                {% react_ratings topic %}
-            </div>
+                    <div class="idea-description">
+                        <p>{{ topic.description |safe }}</p>
+                    </div>
 
-            <div class="idea-description">
-                {% if upload_files.count > 0 %}
-                <h4>{% trans 'Downloads' %}</h4>
-                <ul>
-                {% for fileupload in upload_files %}
-                <li>
-                <a target="_blank" href="{{ fileupload.document.url }}">{{ fileupload.title }}</a>
-                </li>
-                {% endfor %}
-                </ul>
+                    {% if upload_files.count > 0 %}
+                    <div class="idea-description">
+                        <h4>{% trans 'Downloads' %}</h4>
+                        <ul>
+                        {% for fileupload in upload_files %}
+                        <li>
+                        <a target="_blank" href="{{ fileupload.document.url }}">{{ fileupload.title }}</a>
+                        </li>
+                        {% endfor %}
+                        </ul>
+                    </div>
+                    {% endif %}
+                </div>
+
+                {% if topic.image %}
+                <div class=col-md-6>
+                    <img class="idea-image" src="{{ topic.image | thumbnail_url:'idea_image'}}" style="width: 100%;">
+                  </div>
                 {% endif %}
+            </div>
 
+            <div class="row">
+                <div class="col">
+                    {% react_ratings topic %}
+                </div>
             </div>
+
             <div class="black-divider">
                 {% trans 'Comments'%}
             </div>

diff --git a/euth/communitydebate/templates/euth_communitydebate/topic_form.html b/euth/communitydebate/templates/euth_communitydebate/topic_form.html
@@ -66,14 +66,24 @@ <h3 class="sans-serif">
             <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 800x200 px in dimensions and at most 5 MB in file size.</p>
+                        <label>{% trans 'Upload a picture'%}</label>
+                        {% if form.image.help_text %}
+                        <p><i>{{ form.image.help_text }}</i></p>
+                        {% endif %}
                         {{ form.image|add_class:"form-control form-control-file"}}
                     </div>
                 </div>
                 {{ form.image.errors }}
             </div>
 
+            <div class="form-group">
+                <div class="form-check">
+                    {{ form.right_of_use|add_class:"form-check-input" }}
+                    <label class="form-check-label">{{ form.right_of_use.label }}</label>
+                </div>
+                {{ form.right_of_use.errors }}
+            </div>
+
             <h3>{% trans 'Downloads' %}</h3>
          <div class="js-formset category-formset"
          data-prefix="{{ upload_forms.prefix }}">

diff --git a/euth/contrib/mixins.py b/euth/contrib/mixins.py
@@ -0,0 +1,27 @@
+from django import forms
+from django.utils.translation import ugettext_lazy as _
+
+RIGHT_OF_USE_LABEL = _('I hereby confirm that the copyrights for this '
+                       'photo are with me or that I have received '
+                       'rights of use from the author. I also confirm '
+                       'that the privacy rights of depicted third persons '
+                       'are not violated. ')
+
+
+class ImageRightOfUseMixin(forms.ModelForm):
+    right_of_use = forms.BooleanField(required=False, label=RIGHT_OF_USE_LABEL)
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if self.instance.image:
+            self.initial['right_of_use'] = True
+
+    def clean(self):
+        cleaned_data = super().clean()
+        image = cleaned_data.get('image')
+        right_of_use = cleaned_data.get('right_of_use')
+        if image and not right_of_use:
+            self.add_error('right_of_use',
+                           _("You want to upload an image. "
+                             "Please check that you have the "
+                             "right of use for the image."))
diff --git a/euth/ideas/forms.py b/euth/ideas/forms.py
@@ -1,11 +1,15 @@
 from django import forms
 
 from adhocracy4.categories import forms as category_forms
+from euth.contrib.mixins import ImageRightOfUseMixin
 
 from . import models
 
 
-class IdeaForm(category_forms.CategorizableFieldMixin, forms.ModelForm):
+class IdeaForm(category_forms.CategorizableFieldMixin,
+               ImageRightOfUseMixin,
+               forms.ModelForm):
+
     class Meta:
         model = models.Idea
         fields = ['name', 'description', 'image', 'category']

diff --git a/euth/ideas/migrations/0006_alter_idea_image.py b/euth/ideas/migrations/0006_alter_idea_image.py
@@ -0,0 +1,19 @@
+# Generated by Django 2.2.12 on 2020-05-27 10:00
+
+import adhocracy4.images.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('euth_ideas', '0005_alter_idea_category'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='idea',
+            name='image',
+            field=adhocracy4.images.fields.ConfiguredImageField('idea_image', blank=True, help_prefix='Please make sure the image is at least 400x200 px in dimensions and at most 5 MB in file size.', upload_to='ideas/images'),
+        ),
+    ]
diff --git a/euth/ideas/models.py b/euth/ideas/models.py
@@ -3,6 +3,7 @@
 from django.contrib.contenttypes.fields import GenericRelation
 from django.db import models
 from django.urls import reverse
+from django.utils.translation import ugettext_lazy as _
 
 from adhocracy4 import transforms
 from adhocracy4.categories.fields import CategoryField
@@ -25,6 +26,10 @@ class Idea(module_models.Item):
         'idea_image',
         upload_to='ideas/images',
         blank=True,
+        help_prefix=_(
+            'Please make sure the image is at least 400x200 px in '
+            'dimensions and at most 5 MB in file size.'
+        ),
     )
     ratings = GenericRelation(rating_models.Rating,
                               related_query_name='idea',

diff --git a/euth/ideas/templates/euth_ideas/idea_detail.html b/euth/ideas/templates/euth_ideas/idea_detail.html
@@ -36,31 +36,37 @@
             </nav>
         </div>
 
-        {% if idea.image %}
-        <img class="idea-image" src="{{ idea.image | thumbnail_url:'idea_image'}}" style="width: 100%;">
-        {% endif %}
-
         <div class="idea-body">
             <div class="idea-title">
                 <h1>{{ idea.name }}</h1>
             </div>
-
             <div class="avatar-small">
                 <span class="circled circled-xs" style="background-image: url({% get_avatar idea.creator 'avatar_small' %})"></span>
                 <a href="{% url 'profile' idea.creator.username %}" class="name">{{ idea.creator.username }}</a>
                 {% if author_is_moderator %} <span class="badge badge-subtle">{% trans 'Moderator' %}</span> {% endif %}
             </div>
+            <div class="row">
+                <div class="{% if idea.image %}col-md-6{% else %}col{% endif %}">
 
-            {% if idea.category %}
-            <span class="badge badge-secondary label-xs">{{ idea.category }}</span>
-            {% endif %}
+                    {% if idea.category %}
+                    <span class="badge badge-secondary label-xs">{{ idea.category }}</span>
+                    {% endif %}
 
-            <div class="idea-description">
-                <p>{{ idea.description |safe }}</p>
+                    <div class="idea-description">
+                        <p>{{ idea.description |safe }}</p>
+                    </div>
+                </div>
+                {% if idea.image %}
+                  <div class=col-md-6>
+                      <img class="idea-image" src="{{ idea.image | thumbnail_url:'idea_image'}}" style="width: 100%;">
+                  </div>
+                {% endif %}
             </div>
 
-            <div class="idea-ratings">
-                {% react_ratings idea %}
+            <div class="row">
+                <div class="col">
+                    {% react_ratings idea %}
+                </div>
             </div>
             <div class="black-divider">
                 {% trans 'Comments'%}

diff --git a/euth/ideas/templates/euth_ideas/idea_form.html b/euth/ideas/templates/euth_ideas/idea_form.html
@@ -37,6 +37,7 @@ <h3 class="sans-serif">
         <form enctype="multipart/form-data" action="{{ request.path }}" method="post">
             {% csrf_token %}
             {{ form.media }}
+
             <div class="form-group">
                 <label class="col-form-label" for="{{ form.name.id_for_label }}">{% trans 'Title of the proposal'%}</label>
                 {% if form.name.errors %}
@@ -56,16 +57,24 @@ <h3 class="sans-serif">
                 {{ form.description.errors }}
             </div>
             <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 800x200 px in dimensions and at most 5 MB in file size.</p>
-                        {{ form.image|add_class:"form-control form-control-file"}}
-                    </div>
+                <div class="input-group form-control-upload">
+                    <label>{% trans 'Upload a picture'%}</label>
+                    {% if form.image.help_text %}
+                    <p><i>{{ form.image.help_text }}</i></p>
+                    {% endif %}
+                    {{ form.image|add_class:"form-control form-control-file"}}
                 </div>
                 {{ form.image.errors }}
             </div>
 
+            <div class="form-group">
+                <div class="form-check">
+                    {{ form.right_of_use|add_class:"form-check-input" }}
+                    <label class="form-check-label">{{ form.right_of_use.label }}</label>
+                </div>
+                {{ form.right_of_use.errors }}
+            </div>
+
             {% if form.show_categories %}
             <div class="form-group">
                 <label class="col-form-label" for="{{ form.category.id_for_label }}">{% trans 'Category'%}</label>

diff --git a/euth/maps/forms.py b/euth/maps/forms.py
@@ -3,11 +3,14 @@
 
 from adhocracy4.categories import forms as category_forms
 from adhocracy4.maps import widgets
+from euth.contrib.mixins import ImageRightOfUseMixin
 
 from . import models
 
 
-class MapIdeaForm(category_forms.CategorizableFieldMixin, forms.ModelForm):
+class MapIdeaForm(category_forms.CategorizableFieldMixin,
+                  ImageRightOfUseMixin,
+                  forms.ModelForm):
 
     class Meta:
         model = models.MapIdea

diff --git a/euth/maps/templates/euth_maps/mapidea_detail.html b/euth/maps/templates/euth_maps/mapidea_detail.html
@@ -45,9 +45,6 @@
             </nav>
         </div>
 
-        {% if object.image %}
-        <img class="idea-image" src="{{ object.image | thumbnail_url:'idea_image'}}" style="width: 100%;">
-        {% endif %}
 
 
         <div class="idea-body">
@@ -60,15 +57,25 @@ <h1>{{ object.name }}</h1>
                 <a href="{% url 'profile' object.creator.username %}" class="name">{{ object.creator.username }}</a>
                 {% if author_is_moderator %} <span class="badge badge-subtle">{% trans 'Moderator' %}</span> {% endif %}
             </div>
-
-            <div class="idea-description">
-                <p>{{ object.description |safe }}</p>
+            <div class="row">
+              <div class="{% if idea.image %}col-md-6{% else %}col{% endif %}">
+                  <div class="idea-description">
+                      <p>{{ object.description |safe }}</p>
+                  </div>
+              </div>
+              {% if object.image %}
+                  <div class=col-md-6>
+                      <img class="idea-image" src="{{ object.image | thumbnail_url:'idea_image'}}">
+                  </div>
+              {% endif %}
             </div>
 
             {% map_display_point object.point object.module.areasettings_settings.polygon %}
 
-            <div class="idea-ratings">
-                {% react_ratings object %}
+            <div class="row mt-3">
+                <div class="col">
+                    {% react_ratings object %}
+                </div>
             </div>
             <div class="black-divider">
                 {% trans 'Comments'%}

diff --git a/euth_wagtail/assets/scss/components/_ideas.scss b/euth_wagtail/assets/scss/components/_ideas.scss
@@ -1,6 +1,6 @@
 .idea-image {
     width: 100%;
-    margin-bottom: 20px;
+    margin: 2*$spacer 0;
 }
 
 .idea-title {
@@ -19,7 +19,7 @@
 }
 
 .idea-description {
-    margin: 43px 0 85px 0;
+    margin: 2*$spacer 0;
 
     p {
         font-family: $font-family-sans-serif;

diff --git a/euth_wagtail/assets/scss/components/_label.scss b/euth_wagtail/assets/scss/components/_label.scss
@@ -17,6 +17,7 @@
 
 .badge-runningout {
     background-color: $brand-danger;
+    color: #fff;
 }
 
 .badge-finished {

diff --git a/euth_wagtail/settings/base.py b/euth_wagtail/settings/base.py
@@ -316,7 +316,7 @@
     'heroimage': {'min_resolution': (1300, 600)},
     'logo': {'min_resolution': (200, 200), 'aspect_ratio': (1, 1)},
     'avatar': {'min_resolution': (200, 200)},
-    'idea_image': {'min_resolution': (800, 200)},
+    'idea_image': {'min_resolution': (400, 200)},
     'tileimage': {'min_resolution': (500, 300)},
 }
 
@@ -325,7 +325,7 @@
         'heroimage': {'size': (1500, 500), 'crop': 'smart'},
         'heroimage_preview': {'size': (880, 220), 'crop': 'smart'},
         'project_thumbnail': {'size': (520, 330), 'crop': 'smart'},
-        'idea_image': {'size': (800, 0), 'crop': 'scale'},
+        'idea_image': {'size': (400, 0), 'crop': 'scale'},
         'idea_thumbnail': {'size': (240, 240), 'crop': 'smart'},
         'map_thumbnail': {'size': (400, 200), 'crop': 'smart'},
         'organisation_thumbnail': {'size': (740, 540), 'crop': 'smart'},