From cb4df5c29bf8f538e32b1be1467ee14876c9da63 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 19 Feb 2018 11:03:35 +0000
Subject: [PATCH] styling submission details section on individual submission
page
---
.../funds/applicationsubmission_detail.html | 25 +++++--
.../src/sass/apply/components/_grid.scss | 68 +++++++++++++++++++
.../src/sass/apply/components/_wrapper.scss | 2 -
opentech/static_src/src/sass/apply/main.scss | 1 +
4 files changed, 89 insertions(+), 7 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_grid.scss
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index 85f9b179f..40e7141c7 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -24,11 +24,26 @@
</h6>
<h3>Proposal Information</h3>
- <div>
- Requested Funding {{ object.value }}
- Project Duration {{ object.value }}
- Legal Name {{ object.full_name }}
- Email {{ object.email }}
+ <div class="grid grid--proposal-info">
+ <div>
+ <h5>Requested Funding</h5>
+ <p>{{ object.value }}</p>
+ </div>
+
+ <div>
+ <h5>Project Duration</h5>
+ <p>{{ object.value }}</p>
+ </div>
+
+ <div>
+ <h5>Legal Name</h5>
+ <p>{{ object.full_name }}</p>
+ </div>
+
+ <div>
+ <h5>Email</h5>
+ <p>{{ object.email }}</p>
+ </div>
</div>
<div>
{{ object.render_answers }}
diff --git a/opentech/static_src/src/sass/apply/components/_grid.scss b/opentech/static_src/src/sass/apply/components/_grid.scss
new file mode 100644
index 000000000..40c669368
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_grid.scss
@@ -0,0 +1,68 @@
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+
+ > * {
+ flex-basis: calc(100% - 20px);
+ margin: 10px;
+
+ @media all and (min-width: 480px) {
+ flex-basis: calc(50% - 20px);
+ }
+
+ @media all and (min-width: 1024px) {
+ flex-basis: calc(30% - 20px);
+ }
+ }
+
+ &--two {
+ > * {
+ // fix for IE11 not rendering calc flex-basis correctly
+ flex-basis: auto;
+ width: calc(50% - 20px);
+ }
+ }
+
+ &--narrow {
+ text-align: center;
+
+ @include media-query(tablet-portrait) {
+ text-align: left;
+ }
+ }
+}
+
+@supports (display: grid) {
+ .grid {
+ display: grid;
+ margin: 30px 0;
+ grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+ > * {
+ flex-basis: initial;
+ width: auto;
+ margin: 0;
+ }
+
+ &--proposal-info {
+ margin: 0;
+ grid-template-columns: 100%;
+ grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
+
+
+ @include media-query(mob-landscape) {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ @include media-query(tablet-portrait) {
+ padding-bottom: 30px;
+ border-bottom: 1px solid $color--mid-grey;
+ }
+
+ * {
+ margin: 0;
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 932103c37..bb6759754 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -174,11 +174,9 @@
> div:first-child {
flex: 1;
- margin-bottom: 20px;
@include media-query(tablet-portrait) {
padding-right: 20px;
- margin-bottom: 0;
}
}
}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index d9c7b709a..95f008da5 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -12,6 +12,7 @@
// Components
@import 'components/button';
+@import 'components/grid';
@import 'components/heading';
@import 'components/icon';
@import 'components/sidebar';
--
GitLab