diff --git a/opentech/apply/review/templates/review/review_list.html b/opentech/apply/review/templates/review/review_list.html
index b959c16c2382d688afeba1821aba00b8572cc54b..835a3b62588a6843aaad1420b2ba89ef01cc6d4c 100644
--- a/opentech/apply/review/templates/review/review_list.html
+++ b/opentech/apply/review/templates/review/review_list.html
@@ -1,6 +1,8 @@
{% extends "base-apply.html" %}
{% load bleach_tags review_tags workflow_tags %}
+{% block title %}Reviews{% endblock %}
+
{% block content %}
<div class="wrapper wrapper--breakout wrapper--admin">
<div class="wrapper wrapper--medium">
@@ -11,21 +13,22 @@
{% if request.user|has_review_perm:submission %}
{% if request.user|has_draft:submission or request.user|can_review:submission %}
<div class="wrapper wrapper--cta-box">
- {% include 'reviews/includes/review_button.html' submission=submission %}
+ {% include 'review/includes/review_button.html' with submission=submission %}
</div>
{% endif %}
{% endif %}
</div>
</div>
-
-<table>
-{% for question, answers in review_data.items %}
- <tr>
- <th>{{ question }}</th>
- {% for answer in answers %}
- <td>{{ answer|bleach }}</td>
- {% endfor %}
- </tr>
-{% endfor %}
-</table>
+<div class="wrapper wrapper--reviews-table js-reviews-table">
+ <table class="table table--reviews">
+ {% for question, answers in review_data.items %}
+ <tr>
+ <th>{{ question }}</th>
+ {% for answer in answers %}
+ <td>{{ answer|bleach }}</td>
+ {% endfor %}
+ </tr>
+ {% endfor %}
+ </table>
+</div>
{% endblock %}
diff --git a/opentech/static_src/src/javascript/components/tabs.js b/opentech/static_src/src/javascript/components/tabs.js
index 6f4581235f927fff0ee3f42fe306a293ccac9c86..4c31213f24957cf0f021a86d1bdd118d167d5e9f 100644
--- a/opentech/static_src/src/javascript/components/tabs.js
+++ b/opentech/static_src/src/javascript/components/tabs.js
@@ -57,8 +57,8 @@ class Tabs {
}
addTabClasses(tab){
- if( tab === null) {
- tab = document.querySelector(`[data-tab=${this.defaultSelectedTab}]`);;
+ if(tab === null) {
+ tab = document.querySelector(`[data-tab=${this.defaultSelectedTab}]`);
}
const tabId = tab.getAttribute('data-tab');
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 55ebf6b7980a5d6eb00fc8325ecdbe52b7a9ae55..0799306b3a391259d92d6abc3b5b8fe87c17aa47 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -95,6 +95,33 @@ import '@fancyapps/fancybox';
});
});
+ // Allow click and drag scrolling within reviews table wrapper
+ $('.js-reviews-table').attachDragger();
+
+ // Add colspan and accordion classes to review table header table rows
+ const accordionTableHeaders = $('.table--reviews tr th:only-child');
+ accordionTableHeaders.each((val, accordionHeader) => {
+ $(accordionHeader).attr('colspan', 100);
+ $(accordionHeader).parent('tr').addClass('js-accordion__toggle');
+ });
+
+ // Cache accordion items
+ const $jsAccordionToggle = $('.js-accordion__toggle');
+
+ // Add hidden classes to js-accordion items
+ $jsAccordionToggle.nextUntil('.js-accordion__toggle').addClass('is-hidden');
+
+ // Toggle accordion items
+ $jsAccordionToggle.click(function() {
+ if($(this).hasClass('is-expanded')){
+ $(this).removeClass('is-expanded');
+ $(this).nextUntil('.js-accordion__toggle').addClass('is-hidden');
+ return;
+ }
+ $('.js-accordion__toggle.is-expanded').nextUntil('.js-accordion__toggle').addClass('is-hidden');
+ $(this).addClass('is-expanded');
+ $(this).nextUntil('.js-accordion__toggle').removeClass('is-hidden');
+ });
});
// Add active class to filters - dropdowns are dynamically appended to the dom,
@@ -178,6 +205,23 @@ import '@fancyapps/fancybox';
}
}
+ // Enable click and drag scrolling within a div
+ $.fn.attachDragger = function(){
+ let attachment = false, lastPosition, position, difference;
+ $($(this).selector ).on('mousedown mouseup mousemove', (e) => {
+ if(e.type == 'mousedown') attachment = true, lastPosition = [e.clientX, e.clientY];
+ if(e.type == 'mouseup') attachment = false;
+ if(e.type == 'mousemove' && attachment == true ){
+ position = [e.clientX, e.clientY];
+ difference = [ (position[0]-lastPosition[0]), (position[1]-lastPosition[1])];
+ $(this).scrollLeft( $(this).scrollLeft() - difference[0]);
+ $(this).scrollTop( $(this).scrollTop() - difference[1]);
+ lastPosition = [e.clientX, e.clientY];
+ }
+ });
+ $(window).on('mouseup', () => attachment = false);
+ };
+
// reset mobile filters if they're open past the tablet breakpoint
$(window).resize(function resize(){
if ($(window).width() < 768) {
diff --git a/opentech/static_src/src/sass/apply/components/_table.scss b/opentech/static_src/src/sass/apply/components/_table.scss
index 393d23974af4611c16dad3abbed823c82dc875e5..ecd09e38bff19eee02bcb1afd06aa896b1b78c35 100644
--- a/opentech/static_src/src/sass/apply/components/_table.scss
+++ b/opentech/static_src/src/sass/apply/components/_table.scss
@@ -7,18 +7,6 @@ table,
border-collapse: collapse;
table-layout: fixed;
- &--transparent {
- background-color: transparent;
- }
-
- &--reviews-summary {
- display: none;
-
- @include media-query($table-breakpoint) {
- display: table;
- }
- }
-
&--reviews-sidebar {
margin-bottom: 20px;
font-weight: $weight--bold;
@@ -69,6 +57,43 @@ table,
}
}
+ &--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;
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 6aed3ccbf7c88c153144fe77262fc045669876d8..e693855710466a32887997b2d9a5615d7ad3878d 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -308,4 +308,13 @@
padding: 4rem 0;
}
}
+
+ &--reviews-table {
+ overflow-x: scroll;
+ user-select: none;
+
+ &:hover {
+ cursor: all-scroll;
+ }
+ }
}