diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2019-03-12 12:32:11 +0000 |
|---|---|---|
| committer | Matthew Somerville <matthew-github@dracos.co.uk> | 2019-03-28 08:02:03 +0000 |
| commit | 4abe01df6bae32d7578047ac67466794d92e5176 (patch) | |
| tree | 072fa5a3b68cc51192820121e817422d98dd859e | |
| parent | 884080d3944b6232aedbb36d830ab6e9dee7d1a5 (diff) | |
Show detailed delivery info in expanded list items
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.
| -rw-r--r-- | templates/web/base/report/_item_expandable.html | 18 | ||||
| -rw-r--r-- | 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; |