]> git.ipfire.org Git - ipfire.org.git/commitdiff
users/edit.html: updated to new design
authorRico Hoppe <rico.hoppe@ipfire.org>
Tue, 1 Aug 2023 12:02:19 +0000 (12:02 +0000)
committerRico Hoppe <rico.hoppe@ipfire.org>
Tue, 1 Aug 2023 12:02:19 +0000 (12:02 +0000)
src/templates/users/edit.html

index 5c4d4e78944d21d2aee0a287455a2f4070276772..0235b6363add7982ae1efdcc2742b39cf0843c75 100644 (file)
 {% block title %}{{ account }} - {{ _("Edit") }}{% end block %}
 
 {% block container %}
-       <div class="header">
-               <div class="container">
-                       <h1>{{ _("Edit Profile") }}</h1>
-
-                       <p class="text-muted">
-                               {{ account }}
-                       </p>
+       <section class="hero is-dark">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/users">
+                                                               {{ _("Users") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/users/{{ account.uid }}">
+                                                               {{ account }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">
+                                                               Edit
+                                                       </a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("Edit Profile") }}</h1>
+                               <h6 class="subtitle is-6">{{ account }} | {{ account.uid }}</h6>
+                       </div>
                </div>
-       </div>
+       </section>
 
        <div class="container">
-               <section>
+               <section class="section">
                        <form method="POST" action="" enctype="multipart/form-data">
                                {% raw xsrf_form_html() %}
 
-                               <div class="row mb-3">
-                                       <div class="col-12 col-sm-6">
-                                               <label class="form-label">{{ _("First Name") }}</label>
+                               <div class="block">
+                                       <div class="columns is-5">
+                                               <div class="column is-4">
+                                                       <label class="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="input" name="first_name"
+                                                               placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
+                                               </div>
 
-                                       <div class="col-12 col-sm-6">
-                                               <label class="form-label">{{ _("Last Name") }}</label>
+                                               <div class="column is-4">
+                                                       <label class="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="input" name="last_name"
+                                                               placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+                                               </div>
 
-                               <div class="mb-3">
-                                       <label class="form-label">{{ _("Nickname") }} ({{ _("optional") }})</label>
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("Nickname") }} ({{ _("optional") }})</label>
 
-                                       <input type="text" class="form-control" name="nickname"
-                                               placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+                                                       <input type="text" class="input" name="nickname"
+                                                               placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+                                               </div>
+                                       </div>
                                </div>
 
-                               <div class="mb-3">
-                                       <label class="form-label">{{ _("Address") }}</label>
+                               <div class="block">
+                                       <div class="columns">
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("Address") }}</label>
 
-                                       <textarea type="text" class="form-control" name="street" rows="3"
-                                               placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
-                               </div>
+                                                       <textarea type="text" class="textarea" name="street" rows="3"
+                                                               placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
+                                               </div>
+                                       </div>
 
-                               <div class="row mb-3">
-                                       <div class="col-12 col-sm-6">
-                                               <label class="form-label">{{ _("City") }}</label>
+                                       <div class="columns">
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("City") }}</label>
 
-                                               <input type="text" class="form-control" name="city"
-                                                       placeholder="{{ _("City") }}" value="{{ account.city }}">
-                                       </div>
+                                                       <input type="text" class="input" name="city"
+                                                               placeholder="{{ _("City") }}" value="{{ account.city }}">
+                                               </div>
 
-                                       <div class="col-12 col-sm-6">
-                                               <label class="form-label">{{ _("Postal Code") }}</label>
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("Postal Code") }}</label>
 
-                                               <input type="text" class="form-control" 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 class="mb-3">
-                                       <label class="form-label">{{ _("Country") }}</label>
+                               <div class="block">
+                                       <div class="columns">
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("Country") }}</label>
 
-                                       <select class="form-control" name="country_code">
-                                               <option value="">{{ _("- Please Select -") }}</option>
+                                                       <div class="select">
+                                                               <select name="country_code">
+                                                                       <option>{{ _("- Please Select -") }}</option>
 
-                                               {% for c in countries %}
-                                                       <option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-                                               {% end %}
-                                       </select>
+                                                                       {% for c in countries %}
+                                                                               <option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+                                                                       {% end %}
+                                                               </select>
+                                                         </div>
+                                               </div>
+                                       </div>
                                </div>
 
-                               <fieldset>
-                                       <legend>{{ _("Tell Us Who You Are") }}</legend>
+                               <div class="block">
+                                       <h4 class="title is-4">{{ _("Tell Us Who You Are") }}</h4>
 
-                                       <div class="mb-3" id="description">
-                                               <textarea type="text" class="form-control" name="description" rows="5"
+                                       <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>
 
-                                               <small class="form-text text-muted">
-                                                       {{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
-                                               </small>
+                                                       <p class="help">
+                                                               {{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
+                                                       </p>
+                                               </div>
                                        </div>
 
-                                       <div class="mb-3" id="avatar">
-                                               <label class="form-label">{{ _("Avatar") }}</label>
-
-                                               <input type="file" class="form-control-file" name="avatar">
-
-                                               <small class="form-text text-muted">
-                                                       {{ _("Upload a new avatar") }}
-                                               </small>
+                               <div class="block">
+                                       <div class="columns" id="avatar">
+                                               <div class="column is-4">
+                                                       <div class="file">
+                                                               <label class="file-label">
+                                                                       <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>
+                                                               </label>
+                                                         </div>
+                                               </div>
                                        </div>
-                               </fieldset>
+                               </div>
 
                                {% if account.has_mail() %}
-                                       <fieldset>
-                                               <legend>{{ _("Email") }}</legend>
-
-                                               <div class="mb-3">
-                                                       <label class="form-label">{{ _("Forward Emails") }}</label>
-
-                                                       <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 class="block">
+                                               <div class="columns">
+                                                       <div class="column is-4">
+                                                               <label class="label">{{ _("Email") }}</label>
+
+                                                               <div class="field-body">
+                                                                       <div class="field">
+                                                                               <p class="control">
+                                                                                       <input type="mail" class="input" name="mail_routing_address"
+                                                                                       placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
+                                                                               </p>
+                                                                       </div>
+                                                               </div>
+
+                                                               <p class="help">
+                                                                       {{ _("All emails will be forwarded to this email address") }}
+                                                               </p>
+                                                       </div>
                                                </div>
-                                       </fieldset>
+                                       </div>
                                {% end %}
 
-                               <fieldset>
-                                       <legend>{{ _("Telephone") }}</legend>
+                               <div class="block">
+                                       <div class="columns">
+                                               <div class="column is-4">
+                                                       <label class="label">{{ _("Telephone") }}</label>
 
-                                       <div class="mb-3">
-                                               <label class="form-label">{{ _("Phone Numbers") }}</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>
 
-                                               <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>
+                                                       <p class="help">
+                                                               {{ _("Enter your landline and mobile phone numbers") }}
+                                                       </p>
+                                               </div>
 
-                                       {% if account.has_sip() %}
-                                               <div class="mb-3">
-                                                       <label class="form-label">{{ _("Forward Calls") }}</label>
+                                               {% if account.has_sip() %}
+                                                       <div class="column is-4">
+                                                               <label class="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="input" 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>
+                                                               <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>
-                                       {% end %}
-                               </fieldset>
+                                       </div>
 
-                               <div class="d-grid">
-                                       <input class="btn btn-primary" type="submit" value="{{ _("Save") }}">
                                </div>
                        </form>
                </section>