change profile page to a three column layout

opentech/apply/users/templates/users/account.html

@@ -10,55 +10,55 @@
     </div>
 </div>
 
-<section class="section section--profile">
-    <h3>Profile</h3>
-    <form action="" method="post" class="form">
-        {% csrf_token %}
-        <div class="form__columns">
+<div class="profile">
+    <div class="profile__column">
+        <h3>Profile</h3>
+        <form action="" method="post" class="form">
+            {% csrf_token %}
             {% for field in form %}
                 {% include "funds/includes/field.html" %}
             {% endfor %}
-        </div>
-        <button class="button button--primary" type="submit">{% trans "Update Profile" %}</button>
-    </form>
-</section>
-
-{% if show_change_password and user.has_usable_password and not backends.associated %}
-    <section class="section section--profile">
-        <h3>Change password</h3>
-        <a class="button button--primary" href="{% url 'users:password_change' %}">{% trans "Update password" %}</a>
-    </section>
-{% endif %}
-
-<section class="section section--profile">
-    {% if swappable %}
-        <form action="{% url 'users:become' %}" method="post" class="form">
-            {% csrf_token %}
-            {% for user in swappable %}
-                {% if forloop.first %}
-                <h3>Become:</h3>
-                <p class="form__help">Only includes active, non-superusers</p>
-                <div class="form__item">
-                <div class="form__select">
-                    <select name="user" id="user">
-                {% endif %}
-                    <option value="{{ user.id }}">{{ user }}</option>
-                {% if forloop.last %}
-                    </select>
-                </div>
-                </div>
-                {% endif %}
-            {% endfor %}
-            <button class="button button--primary button--top-space" type="submit">Become</button>
+            <button class="button button--primary" type="submit">{% trans "Update Profile" %}</button>
         </form>
-    {% endif %}
+    </div>
 
-    {# Remove the comment block tags below when such need arises. e.g. adding new providers #}
-    {% comment %}
-    {% can_use_oauth as show_oauth_link %}
-    {% if show_oauth_link %}
-        <a href="{% url 'users:oauth' %}">{% trans "Manage OAuth" %}</a>
+    {% if show_change_password and user.has_usable_password and not backends.associated %}
+        <div class="profile__column">
+            <h3>Change password</h3>
+            <a class="button button--primary" href="{% url 'users:password_change' %}">{% trans "Update password" %}</a>
+        </div>
     {% endif %}
-    {% endcomment %}
-</section>
+
+    <div class="profile__column">
+        {% if swappable %}
+            <form action="{% url 'users:become' %}" method="post" class="form">
+                {% csrf_token %}
+                {% for user in swappable %}
+                    {% if forloop.first %}
+                    <h3>Become:</h3>
+                    <p class="form__help">Only includes active, non-superusers</p>
+                    <div class="form__item">
+                    <div class="form__select">
+                        <select name="user" id="user">
+                    {% endif %}
+                        <option value="{{ user.id }}">{{ user }}</option>
+                    {% if forloop.last %}
+                        </select>
+                    </div>
+                    </div>
+                    {% endif %}
+                {% endfor %}
+                <button class="button button--primary button--top-space" type="submit">Become</button>
+            </form>
+        {% endif %}
+
+        {# Remove the comment block tags below when such need arises. e.g. adding new providers #}
+        {% comment %}
+        {% can_use_oauth as show_oauth_link %}
+        {% if show_oauth_link %}
+            <a href="{% url 'users:oauth' %}">{% trans "Manage OAuth" %}</a>
+        {% endif %}
+        {% endcomment %}
+    </div>
+</div>
 {% endblock %}

opentech/static_src/src/sass/apply/components/_form.scss

@@ -33,6 +33,11 @@
 
         @include media-query(tablet-portrait) {
             margin: 2rem 0;
+
+            // reduce spacing on the profile page
+            .profile & {
+                margin: 1rem 0;
+            }
         }
 
         &:nth-of-type(1) {
@@ -165,6 +170,10 @@
 
     &__help {
         @extend %h6;
+
+        .profile & {
+            margin-top: 0;
+        }
     }
 
     &__item {
@@ -392,24 +401,5 @@
             max-width: 70%;
         }
     }
-
-    &__columns {
-        display: flex;
-        flex-wrap: wrap;
-
-        #{$root}__group {
-            width: 100%;
-            margin: 0;
-
-            @include media-query(mob-landscape) {
-                width: 50%;
-                padding-right: 20px;
-
-                &:nth-child(even) {
-                    padding-right: 0;
-                }
-            }
-        }
-    }
 }
 

opentech/static_src/src/sass/apply/components/_profile.scss

+.profile {
+    margin-top: $mobile-gutter;
+
+    @include media-query(tablet-portrait) {
+        display: flex;
+        margin-top: 2rem;
+    }
+
+    &__column {
+        padding-bottom: 2rem;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid $color--light-mid-grey;
+
+        @include media-query(tablet-portrait) {
+            width: 50%;
+            padding-right: 3rem;
+            margin: 0 3rem 0 0;
+            border-right: 1px solid $color--light-mid-grey;
+            border-bottom: 0;
+
+            &:last-child {
+                padding-right: 0;
+                margin-right: 0;
+                border-right: 0;
+            }
+        }
+    }
+}

opentech/static_src/src/sass/apply/components/_section.scss

@@ -8,29 +8,4 @@
             margin-bottom: 0;
         }
     }
-
-    &--profile {
-        max-width: $site-width;
-        padding-bottom: $mobile-gutter;
-        margin: 0 auto;
-        margin-bottom: $mobile-gutter;
-        border-bottom: 1px solid $color--light-mid-grey;
-
-        @include media-query(tablet-portrait) {
-            padding-bottom: 2rem;
-            margin-bottom: 1.5rem;
-        }
-
-        &:first-of-type {
-            padding-top: $mobile-gutter;
-
-            @include media-query(tablet-portrait) {
-                padding-top: 2rem;
-            }
-        }
-
-        &:last-of-type {
-            border-bottom: 0;
-        }
-    }
 }

opentech/static_src/src/sass/apply/main.scss

@@ -36,6 +36,7 @@
 @import 'components/input';
 @import 'components/nav';
 @import 'components/pagination';
+@import 'components/profile';
 @import 'components/reviews-list';
 @import 'components/reviews-summary';
 @import 'components/reviews-sidebar';