external-repos/ivatar
1
0
Fork 0
mirror of https://git.linux-kernel.at/oliver/ivatar.git synced 2025-11-12 03:06: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/
config_local.py
locale/*/LC_MESSAGES/django.mo
.DS_Store

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

@@ -6,7 +6,16 @@
{% 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 %}
@@ -66,43 +75,122 @@ outline: inherit;
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">
<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 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>&nbsp;
<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|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 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 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>&nbsp;
<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;
{{ 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 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 %}
@@ -131,8 +219,7 @@ outline: inherit;
{# TODO: (expires in xx hours) #}
{% endfor %}
{% endif %}
<p>
<p style="padding-top:5px;">
{% 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>
</p>
@@ -145,9 +232,7 @@ outline: inherit;
<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 %}

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

@@ -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;
}