Merge pull request #92 from prezly/fix/gifs-alignment

[CARE-5989] Fix - GIFs alignment
prezly · Sep 3, 2024 · 95e6c6c · 95e6c6c
2 parents 627fe33 + 4a3137b
commit 95e6c6c
Show file tree

Hide file tree

Showing 92 changed files with 7 additions and 16 deletions.
diff --git a/.loki/reference/chrome_iphone7_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_iphone7_Elements_Bookmark_Big_Vertical.png
diff --git a/...ce/chrome_iphone7_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png b/...ce/chrome_iphone7_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...ce/chrome_iphone7_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png b/...ce/chrome_iphone7_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/...nce/chrome_iphone7_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...nce/chrome_iphone7_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal.png
diff --git a/...reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png b/...reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png
diff --git a/...ence/chrome_iphone7_Elements_Bookmark_Vertical_Long_Title_Short_Description.png b/...ence/chrome_iphone7_Elements_Bookmark_Vertical_Long_Title_Short_Description.png
diff --git a/...ence/chrome_iphone7_Elements_Bookmark_Vertical_Short_Title_Long_Description.png b/...ence/chrome_iphone7_Elements_Bookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Callout_Callout.png b/.loki/reference/chrome_iphone7_Elements_Callout_Callout.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Callout_Center_Aligned.png b/.loki/reference/chrome_iphone7_Elements_Callout_Center_Aligned.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Callout_No_Icon.png b/.loki/reference/chrome_iphone7_Elements_Callout_No_Icon.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Callout_Right_Aligned.png b/.loki/reference/chrome_iphone7_Elements_Callout_Right_Aligned.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Gallery_Contained_Small_Padding.png b/.loki/reference/chrome_iphone7_Elements_Gallery_Contained_Small_Padding.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Gallery_Expanded.png b/.loki/reference/chrome_iphone7_Elements_Gallery_Expanded.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Gallery_Full_Width.png b/.loki/reference/chrome_iphone7_Elements_Gallery_Full_Width.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Full_Width.png b/.loki/reference/chrome_iphone7_Elements_Image_Full_Width.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Left_Aligned.png b/.loki/reference/chrome_iphone7_Elements_Image_Left_Aligned.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Right_Aligned.png b/.loki/reference/chrome_iphone7_Elements_Image_Right_Aligned.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Width_100.png b/.loki/reference/chrome_iphone7_Elements_Image_Width_100.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Width_100_Small_Image.png b/.loki/reference/chrome_iphone7_Elements_Image_Width_100_Small_Image.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Image_Width_45.png b/.loki/reference/chrome_iphone7_Elements_Image_Width_45.png
diff --git a/...rome_iphone7_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png b/...rome_iphone7_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...rome_iphone7_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png b/...rome_iphone7_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/...i/reference/chrome_iphone7_Elements_StoryBookmark_Horizontal_With_Thumbnail.png b/...i/reference/chrome_iphone7_Elements_StoryBookmark_Horizontal_With_Thumbnail.png
diff --git a/...chrome_iphone7_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png b/...chrome_iphone7_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png
diff --git a/.loki/reference/chrome_iphone7_Elements_StoryBookmark_Vertical_New_Tab.png b/.loki/reference/chrome_iphone7_Elements_StoryBookmark_Vertical_New_Tab.png
diff --git a/...chrome_iphone7_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png b/...chrome_iphone7_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_iphone7_Elements_StoryBookmark_Vertical_With_Thumbnail.png b/.loki/reference/chrome_iphone7_Elements_StoryBookmark_Vertical_With_Thumbnail.png
diff --git a/.loki/reference/chrome_laptop_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_laptop_Elements_Bookmark_Big_Vertical.png
diff --git a/...nce/chrome_laptop_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png b/...nce/chrome_laptop_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...nce/chrome_laptop_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png b/...nce/chrome_laptop_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/...ence/chrome_laptop_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...ence/chrome_laptop_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_laptop_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_laptop_Elements_Bookmark_Small_Horizontal.png
diff --git a/.../reference/chrome_laptop_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png b/.../reference/chrome_laptop_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png
diff --git a/...rence/chrome_laptop_Elements_Bookmark_Vertical_Long_Title_Short_Description.png b/...rence/chrome_laptop_Elements_Bookmark_Vertical_Long_Title_Short_Description.png
diff --git a/...rence/chrome_laptop_Elements_Bookmark_Vertical_Short_Title_Long_Description.png b/...rence/chrome_laptop_Elements_Bookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_laptop_Elements_Callout_Callout.png b/.loki/reference/chrome_laptop_Elements_Callout_Callout.png
diff --git a/.loki/reference/chrome_laptop_Elements_Callout_Center_Aligned.png b/.loki/reference/chrome_laptop_Elements_Callout_Center_Aligned.png
diff --git a/.loki/reference/chrome_laptop_Elements_Callout_No_Icon.png b/.loki/reference/chrome_laptop_Elements_Callout_No_Icon.png
diff --git a/.loki/reference/chrome_laptop_Elements_Callout_Right_Aligned.png b/.loki/reference/chrome_laptop_Elements_Callout_Right_Aligned.png
diff --git a/.loki/reference/chrome_laptop_Elements_Gallery_Contained_Small_Padding.png b/.loki/reference/chrome_laptop_Elements_Gallery_Contained_Small_Padding.png
diff --git a/.loki/reference/chrome_laptop_Elements_Gallery_Expanded.png b/.loki/reference/chrome_laptop_Elements_Gallery_Expanded.png
diff --git a/.loki/reference/chrome_laptop_Elements_Gallery_Full_Width.png b/.loki/reference/chrome_laptop_Elements_Gallery_Full_Width.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Full_Width.png b/.loki/reference/chrome_laptop_Elements_Image_Full_Width.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Left_Aligned.png b/.loki/reference/chrome_laptop_Elements_Image_Left_Aligned.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Right_Aligned.png b/.loki/reference/chrome_laptop_Elements_Image_Right_Aligned.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Width_100.png b/.loki/reference/chrome_laptop_Elements_Image_Width_100.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Width_100_Small_Image.png b/.loki/reference/chrome_laptop_Elements_Image_Width_100_Small_Image.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Width_45.png b/.loki/reference/chrome_laptop_Elements_Image_Width_45.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_With_Caption.png b/.loki/reference/chrome_laptop_Elements_Image_With_Caption.png
diff --git a/.loki/reference/chrome_laptop_Elements_Image_Without_Caption.png b/.loki/reference/chrome_laptop_Elements_Image_Without_Caption.png
diff --git a/...hrome_laptop_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png b/...hrome_laptop_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...hrome_laptop_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png b/...hrome_laptop_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_laptop_Elements_StoryBookmark_Horizontal_With_Thumbnail.png b/.loki/reference/chrome_laptop_Elements_StoryBookmark_Horizontal_With_Thumbnail.png
diff --git a/.../chrome_laptop_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png b/.../chrome_laptop_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png
diff --git a/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_New_Tab.png b/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_New_Tab.png
diff --git a/.../chrome_laptop_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png b/.../chrome_laptop_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_With_Thumbnail.png b/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_With_Thumbnail.png
diff --git a/.loki/reference/chrome_narrow_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_narrow_Elements_Bookmark_Big_Vertical.png
diff --git a/...nce/chrome_narrow_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png b/...nce/chrome_narrow_Elements_Bookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...nce/chrome_narrow_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png b/...nce/chrome_narrow_Elements_Bookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/...ence/chrome_narrow_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...ence/chrome_narrow_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_narrow_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_narrow_Elements_Bookmark_Small_Horizontal.png
diff --git a/.../reference/chrome_narrow_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png b/.../reference/chrome_narrow_Elements_Bookmark_Small_Horizontal_With_Long_Texts.png
diff --git a/...rence/chrome_narrow_Elements_Bookmark_Vertical_Long_Title_Short_Description.png b/...rence/chrome_narrow_Elements_Bookmark_Vertical_Long_Title_Short_Description.png
diff --git a/...rence/chrome_narrow_Elements_Bookmark_Vertical_Short_Title_Long_Description.png b/...rence/chrome_narrow_Elements_Bookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_narrow_Elements_Callout_Callout.png b/.loki/reference/chrome_narrow_Elements_Callout_Callout.png
diff --git a/.loki/reference/chrome_narrow_Elements_Callout_Center_Aligned.png b/.loki/reference/chrome_narrow_Elements_Callout_Center_Aligned.png
diff --git a/.loki/reference/chrome_narrow_Elements_Callout_No_Icon.png b/.loki/reference/chrome_narrow_Elements_Callout_No_Icon.png
diff --git a/.loki/reference/chrome_narrow_Elements_Callout_Right_Aligned.png b/.loki/reference/chrome_narrow_Elements_Callout_Right_Aligned.png
diff --git a/.loki/reference/chrome_narrow_Elements_Gallery_Contained_Small_Padding.png b/.loki/reference/chrome_narrow_Elements_Gallery_Contained_Small_Padding.png
diff --git a/.loki/reference/chrome_narrow_Elements_Gallery_Expanded.png b/.loki/reference/chrome_narrow_Elements_Gallery_Expanded.png
diff --git a/.loki/reference/chrome_narrow_Elements_Gallery_Full_Width.png b/.loki/reference/chrome_narrow_Elements_Gallery_Full_Width.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Full_Width.png b/.loki/reference/chrome_narrow_Elements_Image_Full_Width.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Left_Aligned.png b/.loki/reference/chrome_narrow_Elements_Image_Left_Aligned.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Right_Aligned.png b/.loki/reference/chrome_narrow_Elements_Image_Right_Aligned.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Width_100.png b/.loki/reference/chrome_narrow_Elements_Image_Width_100.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Width_100_Small_Image.png b/.loki/reference/chrome_narrow_Elements_Image_Width_100_Small_Image.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Width_45.png b/.loki/reference/chrome_narrow_Elements_Image_Width_45.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_With_Caption.png b/.loki/reference/chrome_narrow_Elements_Image_With_Caption.png
diff --git a/.loki/reference/chrome_narrow_Elements_Image_Without_Caption.png b/.loki/reference/chrome_narrow_Elements_Image_Without_Caption.png
diff --git a/...hrome_narrow_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png b/...hrome_narrow_Elements_StoryBookmark_Horizontal_Long_Title_Short_Description.png
diff --git a/...hrome_narrow_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png b/...hrome_narrow_Elements_StoryBookmark_Horizontal_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_narrow_Elements_StoryBookmark_Horizontal_With_Thumbnail.png b/.loki/reference/chrome_narrow_Elements_StoryBookmark_Horizontal_With_Thumbnail.png
diff --git a/.../chrome_narrow_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png b/.../chrome_narrow_Elements_StoryBookmark_Vertical_Long_Title_Short_Description.png
diff --git a/.loki/reference/chrome_narrow_Elements_StoryBookmark_Vertical_New_Tab.png b/.loki/reference/chrome_narrow_Elements_StoryBookmark_Vertical_New_Tab.png
diff --git a/.../chrome_narrow_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png b/.../chrome_narrow_Elements_StoryBookmark_Vertical_Short_Title_Long_Description.png
diff --git a/.loki/reference/chrome_narrow_Elements_StoryBookmark_Vertical_With_Thumbnail.png b/.loki/reference/chrome_narrow_Elements_StoryBookmark_Vertical_With_Thumbnail.png
diff --git a/src/components/Media/Media.scss b/src/components/Media/Media.scss
@@ -1,17 +1,14 @@
 @import "styles/mixins";
 @import "styles/variables";
 
-.prezly-slate {
-    &-media {
-        display: block;
-        max-width: 100%;
-        height: auto;
-        margin: 0 auto;
+.prezly-slate-media {
+    display: block;
+    max-width: 100%;
+    height: auto;
 
-        &--image {
-            @media print {
-                print-color-adjust: exact;
-            }
+    &--image {
+        @media print {
+            print-color-adjust: exact;
         }
     }
 }
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
@@ -14,7 +14,6 @@ interface Props {
 export function Media({ className, image, style, title }: Props) {
     const computedClassName = classNames('prezly-slate-media', className, {
         'prezly-slate-media--image': !image.isGif(),
-        'prezly-slate-media--video': image.isGif(),
     });
 
     if (image.isGif()) {

diff --git a/src/elements/Image/Image.scss b/src/elements/Image/Image.scss
@@ -44,10 +44,6 @@
         }
     }
 
-    &--gif {
-        display: block;
-    }
-
     &__link {
         position: relative;
         z-index: 0;

diff --git a/src/elements/Image/Image.tsx b/src/elements/Image/Image.tsx
@@ -63,7 +63,6 @@ export function Image({ children, className, node, onDownload, onPreviewOpen, ..
                 'prezly-slate-image--full-width': layout === 'full-width',
                 'prezly-slate-image--align-left': align === 'left',
                 'prezly-slate-image--align-right': align === 'right',
-                'prezly-slate-image--gif': image.isGif(),
             })}
             {...props}
         >