From 4abe01df6bae32d7578047ac67466794d92e5176 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Tue, 12 Mar 2019 12:32:11 +0000
Subject: Show detailed delivery info in expanded list items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the expandable list item’s expanded state look more like the
regular `.problem-header`, to more strongly imply that you don’t need
to visit the individual report page to read more.

Since expandable list items now *always* contain more information in
their expanded state, there’s no need for the `show_more` flag in the
templates.

Addresses part of the feedback in mysociety/fixmystreet-commercial#1304.
---
 templates/web/base/report/_item_expandable.html | 18 ++++++++----------
 web/cobrands/sass/_base.scss                    | 10 ++++++++++
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/templates/web/base/report/_item_expandable.html b/templates/web/base/report/_item_expandable.html
index 27682012b..7723ed54a 100644
--- a/templates/web/base/report/_item_expandable.html
+++ b/templates/web/base/report/_item_expandable.html
@@ -11,9 +11,8 @@
 
 [% truncated_detail = BLOCK %][% problem.detail | truncate(75, '…') | html_para %][% END ~%]
 [% full_detail = BLOCK %][% problem.detail | add_links | html_para %][% END ~%]
-[% SET show_more = truncated_detail != full_detail OR problem.photo ~%]
 
-<li class="[% 'js-expandable ' IF show_more %]item-list__item item-list__item--expandable [% item_extra_class %]"
+<li class="js-expandable item-list__item item-list__item--expandable [% item_extra_class %]"
     data-report-id="[% problem.id | html %]"
     id="report-[% problem.id | html %]">
 
@@ -33,23 +32,22 @@
     </h3>
   [% END %]
 
-    <small>[% PROCESS 'report/_item_small.html' %]</small>
-
     <div class="item-list__item--expandable__hide-when-expanded">
+      <small>[% PROCESS 'report/_item_small.html' %]</small>
       [% truncated_detail %]
     </div>
 
-  [% IF show_more ~%]
     <div class="item-list__item--expandable__hide-until-expanded">
-      [% full_detail %]
-      [% INCLUDE 'report/photo.html' object=problem %]
+        <p class="report_meta_info">
+            [% INCLUDE 'report/_report_meta_info.html' %]
+        </p>
+        [% INCLUDE 'report/_main_sent_info.html' %]
+        [% INCLUDE 'report/photo.html' object=problem %]
+        [% full_detail %]
     </div>
-  [% END %]
 
     <div class="item-list__item--expandable__actions">
-      [% IF show_more ~%]
         <button class="btn btn--small js-toggle-expansion" data-more="[% loc('Read more') %]" data-less="[% loc('Read less') %]">[% loc('Read more') %]</button>
-      [% END %]
     </div>
 
 </li>
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 2491c4c21..8d80044ee 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1339,6 +1339,16 @@ input.final-submit {
       margin-top: 0.5em;
   }
 
+  // A sort of hybrid between the .problem-header meta rows,
+  // and the regular .list-item meta row.
+  .report_meta_info,
+  .council_sent_info {
+      color: #666;
+      font-family: $meta-font;
+      font-style: italic;
+      font-size: 0.8125em;
+  }
+
   p {
       line-height: 1.4em;
       margin-top: 0.5em;
-- 
cgit v1.2.3