From 547b570f5dbb959a43be66ad752b39ee2da1b83f Mon Sep 17 00:00:00 2001 From: Oliver Falk Date: Fri, 17 Sep 2021 09:09:18 +0000 Subject: [PATCH] Redesigned profile page --- .gitignore | 1 + ivatar/ivataraccount/templates/profile.html | 347 ++++++++++++-------- ivatar/static/css/libravatar_base.css | 143 +++++++- 3 files changed, 357 insertions(+), 134 deletions(-) diff --git a/.gitignore b/.gitignore index 9e5fc42..94da51a 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ db.sqlite3.SAVE node_modules/ config_local.py locale/*/LC_MESSAGES/django.mo +.DS_Store diff --git a/ivatar/ivataraccount/templates/profile.html b/ivatar/ivataraccount/templates/profile.html index c4ee0fb..6da094d 100644 --- a/ivatar/ivataraccount/templates/profile.html +++ b/ivatar/ivataraccount/templates/profile.html @@ -6,162 +6,247 @@ {% block title %}{% trans 'Your Profile' %}{% endblock title %} {% block content %} - +

{% 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 %}

+ + {% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}

{% trans 'You have the following confirmed identities:' %}

-
- {% for email in user.confirmedemail_set.all %} -
-{% csrf_token %} -
-
-

  -  -{{ email.email|truncatechars:12 }}

-
-
-
- -
-
-
-
- {% endfor %} - {% for openid in user.confirmedopenid_set.all %} -
{% csrf_token %} -
-
-

  -  -{{ openid.openid|cut:"http://"|cut:"https://"|truncatechars:12 }}

-
-
-
- -
-
-
-
- {% endfor %} -
-{% endif %} +
+ {% for email in user.confirmedemail_set.all %} + {% if user.confirmedemail_set.all|length == 1%} +
+ {% csrf_token %} +
+ + + +
+
+ {% else %} +
+ {% csrf_token %} +
+ + + +
+
+ {% endif %} + {% endfor %} + {% for openid in user.confirmedopenid_set.all %} + {% if user.confirmedopenid_set.all|length == 1 %} +
{% csrf_token %} +
+
+ + + +
+
+
+ {% else %} +
{% csrf_token %} +
+
+ + + +
+
+
+ {% endif %} + {% endfor %} +
+ {% endif %} -{% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %} -

{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}

- {% for email in user.unconfirmedemail_set.all %} -
-{% csrf_token %} -
- - -{{ email.email }} -
-
- {# TODO: (expires in xx hours) #} + {% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %} +

{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}

+ {% for email in user.unconfirmedemail_set.all %} +
+ {% csrf_token %} +
+ + + {{ email.email }} +
+
+ {# TODO: (expires in xx hours) #} + {% endfor %} + {% for openid in user.unconfirmedopenid_set.all %} +
+ {% csrf_token %} +
+ + {{ openid.openid }} +
+
+ {# TODO: (expires in xx hours) #} + {% endfor %} + {% endif %} +

+ {% if not max_emails %}{% trans 'Add a new email address' %} {% endif %} + {% trans 'Add a new OpenID' %}

+

+ {% if user.photo_set.count %} +

{% trans 'Here are the photos you have uploaded/imported:' %}

+
+ {% for photo in user.photo_set.all %} +
+
+

{% trans 'Image' %} {{ forloop.counter }}

+
+
+ +
+
{% endfor %} - {% for openid in user.unconfirmedopenid_set.all %} -
-{% csrf_token %} -
- -{{ openid.openid }} -
-
- {# TODO: (expires in xx hours) #} - {% endfor %} -{% endif %} +
+ {% endif %} -

-{% if not max_emails %}{% trans 'Add a new email address' %} {% endif %} -{% trans 'Add a new OpenID' %}

-

-{% if user.photo_set.count %} -

{% trans 'Here are the photos you have uploaded/imported:' %}

-
- {% for photo in user.photo_set.all %} -
-
-

{% trans 'Image' %} {{ forloop.counter }}

-
-
-
- -
-
-
-{% endfor %} -
-{% endif %} - -{% if not max_photos %} + {% if not max_photos %}

{% trans 'Upload a new photo' %}  {% trans 'Import photo from other services' %}

-{% else %} - {% trans "You've reached the maximum number of allowed images!" %}
- {% trans "No further images can be uploaded." %} -{% endif %} -
-{% endblock content %} + {% else %} + {% trans "You've reached the maximum number of allowed images!" %}
+ {% trans "No further images can be uploaded." %} + {% endif %} +
+ {% endblock content %} diff --git a/ivatar/static/css/libravatar_base.css b/ivatar/static/css/libravatar_base.css index 19b5037..7b4cf17 100644 --- a/ivatar/static/css/libravatar_base.css +++ b/ivatar/static/css/libravatar_base.css @@ -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; +}