add revision listing styles

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

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;

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

opentech/static_src/src/sass/apply/components/_revision.scss

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

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