See description

- Reworked CSS of user photos tab
- Reworked Picture page CSS
- A message is now displayed on the user page when he's tagged on a picture in can't access (picture unavailable)

sas/templates/sas/picture.jinja

@@ -1,150 +1,177 @@
 {% extends "core/base.jinja" %}
 
-{% block head %}
-{{ super() }}
-<style>
-#prev, #next {
-    display: inline-block;
-    width: 42%;
-    height: 100px;
-    margin: 0.5%;
-    border: solid 1px grey;
-    overflow: hidden;
-    background: #aaa;
-    text-align: center;
-}
-#prev img, #next img {
-    display: block;
-    margin: auto;
-    max-height: 80%;
-    max-width: 100%;
-}
-</style>
+{%- block additional_css -%}
+    <link rel="stylesheet" href="{{ scss('core/override.scss') }}">
+    <link rel="stylesheet" href="{{ scss('sas/picture.scss') }}">
+{%- endblock -%}
 
-{% if picture.get_previous() %}
-<link rel="preload" as="image" href="{{ url("sas:download_compressed", picture_id=picture.get_previous().id) }}">
-{% endif %}
-{% if picture.get_next() %}
-<link rel="preload" as="image" href="{{ url("sas:download_compressed", picture_id=picture.get_next().id) }}">
-{% endif %}
+{% block head %}
+    {{ super() }}
+
+    {% if picture.get_previous() %}
+        <link rel="preload" as="image" href="{{ url("sas:download_compressed", picture_id=picture.get_previous().id) }}">
+    {% endif %}
+    {% if picture.get_next() %}
+        <link rel="preload" as="image" href="{{ url("sas:download_compressed", picture_id=picture.get_next().id) }}">
+    {% endif %}
 
 {% endblock %}
 
 {% block title %}
-{% trans %}SAS{% endtrans %}
+    {% trans %}SAS{% endtrans %}
 {% endblock %}
 
 {% macro print_path(file) %}
-{% if file and file.parent %}
-{{ print_path(file.parent) }}
-<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
-{% endif %}
+    {% if file and file.parent %}
+        {{ print_path(file.parent) }}
+        <a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
+    {% endif %}
 {% endmacro %}
 
 {% block content %}
-<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(picture.parent) }} {{ picture.get_display_name() }}
-({{ picture.parent.children.filter(id__lte=picture.id).count() }} / {{ picture.parent.children.count() }})
-<h3> {{ picture.get_display_name() }}</h3>
-<div style="display: inline-block; width: 19%; vertical-align: top; overflow: hidden; float: right">
-    <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 %}
-        </div>
-        <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>
+    <code>
+        <a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(picture.parent) }} {{ picture.get_display_name() }}
+    </code>
+
+    <br>
+
+    <div class="title">
+        <h3>{{ picture.get_display_name() }}</h3>
+        <h4>{{ picture.parent.children.filter(id__lte=picture.id).count() }} / {{ picture.parent.children.count() }}</h4>
     </div>
-    <div>
-        <h5>{% trans %}People{% endtrans %}</h5>
-        <ul>
-            {% for r in picture.people.all() %}
-            <li>
-                <a href="{{ r.user.get_absolute_url() }}">{{ r.user.get_short_name() }}</a>
-                {% if user == r.user or user.can_edit(picture) %}
-                <a href="?remove_user={{ r.user.id }}">{% trans %}Delete{% endtrans %}</a>
+
+
+    {% if not picture.is_moderated %}
+        {% set next = picture.get_next() %}
+        {% if not next %}
+            {% set next = url('sas:moderation') %}
+        {% else %}
+            {% set next = next.get_absolute_url() + "#pict" %}
+        {% endif %}
+
+        <div class="moderation">
+            <div>
+                {% if picture.asked_for_removal %}
+                    <span class="important">{% trans %}Asked for removal{% endtrans %}</span>
+                {% else %}
+                    &nbsp;
                 {% endif %}
-            </li>
-            {% endfor %}
-        </ul>
-        <form action="" method="post" enctype="multipart/form-data" style="margin: 0px;">
-            {% csrf_token %}
-            {{ form.as_p() }}
-            <p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
-        </form>
-    </div>
-    <div>
-        <h5>{% trans %}Infos{% endtrans %}</h5>
-        <p>{% trans %}Date: {% endtrans %}{{ picture.date|date(DATETIME_FORMAT) }}</p>
-        <p>{% trans %}Owner: {% endtrans %}<a href="{{ picture.owner.get_absolute_url() }}">{{ picture.owner.get_short_name() }}</a></p>
-        {% if picture.moderator %}
-        <p>{% trans %}Moderator: {% endtrans %}<a href="{{ picture.moderator.get_absolute_url() }}">{{ picture.moderator.get_short_name() }}</a></p>
-        {% endif %}
-        <p>{{ picture.parent.children.filter(id__lte=picture.id).count() }} / {{ picture.parent.children.count() }}</p>
-    </div>
-    <div>
-        <h5>{% trans %}Tools{% endtrans %}</h5>
-        <p>
-            <a href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
-        </p>
-        <p style="font-size: smaller;">
-            <a href="{{ url('sas:picture_edit', picture_id=picture.id) }}">{% trans %}Edit{% endtrans %}</a><br>
-            <a href="?rotate_left">{% trans %}Rotate left{% endtrans %}</a><br>
-            <a href="?rotate_right">{% trans %}Rotate right{% endtrans %}</a><br>
-            <a href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a><br>
-        </p>
-    </div>
-</div>
-{% if picture.is_moderated %}
-<div id="pict">
-{% else %}
-<div id="pict" style="border: solid #f00 2px; box-shadow: red 0px 0px 5px">
-{% set next = picture.get_next() %}
-{% if not next %}
-    {% set next = url('sas:moderation') %}
-{% else %}
-    {% set next = next.get_absolute_url() + "#pict" %}
-{% endif %}
-<div style="background: lightgrey; padding: 2px;">
-    {% if picture.asked_for_removal %}
-    <span class="important">{% trans %}Asked for removal{% endtrans %}</span>
+            </div>
+            <div>
+                <a href="{{ url('core:file_moderate', file_id=picture.id) }}?next={{ next }}">
+                    {% trans %}Moderate{% endtrans %}
+                </a>
+                <a href="{{ url('core:file_delete', file_id=picture.id) }}?next={{ next }}">
+                    {% trans %}Delete{% endtrans %}
+                </a>
+            </div>
+        </div>
     {% endif %}
-    <a href="{{ url('core:file_moderate', file_id=picture.id) }}?next={{ next }}">
-        {% trans %}Moderate{% endtrans %}</a> |
-    <a href="{{ url('core:file_delete', file_id=picture.id) }}?next={{ next }}">
-        {% trans %}Delete{% endtrans %}</a>
-</div>
-{% endif %}
-    {% 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>
+
+    <div class="container">
+        <div class="main">
+
+            <div class="photo">
+                <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}"/>
+            </div>
+
+            <div class="general">
+                <div class="infos">
+                    <h5>{% trans %}Infos{% endtrans %}</h5>
+                    <div>
+                        <div>
+                            <span>{% trans %}Date: {% endtrans %}</span>
+                            <span>{{ picture.date|date(DATETIME_FORMAT) }}</span>
+                        </div>
+                        <div>
+                            <span>{% trans %}Owner: {% endtrans %}</span>
+                            <a href="{{ picture.owner.get_absolute_url() }}">{{ picture.owner.get_short_name() }}</a>
+                        </div>
+
+                        {% if picture.moderator %}
+                            <div>
+                                <span>{% trans %}Moderator: {% endtrans %}</span>
+                                <a href="{{ picture.moderator.get_absolute_url() }}">{{ picture.moderator.get_short_name() }}</a>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <div class="tools">
+                    <h5>{% trans %}Tools{% endtrans %}</h5>
+                    <div>
+                        <div>
+                            <a class="text" href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
+                            <br>
+                            <a class="text danger" href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a>
+                        </div>
+                        <div class="buttons">
+                            <a class="button" href="{{ url('sas:picture_edit', picture_id=picture.id) }}">✏️</a>
+                            <a class="button" href="?rotate_left">↺</a>
+                            <a class="button" href="?rotate_right">↻</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="subsection">
+            <div class="navigation">
+                <div id="prev">
+                    {% if picture.get_previous() %}
+                        <a href="{{ url( 'sas:picture', picture_id=picture.get_previous().id) }}#pict">
+                            <div style="background-image: url('{{ picture.get_previous().as_picture.get_download_thumb_url() }}');"></div>
+                        </a>
+                    {% endif %}
+                </div>
+                <div id="next">
+                    {% if picture.get_next() %}
+                        <a href="{{ url( 'sas:picture', picture_id=picture.get_next().id) }}#pict">
+                            <div style="background-image: url('{{ picture.get_next().as_picture.get_download_thumb_url() }}');"></div>
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="tags">
+                <h5>{% trans %}People{% endtrans %}</h5>
+                <form action="" method="post" enctype="multipart/form-data">
+                    {% csrf_token %}
+                    {{ form.as_p() }}
+                    <input type="submit" value="{% trans %}Go{% endtrans %}" />
+                </form>
+                <ul>
+                    {% for r in picture.people.all() %}
+                        <li>
+                            <a class="user" href="{{ r.user.get_absolute_url() }}">
+                                {% if r.user.profile_pict %}
+                                <img src="{{ r.user.profile_pict.get_download_url() }}">
+                                {% endif %}
+                                <span>{{ r.user.get_short_name() }}</span>
+                            </a>
+                            {% if user == r.user or user.can_edit(picture) %}
+                                <a class="delete" href="?remove_user={{ r.user.id }}">❌</a>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
 {% endblock %}
 
 {% block script %}
-{{ super() }}
-<script>
-$( function() {
-    $(document).keydown(function (e) {
-        if (e.keyCode == 37) {
-            console.log("prev");
-            $('#prev a')[0].click();
-        } else if (e.keyCode == 39) {
-            console.log("next");
-            $('#next a')[0].click();
-        }
+    {{ super() }}
+    <script>
+    $(() => {
+        $(document).keydown((e) => {
+            switch (e.keyCode) {
+                case 37:
+                    $('#prev a')[0].click();
+                case 39:
+                    $('#next a')[0].click();
+            }
+        });
     });
-} );
-</script>
+    </script>
 {% endblock %}