From c4c8b8d8c8c0c048cd2d5ff3d48f17718f4f8ba3 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 27 Feb 2018 11:29:53 +0000
Subject: [PATCH] refactoring inner and outer wrapper spacing class names for
consistency
---
.../funds/applicationsubmission_detail.html | 2 +-
.../funds/templates/funds/submissions.html | 2 +-
.../apply/users/templates/users/login.html | 2 +-
.../public/home/templates/home/home_page.html | 2 +-
.../news/templates/news/news_index.html | 2 +-
.../templates/people/person_index_page.html | 2 +-
.../people/templates/people/person_page.html | 2 +-
.../projects/includes/project_status.html | 4 +-
.../templates/projects/project_page.html | 4 +-
.../search/templates/search/search.html | 2 +-
.../utils/templates/utils/listing_index.html | 2 +-
.../src/sass/apply/components/_wrapper.scss | 84 ++++++++---------
.../src/sass/public/components/_wrapper.scss | 92 +++++++++----------
opentech/templates/404.html | 2 +-
14 files changed, 100 insertions(+), 104 deletions(-)
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index 70393fcc2..fd5c00db4 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -15,7 +15,7 @@
</div>
</div>
-<div class="wrapper wrapper--medium wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--medium wrapper--inner-space-medium">
<div class="wrapper wrapper--sidebar">
<div>
<h6 class="heading heading--submission-meta">
diff --git a/opentech/apply/funds/templates/funds/submissions.html b/opentech/apply/funds/templates/funds/submissions.html
index 9c1112015..3428cc9a7 100644
--- a/opentech/apply/funds/templates/funds/submissions.html
+++ b/opentech/apply/funds/templates/funds/submissions.html
@@ -15,7 +15,7 @@
</div>
</div>
-<div class="wrapper wrapper--large wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if object_list|length > 0 or active_filters %}
<div class="button button--filters button--contains-icons js-open-filters">Filter By</div>
diff --git a/opentech/apply/users/templates/users/login.html b/opentech/apply/users/templates/users/login.html
index 1ce068d62..179e21bb3 100644
--- a/opentech/apply/users/templates/users/login.html
+++ b/opentech/apply/users/templates/users/login.html
@@ -20,7 +20,7 @@
<button class="link link--button-secondary" type="submit">Login</button>
</form>
- <div class="wrapper wrapper--top-bottom-space">
+ <div class="wrapper wrapper--inner-space-large">
<a class="link link--button link--button-long-text" href="{% url "social:begin" "google-oauth2" %}?next={% url "users:account" %}">Log in with your OTF email</a>
</div>
</div>
diff --git a/opentech/public/home/templates/home/home_page.html b/opentech/public/home/templates/home/home_page.html
index 4b17d21f5..2a6250543 100644
--- a/opentech/public/home/templates/home/home_page.html
+++ b/opentech/public/home/templates/home/home_page.html
@@ -80,7 +80,7 @@
{% endblock %}
{% block content %}
- <div class="wrapper wrapper--top-bottom-space">
+ <div class="wrapper wrapper--inner-space-large">
<h2 class="heading heading--center heading--focus-areas">{{ page.our_work_title }}</h2>
<div class="grid grid--focus-areas">
{% for block in page.our_work %}
diff --git a/opentech/public/news/templates/news/news_index.html b/opentech/public/news/templates/news/news_index.html
index e3c69ba84..5188546f4 100644
--- a/opentech/public/news/templates/news/news_index.html
+++ b/opentech/public/news/templates/news/news_index.html
@@ -3,7 +3,7 @@
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
<form class="form" method="GET">
<div class="form__select form__select--narrow">
diff --git a/opentech/public/people/templates/people/person_index_page.html b/opentech/public/people/templates/people/person_index_page.html
index 1bf042b82..facd26267 100644
--- a/opentech/public/people/templates/people/person_index_page.html
+++ b/opentech/public/people/templates/people/person_index_page.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags %}
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
<div class="wrapper wrapper--listings">
{% if people.paginator.count %}
diff --git a/opentech/public/people/templates/people/person_page.html b/opentech/public/people/templates/people/person_page.html
index 5c6155d4c..7ec3a90c7 100644
--- a/opentech/public/people/templates/people/person_page.html
+++ b/opentech/public/people/templates/people/person_page.html
@@ -3,7 +3,7 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
-<section class="wrapper wrapper--small wrapper--top-inner-space wrapper--sidebar">
+<section class="wrapper wrapper--small wrapper--inner-space-large wrapper--sidebar">
<div>
{% for person_type in page.person_types.all %}
<h5 class="heading heading--no-margin">{{ person_type }}</h5>
diff --git a/opentech/public/projects/templates/projects/includes/project_status.html b/opentech/public/projects/templates/projects/includes/project_status.html
index fa0a88f56..1cf8615d2 100644
--- a/opentech/public/projects/templates/projects/includes/project_status.html
+++ b/opentech/public/projects/templates/projects/includes/project_status.html
@@ -1,5 +1,5 @@
-<div class="wrapper--top-bottom-outer-space">
- <div class="wrapper wrapper--breakout wrapper--light-grey-bg wrapper--top-bottom-inner-space">
+<div class="wrapper--outer-space-medium">
+ <div class="wrapper wrapper--breakout wrapper--light-grey-bg wrapper--inner-space-medium">
<h3 class="heading heading--center heading--no-margin">Current project status</h3>
<div class="wrapper wrapper--large wrapper--status">
<div class="list list--status {% if page.status == 'idea' %}is-active{% endif %}">
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 0b261566c..ad2f944df 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-large">
<div class="media-box media-box--reverse">
{% include "utils/includes/media_box_icon.html" with page_icon=page.icon %}
<div class="media-box__content">
@@ -12,7 +12,7 @@
</div>
</div>
- <div class="wrapper wrapper--sidebar wrapper--top-inner-space-small">
+ <div class="wrapper wrapper--sidebar wrapper--inner-space-small">
<div>
{% include "utils/includes/funding.html" %}
</div>
diff --git a/opentech/public/search/templates/search/search.html b/opentech/public/search/templates/search/search.html
index b15ac6ea8..98361a1ec 100644
--- a/opentech/public/search/templates/search/search.html
+++ b/opentech/public/search/templates/search/search.html
@@ -4,7 +4,7 @@
{% block page_title %}Search results{% endblock %}
{% block title %}{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}{% endblock %}
{% block content %}
- <div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+ <div class="wrapper wrapper--small wrapper--inner-space-medium">
<h2 class="heading heading--no-margin">{% if search_query %}Search results for “{{ search_query }}”{% else %}Search{% endif %}</h2>
{% if search_results %}
diff --git a/opentech/public/utils/templates/utils/listing_index.html b/opentech/public/utils/templates/utils/listing_index.html
index 76f58acaf..989d2a315 100644
--- a/opentech/public/utils/templates/utils/listing_index.html
+++ b/opentech/public/utils/templates/utils/listing_index.html
@@ -2,7 +2,7 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+<div class="wrapper wrapper--small wrapper--inner-space-medium">
{% if page.introduction %}
<h4 class="heading heading--listings-introduction">{{ page.introduction }}</h4>
{% endif %}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 7a3459ef0..68e4a2b4e 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -72,30 +72,6 @@
}
}
- &--top-bottom-space {
- padding: 1rem 0;
-
- @include media-query(tablet-portrait) {
- padding: 3rem 0;
- }
- }
-
- &--top-bottom-inner-space {
- padding: 20px 0;
-
- @include media-query(mob-landscape) {
- padding: 2rem 0;
- }
- }
-
- &--top-bottom-outer-space {
- margin: 20px 0;
-
- @include media-query(mob-landscape) {
- margin: 2rem 0;
- }
- }
-
&--light-grey-bg {
background-color: $color--light-grey;
}
@@ -106,16 +82,6 @@
margin: 0 auto;
}
- &--bottom-space {
- padding-bottom: 20px;
- margin-bottom: 20px;
-
- @include media-query(tablet-portrait) {
- padding-bottom: 3rem;
- margin-bottom: 3rem;
- }
- }
-
&--form {
padding: 20px;
margin: 20px auto;
@@ -136,30 +102,66 @@
border: 1px solid $color--tomato;
}
- &--top-inner-space {
- padding: 20px 0;
+ &--bottom-space {
+ padding-bottom: 20px;
+ margin-bottom: 20px;
@include media-query(tablet-portrait) {
- padding: 3rem 0;
+ padding-bottom: 3rem;
+ margin-bottom: 3rem;
}
}
- &--top-inner-space-small {
+ // Inner spacing
+ &--inner-space-small {
padding: 20px 0;
}
- &--top-outer-space {
- margin: 20px 0;
+ &--inner-space-medium {
+ padding: 20px 0;
+
+ @include media-query(mob-landscape) {
+ padding: 2rem 0;
+ }
+ }
+
+ &--inner-space-large {
+ padding: 20px 0;
@include media-query(tablet-portrait) {
- margin: 3rem 0;
+ padding: 3rem 0;
+ }
+ }
+
+ &--inner-space-xl {
+ padding: 2rem 20px;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
}
}
+ // Outer spacing
&--top-outer-space-small {
margin: 20px 0 0;
}
+ &--outer-space-medium {
+ margin: 20px 0;
+
+ @include media-query(mob-landscape) {
+ margin: 2rem 0;
+ }
+ }
+
+ &--outer-space-large {
+ margin: 20px 0;
+
+ @include media-query(tablet-portrait) {
+ margin: 3rem 0;
+ }
+ }
+
&--sidebar {
display: flex;
flex-direction: column;
diff --git a/opentech/static_src/src/sass/public/components/_wrapper.scss b/opentech/static_src/src/sass/public/components/_wrapper.scss
index 39650a2f8..60a2f7a29 100644
--- a/opentech/static_src/src/sass/public/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/public/components/_wrapper.scss
@@ -85,30 +85,6 @@
}
}
- &--top-bottom-space {
- padding: 1rem 0;
-
- @include media-query(tablet-portrait) {
- padding: 3rem 0;
- }
- }
-
- &--top-bottom-inner-space {
- padding: 20px 0;
-
- @include media-query(mob-landscape) {
- padding: 2rem 0;
- }
- }
-
- &--top-bottom-outer-space {
- margin: 20px 0;
-
- @include media-query(mob-landscape) {
- margin: 2rem 0;
- }
- }
-
&--light-grey-bg {
background-color: $color--light-grey;
}
@@ -119,16 +95,6 @@
margin: 0 auto;
}
- &--bottom-space {
- padding-bottom: 20px;
- margin-bottom: 20px;
-
- @include media-query(tablet-portrait) {
- padding-bottom: 3rem;
- margin-bottom: 3rem;
- }
- }
-
&--apply-bar {
padding: 30px 20px;
}
@@ -153,30 +119,66 @@
border: 1px solid $color--tomato;
}
- &--top-inner-space {
- padding: 20px 0;
+ &--bottom-space {
+ padding-bottom: 20px;
+ margin-bottom: 20px;
@include media-query(tablet-portrait) {
- padding: 3rem 0;
+ padding-bottom: 3rem;
+ margin-bottom: 3rem;
}
}
- &--top-inner-space-small {
+ // Inner spacing
+ &--inner-space-small {
padding: 20px 0;
}
- &--top-outer-space {
- margin: 20px 0;
+ &--inner-space-medium {
+ padding: 20px 0;
+
+ @include media-query(mob-landscape) {
+ padding: 2rem 0;
+ }
+ }
+
+ &--inner-space-large {
+ padding: 20px 0;
@include media-query(tablet-portrait) {
- margin: 3rem 0;
+ padding: 3rem 0;
+ }
+ }
+
+ &--inner-space-xl {
+ padding: 2rem 20px;
+
+ @include media-query(tablet-portrait) {
+ padding: 4rem 20px;
}
}
+ // Outer spacing
&--top-outer-space-small {
margin: 20px 0 0;
}
+ &--outer-space-medium {
+ margin: 20px 0;
+
+ @include media-query(mob-landscape) {
+ margin: 2rem 0;
+ }
+ }
+
+ &--outer-space-large {
+ margin: 20px 0;
+
+ @include media-query(tablet-portrait) {
+ margin: 3rem 0;
+ }
+ }
+
&--sidebar {
display: flex;
flex-direction: column;
@@ -242,12 +244,4 @@
&--center {
text-align: center;
}
-
- &--inner-space-xl {
- padding: 2rem 20px;
-
- @include media-query(tablet-portrait) {
- padding: 4rem 20px;
- }
- }
}
diff --git a/opentech/templates/404.html b/opentech/templates/404.html
index cb22459d8..1ad197dc6 100644
--- a/opentech/templates/404.html
+++ b/opentech/templates/404.html
@@ -6,7 +6,7 @@
{% block body_class %}template-404{% endblock %}
{% block content %}
-<div class="wrapper wrapper--small wrapper--top-bottom-space">
+<div class="wrapper wrapper--small wrapper--inner-space-large">
<h1>{{ settings.utils.SystemMessagesSettings.title_404 }}</h1>
{{ settings.utils.SystemMessagesSettings.body_404|richtext }}
</div>
--
GitLab