changeset 1123:ce6a0c12cbf3

Convert edit profile to V3 design.
author Brian Neal <bgneal@gmail.com>
date Wed, 17 Aug 2016 20:39:07 -0500
parents 2574cd24773e
children 5f63cd3db8cc
files bio/forms.py bio/views.py sg101/templates/bio/edit_profile.html sg101/templates/core/v3/post_box.html
diffstat 4 files changed, 180 insertions(+), 43 deletions(-) [+]
line wrap: on
line diff
--- a/bio/forms.py	Wed Aug 03 21:17:59 2016 -0500
+++ b/bio/forms.py	Wed Aug 17 20:39:07 2016 -0500
@@ -31,19 +31,17 @@
 
 class EditUserProfileForm(forms.ModelForm):
     """Form for editing the fields of the UserProfile model."""
-    location = forms.CharField(required=False, widget=forms.TextInput(attrs={'size': 64 }))
-    occupation = forms.CharField(required=False, widget=forms.TextInput(attrs={'size': 64 }))
-    interests = forms.CharField(required=False, widget=forms.TextInput(attrs={'size': 64 }))
     time_zone = forms.CharField(required=False, widget=forms.HiddenInput())
     use_24_time = forms.BooleanField(label='Show times in 24-hour mode', required=False)
-    profile_text = forms.CharField(required=False,
-        widget=forms.Textarea(attrs={'class': 'markItUp'}))
-    signature = forms.CharField(required=False,
-        widget=forms.Textarea(attrs={'class': 'markItUp'}))
+    hide_email = forms.BooleanField(
+        label="Don't show my email address on my public profile",
+        required=False)
     auto_favorite = forms.BooleanField(
-        label='Automatically favorite every forum topic I create or reply to', required=False)
+        label='Automatically favorite every forum topic I create or reply to',
+        required=False)
     auto_subscribe = forms.BooleanField(
-        label='Automatically subscribe to every forum topic I create or reply to', required=False)
+        label='Automatically subscribe to every forum topic I create or reply to',
+        required=False)
 
     class Meta:
         model = UserProfile
--- a/bio/views.py	Wed Aug 03 21:17:59 2016 -0500
+++ b/bio/views.py	Wed Aug 17 20:39:07 2016 -0500
@@ -105,8 +105,6 @@
 @login_required
 def edit_profile(request):
     if request.method == 'POST':
-        if request.POST.get('submit_button', 'Cancel') == 'Cancel':
-            return redirect('bio-me')
         profile = request.user.profile
         user_form = EditUserForm(request.POST, instance=request.user)
         profile_form = EditUserProfileForm(request.POST, instance=profile)
@@ -124,6 +122,7 @@
     return render(request, 'bio/edit_profile.html', {
         'user_form': user_form,
         'profile_form': profile_form,
+        'V3_DESIGN': True,
          })
 
 #######################################################################
--- a/sg101/templates/bio/edit_profile.html	Wed Aug 03 21:17:59 2016 -0500
+++ b/sg101/templates/bio/edit_profile.html	Wed Aug 17 20:39:07 2016 -0500
@@ -1,40 +1,180 @@
-{% extends 'bio/base.html' %}
+{% extends 'v3/base.html' %}
 {% load bio_tags %}
+{% load core_tags %}
 {% load elsewhere_tags %}
 {% load script_tags %}
 {% load static from staticfiles %}
 {% block title %}Edit Profile{% endblock %}
+{% block content %}
+
+<nav aria-label="You are here:" role="navigation">
+   <ul class="breadcrumbs">
+      <li><a href="{% url 'bio-me' %}">{{ user.username }}'s Profile</a></li>
+      <li>
+      <span class="show-for-sr">Current: </span> Edit Profile
+      </li>
+   </ul>
+</nav>
+
+<h2>Edit Profile for {{ user.username }}</h2>
+<div class="row align-middle">
+   <div class="columns">
+      <p>
+      {% avatar user 0 %}
+      </p>
+   </div>
+</div>
+<div class="row">
+   <div class="columns">
+      <a href="{% url 'bio-change_avatar' %}" class="button"><i class="fi-torso"></i>
+         Change Avatar</a>
+   </div>
+</div>
+
+<form action="{% url 'bio-edit_profile' %}" method="post">{% csrf_token %}
+   {{ user_form.non_field_errors }}
+   {{ user_form.first_name.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ user_form.first_name.id_for_label }}">
+            {{ user_form.first_name.label }}
+            {{ user_form.first_name }}
+         </label>
+      </div>
+   </div>
+   {{ user_form.last_name.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ user_form.last_name.id_for_label }}">
+            {{ user_form.last_name.label }}
+            {{ user_form.last_name }}
+         </label>
+      </div>
+   </div>
+   {{ user_form.email.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ user_form.email.id_for_label }}">{{ user_form.email.label }}
+            {{ user_form.email }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.non_field_errors }}
+   {{ profile_form.location.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ profile_form.location.id_for_label }}">
+            {{ profile_form.location.label }}
+            {{ profile_form.location }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.country.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ profile_form.country.id_for_label }}">
+            {{ profile_form.country.label }}
+            {{ profile_form.country }}
+         </label>
+         <p class="help-text">Optional</p>
+      </div>
+   </div>
+   {{ profile_form.birthday.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ profile_form.birthday.id_for_label }}">
+            {{ profile_form.birthday.label }}
+            {{ profile_form.birthday }}
+         </label>
+         <p class="help-text">Optional; the year is not shown to others</p>
+      </div>
+   </div>
+   {{ profile_form.occupation.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ profile_form.occupation.id_for_label }}">
+            {{ profile_form.occupation.label }}
+            {{ profile_form.occupation }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.interests.errors }}
+   <div class="row">
+      <div class="columns">
+         <label for="{{ profile_form.interests.id_for_label }}">
+            {{ profile_form.interests.label }}
+            {{ profile_form.interests }}
+         </label>
+      </div>
+   </div>
+   {% post_box profile_form.profile_text %}
+   {% post_box profile_form.signature %}
+   {{ profile_form.hide_email.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ profile_form.hide_email }}
+         <label class="middle" for="{{ profile_form.hide_email.id_for_label }}">
+            {{ profile_form.hide_email.label }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.use_24_time.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ profile_form.use_24_time }}
+         <label class="middle" for="{{ profile_form.use_24_time.id_for_label }}">
+            {{ profile_form.use_24_time.label }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.auto_favorite.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ profile_form.auto_favorite }}
+         <label class="middle" for="{{ profile_form.auto_favorite.id_for_label }}">
+            {{ profile_form.auto_favorite.label }}
+         </label>
+      </div>
+   </div>
+   {{ profile_form.auto_subscribe.errors }}
+   <div class="row">
+      <div class="columns">
+         {{ profile_form.auto_subscribe }}
+         <label class="middle" for="{{ profile_form.auto_subscribe.id_for_label }}">
+            {{ profile_form.auto_subscribe.label }}
+         </label>
+      </div>
+   </div>
+   <fieldset class="all-day-hide">
+   <legend>My Time Zone</legend>
+   {{ profile_form.time_zone.errors }}
+   <div class="row medium-unstack">
+      <div class="medium-3 columns">
+         <select id="id_tz_area"></select>
+      </div>
+      <div class="medium-3 columns">
+         <select id="id_tz_location"></select>
+      </div>
+   </div>
+   {{ profile_form.time_zone }}
+   </fieldset>
+   <div class="row">
+      <div class="columns">
+         <input type="submit" class="success button" value="Save" />
+         <a class="secondary button" href="{% url 'bio-me' %}">Cancel</a>
+      </div>
+   </div>
+   <fieldset class="fieldset">
+      <legend>My Links</legend>
+      {% elsewhere_links user %}
+      <a href="{% url 'bio-edit_elsewhere' %}" class="primary button">Edit Links</a>
+   </fieldset>
+</form>
+{% include 'core/v3/post_box_modals.html' %}
+{% endblock %}
 {% block custom_js %}
-{% script_tags 'jquery-ui markitup' %}
+{% script_tags 'jquery-ui' %}
 <script src="{% static "js/bio.js" %}"></script>
 <script src="{% static "js/timezone.js" %}"></script>
+<script src="{% static "js/v3/post_box.js" %}"></script>
 {% endblock %}
-{% block content %}
-<div class="user_profile">
-<h2>Edit Profile for {{ user.username }}</h2>
-<form action="{% url 'bio-edit_profile' %}" method="post">{% csrf_token %}
-<table>
-   <tr>
-      <td>
-         <a href="{% url 'bio-change_avatar' %}"><img src="{% static "icons/image_edit.png" %}" alt="Change Avatar" /></a>
-         <a href="{% url 'bio-change_avatar' %}">Change Avatar</a></td>
-      <td>{% avatar user 0 %}</td>
-   </tr>
-   {{ user_form.as_table }}
-   {{ profile_form.as_table }}
-   <tr>
-      <td>
-         <a href="{% url 'bio-edit_elsewhere' %}"><img src="{% static "icons/link_edit.png" %}" alt="Edit Links" /></a>
-         <a href="{% url 'bio-edit_elsewhere' %}">Edit Elsewhere Links</a></td>
-      <td>{% elsewhere_links user %}</td>
-   </tr>
-   <tr>
-      <th>Time Zone:</th> 
-      <td><select id="id_tz_area"></select> <select id="id_tz_location"></select></td>
-   <tr><td>&nbsp;</td><td><input type="submit" name="submit_button" value="Save" />
-         <input type="submit" name="submit_button" value="Cancel" /></td></tr>
-</table>
-</form>
-</div>
-<br />
-{% endblock %}
--- a/sg101/templates/core/v3/post_box.html	Wed Aug 03 21:17:59 2016 -0500
+++ b/sg101/templates/core/v3/post_box.html	Wed Aug 17 20:39:07 2016 -0500
@@ -2,7 +2,7 @@
 <div class="row">
    <div class="columns">
       <label for="{{ form_field.id_for_label }}">{{ form_field.label }}</label>
-      <div class="tabs-panel is-active v3-editor" id="editor-panel">
+      <div class="tabs-panel is-active v3-editor">
          <ul class="menu">
             <li><a class="editor-bold hide-for-small-only" href="#"><i class="fi-bold size-21" title="Bold"></i></a></li>
             <li><a class="editor-italic hide-for-small-only" href="#"><i class="fi-italic size-21" title="Italic"></i></a></li>