diff --git a/opentech/apply/users/templates/users/account.html b/opentech/apply/users/templates/users/account.html
index 745edac733f81c73e8bddde6e60bdf03d3a28826..6d27dddddfce2355b81e9debde8fbfff6346fd0e 100644
--- a/opentech/apply/users/templates/users/account.html
+++ b/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 %}
diff --git a/opentech/static_src/src/sass/apply/components/_form.scss b/opentech/static_src/src/sass/apply/components/_form.scss
index 4fb6b5b40a89321a5f5d08ece646d880c412d2b6..8be38d81ca9f73250b489d25cc0591c2aaf19780 100644
--- a/opentech/static_src/src/sass/apply/components/_form.scss
+++ b/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;
- }
- }
- }
- }
}
diff --git a/opentech/static_src/src/sass/apply/components/_profile.scss b/opentech/static_src/src/sass/apply/components/_profile.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ea53288f03d5e738c6d80630a9a88f6399c8370d
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_profile.scss
@@ -0,0 +1,28 @@
+.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;
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_section.scss b/opentech/static_src/src/sass/apply/components/_section.scss
index 36956b49abd1b36f3d924574eb483b560b801fee..4b7d3979b2b25d4725b21bb407eaec2334a63710 100644
--- a/opentech/static_src/src/sass/apply/components/_section.scss
+++ b/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;
- }
- }
}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 82e41b6943b1ee57c16d9ff22a7cd1f5040f7928..5dba11ad2e83bbc0e6dbfce218a4ede2ed5e029b 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/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';