From 3727a4776c10a72d0b651483bb2ab586b6b07d68 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 9 Jan 2019 17:25:57 +0000
Subject: [PATCH] initial fleshing out of rounds block
---
.../templates/funds/includes/round-block.html | 69 +++++++++++++++++++
.../funds/templates/funds/submissions.html | 2 +
.../sass/apply/components/_round-block.scss | 65 +++++++++++++++++
.../src/sass/apply/components/_section.scss | 5 ++
.../src/sass/apply/components/_tabs.scss | 26 ++++++-
opentech/static_src/src/sass/apply/main.scss | 1 +
6 files changed, 167 insertions(+), 1 deletion(-)
create mode 100644 opentech/apply/funds/templates/funds/includes/round-block.html
create mode 100644 opentech/static_src/src/sass/apply/components/_round-block.scss
diff --git a/opentech/apply/funds/templates/funds/includes/round-block.html b/opentech/apply/funds/templates/funds/includes/round-block.html
new file mode 100644
index 000000000..2c22da77b
--- /dev/null
+++ b/opentech/apply/funds/templates/funds/includes/round-block.html
@@ -0,0 +1,69 @@
+<div>
+ <section class="section section--with-options">
+ <h4 class="heading heading--normal heading--no-margin">All Rounds and Labs</h4>
+ <div class="js-tabs">
+ <a class="tab__item tab__item--alt" href="#closed-rounds" data-tab="tab-1">Closed</a>
+ <a class="tab__item tab__item--alt" href="#open-rounds" data-tab="tab-2">Open</a>
+ </div>
+ </section>
+
+ {# Closed rounds/labs tab #}
+ <div class="tabs__content" id="tab-1">
+ <ul class="round-block">
+ <li class="round-block__item">
+ <h4>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>
+ <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>
+ <p class="round-block__date">Closed 2018-01-01</p>
+ <p class="round-block__determination">33% Determined</p>
+ <p class="round-block__reviewer">Reviewer</p>
+ <a class="round-block__view" href="#">View</a>
+ </li>
+ {% if 10 >= 10 %}
+ {# If count of rounds/labs >= 10 #}
+ <li class="round-block__item round-block__item--more">
+ {# href required #}
+ <a href="#">Show more</a>
+ </li>
+ {% endif %}
+ </ul>
+ </div>
+
+ {# Open rounds/labs tab #}
+ <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>
+ <p class="round-block__date">Open until 2020-01-01</p>
+ <p class="round-block__determination">33% 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>
+ <p class="round-block__date">Open</p>
+ <p class="round-block__determination">33% Determined</p>
+ <p class="round-block__reviewer">Reviewer</p>
+ <a class="round-block__view" href="#">View</a>
+ </li>
+ {% if 10 >= 10 %}
+ {# If count of rounds/labs >= 10 #}
+ <li class="round-block__item round-block__item--more">
+ {# href required #}
+ <a href="#">Show more</a>
+ </li>
+ {% endif %}
+ </ul>
+ </div>
+</div>
diff --git a/opentech/apply/funds/templates/funds/submissions.html b/opentech/apply/funds/templates/funds/submissions.html
index 4dcb9999f..c50576eb1 100644
--- a/opentech/apply/funds/templates/funds/submissions.html
+++ b/opentech/apply/funds/templates/funds/submissions.html
@@ -15,6 +15,8 @@
</div>
<div class="wrapper wrapper--large wrapper--inner-space-medium">
+ {% include "funds/includes/round-block.html" %}
+
{% block table %}
{{ block.super }}
{% endblock %}
diff --git a/opentech/static_src/src/sass/apply/components/_round-block.scss b/opentech/static_src/src/sass/apply/components/_round-block.scss
new file mode 100644
index 000000000..5fca0d9aa
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_round-block.scss
@@ -0,0 +1,65 @@
+.round-block {
+ $root: &;
+
+ &__item {
+ align-items: center;
+ background-color: $color--white;
+ border: 1px solid $color--light-mid-grey;
+ border-bottom: 0;
+ padding: 25px;
+ transition: background-color $quick-transition;
+
+ @include media-query(tablet-landscape) {
+ display: flex;
+
+ &:hover {
+ background-color: $color--light-grey;
+ border-right: 1px solid $color--light-grey;
+ border-left: 1px solid $color--light-grey;
+ }
+
+ // item spacing
+ > * {
+ margin: 0 20px 0 0;
+ flex-basis: 200px;
+ }
+ }
+
+ &--more {
+ padding: 20px 25px;
+ justify-content: center;
+ border-bottom: 1px solid $color--light-mid-grey;
+
+ &:hover {
+ background-color: $color--white;
+ }
+ }
+ }
+
+ &__view {
+ margin: 0 0 0 auto;
+ transition: opacity $quick-transition;
+
+ @include media-query(tablet-landscape) {
+ opacity: 0;
+ flex-basis: auto;
+ pointer-events: none;
+ }
+
+ #{$root}__item:hover & {
+ opacity: 1;
+ pointer-events: all;
+ }
+ }
+
+ &__date,
+ &__determination {
+ color: $color--primary;
+ }
+
+ &__view,
+ &__reviewer {
+ font-weight: $weight--bold;
+ text-transform: uppercase;
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_section.scss b/opentech/static_src/src/sass/apply/components/_section.scss
index 4b7d3979b..20576aad1 100644
--- a/opentech/static_src/src/sass/apply/components/_section.scss
+++ b/opentech/static_src/src/sass/apply/components/_section.scss
@@ -8,4 +8,9 @@
margin-bottom: 0;
}
}
+
+ &--with-options {
+ display: flex;
+ justify-content: space-between;
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_tabs.scss b/opentech/static_src/src/sass/apply/components/_tabs.scss
index 7bfc20420..aed9c6ee8 100644
--- a/opentech/static_src/src/sass/apply/components/_tabs.scss
+++ b/opentech/static_src/src/sass/apply/components/_tabs.scss
@@ -11,11 +11,12 @@
&--current {
display: inherit;
}
-
}
}
.tab__item {
+ $root: &;
+
@include responsive-font-sizes(12px, 15px);
position: relative;
padding: 10px;
@@ -39,6 +40,29 @@
color: $color--light-blue;
}
+ &--alt {
+ font-weight: $weight--semibold;
+ padding: 20px 15px;
+ text-transform: none;
+ display: inline-block;
+ margin-right: 20px;
+ border-bottom: 3px solid transparent;
+
+ &:hover {
+ color: $color--default;
+ }
+
+ &#{$root}--active {
+ background-color: transparent;
+ border-bottom: 3px solid $color--primary;
+
+ &:hover {
+ color: $color--default;
+ background-color: transparent;
+ }
+ }
+ }
+
&--active {
color: $color--default;
cursor: default;
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 745f50807..930863ffb 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -37,6 +37,7 @@
@import 'components/reviews-list';
@import 'components/reviews-summary';
@import 'components/reviews-sidebar';
+@import 'components/round-block';
@import 'components/select2';
@import 'components/submission-meta';
@import 'components/revision';
--
GitLab