Improve SAS UX

core/static/core/style.css

@@ -307,6 +307,42 @@ textarea {
     display: inline;
 }
 
+/*------------------------------SAS------------------------------------*/
+.album {
+    display: inline-block;
+    border: solid 1px black;
+    text-align: center;
+    padding: 5px;
+    width: 200px;
+    height: 133px;
+    background: #eee;
+    box-shadow: black 2px 2px 10px;
+    margin: 10px;
+}
+
+.album img {
+    max-height: 100px;
+}
+
+.picture {
+    display: inline-block;
+    border: solid 1px black;
+    width: 150px;
+    height: 100px;
+    margin: 5px;
+    background: #eee;
+    box-shadow: grey 2px 2px 5px;
+    padding: 2px;
+    vertical-align: middle;
+}
+
+.picture img {
+    max-width: 100%;
+    max-height: 100px;
+    display: block;
+    margin: auto;
+}
+
 /*--------------------------------FOOTER-------------------------------*/
 footer{
     text-align: center;
@@ -366,3 +402,5 @@ label {
     height: 100%;
     vertical-align: middle;
 }
+
+

core/templates/core/user_pictures.jinja

@@ -7,15 +7,18 @@
 
 {% block content %}
 {% for r in user.pictures.exclude(picture=None).values('user__pictures__picture__parent').distinct() %}
-{% set album = user.pictures.filter(picture__parent=r['user__pictures__picture__parent']).first().picture.parent %}
+<div style="padding: 10px">
-<h4>{{ album.name }}</h4>
+    {% set album = user.pictures.filter(picture__parent=r['user__pictures__picture__parent']).first().picture.parent %}
-{% for r in user.pictures.exclude(picture=None).filter(picture__parent=album) %}
+    <h4>{{ album.name }}</h4>
-<div style="display: inline-block; border: solid 1px black; width: 9%; margin: 0.1%">
+    <hr>
+    {% for r in user.pictures.exclude(picture=None).filter(picture__parent=album) %}
+    <div class="picture">
         <a href="{{ url("sas:picture", picture_id=r.picture.id) }}#pict">
             <img src="{{ r.picture.as_picture.get_download_thumb_url() }}" alt="{{ r.picture.get_display_name() }}" style="max-width: 100%"/>
         </a>
+    </div>
+    {% endfor %}
 </div>
 {% endfor %}
-{% endfor %}
 {% endblock %}
 

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-11-20 13:39+0100\n"
+"POT-Creation-Date: 2016-11-20 23:05+0100\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Skia <skia@libskia.so>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -313,7 +313,7 @@ msgstr "Compte en banque : "
 #: counter/templates/counter/last_ops.jinja:59
 #: launderette/templates/launderette/launderette_admin.jinja:16
 #: launderette/views.py:146 sas/templates/sas/moderation.jinja:35
-#: sas/templates/sas/picture.jinja:67
+#: sas/templates/sas/picture.jinja:71
 msgid "Delete"
 msgstr "Supprimer"
 
@@ -781,6 +781,7 @@ msgid "Old members"
 msgstr "Anciens membres"
 
 #: club/views.py:49 core/templates/core/base.jinja:44 core/views/user.py:146
+#: sas/templates/sas/picture.jinja:83
 msgid "Tools"
 msgstr "Outils"
 
@@ -1274,7 +1275,7 @@ msgstr "Wiki"
 
 #: core/templates/core/base.jinja:73 sas/templates/sas/album.jinja:4
 #: sas/templates/sas/main.jinja:4 sas/templates/sas/main.jinja.py:8
-#: sas/templates/sas/picture.jinja:24
+#: sas/templates/sas/picture.jinja:25
 msgid "SAS"
 msgstr "SAS"
 
@@ -1859,6 +1860,7 @@ msgid "User list"
 msgstr "Liste d'utilisateurs"
 
 #: core/templates/core/user_pictures.jinja:5
+#, python-format
 msgid "%(user_name)s's pictures"
 msgstr "Photos de %(user_name)s"
 
@@ -2300,7 +2302,7 @@ msgstr "Pas de date de naissance renseigné"
 #: counter/templates/counter/invoices_call.jinja:16
 #: launderette/templates/launderette/launderette_admin.jinja:35
 #: launderette/templates/launderette/launderette_click.jinja:13
-#: sas/templates/sas/moderation.jinja:39 sas/templates/sas/picture.jinja:77
+#: sas/templates/sas/moderation.jinja:39 sas/templates/sas/picture.jinja:79
 msgid "Go"
 msgstr "Valider"
 
@@ -2781,11 +2783,16 @@ msgstr "Utilisateur qui sera supprimé"
 msgid "picture"
 msgstr "photo"
 
-#: sas/templates/sas/album.jinja:40
+#: sas/templates/sas/album.jinja:25 sas/templates/sas/album.jinja.py:27
+#: sas/templates/sas/main.jinja:17 sas/templates/sas/main.jinja.py:19
+msgid "preview"
+msgstr "miniature"
+
+#: sas/templates/sas/album.jinja:59
 msgid "Upload"
 msgstr "Envoyer"
 
-#: sas/templates/sas/main.jinja:15
+#: sas/templates/sas/main.jinja:39
 msgid "Create"
 msgstr "Créer"
 
@@ -2797,19 +2804,23 @@ msgstr "Modération du SAS"
 msgid "Asked for removal"
 msgstr "Retrait demandé"
 
-#: sas/templates/sas/picture.jinja:81
+#: sas/templates/sas/picture.jinja:65
+msgid "People"
+msgstr "Personne(s)"
+
+#: sas/templates/sas/picture.jinja:85
 msgid "HD version"
 msgstr "Version HD"
 
-#: sas/templates/sas/picture.jinja:84
+#: sas/templates/sas/picture.jinja:88
 msgid "Rotate left"
 msgstr "Tourner vers la gauche"
 
-#: sas/templates/sas/picture.jinja:85
+#: sas/templates/sas/picture.jinja:89
 msgid "Rotate right"
 msgstr "Tourner vers la droite"
 
-#: sas/templates/sas/picture.jinja:86
+#: sas/templates/sas/picture.jinja:90
 msgid "Ask for removal"
 msgstr "Demander le retrait"
 
@@ -2826,6 +2837,10 @@ msgstr "Envoyer les images"
 msgid "Error creating album %(album)s: %(msg)s"
 msgstr "Erreur de création de l'album %(album)s : %(msg)s"
 
+#: sas/views.py:65
+msgid "Add user"
+msgstr "Ajouter une personne"
+
 #: sith/settings.py:166
 msgid "English"
 msgstr "Anglais"

sas/models.py

@@ -2,6 +2,10 @@ from django.db import models
 from django.conf import settings
 from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext_lazy as _
+from django.core.files.base import ContentFile
+
+from PIL import Image
+from io import BytesIO
 
 from core.models import SithFile, User
 
@@ -14,6 +18,12 @@ class Picture(SithFile):
         sas = SithFile.objects.filter(id=settings.SITH_SAS_ROOT_DIR_ID).first()
         return sas in self.get_parent_list()
 
+    @property
+    def is_vertical(self):
+        im = Image.open(BytesIO(self.file.read()))
+        (w, h) = im.size
+        return (w / h) < 1
+
     def can_be_edited_by(self, user):
         return user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID)
 
@@ -31,9 +41,6 @@ class Picture(SithFile):
         return reverse('sas:download_thumb', kwargs={'picture_id': self.id})
 
     def rotate(self, degree):
-        from PIL import Image
-        from io import BytesIO
-        from django.core.files.base import ContentFile
         for attr in ['file', 'compressed', 'thumbnail']:
             if self.__getattribute__(attr):
                 im = Image.open(BytesIO(self.__getattribute__(attr).read()))

sas/templates/sas/album.jinja

@@ -15,20 +15,29 @@
 {% block content %}
 <a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
 <h3>{{ album.get_display_name() }}</h3>
+<hr>
 <div>
     {% for a in album.children.filter(is_folder=True, is_moderated=True).all() %}
-    <div style="display: inline-block; border: solid 1px black;">
+    <a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
-        <a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
+    <div class="album">
+        <div>
+        {% if a.children.filter(is_folder=False, is_moderated=True).exists() %}
+        <img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
+        {% else %}
+        <img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
+        {% endif %}
         </div>
+        {{ a.name }}
+    </div>
+    </a>
     {% endfor %}
 </div>
 <div>
-    {# for a in album.children.filter(mime_type__in=['image/jpeg', 'image/png']).all() #}
     {% for p in album.children.filter(is_folder=False, is_moderated=True).all() %}
     {% if p.as_picture.can_be_viewed_by(user) %}
-    <div style="display: inline-block; border: solid 1px black; width: 9%; margin: 0.1%">
+    <div class="picture">
         <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
-            <img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" style="max-width: 100%"/>
+            <img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
         </a>
     </div>
     {% endif %}

sas/templates/sas/main.jinja

@@ -6,6 +6,30 @@
 
 {% block content %}
 <h3>{% trans %}SAS{% endtrans %}</h3>
+<hr>
+<div>
+    {% for a in root_file.children.filter(is_folder=True).all() %}
+    {% if a.is_moderated %}
+    <a href="{{ url("sas:album", album_id=a.id) }}">
+    <div class="album">
+        <div>
+        {% if a.children.filter(is_folder=False, is_moderated=True).exists() %}
+        <img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
+        {% else %}
+        <img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
+        {% endif %}
+        </div>
+        {{ a.name }}
+    </div>
+    </a>
+    {% elif user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
+    <div style="display: inline-block; border: solid 1px red; text-align: center">
+        <p><a href="{{ url('core:file_moderate', file_id=a.id) }}?next={{ url('sas:moderation') }}">Moderate</a> or <a href="">Delete</a></p>
+        <a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
+    </div>
+    {% endif %}
+    {% endfor %}
+</div>
 {% if user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
 <form action="" method="post" enctype="multipart/form-data">
     {% csrf_token %}
@@ -15,18 +39,4 @@
     <p><input type="submit" value="{% trans %}Create{% endtrans %}" /></p>
 </form>
 {% endif %}
-<div>
-    {% for a in root_file.children.filter(is_folder=True).all() %}
-    {% if a.is_moderated %}
-    <div style="display: inline-block; border: solid 1px black; text-align: center">
-        <a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
-    </div>
-    {% elif user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
-    <div style="display: inline-block; border: solid 1px red; text-align: center">
-        <p><a href="{{ url('core:file_moderate', file_id=a.id) }}?next={{ url('sas:moderation') }}">Moderate</a> or <a href="">Delete</a></p>
-        <a href="{{ url("sas:album", album_id=a.id) }}">{{ a.name }}</a>
-    </div>
-    {% endif %}
-    {% endfor %}
-</div>
 {% endblock %}

sas/templates/sas/picture.jinja

@@ -6,16 +6,18 @@
 #prev, #next {
     display: inline-block;
     width: 42%;
+    height: 100px;
     margin: 0.5%;
     border: solid 1px grey;
-    overflow: auto;
+    overflow: hidden;
-    background: #333;
+    background: #aaa;
+    text-align: center;
 }
 #prev img, #next img {
     display: block;
     margin: auto;
+    max-height: 80%;
     max-width: 100%;
-    max-height: 100%;
 }
 </style>
 {% endblock %}
@@ -34,18 +36,12 @@
 {% block content %}
 <a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(picture.parent) }} {{ picture.get_display_name() }}
 <h3>{{ picture.get_display_name() }}</h3>
-<div style="display: inline-block; width: 89%; background: #333; border: solid #333 2px;" id="pict">
+<div style="display: inline-block; width: 19%; vertical-align: top; overflow: hidden; float: right">
-    {% if is_vertical %}
-    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 60%; display: block; margin: auto"/>
-    {% else %}
-    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 100%; display: block; margin: auto"/>
-    {% endif %}
-</div>
-<div style="display: inline-block; width: 10%; vertical-align: top;">
     <div>
         <div id="prev">
         {% if picture.get_previous() %}
         <a href="{{ url("sas:picture", picture_id=picture.get_previous().id) }}#pict">
+            &larr;
             <img src="{{ picture.get_previous().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_previous().get_display_name() }}" />
         </a>
         {% endif %}
@@ -53,12 +49,14 @@
         <div id="next">
         {% if picture.get_next() %}
         <a href="{{ url("sas:picture", picture_id=picture.get_next().id) }}#pict">
+            &rarr;
             <img src="{{ picture.get_next().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_next().get_display_name() }}" />
         </a>
         {% endif %}
         </div>
     </div>
     <div>
+        <h5>{% trans %}People{% endtrans %}</h5>
         <ul>
             {% for r in picture.people.all() %}
             <li>
@@ -69,14 +67,14 @@
             </li>
             {% endfor %}
         </ul>
-    </div>
+        <form action="" method="post" enctype="multipart/form-data" style="margin: 0px;">
-    <div>
-        <form action="" method="post" enctype="multipart/form-data">
             {% csrf_token %}
             {{ form.as_p() }}
             <p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
         </form>
     </div>
+    <div>
+        <h5>{% trans %}Tools{% endtrans %}</h5>
         <p>
             <a href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
         </p>
@@ -85,6 +83,14 @@
             <a href="?rotate_right">{% trans %}Rotate right{% endtrans %}</a><br>
             <a href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a><br>
         </p>
+    </div>
+</div>
+<div style="display: inline-block; width: 80%; background: #333; border: solid #333 2px;" id="pict">
+    {% if picture.is_vertical %}
+    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 60%; display: block; margin: auto"/>
+    {% else %}
+    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 100%; display: block; margin: auto"/>
+    {% endif %}
 </div>
 {% endblock %}
 

sas/views.py

@@ -62,7 +62,7 @@ class RelationForm(forms.ModelForm):
         model = PeoplePictureRelation
         fields = ['picture', 'user']
         widgets = {'picture': forms.HiddenInput}
-    user = make_ajax_field(PeoplePictureRelation, 'user', 'users', help_text="")
+    user = make_ajax_field(PeoplePictureRelation, 'user', 'users', label=_("Add user"))
 
 class SASMainView(FormView):
     form_class = SASForm
@@ -132,9 +132,6 @@ class PictureView(CanViewMixin, DetailView, FormMixin):
     def get_context_data(self, **kwargs):
         kwargs = super(PictureView, self).get_context_data(**kwargs)
         kwargs['form'] = self.form
-        im = Image.open(BytesIO(self.object.file.read()))
-        (w, h) = im.size
-        kwargs['is_vertical'] = (w / h) < 1
         return kwargs
 
     def get_success_url(self):
@@ -166,7 +163,8 @@ class AlbumView(CanViewMixin, DetailView, FormMixin):
         files = request.FILES.getlist('images')
         if request.user.is_authenticated() and request.user.is_in_group('ae-membres'):
             if self.form.is_valid():
-                self.form.process(parent=parent, owner=request.user, files=files)
+                self.form.process(parent=parent, owner=request.user, files=files,
+                        automodere=request.user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID))
                 if self.form.is_valid():
                     return super(AlbumView, self).form_valid(self.form)
         else: