prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Polaroids are now always spread out in mobile versions (as the default does on PC too)

Browse Source
This commit is contained in:
Richard Thier 2020-03-07 00:40:52 +01:00
parent 7cf224cef6
commit 13ea8c1d8b
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
prosopopee/themes/exposure/static/css/style.css
View File

@ -445,23 +445,24 @@ input:checked + .slider:before {
/* BEGIN polaroid-group */ /* BEGIN polaroid-group */
a.polaroid { a.polaroid {
/*Size by calculating image size*/ /*Size by calculating image size*/
width: auto !important; width: 60vw !important;
height: auto !important; height: auto !important;
max-height: 50vw !important;/*expermtal*/
left: 0px !important;
top: 0px !important;
position:static !important;
} }
/* Size image for mobile so screen is not getting */ .leftpola {
a.polaroid img { -webkit-transform: rotate(-15deg) !important;
-webkit-transform: scale(0.7); /* Saf3.1+, Chrome */ -moz-transform: rotate(-15deg) !important;
-moz-transform: scale(0.7); /* FF3.5+ */ transform: rotate(-15deg) !important;
-ms-transform: scale(0.7); /* IE9 */
-o-transform: scale(0.7); /* Opera 10.5+ */
transform: scale(0.7);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
} }
a.polaroid h5 { .rightpola {
display: none !important; /*No image text on mobile - too small space*/ -webkit-transform: rotate(15deg) !important;
-moz-transform: rotate(15deg) !important;
transform: rotate(15deg) !important;
} }
/* END polaroid-group */ /* END polaroid-group */
} }

2
prosopopee/themes/exposure/templates/sections/polaroid-group.html
View File

@ -47,7 +47,7 @@
data-at-800="{{ image.generate_thumbnail("x800") }}" data-at-800="{{ image.generate_thumbnail("x800") }}"
data-at-1366="{{ image.generate_thumbnail("x1366") }}" data-at-1366="{{ image.generate_thumbnail("x1366") }}"
data-at-1920="{{ image.generate_thumbnail("x1920") }}" data-at-1920="{{ image.generate_thumbnail("x1920") }}"
class="polaroid" class="polaroid {% if (loop.index%2 == 1) %}rightpola{% else %}leftpola{% endif %}"
style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);"> style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
{% if caption %} {% if caption %}
<img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}"> <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">