From 6074053492f9ac4202ae2f83c74f3340a2f7dbd5 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 11 Jun 2018 15:22:14 +0100
Subject: [PATCH] move reviews list table styling in to it's own partial
---
.../review/templates/review/review_list.html | 8 ++--
.../sass/apply/components/_reviews-list.scss | 39 +++++++++++++++++
.../src/sass/apply/components/_table.scss | 42 +++----------------
opentech/static_src/src/sass/apply/main.scss | 1 +
4 files changed, 49 insertions(+), 41 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_reviews-list.scss
diff --git a/opentech/apply/review/templates/review/review_list.html b/opentech/apply/review/templates/review/review_list.html
index 835a3b625..d1a239c69 100644
--- a/opentech/apply/review/templates/review/review_list.html
+++ b/opentech/apply/review/templates/review/review_list.html
@@ -20,12 +20,12 @@
</div>
</div>
<div class="wrapper wrapper--reviews-table js-reviews-table">
- <table class="table table--reviews">
+ <table class="reviews-list">
{% for question, answers in review_data.items %}
- <tr>
- <th>{{ question }}</th>
+ <tr class="reviews-list__tr">
+ <th class="reviews-list__th">{{ question }}</th>
{% for answer in answers %}
- <td>{{ answer|bleach }}</td>
+ <td class="reviews-list__td">{{ answer|bleach }}</td>
{% endfor %}
</tr>
{% endfor %}
diff --git a/opentech/static_src/src/sass/apply/components/_reviews-list.scss b/opentech/static_src/src/sass/apply/components/_reviews-list.scss
new file mode 100644
index 000000000..ba3a64f93
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_reviews-list.scss
@@ -0,0 +1,39 @@
+.reviews-list {
+ margin-top: 40px;
+ table-layout: auto;
+
+ &__th {
+ &:hover {
+ box-shadow: none;
+ }
+
+ &:first-child {
+ font-weight: $weight--bold;
+ }
+ }
+
+ &__tr {
+ border-top: 0;
+ border-bottom: 2px solid $color--light-grey;
+ }
+
+ &__td {
+ max-width: 340px;
+ min-width: 340px;
+ padding: 20px;
+ }
+
+ &__th,
+ &__td {
+ display: table-cell;
+ height: auto;
+ vertical-align: top;
+
+ &:first-child {
+ width: 160px;
+ max-width: 160px;
+ min-width: 160px;
+ background-color: $color--light-mid-grey;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_table.scss b/opentech/static_src/src/sass/apply/components/_table.scss
index df9d6d4e7..60fcc0999 100644
--- a/opentech/static_src/src/sass/apply/components/_table.scss
+++ b/opentech/static_src/src/sass/apply/components/_table.scss
@@ -49,43 +49,6 @@ table,
background-color: transparent;
}
- &--reviews {
- margin-top: 40px;
- table-layout: auto;
-
- tbody {
- tr {
- &:hover {
- box-shadow: none;
- }
-
- &:first-child {
- font-weight: $weight--bold;
- }
-
- > th:first-child,
- > td:first-child {
- width: 160px;
- max-width: 160px;
- min-width: 160px;
- background-color: $color--light-mid-grey;
- }
-
- th,
- td {
- display: table-cell;
- height: auto;
- vertical-align: top;
- }
-
- td {
- max-width: 340px;
- min-width: 340px;
- }
- }
- }
- }
-
thead {
display: none;
@@ -167,8 +130,13 @@ table,
}
.tr {
+ &--child,
&--subchild {
border: 0;
+
+ &:hover {
+ box-shadow: none;
+ }
}
@include media-query($table-breakpoint) {
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 553bb3da9..e4a808ee7 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -33,6 +33,7 @@
@import 'components/input';
@import 'components/nav';
@import 'components/pagination';
+@import 'components/reviews-list';
@import 'components/reviews-summary';
@import 'components/select2';
@import 'components/table';
--
GitLab