external-repos/ivatar
1
0
Fork 0
mirror of https://git.linux-kernel.at/oliver/ivatar.git synced 2025-11-12 11:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesigned profile page

Browse Source
This commit is contained in:
Oliver Falk
2021-09-17 09:09:18 +00:00
parent ee13fb545a
commit 547b570f5d
3 changed files with 357 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -13,3 +13,4 @@ db.sqlite3.SAVE
node_modules/ node_modules/
config_local.py config_local.py
locale/*/LC_MESSAGES/django.mo locale/*/LC_MESSAGES/django.mo
.DS_Store

271
ivatar/ivataraccount/templates/profile.html
View File

@@ -6,7 +6,16 @@
{% block title %}{% trans 'Your Profile' %}{% endblock title %} {% block title %}{% trans 'Your Profile' %}{% endblock title %}
{% block content %} {% 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> <h1>
{% trans 'Your Profile' %} - {% trans 'Your Profile' %} -
{% if user.first_name and user.last_name %} {% if user.first_name and user.last_name %}
@@ -17,44 +26,44 @@
</h1> </h1>
<style> <style>
.action-item:hover span { .action-item:hover span {
display: inline !important; display: inline !important;
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
.action-item, .btn { .action-item, .btn {
padding-left: 0.3em; padding-left: 0.3em;
padding-right: 0.3em; padding-right: 0.3em;
} }
} }
.thumbnail { .thumbnail {
max-width:80px; max-width:80px;
max-height:80px; max-height:80px;
} }
.nobutton { .nobutton {
background: none; background: none;
color: inherit; color: inherit;
border: none; border: none;
padding: 0; padding: 0;
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
outline: inherit; outline: inherit;
} }
.button { .button {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
margin-right: 1rem; margin-right: 1rem;
} }
.container{ .container{
display: grid; display: grid;
} }
.btn-group{ .btn-group{
display: inline-flex; display: inline-flex;
} }
.input-group-addon{ .input-group-addon{
width: auto; width: auto;
height: 3rem; height: 3rem;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
@media only screen and (max-width: 470px) { @media only screen and (max-width: 470px) {
.button { .button {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
margin-right: 1rem; margin-right: 1rem;
@@ -65,103 +74,179 @@ outline: inherit;
.btn-group{ .btn-group{
display: contents; display: contents;
} }
} }
@media only screen and (max-width: 470px) {
p {
padding-top: 2rem;
}
h3{
line-height: 3.4rem;
}
}
</style> </style>
<noscript>
<style type="text/css">
.profile-container > ul{
display:block;
}
</style>
</noscript>
{% if user.confirmedemail_set.count or user.confirmedopenid_set.count %} {% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}
<h3>{% trans 'You have the following confirmed identities:' %}</h3> <h3>{% trans 'You have the following confirmed identities:' %}</h3>
<div class="row"> <div class="row profileid">
{% for email in user.confirmedemail_set.all %} {% for email in user.confirmedemail_set.all %}
{% if user.confirmedemail_set.all|length == 1%}
<form action="{% url 'remove_confirmed_email' email.id %}" method="post"> <form action="{% url 'remove_confirmed_email' email.id %}" method="post">
{% csrf_token %} {% csrf_token %}
<div class="panel" style="width:172px;margin-left:20px;float:left"> <div id="email-conf-{{ forloop.counter }}" class="profile-container active">
<div class="panel-heading" style="padding-right:0"> <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" title="{{ email.email }}" style="display:inline-flex"><a href="{% url 'assign_photo_email' email.id %}"><i class="fa fa-edit"></i></a>&nbsp; <h3 class="panel-title email-profile" title="{{ email.email }}">
<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>&nbsp; {{ email.email }}
{{ email.email|truncatechars:12 }}</h3> </h3>
</div> <ul>
<div class="panel-body" style="height:130px"> <li>
<center> <a href="{% url 'assign_photo_email' email.id %}">
<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 %}"> Change Profile Picture
</center> </a>
</div> </li>
</div> <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> </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 %} {% endfor %}
{% for openid in user.confirmedopenid_set.all %} {% 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 %} <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
<div class="panel" style="width:172px;margin-left:20px;float:left"> <div>
<div class="panel-heading" style="padding-right:0"> <div id="id-conf-{{ forloop.counter }}" class="profile-container active">
<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>&nbsp; <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 %}">
<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>&nbsp; <h3 class="panel-title email-profile" title="{{ openid.openid }}">
{{ openid.openid|cut:"http://"|cut:"https://"|truncatechars:12 }}</h3> {{ openid.openid }}
</div> </h3>
<div class="panel-body" style="height:130px"> <ul>
<center> <li>
<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 %}"> <a href="{% url 'assign_photo_openid' openid.pk %}">
</center> Change OpenID Picture
</div> </a>
</div> </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> </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 %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %} {% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %}
<h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3> <h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3>
{% for email in user.unconfirmedemail_set.all %} {% for email in user.unconfirmedemail_set.all %}
<form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post"> <form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post">
{% csrf_token %} {% csrf_token %}
<div class="btn-group form-group" role="group"> <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> <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> <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> <span class="input-group-addon" style="width: auto;">{{ email.email }}</span>
</div> </div>
</form> </form>
{# TODO: (expires in xx hours) #} {# TODO: (expires in xx hours) #}
{% endfor %} {% endfor %}
{% for openid in user.unconfirmedopenid_set.all %} {% for openid in user.unconfirmedopenid_set.all %}
<form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post"> <form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">
{% csrf_token %} {% csrf_token %}
<div class="btn-group form-group" role="group"> <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> <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> <span class="input-group-addon">{{ openid.openid }}</span>
</div> </div>
</form> </form>
{# TODO: (expires in xx hours) #} {# TODO: (expires in xx hours) #}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<p style="padding-top:5px;">
<p> {% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a>&nbsp;{% endif %}
{% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a>&nbsp;{% endif %} <a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p>
<a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p> </p>
</p> {% if user.photo_set.count %}
{% if user.photo_set.count %} <h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3>
<h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3> <div class="row">
<div class="row">
{% for photo in user.photo_set.all %} {% for photo in user.photo_set.all %}
<div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left"> <div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left">
<div class="panel-heading"> <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> <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>
<div class="panel-body" style="height:130px"> <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 %}"> <img title="{% trans 'Access count' %}: {{ photo.access_count }}" style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
</center> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} </div>
</div> {% endif %}
{% endif %}
{% if not max_photos %} {% if not max_photos %}
<p> <p>
<a href="{% url 'upload_photo' %}" class="button">{% trans 'Upload a new photo' %}</a>&nbsp; <a href="{% url 'upload_photo' %}" class="button">{% trans 'Upload a new photo' %}</a>&nbsp;
<a href="{% url 'import_photo' %}" class="button">{% trans 'Import photo from other services' %}</a> <a href="{% url 'import_photo' %}" class="button">{% trans 'Import photo from other services' %}</a>
</p> </p>
{% else %} {% else %}
{% trans "You've reached the maximum number of allowed images!" %}<br/> {% trans "You've reached the maximum number of allowed images!" %}<br/>
{% trans "No further images can be uploaded." %} {% trans "No further images can be uploaded." %}
{% endif %} {% endif %}
<div style="height:40px"></div> <div style="height:40px"></div>
{% endblock content %} {% endblock content %}

143
ivatar/static/css/libravatar_base.css
View File

@@ -82,14 +82,17 @@ h2 {
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
font-weight: 500; font-weight: 500;
} }
h3 { h3 {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-size: 24px; font-size: 24px;
margin-bottom: 2rem; margin-bottom: 2rem;
color: #545454; color: #545454;
} }
@media only screen and (max-width: 470px) {
h3{
font-size: 20px;
}
}
h4 { h4 {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-size: 25px; font-size: 25px;
@@ -404,7 +407,6 @@ transition: all 0.3s;
top: 26rem; top: 26rem;
} }
} }
@media only screen and (max-width: 620px) { @media only screen and (max-width: 620px) {
#page .container #home-form { #page .container #home-form {
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -728,3 +730,138 @@ color:#335ECF;
margin-top: 11rem !important; 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;
}