diff --git a/opentech/apply/funds/templates/funds/includes/review_table.html b/opentech/apply/funds/templates/funds/includes/review_table.html
index 5bed573855090f0cf4577b6bf048992999c85170..0b03fc85998479c8081cd0aec548e99ee36bd996 100644
--- a/opentech/apply/funds/templates/funds/includes/review_table.html
+++ b/opentech/apply/funds/templates/funds/includes/review_table.html
@@ -1,6 +1,6 @@
{% load review_tags %}
-<table class="table table--reviews-sidebar">
+<table class="reviews-sidebar">
<tr class="tr tr--subchild light-grey-bg">
<th colspan="2"></th>
<th>{{ object.reviews.submitted.recommendation|traffic_light }}</th>
diff --git a/opentech/apply/funds/templates/funds/includes/review_table_row.html b/opentech/apply/funds/templates/funds/includes/review_table_row.html
index 2363747c467112cde80f6a26e54a1e33aaaccf0e..d857f48ddf6710919df352ed6a6f7b8db5dd3647 100644
--- a/opentech/apply/funds/templates/funds/includes/review_table_row.html
+++ b/opentech/apply/funds/templates/funds/includes/review_table_row.html
@@ -1,16 +1,19 @@
{% for review in reviews %}
<tr class="tr--subchild {% if missing %}no-response{% endif %}">
{% if missing %}
- <td class="td td--author" colspan="2">{{ review }}</td>
+ <td colspan="2">{{ review }}</td>
<td>-</td>
<td>-</td>
{% else %}
- <td class="td td--author" colspan="2">
+ <td class="reviews-sidebar__author" colspan="2">
{% if request.user.is_apply_staff %}
- <a href="{% url 'apply:reviews:review' submission_pk=review.submission.id pk=review.id %}">{{ review.author }}</a></td>
+ <a href="{% url 'apply:reviews:review' submission_pk=review.submission.id pk=review.id %}">
+ <span>{{ review.author }}</span>
+ </a>
{% else %}
- {{ review.author }}
+ <span>{{ review.author }}</span>
{% endif %}
+ </td>
<td>{{ review.get_recommendation_display }}</td>
<td>{{ review.score }}</td>
{% endif %}
diff --git a/opentech/apply/funds/templates/funds/tables/table.html b/opentech/apply/funds/templates/funds/tables/table.html
index 194b5cc9d1e815537bdcf172f9c035221df33625..4d31778926eb9d84bee715ffa10d22033f98cb71 100644
--- a/opentech/apply/funds/templates/funds/tables/table.html
+++ b/opentech/apply/funds/templates/funds/tables/table.html
@@ -27,9 +27,12 @@
</td>
<td>
<ul class="list list--no-margin">
- {% for review in row.record.reviews.all %}
- <li class="list__item list__item--reviewer"><strong>{{ review.author }}</strong> <span>{{ review.get_recommendation_display }}</span></li>
- {% endfor %}
+ {% for review in row.record.reviews.all %}
+ <li class="list__item list__item--reviewer">
+ <span class="list__item--reviewer-name">{{ review.author }}</span>
+ <span class="list__item list__item--reviewer-outcome">{{ review.get_recommendation_display }}</span>
+ </li>
+ {% endfor %}
</ul>
</td>
</tr>
diff --git a/opentech/static_src/src/sass/apply/components/_list.scss b/opentech/static_src/src/sass/apply/components/_list.scss
index 7b62ad2829356c6ef526ed2a74f71ab22bef8a58..d08c258b7cc111cfef066bf81049173c7ed5b394 100644
--- a/opentech/static_src/src/sass/apply/components/_list.scss
+++ b/opentech/static_src/src/sass/apply/components/_list.scss
@@ -1,4 +1,6 @@
.list {
+ $root: &;
+
&--no-margin {
margin: 0;
}
@@ -8,11 +10,30 @@
display: flex;
justify-content: space-between;
max-width: 150px;
+ }
+
+ &--reviewer-name {
+ max-width: 100px;
+ overflow: hidden;
+ font-weight: $weight--bold;
+ text-overflow: ellipsis;
- span {
- font-weight: $weight--normal;
- color: $color--tomato;
+ // show truncated emails on hover
+ &:hover {
+ position: absolute;
+ max-width: initial;
+ overflow: visible;
+ background-color: #f3fafe;
+
+ + #{$root}__item--reviewer-outcome {
+ width: 100%;
+ text-align: right;
+ }
}
}
+
+ &--reviewer-outcome {
+ color: $color--tomato;
+ }
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b74b660dc85032d504a4db6f08a97cd1bfdfce21
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_reviews-sidebar.scss
@@ -0,0 +1,56 @@
+.reviews-sidebar {
+ $root: &;
+ margin-bottom: 20px;
+ font-weight: $weight--bold;
+
+ tbody {
+ tr {
+ @include media-query(tablet-portrait) {
+ border-bottom: 0;
+ }
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ > th {
+ font-size: inherit;
+ font-weight: $weight--bold;
+ }
+
+ > td {
+ display: table-cell;
+ height: auto;
+ }
+
+ th,
+ td,
+ td:last-child,
+ td:first-child {
+ padding: 10px;
+ }
+
+ &.no-response {
+ color: $color--black-20;
+ }
+ }
+ }
+
+ &__author {
+ span {
+ position: relative;
+ z-index: 1;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ background: $color--white;
+ }
+
+ &:hover {
+ span {
+ display: inline;
+ overflow: visible;
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_table.scss b/opentech/static_src/src/sass/apply/components/_table.scss
index 032bee8402244a302385b74d41dc4f9385b02ca1..a10b94b000a2a0a501e7e52411f5ed76ea188e06 100644
--- a/opentech/static_src/src/sass/apply/components/_table.scss
+++ b/opentech/static_src/src/sass/apply/components/_table.scss
@@ -7,44 +7,6 @@ table,
border-collapse: collapse;
table-layout: fixed;
- &--reviews-sidebar {
- margin-bottom: 20px;
- font-weight: $weight--bold;
-
- tbody {
- tr {
- @include media-query($table-breakpoint) {
- border-bottom: 0;
- }
-
- &:hover {
- box-shadow: none;
- }
-
- > th {
- font-size: inherit;
- font-weight: $weight--bold;
- }
-
- > td {
- display: table-cell;
- height: auto;
- }
-
- th,
- td,
- td:last-child,
- td:first-child {
- padding: 10px;
- }
-
- &.no-response {
- color: $color--black-20;
- }
- }
- }
- }
-
&--transparent {
background-color: transparent;
}
@@ -317,9 +279,6 @@ table,
}
td {
- &--author {
- word-break: break-all;
- }
&.comments {
display: none;
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index e4a808ee7daa339a39ca515680d1cab88572ebbc..1a575a597aa318ce1f66f1d3f68684f45acb1c3c 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -35,6 +35,7 @@
@import 'components/pagination';
@import 'components/reviews-list';
@import 'components/reviews-summary';
+@import 'components/reviews-sidebar';
@import 'components/select2';
@import 'components/table';
@import 'components/traffic-light';