diff --git a/opentech/apply/funds/templates/funds/includes/status-block.html b/opentech/apply/funds/templates/funds/includes/status-block.html new file mode 100644 index 0000000000000000000000000000000000000000..96e9f20edf4cf7a3f0e16bff21adba427acffb3c --- /dev/null +++ b/opentech/apply/funds/templates/funds/includes/status-block.html @@ -0,0 +1,52 @@ +<div class="wrapper wrapper--bottom-space"> + <section class="section"> + <h4 class="heading heading--normal">By status</h4> + <ul class="status-block"> + <li class="status-block__item"> + <h5 class="status-block__title">Received</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">Internal review</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">In discussion</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">More information</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">Invited for proposal</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">External review</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">Ready for determination</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">Accepted</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + <li class="status-block__item"> + <h5 class="status-block__title">Dismissed</h5> + <p class="status-block__info">30 Applications</p> + <a class="status-block__link" href="">View</a> + </li> + </ul> + </section> +</div> diff --git a/opentech/apply/funds/templates/funds/submissions_overview.html b/opentech/apply/funds/templates/funds/submissions_overview.html index 120cb947c51be68cf0517fd02263108195169e1b..614ca7ea03f4eba90e6eb7ec6fb06adc4d52fe10 100644 --- a/opentech/apply/funds/templates/funds/submissions_overview.html +++ b/opentech/apply/funds/templates/funds/submissions_overview.html @@ -16,6 +16,8 @@ <div class="wrapper wrapper--large wrapper--inner-space-medium"> + {% include "funds/includes/status-block.html" %} + {% if closed_rounds or open_rounds %} {% include "funds/includes/round-block.html" with closed_rounds=closed_rounds open_rounds=open_rounds title=rounds_title%} {% endif %} diff --git a/opentech/static_src/src/sass/apply/components/_status-block.scss b/opentech/static_src/src/sass/apply/components/_status-block.scss new file mode 100644 index 0000000000000000000000000000000000000000..f8acf13d15c9d67a805d8e570fa3f917e0ae7e53 --- /dev/null +++ b/opentech/static_src/src/sass/apply/components/_status-block.scss @@ -0,0 +1,74 @@ +.status-block { + $root: &; + background-color: $color--white; + border: 1px solid $color--light-mid-grey; + + @include media-query(tablet-landscape) { + display: flex; + } + + &__item { + padding: 20px; + border-bottom: 1px solid $color--light-mid-grey; + background-color: $color--white; + transition: background-color $quick-transition; + + @include media-query(tablet-landscape) { + border-bottom: 0; + border-right: 1px solid $color--light-mid-grey; + width: calc(100% / 9); + padding: 10px; + } + + @include media-query(desktop) { + padding: 20px 20px 30px; + } + + @include media-query(laptop-short) { + padding: 15px 15px 25px; + } + + &:hover { + background-color: $color--light-grey; + } + + &:last-child { + border-right: 0; + } + } + + &__info, + &__title { + margin: 0 0 5px; + } + + &__info { + font-size: 14px; + color: $color--dark-blue; + } + + &__title { + font-weight: $weight--semibold; + + @include media-query(tablet-landscape) { + height: 55px; + } + } + + &__link { + text-transform: uppercase; + font-weight: $weight--semibold; + transition: opacity $quick-transition; + + @include media-query(tablet-landscape) { + opacity: 0; + pointer-events: none; + height: 55px; + + #{$root}__item:hover & { + opacity: 1; + pointer-events: all; + } + } + } +} diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss index 5641137b682abc9531742424676a0f6eda99c3d5..c6d3da3e8ed85690f4144943da399f545a6ea8ef 100644 --- a/opentech/static_src/src/sass/apply/main.scss +++ b/opentech/static_src/src/sass/apply/main.scss @@ -42,6 +42,7 @@ @import 'components/reviews-sidebar'; @import 'components/round-block'; @import 'components/select2'; +@import 'components/status-block'; @import 'components/submission-meta'; @import 'components/revision'; @import 'components/table';