From 76a0752ac7635a9e099480f872682027a0bfdb44 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Thu, 14 Jun 2018 16:22:04 +0100
Subject: [PATCH] add revision listing styles
---
.../funds/templates/funds/revisions_list.html | 28 +++++++++-----
.../src/sass/apply/abstracts/_variables.scss | 1 +
.../src/sass/apply/components/_button.scss | 23 +++++++++++
.../src/sass/apply/components/_revision.scss | 38 +++++++++++++++++++
opentech/static_src/src/sass/apply/main.scss | 1 +
5 files changed, 81 insertions(+), 10 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_revision.scss
diff --git a/opentech/apply/funds/templates/funds/revisions_list.html b/opentech/apply/funds/templates/funds/revisions_list.html
index e4ba90161..7b56f1242 100644
--- a/opentech/apply/funds/templates/funds/revisions_list.html
+++ b/opentech/apply/funds/templates/funds/revisions_list.html
@@ -7,16 +7,24 @@
</div>
</div>
-<div class="wrapper wrapper--medium wrapper--tabs">
- {% with base_revision=revisions.0.id %}
- {% for revision in revisions %}
- <div>
- {{ revision.date }} by {{ revision.author }}
- {% if not forloop.first %}
- <a class="button button--primary" href="{% url 'apply:revisions:compare' submission_pk=submission.id from=revision.id to=base_revision %}">Compare</a>
- {% endif %}
- </div>
- {% endfor %}
+<div class="wrapper wrapper--medium">
+ <ul class="revision">
+ {% with base_revision=revisions.0.id %}
+ {% for revision in revisions %}
+ <li class="revision__item">
+ <p class="revision__meta">
+ <span class="revision__date">{{ revision.date }} </span>
+ <span>by {{ revision.author }}</span>
+ {% if forloop.first %}
+ <span class="revision__current">- current</span>
+ {% endif %}
+ </p>
+ {% if not forloop.first %}
+ <a class="button button--compare" href="{% url 'apply:revisions:compare' submission_pk=submission.id from=revision.id to=base_revision %}">Compare</a>
+ {% endif %}
+ </li>
+ {% endfor %}
+ </ul>
{% endwith %}
</div>
{% endblock %}
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 81126004d..270d7feec 100755
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -84,3 +84,4 @@ $breakpoints: (
// Transition
$transition: 0.25s ease-out;
+$quick-transition: 0.15s ease;
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index d13790982..b5da0a546 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -158,5 +158,28 @@
&--top-space {
margin-top: 20px;
}
+
+ &--compare {
+ width: 75px;
+ padding: 3px;
+ margin-top: 10px;
+ font-size: 12px;
+ font-weight: $weight--bold;
+ text-align: center;
+ text-transform: uppercase;
+ border: 1px solid currentColor;
+ transition: background-color, color, border, $quick-transition;
+
+ @include media-query(tablet-portrait) {
+ margin-top: 0;
+ }
+
+ &:focus,
+ &:hover {
+ color: $color--white;
+ background-color: $color--light-blue;
+ border: 1px solid $color--light-blue;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_revision.scss b/opentech/static_src/src/sass/apply/components/_revision.scss
new file mode 100644
index 000000000..af2e53db4
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_revision.scss
@@ -0,0 +1,38 @@
+.revision {
+ margin: 20px 0;
+ border: 1px solid $color--mid-grey;
+
+ @include media-query(tablet-portrait) {
+ margin: 4rem 0;
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: column;
+ padding: 15px;
+ background: $color--white;
+ border-bottom: 1px dashed $color--mid-grey;
+
+ @include media-query(tablet-portrait) {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ &:first-child {
+ background-color: $color--sky-blue;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ &__meta {
+ margin: 0;
+ }
+
+ &__date,
+ &__current {
+ font-weight: $weight--semibold;
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 63871a707..e53ac847e 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -39,6 +39,7 @@
@import 'components/reviews-sidebar';
@import 'components/select2';
@import 'components/submission-meta';
+@import 'components/revision';
@import 'components/table';
@import 'components/traffic-light';
@import 'components/wrapper';
--
GitLab