diff options
| -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 { |