From f5ea169f031f1deb83c4b7169f9aca88daaf5f56 Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Thu, 2 Mar 2023 20:00:53 +0100
Subject: [PATCH] profile edition rework

---
 core/models.py                      |   2 +-
 core/static/user/user.scss          | 172 ++++++++++++++++++++++++
 core/templates/core/user_edit.jinja | 195 +++++++++++++++++++++-------
 3 files changed, 319 insertions(+), 50 deletions(-)
 create mode 100644 core/static/user/user.scss

diff --git a/core/models.py b/core/models.py
index e904603f..fdbcf19d 100644
--- a/core/models.py
+++ b/core/models.py
@@ -271,7 +271,7 @@ class User(AbstractBaseUser):
         _("dpt option"), max_length=32, blank=True, default=""
     )
     semester = models.CharField(_("semester"), max_length=5, blank=True, default="")
-    quote = models.CharField(_("quote"), max_length=256, blank=True, default="")
+    quote = models.TextField(_("quote"), max_length=256, blank=True, default="")
     school = models.CharField(_("school"), max_length=80, blank=True, default="")
     promo = models.IntegerField(
         _("promo"), validators=[validate_promo], null=True, blank=True
diff --git a/core/static/user/user.scss b/core/static/user/user.scss
new file mode 100644
index 00000000..95ff7678
--- /dev/null
+++ b/core/static/user/user.scss
@@ -0,0 +1,172 @@
+.profile {
+  &-visible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+
+    > input[type="checkbox"] {
+      cursor: pointer;
+    }
+  }
+
+  &-pictures {
+    box-sizing: border-box;
+    padding: 40px 20px 20px 20px;
+    gap: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 750px) {
+      flex-direction: column;
+    }
+  }
+
+  &-picture {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 30%;
+
+    @media (max-width: 750px) {
+      width: 100%;
+    }
+
+    &-display {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-width: 200px;
+
+      @media (max-width: 750px) {
+        max-width: 100%;
+      }
+
+      > img {
+        width: 200px !important;
+        height: 200px;
+
+        @media (max-width: 750px) {
+          width: 100% !important;
+          height: auto;
+        }
+      }
+
+      > p {
+        text-align: left !important;
+      }
+    }
+
+    &-edit {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      width: 40%;
+
+      @media (max-width: 750px) {
+        width: 100%;
+      }
+        
+      > input {
+        font-size: .8em;
+        font-weight: normal;
+        cursor: pointer;
+      }
+
+      > p {
+        margin-bottom: 10px;
+        text-align: left !important;
+      }
+    }
+  }
+
+  &-fields {
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+
+    @media (max-width: 750px) {
+      gap: 20px;
+    }
+  }
+
+  &-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    max-width: 30%;
+    min-width: 300px;
+
+    @media (max-width: 750px) {
+      gap: 4px;
+      max-width: 100%;
+    }
+
+    >* {
+      width: 100%;
+      max-width: 300px;
+
+      @media (max-width: 750px) {
+        max-width: 100%;
+      }
+    }
+
+    &-label {
+      text-align: left !important;
+    }
+
+    &-content {
+
+      >* {
+        box-sizing: border-box;
+        text-align: left !important;
+        line-height: 40px;
+        max-width: 100%;
+        width: 100%;
+        height: 40px;
+        margin: 0;
+      }
+
+
+      >textarea {
+        height: 120px;
+        min-height: 40px;
+        min-width: 300px;
+        max-width: 300px;
+
+        @media (max-width: 750px) {
+          max-width: 100%;
+        }
+      }
+
+      >input[type="file"] {
+        font-size: small;
+        line-height: 30px;
+      }
+
+      >input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        float: left;
+      }
+    }
+  }
+}
+
+
+
diff --git a/core/templates/core/user_edit.jinja b/core/templates/core/user_edit.jinja
index 5bd692e9..53d31e18 100644
--- a/core/templates/core/user_edit.jinja
+++ b/core/templates/core/user_edit.jinja
@@ -1,55 +1,152 @@
-{% extends "core/base.jinja" %}
+{%- extends "core/base.jinja" -%}
 
-{% block title %}
-{% trans %}Edit user{% endtrans %}
-{% endblock %}
+{%- block title -%}
+{%- trans -%}Edit user{%- endtrans -%}
+{%- endblock -%}
 
-{% block content %}
-<h2>{% trans %}Edit user profile{% endtrans %}</h2>
-<form action="" method="post" enctype="multipart/form-data" id="user_edit">
-    {% csrf_token %}
+{%- block additional_css -%}
+<link rel="stylesheet" href="{{ scss('user/user.scss') }}">
+{%- endblock -%}
+
+{%- block content -%}
+    <h2>{%- trans -%}Edit user profile{%- endtrans -%}</h2>
+    <form action="" method="post" enctype="multipart/form-data" id="user_edit">
+
+    {%- csrf_token -%}
     {{ form.non_field_errors() }}
-    {% for field in form %}
-    <p>{{ field.errors }}<label for="{{ field.name }}">{{ field.label }}
-    {%- if field.name == "profile_pict" -%}
-    <br>{% trans %}Current profile: {% endtrans %}
-    {% if form.instance.profile_pict %}
-    <img src="{{ form.instance.profile_pict.get_download_url() }}" title="{% trans %}Profile{% endtrans %}" /><br>
-    {% if user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) %}
-    <a href="{{ url('core:file_delete', file_id=form.instance.profile_pict.id, popup="") }}">{% trans %}Delete{% endtrans %}</a>
-    {% endif %}
-    {% else %}
-    <img src="{{ static('core/img/unknown.jpg') }}" title="-" crossOrigin="Anonymous" id="new_profile"/><br>
-    <div id="take_picture">
-        <div id="camera_canvas" style="width:320; height:240; margin: 0px auto;"></div>
-        <a href="javascript:void(take_snapshot())">{% trans %}Take picture{% endtrans %}</a>
-    </div>
-    <p>
-    {% endif %}<br>
-    {%- elif field.name == "avatar_pict" and form.instance.avatar_pict -%}
-    <br>{% trans %}Current avatar: {% endtrans %}
-    <img src="{{ form.instance.avatar_pict.get_download_url() }}" title="{% trans %}Avatar{% endtrans %}" /><br>
-    {%- elif field.name == "scrub_pict" and form.instance.scrub_pict -%}
-    <br>{% trans %}Current scrub: {% endtrans %}
-    <img src="{{ form.instance.scrub_pict.get_download_url() }}" title="{% trans %}Scrub{% endtrans %}" /><br>
-    {%- endif %}</label> {{ field }}</p>
-    {% endfor %}
-    <p><input type="submit" value="{% trans %}Update{% endtrans %}" /></p>
-    <p>{% trans %}Username: {% endtrans %}{{ form.instance.username }}</p>
-    {% if form.instance.customer %}
-    <p>{% trans %}Account number: {% endtrans %}{{ form.instance.customer.account_id }}</p>
-    {% endif %}
-    {% if form.instance == user %}
-    <p><a href="{{ url('core:password_change') }}">{% trans %}Change my password{% endtrans %}</a></p>
-    {% elif user.is_root %}
-    <p><a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">{% trans %}Change user password{% endtrans %}</a></p>
-    {% endif %}
-</form>
-{% endblock %}
 
-{% block script %}
+    {# User Pictures #}
+    <div class="profile-pictures">
+        {# <p>{%- trans -%}Current profile: {%- endtrans -%}</p> #}
+        <div class="profile-picture">
+            <div class="profile-picture-display">
+    
+                {%- if form.instance.profile_pict -%}
+                <img src="{{ form.instance.profile_pict.get_download_url() }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- else -%}
+                <img src="{{ static('core/img/unknown.jpg') }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- endif -%}
+            </div>
+            <div class="profile-picture-edit">
+                <p>{{ form["profile_pict"].label }}</p>
+                {{ form["profile_pict"] }}
+                {%- if user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) -%}
+                <a href="{{ url('core:file_delete', file_id=form.instance.profile_pict.id, popup='') }}">{%- trans -%}Delete{%- endtrans -%}</a>
+                {%- endif -%}
+            </div>
+        </div>
+        <div class="profile-picture">
+            <div class="profile-picture-display">
+                {%- if form.instance.avatar_pict -%}
+                <img src="{{ form.instance.avatar_pict.get_download_url() }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- else -%}
+                <img src="{{ static('core/img/unknown.jpg') }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- endif -%}
+            </div>
+            <div class="profile-picture-edit">
+                <p>{{ form["avatar_pict"].label }}</p>
+                {{ form["avatar_pict"] }}
+                {%- if user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) -%}
+                <a href="{{ url('core:file_delete', file_id=form.instance.avatar_pict.id, popup='') }}">{%- trans -%}Delete{%- endtrans -%}</a>
+                {%- endif -%}
+            </div>
+        </div>
+        <div class="profile-picture">
+            <div class="profile-picture-display">
+                {%- if form.instance.scrub_pict -%}
+                <img src="{{ form.instance.scrub_pict.get_download_url() }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- else -%}
+                <img src="{{ static('core/img/unknown.jpg') }}" alt="{%- trans -%}Profile{%- endtrans -%}"
+                    title="{%- trans -%}Profile{%- endtrans -%}" />
+                {%- endif -%}
+            </div>
+            <div class="profile-picture-edit">
+                <p>{{ form["scrub_pict"].label }}</p>
+                {{ form["scrub_pict"] }}
+                {%- if user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) -%}
+                <a href="{{ url('core:file_delete', file_id=form.instance.scrub_pict.id, popup='') }}">{%- trans -%}Delete{%-
+                    endtrans -%}</a>
+                {%- endif -%}
+            </div>
+        </div>
+    </div>
+    
+        
+    {# All fields #}
+    <div class="profile-fields">
+        {%- for field in form -%}
+        {%-
+        if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"]
+        -%}
+        {%- continue -%}
+        {%- endif -%}
+
+        <div class="profile-field">
+            <div class="profile-field-label">{{ field.label }}</div>
+            <div class="profile-field-content">
+                {{ field }}
+                {%- if field.errors -%}
+                <div class="field-error">{{ field.errors }}</div>
+                {%- endif -%}
+            </div>
+        </div>
+        {%- endfor -%}
+    </div>
+        
+    {# Textareas #}
+    <div class="profile-fields">
+        {%- for field in [form["quote"], form["forum_signature"]] -%}
+        <div class="profile-field">
+            <div class="profile-field-label">{{ field.label }}</div>
+            <div class="profile-field-content">
+                {{ field }}
+                {%- if field.errors -%}
+                <div class="field-error">{{ field.errors }}</div>
+                {%- endif -%}
+            </div>
+        </div>
+        {%- endfor -%}
+    </div>
+
+    {# Checkboxes #}
+    <div class="profile-visible">
+        {{ form["is_subscriber_viewable"] }}
+        {{ form["is_subscriber_viewable"].label }}
+    </div>
+
+    {%- if form.instance == user -%}
+        <p align="center">
+            <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
+        </p>
+    {%- elif user.is_root -%}
+        <p align="center">
+            <a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">{%- trans -%}Change user password{%- endtrans -%}</a>
+        </p>
+    {%- endif -%}
+
+    <p align="center">
+        <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
+    </p>
+</form>
+
+<p>
+    <em>{%- trans -%}Username: {%- endtrans -%}&nbsp;{{ form.instance.username }}</em>
+    <br/>
+    {%- if form.instance.customer -%}
+    <em>{%- trans -%}Account number: {%- endtrans -%}&nbsp;{{ form.instance.customer.account_id }}</em>
+    {%- endif -%}
+</p>
+
+{%- endblock -%}
+
+{%- block script -%}
     {{ super() }}
-    {% if not form.instance.profile_pict %}
+    {%- if not form.instance.profile_pict -%}
     <script src="{{ static('core/js/webcam.js') }}"></script>
     <script language="JavaScript">
         Webcam.on('error', function(msg) { console.log('Webcam.js error: ' + msg) })
@@ -79,8 +176,8 @@
                         }, "new_profile_pict", {name: 'csrfmiddlewaretoken', value: '{{ csrf_token }}'});
         }
     </script>
-    {% endif %}
-{% endblock %}
+    {%- endif -%}
+    {%- endblock -%}