From f691afaae913fdb3041864b2824ca092e092ba84 Mon Sep 17 00:00:00 2001
From: Yuto Tokunaga <yuntan.sub1@gmail.com>
Date: Mon, 26 Mar 2018 20:59:21 +0900
Subject: [PATCH] Refactor scss (#6913)

* Refactoring scss

introduce scss variables for the media modal
fix css block structure corresponding to react components
fix flex layouts
remove background image of the loaded image on the media modal

* Fix typo
---
 .../styles/mastodon/components.scss           | 49 ++++++++-----------
 app/javascript/styles/mastodon/variables.scss |  5 ++
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ea6e39392..1fb1fa851 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1435,14 +1435,19 @@
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.image-loader--loading {
-    display: flex;
-    align-content: center;
+  .image-loader__preview-canvas {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    background: url('../images/void.png') repeat;
+    object-fit: contain;
+  }
 
-    .image-loader__preview-canvas {
-      filter: blur(2px);
-    }
+  &.image-loader--loading .image-loader__preview-canvas {
+    filter: blur(2px);
   }
 
   &.image-loader--amorphous .image-loader__preview-canvas {
@@ -1455,7 +1460,16 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-content: center;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
 }
 
 .navigation-bar {
@@ -3422,27 +3436,6 @@ a.status-card {
   width: 100%;
   height: 100%;
   position: relative;
-
-  img,
-  canvas,
-  video {
-    max-width: 100%;
-    /*
-    put margins on top and bottom of image to avoid the screen coverd by
-    image.
-     */
-    max-height: 80%;
-    width: auto;
-    height: auto;
-    margin: auto;
-  }
-
-  img,
-  canvas {
-    display: block;
-    background: url('../images/void.png') repeat;
-    object-fit: contain;
-  }
 }
 
 .media-modal__closer {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index dcc2857ff..e456c27ee 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -30,3 +30,8 @@ $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;