From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 27 Nov 2020 17:39:51 +0000 (+0000)
Subject: people: Update design of profile edit page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=ea22c760adbbc97d1a6856ab334dfbb18b2b6f2e;p=ipfire.org.git

people: Update design of profile edit page

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

diff --git a/src/templates/people/user-edit.html b/src/templates/people/user-edit.html
index 1e05d0ae..70f32713 100644
--- a/src/templates/people/user-edit.html
+++ b/src/templates/people/user-edit.html
@@ -2,138 +2,150 @@
 
 {% block title %}{{ account }} - {{ _("Edit") }}{% end block %}
 
-{% block content %}
-	<h4 class="mb-4">{{ _("Edit") }}</h4>
+{% block container %}
+	<div class="header">
+		<div class="container">
+			<h1>{{ _("Edit Profile") }}</h1>
+
+			<p class="text-muted">
+				{{ account }}
+			</p>
+		</div>
+	</div>
 
-	<form method="POST" action="" enctype="multipart/form-data">
-		{% raw xsrf_form_html() %}
+	<div class="container">
+		<section>
+			<form method="POST" action="" enctype="multipart/form-data">
+				{% raw xsrf_form_html() %}
 
-		<div class="form-row mb-3">
-			<div class="col">
-				<label>{{ _("First Name") }}</label>
+				<div class="form-row mb-3">
+					<div class="col">
+						<label>{{ _("First Name") }}</label>
 
-				<input type="text" class="form-control" name="first_name"
-					placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
-			</div>
+						<input type="text" class="form-control" name="first_name"
+							placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
+					</div>
 
-			<div class="col">
-				<label>{{ _("Last Name") }}</label>
+					<div class="col">
+						<label>{{ _("Last Name") }}</label>
 
-				<input type="text" class="form-control" name="last_name"
-					placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
-			</div>
-		</div>
+						<input type="text" class="form-control" name="last_name"
+							placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+					</div>
+				</div>
 
-		<div class="form-group">
-			<label>{{ _("Nickname") }} ({{ _("optional") }})</label>
+				<div class="form-group">
+					<label>{{ _("Nickname") }} ({{ _("optional") }})</label>
 
-			<input type="text" class="form-control" name="nickname"
-				placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
-		</div>
+					<input type="text" class="form-control" name="nickname"
+						placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+				</div>
 
-		<div class="form-group">
-			<label>{{ _("Address") }}</label>
+				<div class="form-group">
+					<label>{{ _("Address") }}</label>
 
-			<textarea type="text" class="form-control" name="street" rows="3"
-				placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
-		</div>
+					<textarea type="text" class="form-control" name="street" rows="3"
+						placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
+				</div>
 
-		<div class="form-row mb-3">
-			<div class="col">
-				<label>{{ _("City") }}</label>
+				<div class="form-row mb-3">
+					<div class="col">
+						<label>{{ _("City") }}</label>
 
-				<input type="text" class="form-control" name="city"
-					placeholder="{{ _("City") }}" value="{{ account.city }}">
-			</div>
+						<input type="text" class="form-control" name="city"
+							placeholder="{{ _("City") }}" value="{{ account.city }}">
+					</div>
 
-			<div class="col">
-				<label>{{ _("Postal Code") }}</label>
+					<div class="col">
+						<label>{{ _("Postal Code") }}</label>
 
-				<input type="text" class="form-control" name="postal_code"
-					placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
-			</div>
-		</div>
+						<input type="text" class="form-control" name="postal_code"
+							placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+					</div>
+				</div>
 
-		<div class="form-group">
-			<label>{{ _("Country") }}</label>
+				<div class="form-group">
+					<label>{{ _("Country") }}</label>
 
-			<select class="form-control" name="country_code">
-				<option value="">{{ _("- Please Select -") }}</option>
+					<select class="form-control" name="country_code">
+						<option value="">{{ _("- Please Select -") }}</option>
 
-				{% for c in countries %}
-					<option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-				{% end %}
-			</select>
-		</div>
+						{% for c in countries %}
+							<option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+						{% end %}
+					</select>
+				</div>
 
-		<fieldset>
-			<legend>{{ _("Tell Us Who You Are") }}</legend>
+				<fieldset>
+					<legend>{{ _("Tell Us Who You Are") }}</legend>
 
-			<div class="form-group">
-				<textarea type="text" class="form-control" name="description" rows="5"
-					placeholder="{{ _("Tell Us Who You Are") }}">{{ account.description or "" }}</textarea>
+					<div class="form-group" id="description">
+						<textarea type="text" class="form-control" name="description" rows="5"
+							placeholder="{{ _("Tell Us Who You Are") }}">{{ account.description or "" }}</textarea>
 
-				<small class="form-text text-muted">
-					{{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
-				</small>
-			</div>
+						<small class="form-text text-muted">
+							{{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
+						</small>
+					</div>
 
-			<div class="form-group">
-				<label>{{ _("Avatar") }}</label>
+					<div class="form-group" id="avatar">
+						<label>{{ _("Avatar") }}</label>
 
-				<input type="file" class="form-control-file" name="avatar">
+						<input type="file" class="form-control-file" name="avatar">
 
-				<small class="form-text text-muted">
-					{{ _("Upload a new avatar") }}
-				</small>
-			</div>
-		</fieldset>
+						<small class="form-text text-muted">
+							{{ _("Upload a new avatar") }}
+						</small>
+					</div>
+				</fieldset>
 
-		{% if account.has_mail() %}
-			<fieldset>
-				<legend>{{ _("Email") }}</legend>
+				{% if account.has_mail() %}
+					<fieldset>
+						<legend>{{ _("Email") }}</legend>
 
-				<div class="form-group">
-					<label>{{ _("Forward Emails") }}</label>
+						<div class="form-group">
+							<label>{{ _("Forward Emails") }}</label>
 
-					<input type="mail" class="form-control" name="mail_routing_address"
-						placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
+							<input type="mail" class="form-control" name="mail_routing_address"
+								placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
 
-					<small class="form-text text-muted">
-						{{ _("All emails will be forwarded to this email address") }}
-					</small>
-				</div>
-			</fieldset>
-		{% end %}
+							<small class="form-text text-muted">
+								{{ _("All emails will be forwarded to this email address") }}
+							</small>
+						</div>
+					</fieldset>
+				{% end %}
 
-		<fieldset>
-			<legend>{{ _("Telephone") }}</legend>
+				<fieldset>
+					<legend>{{ _("Telephone") }}</legend>
 
-			<div class="form-group">
-				<label>{{ _("Phone Numbers") }}</label>
+					<div class="form-group">
+						<label>{{ _("Phone Numbers") }}</label>
 
-				<textarea type="text" class="form-control" name="phone_numbers" rows="3"
-					placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
+						<textarea type="text" class="form-control" name="phone_numbers" rows="3"
+							placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
 
-				<small class="form-text text-muted">
-					{{ _("Enter your landline and mobile phone numbers") }}
-				</small>
-			</div>
+						<small class="form-text text-muted">
+							{{ _("Enter your landline and mobile phone numbers") }}
+						</small>
+					</div>
 
-			{% if account.has_sip() %}
-				<div class="form-group">
-					<label>{{ _("Forward Calls") }}</label>
+					{% if account.has_sip() %}
+						<div class="form-group">
+							<label>{{ _("Forward Calls") }}</label>
 
-					<input type="text" class="form-control" name="sip_routing_address"
-						placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
+							<input type="text" class="form-control" name="sip_routing_address"
+								placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
 
-					<small class="form-text text-muted">
-						{{ _("All calls will be forwarded to this phone number or SIP URI") }}
-					</small>
-				</div>
-			{% end %}
-		</fieldset>
+							<small class="form-text text-muted">
+								{{ _("All calls will be forwarded to this phone number or SIP URI") }}
+							</small>
+						</div>
+					{% end %}
+				</fieldset>
 
-		<input class="btn btn-primary btn-block" type="submit" value="{{ _("Save") }}">
-	</form>
+				<input class="btn btn-primary btn-block" type="submit" value="{{ _("Save") }}">
+			</form>
+		</section>
+	</div>
 {% end block %}