From 8a77381cab123eca2e9622fcf1468fa31fc5e7d1 Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Sun, 12 Mar 2023 15:08:21 +0100
Subject: [PATCH] Added godfather page CSS rework

---
 core/static/user/user_godfathers.scss     | 104 ++++++++++++++++++++++
 core/templates/core/user_godfathers.jinja |  49 +++++++---
 2 files changed, 140 insertions(+), 13 deletions(-)
 create mode 100644 core/static/user/user_godfathers.scss

diff --git a/core/static/user/user_godfathers.scss b/core/static/user/user_godfathers.scss
new file mode 100644
index 00000000..23f71741
--- /dev/null
+++ b/core/static/user/user_godfathers.scss
@@ -0,0 +1,104 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+
+  > form {
+    margin: 0;
+  }
+}
+
+.users {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style-type: none;
+  margin: 0;
+  gap: 10px
+}
+
+.users-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 150px;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, .05);
+  border-radius: 10px;
+
+  @media (max-width: 375px) {
+    width: 100%;
+  }
+
+  // Django moment
+  > div.mini_profile_link {
+    position: relative;
+
+    > a {
+      &.mini_profile_link {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        @media (max-width: 375px) {
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-start;
+        }
+    
+        > span {
+          height: 150px;
+          width: 100%;
+
+          @media (max-width: 375px) {
+            height: 80px;
+            width: 80px;
+          }
+
+          > img {
+            width: 100%;
+            max-width: 100%;
+            max-height: 100%;
+            height: auto;
+            object-fit: contain;
+        
+            @media (max-width: 375px) {
+              max-width: 100%;
+              max-height: 80px;
+            }
+          }
+        }
+    
+        >em {
+          text-align: center;
+
+          @media (max-width: 375px) {
+            margin-top: 10px;
+          }
+        }
+      }
+
+      &:last-of-type {
+        margin-top: 10px;
+        display: block;
+        text-align: center;
+        color: orangered;
+
+        @media (max-width: 375px) {
+          position: absolute;
+          bottom: 0%;
+          right: 0;
+        }
+      }
+    }
+  }
+
+  // Django moment
+  > a.mini_profile_link {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/core/templates/core/user_godfathers.jinja b/core/templates/core/user_godfathers.jinja
index 9a01be43..73f8af23 100644
--- a/core/templates/core/user_godfathers.jinja
+++ b/core/templates/core/user_godfathers.jinja
@@ -1,45 +1,68 @@
 {% extends "core/base.jinja" %}
 {% from "core/macros.jinja" import user_link_with_pict, delete_godfather %}
 
+{%- block additional_css -%}
+<link rel="stylesheet" href="{{ scss('user/user_godfathers.scss') }}">
+{%- endblock -%}
+
 {% block title %}
 {% trans user_name=profile.get_display_name() %}{{ user_name }}'s family{% endtrans %}
 {% endblock %}
 
 {% block content %}
-    <p><a href="{{ url("core:user_godfathers_tree_pict", user_id=profile.id) }}?family">
-        {% trans %}Show family picture{% endtrans %}</a></p>
+<div class="container">
+    <a href="{{ url('core:user_godfathers_tree_pict', user_id=profile.id) }}?family">
+        {% trans %}Show family picture{% endtrans %}
+    </a>
+
     {% if profile.godfathers.exists() %}
         <h4>{% trans %}Godfathers / Godmothers{% endtrans %}</h4>
-        <ul>
+        <ul class="users">
             {% for u in profile.godfathers.all() %}
-                <li> <a href="{{ url("core:user_godfathers", user_id=u.id) }}" class="mini_profile_link" >
-                    {{ u.get_mini_item()|safe }} </a>{{ delete_godfather(user, profile, u, True) }}</li>
+                <li class="users-card">
+                    <a href="{{ url('core:user_godfathers', user_id=u.id) }}" class="mini_profile_link">
+                        {{ u.get_mini_item() | safe }}
+                    </a>
+                    {{ delete_godfather(user, profile, u, True) }}
+                </li>
             {% endfor %}
         </ul>
-        <p><a href="{{ url("core:user_godfathers_tree", user_id=profile.id) }}">
-            {% trans %}Show ancestors tree{% endtrans %}</a></p>
+
+        <a href="{{ url('core:user_godfathers_tree', user_id=profile.id) }}">
+            {% trans %}Show ancestors tree{% endtrans %}
+        </a>
     {% else %}
         <p>{% trans %}No godfathers / godmothers{% endtrans %}
     {% endif %}
+
+
     {% if profile.godchildren.exists() %}
         <h4>{% trans %}Godchildren{% endtrans %}</h4>
-        <ul>
+        <ul class="users">
             {% for u in profile.godchildren.all() %}
-                <li> <a href="{{ url("core:user_godfathers", user_id=u.id) }}" class="mini_profile_link" >
-                    {{ u.get_mini_item()|safe }} </a>{{ delete_godfather(user, profile, u, False) }}</li>
+                <li class="users-card">
+                    <a href="{{ url('core:user_godfathers', user_id=u.id) }}" class="mini_profile_link">
+                        {{ u.get_mini_item()|safe }} 
+                    </a>
+                    {{ delete_godfather(user, profile, u, False) }}
+                </li>
             {% endfor %}
         </ul>
-        <p><a href="{{ url("core:user_godfathers_tree", user_id=profile.id) }}?descent">
-            {% trans %}Show descent tree{% endtrans %}</a></p>
+        
+        <a href="{{ url('core:user_godfathers_tree', user_id=profile.id) }}?descent">
+            {% trans %}Show descent tree{% endtrans %}
+        </a>
     {% else %}
         <p>{% trans %}No godchildren{% endtrans %}
     {% endif %}
-    {% if profile == user  or user.is_root %}
+
+    {% if profile == user or user.is_root %}
     <form action="" method="post">
         {% csrf_token %}
         {{ form.as_p() }}
         <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
     </form>
     {% endif %}
+</div>
 {% endblock %}