From 7b02978b6762a03b4167c6aa4a303728f33f745e Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Thu, 10 Jan 2019 12:14:23 +0000
Subject: [PATCH] tidy up styles and add placeholder content
---
.../templates/funds/includes/round-block.html | 20 +++++++++----------
.../sass/apply/components/_round-block.scss | 20 ++++++++++++++++---
.../src/sass/apply/components/_section.scss | 8 +++++++-
.../src/sass/apply/components/_tabs.scss | 5 ++++-
4 files changed, 38 insertions(+), 15 deletions(-)
diff --git a/opentech/apply/funds/templates/funds/includes/round-block.html b/opentech/apply/funds/templates/funds/includes/round-block.html
index 2c22da77b..cc5e29c31 100644
--- a/opentech/apply/funds/templates/funds/includes/round-block.html
+++ b/opentech/apply/funds/templates/funds/includes/round-block.html
@@ -1,4 +1,4 @@
-<div>
+<div class="wrapper wrapper--bottom-space">
<section class="section section--with-options">
<h4 class="heading heading--normal heading--no-margin">All Rounds and Labs</h4>
<div class="js-tabs">
@@ -11,7 +11,7 @@
<div class="tabs__content" id="tab-1">
<ul class="round-block">
<li class="round-block__item">
- <h4>IFFund-2018-01</h4>
+ <h4 class="round-block__title">IFFund-2018-01</h4>
<p>Internet Freedom Fund</p>
<p class="round-block__date">Closed 2018-01-01</p>
<p class="round-block__determination">33% Determined</p>
@@ -20,10 +20,10 @@
</li>
<li class="round-block__item">
- <h4>IFFund-2018-01</h4>
- <p>Internet Freedom Fund</p>
+ <h4 class="round-block__title">IFFund-2018-01</h4>
+ <p>Rapid Response Fund</p>
<p class="round-block__date">Closed 2018-01-01</p>
- <p class="round-block__determination">33% Determined</p>
+ <p class="round-block__determination">50% Determined</p>
<p class="round-block__reviewer">Reviewer</p>
<a class="round-block__view" href="#">View</a>
</li>
@@ -41,17 +41,17 @@
<div class="tabs__content" id="tab-2">
<ul class="round-block">
<li class="round-block__item">
- <h4>IFFund-2018-01</h4>
- <p>Internet Freedom Fund</p>
+ <h4 class="round-block__title">IFFund-2018-01</h4>
+ <p>Internet Freedom Fund (archive fund)</p>
<p class="round-block__date">Open until 2020-01-01</p>
- <p class="round-block__determination">33% Determined</p>
+ <p class="round-block__determination">25% Determined</p>
<p class="round-block__reviewer">Reviewer</p>
<a class="round-block__view" href="#">View</a>
</li>
<li class="round-block__item">
- <h4>IFFund-2018-01</h4>
- <p>Internet Freedom Fund</p>
+ <h4 class="round-block__title">IFFund-2018-01</h4>
+ <p>Communit Lab</p>
<p class="round-block__date">Open</p>
<p class="round-block__determination">33% Determined</p>
<p class="round-block__reviewer">Reviewer</p>
diff --git a/opentech/static_src/src/sass/apply/components/_round-block.scss b/opentech/static_src/src/sass/apply/components/_round-block.scss
index 5fca0d9aa..ea6c726a7 100644
--- a/opentech/static_src/src/sass/apply/components/_round-block.scss
+++ b/opentech/static_src/src/sass/apply/components/_round-block.scss
@@ -8,6 +8,7 @@
border-bottom: 0;
padding: 25px;
transition: background-color $quick-transition;
+ min-height: 100px;
@include media-query(tablet-landscape) {
display: flex;
@@ -29,25 +30,34 @@
padding: 20px 25px;
justify-content: center;
border-bottom: 1px solid $color--light-mid-grey;
+ min-height: auto;
&:hover {
background-color: $color--white;
}
+
+ // show more link
+ a {
+ margin: 0;
+ flex-basis: auto;
+ font-weight: $weight--semibold;
+ }
}
}
&__view {
margin: 0 0 0 auto;
- transition: opacity $quick-transition;
+ transition: color $quick-transition;
@include media-query(tablet-landscape) {
- opacity: 0;
+ color: transparent;
flex-basis: auto;
pointer-events: none;
}
+ &:focus,
#{$root}__item:hover & {
- opacity: 1;
+ color: $color--primary;
pointer-events: all;
}
}
@@ -62,4 +72,8 @@
font-weight: $weight--bold;
text-transform: uppercase;
}
+
+ &__title {
+ font-weight: $weight--semibold;
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_section.scss b/opentech/static_src/src/sass/apply/components/_section.scss
index 20576aad1..c7142f198 100644
--- a/opentech/static_src/src/sass/apply/components/_section.scss
+++ b/opentech/static_src/src/sass/apply/components/_section.scss
@@ -11,6 +11,12 @@
&--with-options {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+
+ @include media-query(small-tablet) {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_tabs.scss b/opentech/static_src/src/sass/apply/components/_tabs.scss
index aed9c6ee8..ca285d185 100644
--- a/opentech/static_src/src/sass/apply/components/_tabs.scss
+++ b/opentech/static_src/src/sass/apply/components/_tabs.scss
@@ -41,12 +41,15 @@
}
&--alt {
+ font-size: map-get($font-sizes, zeta);
font-weight: $weight--semibold;
- padding: 20px 15px;
+ padding: 20px 10px;
text-transform: none;
display: inline-block;
margin-right: 20px;
border-bottom: 3px solid transparent;
+ color: $color--mid-dark-grey;
+ width: auto;
&:hover {
color: $color--default;
--
GitLab