diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html index 85f9b179f7f86d6dad888881202444e896a6a32c..40e7141c72eb9c5d622fbfffd3480ec629d0a8a8 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 0000000000000000000000000000000000000000..40c6693685fadcdfef99db672bd96d01c9afd9fe --- /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 932103c378b9925b9f06c8deaee428870b2aabcb..bb675975439ed66bed4daceb7fcff8dfde515026 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 d9c7b709afe3c5db0aeb680b8627c0d18572086b..95f008da5ddd204a45ab81713723d230b220ff7e 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';