From 87071d9e8133daf60f5c253fdc4250086e342143 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Sun, 8 Apr 2018 23:15:25 +0200
Subject: [Glitch] Improved media modal

Port 4e929b2d173fa22b722c58c0e9f8223eb4f44b0e to glitch-soc
---
 .../flavours/glitch/styles/components/index.scss   | 35 ++++-----
 .../flavours/glitch/styles/components/media.scss   | 88 +++++++++++++++++-----
 .../flavours/glitch/styles/components/modal.scss   | 23 ------
 3 files changed, 84 insertions(+), 62 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index aa33c9333..ad446f18b 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -353,36 +353,29 @@
 
 .image-loader {
   position: relative;
+  width: 100%;
+  height: 100%;
 
   &.image-loader--loading {
+    display: flex;
+    align-content: center;
+
     .image-loader__preview-canvas {
       filter: blur(2px);
     }
   }
 
-  .image-loader__img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    max-width: 100%;
-    max-height: 100%;
-    background-image: none;
+  &.image-loader--amorphous .image-loader__preview-canvas {
+    display: none;
   }
+}
 
-  &.image-loader--amorphous {
-    position: static;
-
-    .image-loader__preview-canvas {
-      display: none;
-    }
-
-    .image-loader__img {
-      position: static;
-      width: auto;
-      height: auto;
-    }
-  }
+.zoomable-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: center;
 }
 
 .dropdown {
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index d7407cdaf..31dbb7f58 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -157,29 +157,27 @@
   position: absolute;
 }
 
+.video-modal {
+  max-width: 100vw;
+  max-height: 100vh;
+  position: relative;
+}
+
 .media-modal {
-  max-width: 80vw;
-  max-height: 80vh;
+  width: 100%;
+  height: 100%;
   position: relative;
 
-  .extended-video-player,
   img,
   canvas,
   video {
-    max-width: 80vw;
-    max-height: 80vh;
+    max-width: 100vw;
+    max-height: 100vh;
     width: auto;
     height: auto;
     margin: auto;
   }
 
-  .extended-video-player,
-  video {
-    display: flex;
-    width: 80vw;
-    height: 80vh;
-  }
-
   img,
   canvas {
     display: block;
@@ -188,12 +186,65 @@
   }
 
   .react-swipeable-view-container {
-    max-width: 80vw;
+    width: 100vw;
+    height: 100%;
   }
 }
 
-.media-modal__content {
-  background: $base-overlay-background;
+.media-modal__closer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.media-modal__navigation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+
+  * {
+    pointer-events: auto;
+  }
+
+  &.media-modal__navigation--hidden {
+    opacity: 0;
+
+    * {
+      pointer-events: none;
+    }
+  }
+}
+
+.media-modal__nav {
+  background: rgba($base-overlay-background, 0.5);
+  box-sizing: border-box;
+  border: 0;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  height: 20vmax;
+  margin: auto 0;
+  padding: 30px 15px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.media-modal__nav--left {
+  left: 0;
+}
+
+.media-modal__nav--right {
+  right: 0;
 }
 
 .media-modal__pagination {
@@ -201,7 +252,8 @@
   text-align: center;
   position: absolute;
   left: 0;
-  bottom: -40px;
+  bottom: 20px;
+  pointer-events: none;
 }
 
 .media-modal__page-dot {
@@ -225,8 +277,8 @@
 
 .media-modal__close {
   position: absolute;
-  right: 4px;
-  top: 4px;
+  right: 8px;
+  top: 8px;
   z-index: 100;
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index d424b1eda..4f0d6e1bc 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -2,29 +2,6 @@
   background: lighten($ui-base-color, 8%);
 }
 
-.modal-container__nav {
-  align-items: center;
-  background: rgba($base-overlay-background, 0.5);
-  box-sizing: border-box;
-  border: 0;
-  color: $primary-text-color;
-  cursor: pointer;
-  display: flex;
-  font-size: 24px;
-  height: 100%;
-  padding: 30px 15px;
-  position: absolute;
-  top: 0;
-}
-
-.modal-container__nav--left {
-  left: -61px;
-}
-
-.modal-container__nav--right {
-  right: -61px;
-}
-
 .modal-root {
   transition: opacity 0.3s linear;
   will-change: opacity;
-- 
cgit 


From a4fa8c9064702167412a39901811430822440d11 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Sun, 8 Apr 2018 23:18:24 +0200
Subject: [Glitch] Avoid using JS to set height in MediaModal

Port fa5c867e0ec426fc01653e9022ba29783b2a826f to glitch-soc
---
 .../glitch/features/ui/components/media_modal.js   | 35 +++++++++++-----------
 .../flavours/glitch/styles/components/media.scss   | 13 ++++----
 2 files changed, 24 insertions(+), 24 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
index 5353b62db..6ab6770ed 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -130,6 +130,15 @@ export default class MediaModal extends ImmutablePureComponent {
       return null;
     }).toArray();
 
+    // you can't use 100vh, because the viewport height is taller
+    // than the visible part of the document in some mobile
+    // browsers when it's address bar is visible.
+    // https://developers.google.com/web/updates/2016/12/url-bar-resizing
+    const swipeableViewsStyle = {
+      width: '100%',
+      height: '100%',
+    };
+
     const containerStyle = {
       alignItems: 'center', // center vertically
     };
@@ -145,23 +154,15 @@ export default class MediaModal extends ImmutablePureComponent {
           role='presentation'
           onClick={onClose}
         >
-          <div className='media-modal__content'>
-            <ReactSwipeableViews
-              style={{
-                // you can't use 100vh, because the viewport height is taller
-                // than the visible part of the document in some mobile
-                // browsers when it's address bar is visible.
-                // https://developers.google.com/web/updates/2016/12/url-bar-resizing
-                height: `${document.body.clientHeight}px`,
-              }}
-              containerStyle={containerStyle}
-              onChangeIndex={this.handleSwipe}
-              onSwitching={this.handleSwitching}
-              index={index}
-            >
-              {content}
-            </ReactSwipeableViews>
-          </div>
+          <ReactSwipeableViews
+            style={swipeableViewsStyle}
+            containerStyle={containerStyle}
+            onChangeIndex={this.handleSwipe}
+            onSwitching={this.handleSwitching}
+            index={index}
+          >
+            {content}
+          </ReactSwipeableViews>
         </div>
         <div className={navigationClassName}>
           <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 31dbb7f58..588e8d558 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -171,8 +171,12 @@
   img,
   canvas,
   video {
-    max-width: 100vw;
-    max-height: 100vh;
+    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;
@@ -184,11 +188,6 @@
     background: url('~images/void.png') repeat;
     object-fit: contain;
   }
-
-  .react-swipeable-view-container {
-    width: 100vw;
-    height: 100%;
-  }
 }
 
 .media-modal__closer {
-- 
cgit 


From 101e6564fde67e233c76df3d848d269ab28217d3 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 9 Apr 2018 00:56:59 +0200
Subject: [Glitch] Refactor scss

Port f691afaae913fdb3041864b2824ca092e092ba84 to glitch-soc
---
 .../flavours/glitch/styles/components/index.scss   | 28 ++++++++++++++++------
 .../flavours/glitch/styles/components/media.scss   | 21 ----------------
 .../flavours/glitch/styles/variables.scss          |  5 ++++
 3 files changed, 26 insertions(+), 28 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index ad446f18b..afb54056c 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -355,14 +355,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 {
@@ -375,7 +380,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;
+  }
 }
 
 .dropdown {
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 588e8d558..f02940593 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -167,27 +167,6 @@
   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/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index e8e2bc9e3..e3ba725c4 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -31,6 +31,11 @@ $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%;
+
 // Avatar border size (8% default, 100% for rounded avatars)
 $ui-avatar-border-size: 8%;
 
-- 
cgit 


From 9073687f66a8e82d19a56ec85eef2c27f63412dc Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 9 Apr 2018 00:42:26 +0200
Subject: [Glitch] Fix video player height

Port 31e7b7308489ecc8b43f83b78ec0a288c4195d5b to glitch-soc
---
 .../flavours/glitch/styles/components/media.scss        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles')

diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index f02940593..03e7aba67 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -161,6 +161,19 @@
   max-width: 100vw;
   max-height: 100vh;
   position: relative;
+
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    video {
+      max-width: $media-modal-media-max-width;
+      max-height: $media-modal-media-max-height;
+    }
+  }
 }
 
 .media-modal {
@@ -274,8 +287,8 @@
   @include fullwidth-gallery;
 
   video {
-    height: 100%;
-    width: 100%;
+    max-width: 100vw;
+    max-height: 80vh;
     z-index: 1;
     object-fit: cover;
     position: relative;
-- 
cgit