mirror of
https://github.com/ae-utbm/sith3.git
synced 2024-06-01 04:19:43 +00:00
profile edition rework
This commit is contained in:
Julien Constant
parent
73305c0b28
commit
f5ea169f03
|
|
@ -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
|
||||
|
|
|
|||
172
core/static/user/user.scss
Normal file
172
core/static/user/user.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -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 -%} {{ form.instance.username }}</em>
|
||||
<br/>
|
||||
{%- if form.instance.customer -%}
|
||||
<em>{%- trans -%}Account number: {%- endtrans -%} {{ 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 -%}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user