Merge branch '904-photos-show-rotated' into 'master'

Photos show rotated

Closes #904

See merge request !1337

website/photos/static/photos/css/style.scss

 #page-content {
     #photos-index, #photos-album {
-        .rotate90 {
-            img {
-                transform: rotate(90deg);
-            }
-        }
-        .rotate180 {
-            img {
-                transform: rotate(180deg);
-            }
-        }
-        .rotate270 {
-            img {
-                transform: rotate(270deg);
-            }
-        }
         .grayscale {
             img {
                 filter: grayscale(1);
             }
         }
 
-        .grid-item.grayscale {
-            .overlay {
-                background-color: rgba(88, 88, 88, 0.6);
+        .grid-item {
+            &.grayscale {
+                .overlay {
+                    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);
+                }
             }
         }
 
@@ -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);
+    }
+}

website/photos/templatetags/photos_cards.py

@@ -36,8 +36,8 @@ def album_card(album):
 
 @register.inclusion_tag('includes/grid_item.html')
 def photo_card(photo):
-    class_name = 'photo-card rotate{}'.format(photo.rotation)
-    anchor_attrs = (f'data-fancybox-rotation="{photo.rotation}" '
+    class_name = 'photo-card'
+    anchor_attrs = (f'data-rotation="{photo.rotation}" '
                     f'data-fancybox="gallery"')
 
     if photo.album.shareable:
@@ -53,6 +53,8 @@ def photo_card(photo):
 
     if photo.rotation > 0:
         class_name += ' rotate{}'.format(photo.rotation)
+        anchor_attrs += f' data-options=' \
+                        f'\'{{"slideClass": "rotate{photo.rotation}"}}\''
 
     return grid_item(
         title='',