diff options
| -rw-r--r-- | templates/web/base/report/photo.html | 10 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 46 |
2 files changed, 38 insertions, 18 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 667957497..fa6a34a7a 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -884,10 +884,6 @@ input.final-submit { margin: 0 0 1em; padding: 0; border-bottom: 0.25em solid $primary; - .update-img { - float: $right; - margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image - } } .item-list__item { @@ -963,6 +959,35 @@ input.final-submit { } } +.problem-header .update-img, +.item-list .update-img { + float: $right; + 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 { a { @@ -988,12 +1013,7 @@ input.final-submit { } .problem-header { - margin-bottom:1em; -} -.problem-header .update-img { - float: $right; - margin-#{$left}: 0.5em; - margin-bottom: 0.5em; + margin-bottom: 1em; } .report_meta_info, @@ -1690,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 { |