mirror of
https://git.linux-kernel.at/oliver/ivatar.git
synced 2025-11-12 19:26:23 +00:00
Redesigned profile page
This commit is contained in:
Oliver Falk
1
.gitignore
vendored
1
.gitignore
vendored
@@ -13,3 +13,4 @@ db.sqlite3.SAVE
|
||||
node_modules/
|
||||
config_local.py
|
||||
locale/*/LC_MESSAGES/django.mo
|
||||
.DS_Store
|
||||
|
||||
@@ -6,162 +6,247 @@
|
||||
{% block title %}{% trans 'Your Profile' %}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<script type="text/javascript">
|
||||
function add_active(id){
|
||||
var elems = document.querySelector(".active");
|
||||
if(elems !== null){
|
||||
elems.classList.remove("active");
|
||||
}
|
||||
element = document.getElementById(id);
|
||||
element.classList.add("active");
|
||||
}
|
||||
</script>
|
||||
<h1>
|
||||
{% trans 'Your Profile' %} -
|
||||
{% if user.first_name and user.last_name %}
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
{% else %}
|
||||
{{ user.username }}
|
||||
{{ user.username }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
.action-item:hover span {
|
||||
.action-item:hover span {
|
||||
display: inline !important;
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.action-item, .btn {
|
||||
padding-left: 0.3em;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
}
|
||||
.thumbnail {
|
||||
max-width:80px;
|
||||
max-height:80px;
|
||||
}
|
||||
.nobutton {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
.button {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.container{
|
||||
display: grid;
|
||||
}
|
||||
.btn-group{
|
||||
display: inline-flex;
|
||||
}
|
||||
.input-group-addon{
|
||||
width: auto;
|
||||
height: 3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
@media only screen and (max-width: 470px) {
|
||||
@media screen and (max-width: 320px) {
|
||||
.action-item, .btn {
|
||||
padding-left: 0.3em;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
}
|
||||
.thumbnail {
|
||||
max-width:80px;
|
||||
max-height:80px;
|
||||
}
|
||||
.nobutton {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
.button {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.unconfirmed-mail-form{
|
||||
margin-bottom: 2rem;
|
||||
.container{
|
||||
display: grid;
|
||||
}
|
||||
.btn-group{
|
||||
display: contents;
|
||||
display: inline-flex;
|
||||
}
|
||||
.input-group-addon{
|
||||
width: auto;
|
||||
height: 3rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
@media only screen and (max-width: 470px) {
|
||||
.button {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.unconfirmed-mail-form{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.btn-group{
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 470px) {
|
||||
p {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
h3{
|
||||
line-height: 3.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<noscript>
|
||||
<style type="text/css">
|
||||
.profile-container > ul{
|
||||
display:block;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
{% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}
|
||||
<h3>{% trans 'You have the following confirmed identities:' %}</h3>
|
||||
<div class="row">
|
||||
{% for email in user.confirmedemail_set.all %}
|
||||
<form action="{% url 'remove_confirmed_email' email.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="panel" style="width:172px;margin-left:20px;float:left">
|
||||
<div class="panel-heading" style="padding-right:0">
|
||||
<h3 class="panel-title" title="{{ email.email }}" style="display:inline-flex"><a href="{% url 'assign_photo_email' email.id %}"><i class="fa fa-edit"></i></a>
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>
|
||||
{{ email.email|truncatechars:12 }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img title="{% trans 'Access count' %}: {{ email.access_count }}" style="max-height:100px;max-width:100px" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/80.png' %}{% endif %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endfor %}
|
||||
{% for openid in user.confirmedopenid_set.all %}
|
||||
<form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
|
||||
<div class="panel" style="width:172px;margin-left:20px;float:left">
|
||||
<div class="panel-heading" style="padding-right:0">
|
||||
<h3 class="panel-title" title="{{ openid.openid }}" style="display:inline-flex"><a href="{% url 'assign_photo_openid' openid.pk %}"><i class="fa fa-edit"></i></a>
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>
|
||||
{{ openid.openid|cut:"http://"|cut:"https://"|truncatechars:12 }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img title="{% trans 'Access count' %}: {{ openid.access_count }}" style="max-height:100px;max-width:100px" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/80.png' %}{% endif %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row profileid">
|
||||
{% for email in user.confirmedemail_set.all %}
|
||||
{% if user.confirmedemail_set.all|length == 1%}
|
||||
<form action="{% url 'remove_confirmed_email' email.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="email-conf-{{ forloop.counter }}" class="profile-container active">
|
||||
<img title="{% trans 'Access count' %}: {{ email.access_count }}" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
|
||||
<h3 class="panel-title email-profile" title="{{ email.email }}">
|
||||
{{ email.email }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'assign_photo_email' email.id %}">
|
||||
Change Profile Picture
|
||||
</a>
|
||||
</li>
|
||||
<li class="email-delete">
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')">
|
||||
Delete Email Adress
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<form action="{% url 'remove_confirmed_email' email.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="email-conf-{{ forloop.counter }}" class="profile-container" onclick="add_active('email-conf-{{ forloop.counter }}')">
|
||||
<img title="{% trans 'Access count' %}: {{ email.access_count }}" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
|
||||
<h3 class="panel-title email-profile" title="{{ email.email }}">
|
||||
{{ email.email }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'assign_photo_email' email.id %}">
|
||||
Change Profile Picture
|
||||
</a>
|
||||
</li>
|
||||
<li class="email-delete">
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')">
|
||||
Delete Email Adress
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for openid in user.confirmedopenid_set.all %}
|
||||
{% if user.confirmedopenid_set.all|length == 1 %}
|
||||
<form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
|
||||
<div>
|
||||
<div id="id-conf-{{ forloop.counter }}" class="profile-container active">
|
||||
<img title="{% trans 'Access count' %}: {{ openid.access_count }}" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
|
||||
<h3 class="panel-title email-profile" title="{{ openid.openid }}">
|
||||
{{ openid.openid }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'assign_photo_openid' openid.pk %}">
|
||||
Change OpenID Picture
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')">
|
||||
Delete OpenID
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
|
||||
<div>
|
||||
<div id="id-conf-{{ forloop.counter }}" class="profile-container" onclick="add_active('id-conf-{{ forloop.counter }}')">
|
||||
<img title="{% trans 'Access count' %}: {{ openid.access_count }}" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
|
||||
<h3 class="panel-title email-profile" title="{{ openid.openid }}">
|
||||
{{ openid.openid }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{% url 'assign_photo_openid' openid.pk %}">
|
||||
Change OpenID Picture
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')">
|
||||
Delete OpenID
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %}
|
||||
<h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3>
|
||||
{% for email in user.unconfirmedemail_set.all %}
|
||||
<form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="btn-group form-group" role="group">
|
||||
<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>
|
||||
<a href="{% url 'resend_confirmation_mail' email.pk %}" class="button"><i class="fa fa-envelope"></i></a>
|
||||
<span class="input-group-addon" style="width: auto;">{{ email.email }}</span>
|
||||
</div>
|
||||
</form>
|
||||
{# TODO: (expires in xx hours) #}
|
||||
{% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %}
|
||||
<h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3>
|
||||
{% for email in user.unconfirmedemail_set.all %}
|
||||
<form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="btn-group form-group" role="group">
|
||||
<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>
|
||||
<a href="{% url 'resend_confirmation_mail' email.pk %}" class="button"><i class="fa fa-envelope"></i></a>
|
||||
<span class="input-group-addon" style="width: auto;">{{ email.email }}</span>
|
||||
</div>
|
||||
</form>
|
||||
{# TODO: (expires in xx hours) #}
|
||||
{% endfor %}
|
||||
{% for openid in user.unconfirmedopenid_set.all %}
|
||||
<form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="btn-group form-group" role="group">
|
||||
<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>
|
||||
<span class="input-group-addon">{{ openid.openid }}</span>
|
||||
</div>
|
||||
</form>
|
||||
{# TODO: (expires in xx hours) #}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<p style="padding-top:5px;">
|
||||
{% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a> {% endif %}
|
||||
<a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p>
|
||||
</p>
|
||||
{% if user.photo_set.count %}
|
||||
<h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><a href="{% url 'delete_photo' photo.pk %}" onclick="return confirm('{% trans 'Are you sure that you want to delete this image?' %}')"><i class="fa fa-trash"></i></a> {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<img title="{% trans 'Access count' %}: {{ photo.access_count }}" style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for openid in user.unconfirmedopenid_set.all %}
|
||||
<form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="btn-group form-group" role="group">
|
||||
<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>
|
||||
<span class="input-group-addon">{{ openid.openid }}</span>
|
||||
</div>
|
||||
</form>
|
||||
{# TODO: (expires in xx hours) #}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p>
|
||||
{% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a> {% endif %}
|
||||
<a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p>
|
||||
</p>
|
||||
{% if user.photo_set.count %}
|
||||
<h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3>
|
||||
<div class="row">
|
||||
{% for photo in user.photo_set.all %}
|
||||
<div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title"><a href="{% url 'delete_photo' photo.pk %}" onclick="return confirm('{% trans 'Are you sure that you want to delete this image?' %}')"><i class="fa fa-trash"></i></a> {% trans 'Image' %} {{ forloop.counter }}</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="height:130px">
|
||||
<center>
|
||||
<img title="{% trans 'Access count' %}: {{ photo.access_count }}" style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not max_photos %}
|
||||
{% if not max_photos %}
|
||||
<p>
|
||||
<a href="{% url 'upload_photo' %}" class="button">{% trans 'Upload a new photo' %}</a>
|
||||
<a href="{% url 'import_photo' %}" class="button">{% trans 'Import photo from other services' %}</a>
|
||||
</p>
|
||||
{% else %}
|
||||
{% trans "You've reached the maximum number of allowed images!" %}<br/>
|
||||
{% trans "No further images can be uploaded." %}
|
||||
{% endif %}
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
{% else %}
|
||||
{% trans "You've reached the maximum number of allowed images!" %}<br/>
|
||||
{% trans "No further images can be uploaded." %}
|
||||
{% endif %}
|
||||
<div style="height:40px"></div>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -82,14 +82,17 @@ h2 {
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 24px;
|
||||
margin-bottom: 2rem;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 470px) {
|
||||
h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 25px;
|
||||
@@ -404,7 +407,6 @@ transition: all 0.3s;
|
||||
top: 26rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
#page .container #home-form {
|
||||
margin-bottom: 2rem;
|
||||
@@ -728,3 +730,138 @@ color:#335ECF;
|
||||
margin-top: 11rem !important;
|
||||
}
|
||||
}
|
||||
.profile-container{
|
||||
border-top: solid 5px #2F95EDB3;
|
||||
display: grid;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.profile-container img{
|
||||
margin: 0.5em;
|
||||
}
|
||||
.panel-body.profile > div, .panel-body.profile > img {
|
||||
text-align: left;
|
||||
}
|
||||
.panel-heading.profile{
|
||||
background: none;
|
||||
border-top-left-radius: unset;
|
||||
border-top-right-radius: unset;
|
||||
}
|
||||
.profile-container > h3{
|
||||
color: #353535;
|
||||
font-weight: bold;
|
||||
}
|
||||
.profile-container > ul > li > a, .profile-container button{
|
||||
color: #353535;
|
||||
text-decoration: none;
|
||||
}
|
||||
.profile-container.active{
|
||||
border-top: solid 5px #335ECF;
|
||||
}
|
||||
.profile-container ul > li > button:hover, .profile-container ul > li > a:hover{
|
||||
color: #335ECF;
|
||||
}
|
||||
.email-profile { grid-area: email; }
|
||||
.profile-container{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.profile-container > img {
|
||||
grid-area: img;
|
||||
margin: auto;
|
||||
}
|
||||
.profile-container > ul {
|
||||
grid-area: list;
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.profile-container > ul > li{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
@media only screen and (max-width: 420px) {
|
||||
.profile-container > ul > li {
|
||||
padding-top: 0.85rem;
|
||||
}
|
||||
}
|
||||
.profile-container > ul > li > a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
.profile-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'img email email email email email'
|
||||
'img list list list list list';
|
||||
grid-gap: 0;
|
||||
grid-template-columns: 20% 80%;
|
||||
}
|
||||
@media only screen and (max-width: 700px) {
|
||||
.profile-container {
|
||||
grid-template-columns: 40% 60%;
|
||||
}
|
||||
}
|
||||
.profile-container > div, profile-container > img {
|
||||
text-align: center;
|
||||
}
|
||||
.profile-container.active > img{
|
||||
max-height:120px;
|
||||
max-width:120px;
|
||||
}
|
||||
@media only screen and (max-width: 420px) {
|
||||
.profile-container.active > img {
|
||||
max-height:80px;
|
||||
max-width:80px;
|
||||
}
|
||||
}
|
||||
.profile-container > ul{
|
||||
display:none
|
||||
}
|
||||
.profile-container.active > ul{
|
||||
display:block;
|
||||
}
|
||||
.profile-container > img{
|
||||
max-height:80px;
|
||||
max-width:80px;
|
||||
}
|
||||
h3.panel-title{
|
||||
margin-top: unset;
|
||||
}
|
||||
.profile-container > h3{
|
||||
padding-top: 26px;
|
||||
}
|
||||
@media only screen and (max-width: 470px) {
|
||||
.profile-container > h3{
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
.profile-container:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.profile-container.active > h3{
|
||||
padding-top: 12px;
|
||||
}
|
||||
.profile-container.active{
|
||||
cursor: pointer;
|
||||
background: #dcdcdcb5;
|
||||
}
|
||||
.profile-container.active:hover{
|
||||
cursor:auto;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.profile-container:hover ul {
|
||||
display:block !important;
|
||||
}
|
||||
.profile-container:hover {
|
||||
background: #dcdcdcb5;
|
||||
}
|
||||
.profile-container:hover img{
|
||||
max-height:120px;
|
||||
max-width:120px;
|
||||
}
|
||||
.profile-container:hover h3{
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
.alert-success {
|
||||
color: #353535;
|
||||
background-color: #3582d71f;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user