Settings ui polish

This commit is contained in:
Patrick Jentsch 2023-04-11 15:03:12 +02:00
parent 4ca2c0c873
commit 8e7d44ec57
3 changed files with 39 additions and 31 deletions

View File

@ -60,6 +60,10 @@ class App {
iconPrefix = '<i class="left nopaque-icons">J</i>'; iconPrefix = '<i class="left nopaque-icons">J</i>';
break; break;
} }
case 'settings': {
iconPrefix = '<i class="left material-icons">settings</i>';
break;
}
default: { default: {
iconPrefix = '<i class="left material-icons">notifications</i>'; iconPrefix = '<i class="left material-icons">notifications</i>';
break; break;

View File

@ -19,25 +19,18 @@
<i class="caret material-icons">keyboard_arrow_right</i> <i class="caret material-icons">keyboard_arrow_right</i>
</div> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<div class="row"> <div style="overflow: auto;">
<div class="col s12 l1"> <p class="left"><i class="material-icons">check</i></p>
<p><i class="material-icons">check</i></p> <p class="left" style="margin-left: 10px;">
</div> Confirmed<br>
<div class="col s12 l7"> <span class="light">Change confirmation status manually.</span>
<p> </p>
Confirmed<br> <br class="hide-on-med-and-down">
<span class="light">Change confirmation status manually.</span> <div class="switch right">
</p> <label>
</div> <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
<div class="col s3 l4"> <span class="lever"></span>
<div class="switch"> </label>
<label>
unconfirmed
<input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
<span class="lever"></span>
confirmed
</label>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -20,21 +20,32 @@
<ul class="collapsible no-autoinit settings-collapsible"> <ul class="collapsible no-autoinit settings-collapsible">
<li> <li>
<div class="collapsible-header" style="justify-content: space-between;"> <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> <i class="material-icons caret">keyboard_arrow_right</i>
</div> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<div class="row"> <div style="overflow: auto;">
<div class="col s12 l3"> <p class="left"><i class="material-icons">public</i></p>
<div class="switch"> <p class="left" style="margin-left: 10px;">
<label> Public status<br>
private <span class="light">Choose whether your profile is visible to other users.</span>
<input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox"> </p>
<span class="lever"></span> <br class="hide-on-med-and-down">
public <div class="switch right">
</label> <label>
</div> <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
<span class="lever"></span>
</label>
</div> </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"> <div class="col s12 l3">
<label> <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"> <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>
<li> <li>
<div class="collapsible-header" style="justify-content: space-between;"> <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> <i class="material-icons caret">keyboard_arrow_right</i>
</div> </div>
<div class="collapsible-body"> <div class="collapsible-body">