From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 27 Nov 2024 13:22:13 +0000 (+0000)
Subject: users: Update design of profile edit page
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3a1441aafafb902ef8ff5606d39bcb99d16a2744;p=ipfire.org.git

users: Update design of profile edit page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/templates/users/edit.html b/src/templates/users/edit.html
index b6ebdd79..51cbceec 100644
--- a/src/templates/users/edit.html
+++ b/src/templates/users/edit.html
@@ -42,66 +42,77 @@
 			<form method="POST" action="" enctype="multipart/form-data">
 				{% raw xsrf_form_html() %}
 
-				<div class="block">
-					<div class="columns is-5">
-						<div class="column is-4">
-							<label class="label">{{ _("First Name") }}</label>
+				<div class="columns">
+					<div class="column is-two-thirds">
+						{# First & Last Name #}
+						<div class="columns">
+							<div class="column is-half">
+								<div class="field">
+									<label class="label">{{ _("First Name") }}</label>
 
-							<input type="text" class="input" name="first_name"
-								placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
-						</div>
+									<input type="text" class="input" name="first_name"
+										placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
+								</div>
+							</div>
 
-						<div class="column is-4">
-							<label class="label">{{ _("Last Name") }}</label>
+							<div class="column is-half">
+								<div class="field">
+									<label class="label">{{ _("Last Name") }}</label>
 
-							<input type="text" class="input" name="last_name"
-								placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+									<input type="text" class="input" name="last_name"
+										placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+								</div>
+							</div>
 						</div>
 
-						<div class="column is-4">
-							<label class="label">{{ _("Nickname") }} ({{ _("optional") }})</label>
+						{# Nickname #}
+						<div class="field">
+							<label class="label">{{ _("Nickname") }}</label>
 
 							<input type="text" class="input" name="nickname"
 								placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+
+							<p class="help">
+								{{ _("If you don't to show your full name, you can enter a nickname which will be shown instead") }}
+							</p>
 						</div>
-					</div>
-				</div>
 
-				<div class="block">
-					<div class="columns">
-						<div class="column is-4">
+						{# Address #}
+						<div class="field">
 							<label class="label">{{ _("Address") }}</label>
 
 							<textarea type="text" class="textarea" name="street" rows="3"
 								placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
 						</div>
-					</div>
 
-					<div class="columns">
-						<div class="column is-4">
-							<label class="label">{{ _("City") }}</label>
+						{# City & Post Code #}
+						<div class="columns">
+							<div class="column is-half">
+								<div class="field">
+									<label class="label">{{ _("City") }}</label>
 
-							<input type="text" class="input" name="city"
-								placeholder="{{ _("City") }}" value="{{ account.city }}">
-						</div>
+									<input type="text" class="input" name="city"
+										placeholder="{{ _("City") }}" value="{{ account.city }}">
+								</div>
+							</div>
 
-						<div class="column is-4">
-							<label class="label">{{ _("Postal Code") }}</label>
+							<div class="column is-half">
+								<div class="field">
+									<label class="label">{{ _("Postal Code") }}</label>
 
-							<input type="text" class="input" name="postal_code"
-								placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+									<input type="text" class="input" name="postal_code"
+										placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+								</div>
+							</div>
 						</div>
-					</div>
-				</div>
 
-				<div class="block">
-					<div class="columns">
-						<div class="column is-4">
+						{# Country #}
+						<div class="field">
 							<label class="label">{{ _("Country") }}</label>
 
-							<div class="select">
+							<div class="select is-fullwidth">
 								<select name="country_code" required>
-								  	<option>{{ _("- Please Select -") }}</option>
+									<option>{{ _("- Please Select -") }}</option>
 
 									{% for c in countries %}
 										<option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
@@ -109,47 +120,68 @@
 								</select>
 							  </div>
 						</div>
-					</div>
-				</div>
 
-				<div class="block">
-					<h4 class="title is-4">{{ _("Tell Us Who You Are") }}</h4>
+						{# Telephone #}
+						<div class="field">
+							<label class="label">{{ _("Telephone") }}</label>
+
+							<textarea type="text" class="textarea" name="phone_numbers" rows="3"
+								placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
+
+							<p class="help">
+								{{ _("Enter your landline and mobile phone numbers") }}
+							</p>
+						</div>
+
+						{# Call Forwarding #}
+						{% if account.has_sip() %}
+							<div class="field">
+								<label class="label">{{ _("Forward Calls") }}</label>
+
+								<input type="text" class="input" name="sip_routing_address"
+									placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
+
+								<p class="help">
+									{{ _("All calls will be forwarded to this phone number or SIP URI") }}
+								</p>
+							</div>
+						{% end %}
+
+						{# Description #}
+						<div class="field">
+							<label class="label">
+								{{ _("Tell Us More About Yourself") }}
+							</label>
 
-					<div class="columns" id="description">
-						<div class="column is-4">
 							<textarea type="text" class="textarea" name="description" rows="5"
-							placeholder="{{ _("Tell Us Who You Are") }}">{{ account.description or "" }}</textarea>
+								placeholder="{{ _("Tell Us More About Yourself") }}">{{ account.description or "" }}</textarea>
 
 							<p class="help">
-								{{ _("You can use Markdown syntax as you know it from the IPFire Documentation") }}
+								{{ _("This text will be shown on your profile for everyone to get to know you better.") }}
+								{{ _("You can use Markdown syntax as you know it from the IPFire Documentation.") }}
 							</p>
 						</div>
-					</div>
 
-				<div class="block">
-					<div class="columns" id="avatar">
-						<div class="column is-4">
+						{# Avatar #}
+						<div class="field">
 							<div class="file">
 								<label class="file-label">
-								  	<input class="file-input" type="file" name="avatar">
-								  	<span class="file-cta">
+									<input class="file-input" type="file" name="avatar">
+									<span class="file-cta">
 										<span class="file-icon">
 											<i class="fas fa-upload"></i>
 										</span>
 										<span class="file-label">
 											{{ _("Upload a new avatar") }}
 										</span>
-								  	</span>
+									</span>
 								</label>
-							  </div>
+							</div>
 						</div>
-					</div>
-				</div>
 
-				{% if account.has_mail() %}
-					<div class="block">
-						<div class="columns">
-							<div class="column is-4">
+						{# Email #}
+						{% if account.has_mail() %}
+							<div class="field">
 								<label class="label">{{ _("Email") }}</label>
 
 								<div class="field-body">
@@ -165,45 +197,10 @@
 									{{ _("All emails will be forwarded to this email address") }}
 								</p>
 							</div>
-						</div>
-					</div>
-				{% end %}
-
-				<div class="block">
-					<div class="columns">
-						<div class="column is-4">
-							<label class="label">{{ _("Telephone") }}</label>
-
-							<textarea type="text" class="textarea" name="phone_numbers" rows="3"
-								placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
-
-
-							<p class="help">
-								{{ _("Enter your landline and mobile phone numbers") }}
-							</p>
-						</div>
-
-						{% if account.has_sip() %}
-							<div class="column is-4">
-								<label class="label">{{ _("Forward Calls") }}</label>
-
-								<input type="text" class="input" name="sip_routing_address"
-									placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
-
-								<p class="help">
-									{{ _("All calls will be forwarded to this phone number or SIP URI") }}
-								</p>
-							</div>
 						{% end %}
-					</div>
 
-				<div class="block">
-					<div class="columns">
-						<div class="column is-4">
-							<input class="button is-primary is-fullwidth is-outlined is-medium has-text-weight-bold" type="submit" value="{{ _("SAVE") }}">
-						</div>
+						<input class="button is-primary is-fullwidth" type="submit" value="{{ _("Save") }}">
 					</div>
-
 				</div>
 			</form>
 		</section>