diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2016-03-02 15:48:40 +0000 |
|---|---|---|
| committer | Matthew Somerville <matthew@mysociety.org> | 2016-03-08 15:46:59 +0000 |
| commit | eb49f9af01b73b6ad187f912f3e5b24e370177c1 (patch) | |
| tree | e20eaa1b3b0790b82db8a9e6e61244d7370f7283 | |
| parent | 2e344a744f23d6f8cf2300b40d98152d26fee2dd (diff) | |
Wrap multiple report/update photos onto one line.
| -rw-r--r-- | templates/web/base/report/photo.html | 10 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 28 |
2 files changed, 30 insertions, 8 deletions
diff --git a/templates/web/base/report/photo.html b/templates/web/base/report/photo.html index 9be5b6538..52e6ed64a 100644 --- a/templates/web/base/report/photo.html +++ b/templates/web/base/report/photo.html @@ -1,9 +1,15 @@ [% IF c.cobrand.allow_photo_display(object) && object.photo %] - [% FOR photo IN object.photos %] + [% IF object.photos.size > 1 %] + <div class="update-img-set"> + [% END %] + [% FOR photo IN object.photos %] <div class="update-img"> <a href="[% c.cobrand.base_url %][% photo.url_full %]" rel="fancy"> <img alt="Photo of this report" src="[% c.cobrand.base_url %][% photo.url %]"> <span>zoom</span></a> </div> - [% END %] + [% END %] + [% IF object.photos.size > 1 %] + </div> + [% END %] [% END %] diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index cd0debe2d..fa6a34a7a 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -965,6 +965,28 @@ input.final-submit { margin: flip(0.3em 0 0.5em 1em, 0.3em 1em 0.5em 0); // gutter between text and floated image width: 33%; } +.questionnaire-report-reminder .update-img { + float: $left; + margin: flip(0.1em 1em 1em 0, 0.1em 0 1em 1em); + width: 120px; +} + +// A wrapper that's put around .update-imgs if there are more than 1 in a row +.update-img-set { + text-align: center; + margin: 0 0 1em; + + .update-img { + float: none; + display: inline-block; + margin: 0; + width: 31%; + } + + .update-img + .update-img { + margin: flip(0 0 0 0.5em, 0 0.5em 0 0); + } +} // fancybox gallery images have a magnifying glass in the corner .update-img { @@ -1688,12 +1710,6 @@ table.nicetable { border-radius: 3px; padding: 1em 1em 1px 1em; // basically no padding-bottom, as children have their own margin-bottom instead margin-bottom: 2em; - - .update-img { - width: 120px; - float: left; - margin: 0.1em 1em 1em 0; - } } .questionnaire-report-reminder__report-title { |