about summary refs log tree commit diff
path: root/app/javascript/flavours
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2019-08-15 20:28:56 +0200
committerThibaut Girka <thib@sitedethib.com>2019-08-19 21:56:25 +0200
commit91d968bf720d09834ffc68f73eae9bd7dcbd80db (patch)
treee14d9e170a615cea5f19058cce46b72437c9df75 /app/javascript/flavours
parent5c35c9c40968011ce6b1837bf2c420322b21c83d (diff)
[Glitch] Fix edit media modal on small screens, touch events
Port 1bea3181975f377bbccfe92691e2cd281b298ec6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r--app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js17
-rw-r--r--app/javascript/flavours/glitch/styles/basics.scss14
-rw-r--r--app/javascript/flavours/glitch/styles/components/modal.scss16
3 files changed, 46 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
index 6dc47dca3..5135bdd2d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
@@ -84,6 +84,14 @@ class FocalPointModal extends ImmutablePureComponent {
     this.setState({ dragging: true });
   }
 
+  handleTouchStart = e => {
+    document.addEventListener('touchmove', this.handleMouseMove);
+    document.addEventListener('touchend', this.handleTouchEnd);
+
+    this.updatePosition(e);
+    this.setState({ dragging: true });
+  }
+
   handleMouseMove = e => {
     this.updatePosition(e);
   }
@@ -95,6 +103,13 @@ class FocalPointModal extends ImmutablePureComponent {
     this.setState({ dragging: false });
   }
 
+  handleTouchEnd = () => {
+    document.removeEventListener('touchmove', this.handleMouseMove);
+    document.removeEventListener('touchend', this.handleTouchEnd);
+
+    this.setState({ dragging: false });
+  }
+
   updatePosition = e => {
     const { x, y } = getPointerPosition(this.node, e);
     const focusX   = (x - .5) *  2;
@@ -225,7 +240,7 @@ class FocalPointModal extends ImmutablePureComponent {
                 </div>
 
                 <div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
-                <div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
+                <div className='focal-point__overlay' onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart} />
               </div>
             )}
 
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 550b7fdfc..4de3955a6 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -133,3 +133,17 @@ button {
     outline: 0 !important;
   }
 }
+
+.layout-single-column .app-holder {
+  &,
+  & > div {
+    min-height: 100vh;
+  }
+}
+
+.layout-multiple-columns .app-holder {
+  &,
+  & > div {
+    height: 100%;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 87d9d6cd7..c367e204c 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -829,6 +829,11 @@
   position: relative;
   cursor: move;
   overflow: hidden;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $base-shadow-color;
 
   img,
   video {
@@ -879,6 +884,17 @@
       box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
     }
   }
+
+  @media screen and (max-width: 480px) {
+    img,
+    video {
+      max-height: 100%;
+    }
+
+    &__preview {
+      display: none;
+    }
+  }
 }
 
 .filtered-status-info {