diff --git a/opentech/apply/funds/templates/funds/includes/round-block.html b/opentech/apply/funds/templates/funds/includes/round-block.html index 2c22da77b8c32eea225c9bf9b492eb62a4fea3a5..cc5e29c31f5b373ab4e66b2eacb875aa4586512a 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 5fca0d9aa15ab57b9e168d89ac27aa6ab80476ab..ea6c726a7e172b9b1247f0ad5cb325cd4a77045e 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 20576aad1817d73a8645d2d56f797bde1de7b7bf..c7142f198c31cafdc2a42addce47023a00251b28 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 aed9c6ee8fe1e015f91d85f1c621f02073126960..ca285d185d6256f6d2e6ef6db1bee4c6557083f5 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;