Expandable list item component

`_item_expandable.html` is an alternative to regular list items, where
you can display extra information on the first click on the item, and
then also, optionally, offer a further action, as a separate button.

Right now the expandable list items aren’t used anywhere, but we’ll
soon be using them in the duplicate report suggestion UI for council
staff and the public.

3 files changed, 88 insertions, 34 deletions

diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
index d710f6c81..863b87817 100644
--- a/templates/web/base/report/_item.html
+++ b/templates/web/base/report/_item.html
@@ -42,40 +42,7 @@
     [% IF c.user.has_permission_to('report_inspect', problem.bodies_str_ids) %]
         <div class="item-list__description">[% problem.detail | html %]</div>
     [% END %]
-        <small>
-            [% IF NOT no_fixed AND problem.is_fixed %]
-                <span class="item-list__item__state">[% prettify_state('fixed') %]</span>
-            [% ELSIF NOT no_fixed AND problem.is_closed %]
-                <span class="item-list__item__state">[% prettify_state('closed') %]</span>
-            [% ELSIF (c.user.has_permission_to('report_edit_priority', problem.bodies_str_ids) OR c.user.has_permission_to('report_inspect', problem.bodies_str_ids)) AND problem.response_priority %]
-                <span class="item-list__item__state">[% problem.response_priority.name %]</span>
-            [% END %]
-            [%- IF c.cobrand.moniker != 'fixamingata' %] [%# Default: %]
-                [%- IF problem.days_ago > 0 AND problem.days_ago <= c.cobrand.display_days_ago_threshold %]
-                  [% tprintf( nget('Reported %d day ago', 'Reported %d days ago', problem.days_ago), problem.days_ago ) %]
-                [%- ELSE %]
-                  [% prettify_dt( problem.confirmed, 1 ) %]
-                [%- END %]
-            [%- ELSE %] [%# Swedish cobrand fixamingata: %]
-                [%- prettify_dt( problem.confirmed) %]
-            [%- END %]
-            [%- IF dist %], [% dist %]km[% END %]
-            [%- IF problem.confirmed != problem.lastupdate AND problem.whensent != problem.lastupdate %],
-                [%- IF problem.days_ago('lastupdate') > 0 AND problem.days_ago('lastupdate') <= c.cobrand.display_days_ago_threshold %]
-                  [% tprintf( nget('last updated %d day ago', 'last updated %d days ago', problem.days_ago('lastupdate') ), problem.days_ago('lastupdate') ) %]
-                [%- ELSE %]
-                  [% tprintf(loc('last updated %s'), prettify_dt( problem.lastupdate, 1 ) )  %]
-                [%- END %]
-            [%- END %]
-            [% IF include_sentinfo %]
-                [% IF c.cobrand.is_council && !c.cobrand.owns_problem( problem ) %]
-                    (sent to [% problem.body %])
-                [% ELSIF problem.bodies_str_ids.size > 2 %] [% loc('(sent to all)') %]
-                [% ELSIF problem.bodies_str_ids.size == 2 %] [% loc('(sent to both)') %]
-                [% ELSIF problem.bodies_str_ids.size == 0 %] [% loc('(not sent to council)') %]
-                [% END %]
-            [% END %]
-        </small>
+        <small>[% PROCESS 'report/_item_small.html' %]</small>
 
     [% IF c.user.has_permission_to('report_inspect', problem.bodies_str_ids) %]
         <div class="item-list__item__metadata">
diff --git a/templates/web/base/report/_item_expandable.html b/templates/web/base/report/_item_expandable.html
new file mode 100644
index 000000000..6a4fe7191
--- /dev/null
+++ b/templates/web/base/report/_item_expandable.html
@@ -0,0 +1,55 @@
+[%#
+  This list item contains a full photo set and description, which is hidden
+  until the `.expanded` class is added. It is useful for times when you want
+  to surface the full information about a report, without requiring the user
+  to visit the dedicated report page.
+
+  Since the photo set includes `<a>` elements of its own, we drop the usual
+  "wrapper" `<a>` and the associated `.item-list--reports__item` class, to
+  avoid anchor nesting.
+%]
+
+[% 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 %]"
+    data-report-id="[% problem.id | html %]"
+    id="report-[% problem.id | html %]">
+
+  [% IF problem.photo %]
+    <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]" class="item-list__item--expandable__hide-when-expanded">
+        <img class="img" height="60" width="90" src="[% problem.photos.first.url_fp %]" alt="">
+    </a>
+  [% END %]
+
+  [% TRY %]
+    [% PROCESS 'report/_item_heading.html' %]
+  [% CATCH file %]
+    <h3>
+        <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">
+            [% problem.title | html %]
+        </a>
+    </h3>
+  [% END %]
+
+    <small>[% PROCESS 'report/_item_small.html' %]</small>
+
+    <div class="item-list__item--expandable__hide-when-expanded">
+      [% truncated_detail %]
+    </div>
+
+  [% IF show_more ~%]
+    <div class="item-list__item--expandable__hide-until-expanded">
+      [% full_detail %]
+      [% INCLUDE 'report/photo.html' object=problem %]
+    </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/templates/web/base/report/_item_small.html b/templates/web/base/report/_item_small.html
new file mode 100644
index 000000000..77fc9f569
--- /dev/null
+++ b/templates/web/base/report/_item_small.html
@@ -0,0 +1,32 @@
+[% IF NOT no_fixed AND problem.is_fixed %]
+    <span class="item-list__item__state">[% prettify_state('fixed') %]</span>
+[% ELSIF NOT no_fixed AND problem.is_closed %]
+    <span class="item-list__item__state">[% prettify_state('closed') %]</span>
+[% ELSIF (c.user.has_permission_to('report_edit_priority', problem.bodies_str_ids) OR c.user.has_permission_to('report_inspect', problem.bodies_str_ids)) AND problem.response_priority %]
+    <span class="item-list__item__state">[% problem.response_priority.name %]</span>
+[% END %]
+[%- IF c.cobrand.moniker != 'fixamingata' %] [%# Default: %]
+    [%- IF problem.days_ago > 0 AND problem.days_ago <= c.cobrand.display_days_ago_threshold %]
+      [% tprintf( nget('Reported %d day ago', 'Reported %d days ago', problem.days_ago), problem.days_ago ) %]
+    [%- ELSE %]
+      [% prettify_dt( problem.confirmed, 1 ) %]
+    [%- END %]
+[%- ELSE %] [%# Swedish cobrand fixamingata: %]
+    [%- prettify_dt( problem.confirmed) %]
+[%- END %]
+[%- IF dist %], [% dist %]km[% END %]
+[%- IF problem.confirmed != problem.lastupdate AND problem.whensent != problem.lastupdate %],
+    [%- IF problem.days_ago('lastupdate') > 0 AND problem.days_ago('lastupdate') <= c.cobrand.display_days_ago_threshold %]
+      [% tprintf( nget('last updated %d day ago', 'last updated %d days ago', problem.days_ago('lastupdate') ), problem.days_ago('lastupdate') ) %]
+    [%- ELSE %]
+      [% tprintf(loc('last updated %s'), prettify_dt( problem.lastupdate, 1 ) )  %]
+    [%- END %]
+[%- END %]
+[% IF include_sentinfo %]
+    [% IF c.cobrand.is_council && !c.cobrand.owns_problem( problem ) %]
+        (sent to [% problem.body %])
+    [% ELSIF problem.bodies_str_ids.size > 2 %] [% loc('(sent to all)') %]
+    [% ELSIF problem.bodies_str_ids.size == 2 %] [% loc('(sent to both)') %]
+    [% ELSIF problem.bodies_str_ids.size == 0 %] [% loc('(not sent to council)') %]
+    [% END %]
+[% END %]