Commit c654a2f0 authored by Luko van der Maas's avatar Luko van der Maas Committed by Sébastiaan Versteeg

Photos show rotated

parent 05be3346
#page-content { #page-content {
#photos-index, #photos-album { #photos-index, #photos-album {
.rotate90 {
img {
transform: rotate(90deg);
}
}
.rotate180 {
img {
transform: rotate(180deg);
}
}
.rotate270 {
img {
transform: rotate(270deg);
}
}
.grayscale { .grayscale {
img { img {
filter: grayscale(1); filter: grayscale(1);
} }
} }
.grid-item.grayscale { .grid-item {
&.grayscale {
.overlay { .overlay {
background-color: rgba(88, 88, 88, 0.6); background-color: rgba(88, 88, 88, 0.6);
} }
} }
@each $rotation in '90' '180' '270' {
&.rotate#{$rotation}:hover .image img {
-moz-transform: scale(1.05) rotate(#{$rotation}deg);
-webkit-transform: scale(1.05) rotate(#{$rotation}deg);
transform: scale(1.05) rotate(#{$rotation}deg);
}
}
}
h1.section-title { h1.section-title {
padding: 20px 40px 0 40px; padding: 20px 40px 0 40px;
} }
...@@ -38,3 +33,11 @@ ...@@ -38,3 +33,11 @@
} }
} }
} }
@each $rotation in '90' '180' '270' {
.rotate#{$rotation} img {
-moz-transform: rotate(#{$rotation}deg);
-webkit-transform: rotate(#{$rotation}deg);
transform: rotate(#{$rotation}deg);
}
}
...@@ -36,8 +36,8 @@ def album_card(album): ...@@ -36,8 +36,8 @@ def album_card(album):
@register.inclusion_tag('includes/grid_item.html') @register.inclusion_tag('includes/grid_item.html')
def photo_card(photo): def photo_card(photo):
class_name = 'photo-card rotate{}'.format(photo.rotation) class_name = 'photo-card'
anchor_attrs = (f'data-fancybox-rotation="{photo.rotation}" ' anchor_attrs = (f'data-rotation="{photo.rotation}" '
f'data-fancybox="gallery"') f'data-fancybox="gallery"')
if photo.album.shareable: if photo.album.shareable:
...@@ -53,6 +53,8 @@ def photo_card(photo): ...@@ -53,6 +53,8 @@ def photo_card(photo):
if photo.rotation > 0: if photo.rotation > 0:
class_name += ' rotate{}'.format(photo.rotation) class_name += ' rotate{}'.format(photo.rotation)
anchor_attrs += f' data-options=' \
f'\'{{"slideClass": "rotate{photo.rotation}"}}\''
return grid_item( return grid_item(
title='', title='',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment