From 0167afe38f4348fd2448e7902b638c6ea6780043 Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Fri, 10 Mar 2023 11:05:09 +0100
Subject: [PATCH] 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)
---
 core/static/sas/album.scss              |   6 +
 core/static/sas/picture.scss            | 309 ++++++++++++++++++++++++
 core/templates/core/user_pictures.jinja |  41 +++-
 locale/fr/LC_MESSAGES/django.po         |   4 +
 sas/templates/sas/picture.jinja         | 285 ++++++++++++----------
 5 files changed, 506 insertions(+), 139 deletions(-)
 create mode 100644 core/static/sas/picture.scss

diff --git a/core/static/sas/album.scss b/core/static/sas/album.scss
index 7b09ee3d..2b176d2d 100644
--- a/core/static/sas/album.scss
+++ b/core/static/sas/album.scss
@@ -118,6 +118,12 @@
   flex-wrap: wrap;
   gap: 5px;
 
+  > div {
+    background: rgba(0, 0, 0, .5);
+    cursor: not-allowed;
+  }
+
+  > div,
   > a {
     box-sizing: border-box;
     position: relative;
diff --git a/core/static/sas/picture.scss b/core/static/sas/picture.scss
new file mode 100644
index 00000000..f5c895fe
--- /dev/null
+++ b/core/static/sas/picture.scss
@@ -0,0 +1,309 @@
+#content {
+  padding: 10px !important;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  @media (max-width: 1000px) {
+    flex-direction: column;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  width: calc(75% - 5px);
+  gap: 10px;
+
+  @media (max-width: 1000px) {
+    width: 100%;
+  }
+
+  > .photo {
+    box-sizing: border-box;
+    height: 500px;
+    display: flex;
+    justify-content: center;
+    background-color: #333333;
+    padding: 5px;
+
+    @media (max-width: 1000px) {
+      width: 100%;
+      height: auto;
+    }
+
+    > img {
+      height: 100%;
+      max-width: 100%;
+      object-fit: contain;
+    }
+  }
+}
+
+.subsection {
+  width: calc(25% - 5px);
+
+  @media (max-width: 1000px) {
+    width: 100%;
+  }
+
+  > .navigation {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    @media (max-width: 1000px) {
+      width: 100%;
+    }
+
+    > #prev,
+    > #next {
+      width: calc(50% - 5px);
+      aspect-ratio: 16/9;
+      background: #aaa;
+
+      > a {
+        display: flex;
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        > div {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 30px;
+          color: white;
+
+          background-repeat: no-repeat;
+          background-position: center center;
+          background-size: cover;
+
+          &::before {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 0, 0, .3);
+          }
+        }
+      }
+    }
+
+    > #prev > a > div::before {
+      content: '←';
+    }
+    > #next > a > div::before {
+      content: '→';
+    }
+  }
+
+  > .tags {
+    @media (min-width: 1001px) {
+      margin-right: 5px;
+    }
+
+    > ul {
+      list-style-type: none;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      @media (max-width: 1000px) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px;
+        margin-right: 5px;
+      }
+
+      > li {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+
+        @media (max-width: 1000px) {
+          max-width: calc(50% - 5px);
+        }
+
+        > a {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 10px;
+
+          &.user {
+            width: 100%;
+            background-color: #eee;
+            padding: 5px 10px 5px 5px;
+            border-radius: 5px;
+            color: black;
+            max-width: calc(100% - 40px);
+            min-height: 30px;
+
+            &:hover {
+              background-color: #aaa;
+            }
+
+            > span {
+              width: 100%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+          }
+
+          &.delete {
+            margin-left: 10px;
+          }
+
+          > img {
+            width: 25px;
+            max-height: 25px;
+            object-fit: contain;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    > form {
+      > p {
+        box-sizing: border-box;
+
+        > input {
+          width: 100%;
+          max-width: 100%;
+          box-sizing: border-box;
+        }
+      }
+
+      > .results_on_deck > div {
+        position: relative;
+        display: flex;
+        align-items: center;
+        word-break: break-word;
+
+        > span {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+
+      > input {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.general {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  @media (max-width: 1000px) {
+    flex-direction: column;
+  }
+
+  > .infos {
+    display: flex;
+    flex-direction: column;
+
+    > div > div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      > *:first-child {
+        min-width: 150px;
+
+        @media (max-width: 1000px) {
+          min-width: auto;
+        }
+      }
+    }
+  }
+
+  > .tools {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    > div  {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      > div {
+        > a.button {
+          box-sizing: border-box;
+          background-color: #f2f2f2;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 10px;
+          color: black;
+          border-radius: 5px;
+          width: 40px;
+          height: 40px;
+
+          &:hover {
+            background-color: #aaa;
+          }
+        }
+
+        > a.text.danger {
+          color: red;
+
+          &:hover {
+            color: darkred;
+          }
+        }
+
+        &.buttons {
+          display: flex;
+          gap: 5px;
+        }
+      }
+    }
+  }
+}
+
+.moderation {
+  box-sizing: border-box;
+  width: 100%;
+  border: 2px solid coral;
+  border-radius: 2px;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  > div:last-child {
+    display: flex;
+    gap: 20px;
+  }
+}
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 2d4e26a0..785e7cfc 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -1,5 +1,10 @@
 {% extends "core/base.jinja" %}
 
+{%- block additional_css -%}
+    <link rel="stylesheet" href="{{ scss('core/override.scss') }}">
+    <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
+{%- endblock -%}
+
 {% block title %}
 {% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
 {% endblock %}
@@ -8,19 +13,35 @@
     {% if can_edit(profile, user) %}
         <button id="download_all_pictures", onclick=download_pictures()>{% trans %}Download all my pictures{% endtrans %}</button>
     {% endif %}
-{% for a in albums %}
-    <div style="padding: 10px">
+    {% for a in albums %}
         <h4>{{ a.name }}</h4>
-        <hr>
-    {% for picture in pictures[a.id] %}
-        <div class="picture">
-            <a href="{{ url("sas:picture", picture_id=picture.id) }}#pict">
-                <img src="{{ picture.get_download_thumb_url() }}" alt="{{ picture.get_display_name() }}" style="max-width: 100%" loading="lazy"/>
-            </a>
+        <div class="photos">
+            {% for p in pictures[a.id] %}
+                {% if p.can_be_viewed_by(user) %}
+                    <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
+                        <div
+                            class="photo{% if not p.is_moderated %} not_moderated{% endif %}"
+                            style="background-image: url('{% if p.file %}{{ p.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
+                        >
+                            {% if not p.is_moderated %}
+                                <div class="overlay">&nbsp;</div>
+                                <div class="text">{% trans %}To be moderated{% endtrans %}</div>
+                            {% else %}
+                                <div class="text">&nbsp;</div>
+                            {% endif %}
+                        </div>
+                    </a>
+                {% else %}
+                    <div>
+                        <div class="photo">
+                            <div class="text">{% trans %}Picture Unavailable{% endtrans %}</div>
+                        </div>
+                    </div>
+                {% endif %}
+            {% endfor %}
         </div>
+        <br>
     {% endfor %}
-    </div>
-{% endfor %}
 {% endblock %}
 
 {% block script %}
diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po
index f8d34a5c..e247dc16 100644
--- a/locale/fr/LC_MESSAGES/django.po
+++ b/locale/fr/LC_MESSAGES/django.po
@@ -3332,6 +3332,10 @@ msgstr "Télécharger toutes mes photos"
 msgid "Error downloading your pictures"
 msgstr "Erreur de téléchargement de vos photos"
 
+#: core/templates/core/user_picture.jinja:
+msgid "Picture Unavailable"
+msgstr "Photo Indisponible"
+
 #: core/templates/core/user_preferences.jinja:4
 #: core/templates/core/user_preferences.jinja:8 core/views/user.py:238
 msgid "Preferences"
diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja
index 68253ea4..156d7b18 100644
--- a/sas/templates/sas/picture.jinja
+++ b/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 %}