Merge pull request #941 from OpenTechFund/feature/867-status-overview-block

adds mock status block

opentech/apply/funds/templates/funds/includes/status-block.html

+<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>

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 %}

opentech/static_src/src/sass/apply/components/_status-block.scss

+.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;
+            }
+        }
+    }
+}

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';