From 8e7d44ec5763ca8484ae36b4d0a25a3c4cdcaa64 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 11 Apr 2023 15:03:12 +0200
Subject: [PATCH] Settings ui polish
---
app/static/js/App.js | 4 +++
app/templates/admin/user_settings.html.j2 | 31 +++++++---------
app/templates/users/settings/settings.html.j2 | 35 ++++++++++++-------
3 files changed, 39 insertions(+), 31 deletions(-)
diff --git a/app/static/js/App.js b/app/static/js/App.js
index 6d54a7a5..0741592d 100644
--- a/app/static/js/App.js
+++ b/app/static/js/App.js
@@ -60,6 +60,10 @@ class App {
iconPrefix = '<i class="left nopaque-icons">J</i>';
break;
}
+ case 'settings': {
+ iconPrefix = '<i class="left material-icons">settings</i>';
+ break;
+ }
default: {
iconPrefix = '<i class="left material-icons">notifications</i>';
break;
diff --git a/app/templates/admin/user_settings.html.j2 b/app/templates/admin/user_settings.html.j2
index 527e96d2..48391a71 100644
--- a/app/templates/admin/user_settings.html.j2
+++ b/app/templates/admin/user_settings.html.j2
@@ -19,25 +19,18 @@
<i class="caret material-icons">keyboard_arrow_right</i>
</div>
<div class="collapsible-body">
- <div class="row">
- <div class="col s12 l1">
- <p><i class="material-icons">check</i></p>
- </div>
- <div class="col s12 l7">
- <p>
- Confirmed<br>
- <span class="light">Change confirmation status manually.</span>
- </p>
- </div>
- <div class="col s3 l4">
- <div class="switch">
- <label>
- unconfirmed
- <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
- <span class="lever"></span>
- confirmed
- </label>
- </div>
+ <div style="overflow: auto;">
+ <p class="left"><i class="material-icons">check</i></p>
+ <p class="left" style="margin-left: 10px;">
+ Confirmed<br>
+ <span class="light">Change confirmation status manually.</span>
+ </p>
+ <br class="hide-on-med-and-down">
+ <div class="switch right">
+ <label>
+ <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
+ <span class="lever"></span>
+ </label>
</div>
</div>
</div>
diff --git a/app/templates/users/settings/settings.html.j2 b/app/templates/users/settings/settings.html.j2
index f862840d..3f028e7a 100644
--- a/app/templates/users/settings/settings.html.j2
+++ b/app/templates/users/settings/settings.html.j2
@@ -20,21 +20,32 @@
<ul class="collapsible no-autoinit settings-collapsible">
<li>
<div class="collapsible-header" style="justify-content: space-between;">
- <span>Profile Privacy</span>
+ <span>Privacy</span>
<i class="material-icons caret">keyboard_arrow_right</i>
</div>
<div class="collapsible-body">
- <div class="row">
- <div class="col s12 l3">
- <div class="switch">
- <label>
- private
- <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
- <span class="lever"></span>
- public
- </label>
- </div>
+ <div style="overflow: auto;">
+ <p class="left"><i class="material-icons">public</i></p>
+ <p class="left" style="margin-left: 10px;">
+ Public status<br>
+ <span class="light">Choose whether your profile is visible to other users.</span>
+ </p>
+ <br class="hide-on-med-and-down">
+ <div class="switch right">
+ <label>
+ <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
+ <span class="lever"></span>
+ </label>
</div>
+ </div>
+ <div style="overflow: auto;">
+ <p class="left"><i class="material-icons">badge</i></p>
+ <p class="left" style="margin-left: 10px;">
+ Public data<br>
+ <span class="light">Choose which data is visible on your profile.</span>
+ </p>
+ </div>
+ <div class="row" style="margin-left: 24px;">
<div class="col s12 l3">
<label>
<input {% if user.has_profile_privacy_setting('SHOW_EMAIL') %}checked{% endif %} class="profile-privacy-setting-checkbox" data-profile-privacy-setting-name="SHOW_EMAIL" {% if not user.is_public %}disabled{% endif %} type="checkbox">
@@ -58,7 +69,7 @@
</li>
<li>
<div class="collapsible-header" style="justify-content: space-between;">
- <span>Profile information</span>
+ <span>Information</span>
<i class="material-icons caret">keyboard_arrow_right</i>
</div>
<div class="collapsible-body">
--
GitLab