From 8cece3100f8f92d1f772893a5c031eef759b6269 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Tue, 14 Jul 2020 06:01:01 -0500
Subject: [PATCH] ui: mobile sexiness

---
 src/client/app.scss          |  2 ++
 src/client/chat--center.jsx  |  4 ++-
 src/client/chat--center.scss |  8 ++++++
 src/client/chat--left.jsx    |  4 +--
 src/client/chat--left.scss   |  6 +++++
 src/client/chat--right.jsx   |  4 +--
 src/client/chat--right.scss  |  7 ++++++
 src/client/chat.jsx          | 49 ++++++++++++++++++++++++++++++++++--
 src/client/chat.scss         | 11 ++++++--
 9 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/src/client/app.scss b/src/client/app.scss
index 7565010..de69fae 100644
--- a/src/client/app.scss
+++ b/src/client/app.scss
@@ -1,6 +1,8 @@
 .app {
   width: 100vw;
   height: 100vh;
+  overflow: hidden;
+  position: relative;
 }
 
 .panes {
diff --git a/src/client/chat--center.jsx b/src/client/chat--center.jsx
index 5a34fb9..2c4920d 100644
--- a/src/client/chat--center.jsx
+++ b/src/client/chat--center.jsx
@@ -6,7 +6,9 @@ import ChatMessages from './chat--messages';
 
 export default function ChatCenter() {
   return (
-    <div className="center flexed">
+    <div
+      className="center flexed"
+    >
       <ChatMessages />
     </div>
   );
diff --git a/src/client/chat--center.scss b/src/client/chat--center.scss
index 3eee874..4b29f82 100644
--- a/src/client/chat--center.scss
+++ b/src/client/chat--center.scss
@@ -1,3 +1,11 @@
+@import '~/client/scss/breakpoints.scss';
+
 .center {
+  background-color: #212121;
   flex-grow: 1;
+  width: 100%;
+  z-index: 100;
+  @include breakpoint(tablet) {
+    width: auto;
+  }
 }
diff --git a/src/client/chat--left.jsx b/src/client/chat--left.jsx
index 4980e76..2a798ab 100644
--- a/src/client/chat--left.jsx
+++ b/src/client/chat--left.jsx
@@ -7,10 +7,10 @@ import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatLeft() {
-  const {desktop} = useBreakpoints();
+  const {desktop, tablet} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
-  const showsAsOpen = isOpen || desktop;
+  const showsAsOpen = isOpen || desktop || !tablet;
   const buttons = [
     {
       icon: '📜',
diff --git a/src/client/chat--left.scss b/src/client/chat--left.scss
index 2903972..7f4f0cf 100644
--- a/src/client/chat--left.scss
+++ b/src/client/chat--left.scss
@@ -1,6 +1,12 @@
+@import '~/client/scss/breakpoints.scss';
+
 .left {
   background-color: #373737;
+  transform: translateX(-100%);
   transition: 0.2s width;
+  @include breakpoint(tablet) {
+    transform: none;
+  }
 }
 
 .left.open {
diff --git a/src/client/chat--right.jsx b/src/client/chat--right.jsx
index 728e455..e711aee 100644
--- a/src/client/chat--right.jsx
+++ b/src/client/chat--right.jsx
@@ -7,10 +7,10 @@ import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatRight() {
-  const {desktop} = useBreakpoints();
+  const {desktop, tablet} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
-  const showsAsOpen = isOpen || desktop;
+  const showsAsOpen = isOpen || desktop || !tablet;
   const buttons = [
     {
       icon: '🙃',
diff --git a/src/client/chat--right.scss b/src/client/chat--right.scss
index c97e62f..401325d 100644
--- a/src/client/chat--right.scss
+++ b/src/client/chat--right.scss
@@ -1,6 +1,13 @@
+@import '~/client/scss/breakpoints.scss';
+
 .right {
   background-color: #373737;
+  right: 0;
+  transform: translateX(100%);
   transition: 0.2s width;
+  @include breakpoint(tablet) {
+    transform: none;
+  }
 }
 
 .right .bar--vertical {
diff --git a/src/client/chat.jsx b/src/client/chat.jsx
index ca2a99c..d4d162a 100644
--- a/src/client/chat.jsx
+++ b/src/client/chat.jsx
@@ -1,14 +1,59 @@
 import './chat.scss';
 
-import React from 'react';
+import React, {useRef} from 'react';
 
+import useBreakpoints from './hooks/useBreakpoints';
 import ChatCenter from './chat--center';
 import ChatLeft from './chat--left';
 import ChatRight from './chat--right';
 
 export default function Chat() {
+  const ref = useRef(null);
+  const {tablet} = useBreakpoints();
+  let origin;
+  const onPointerEvents = {
+    onPointerDown: (event) => {
+      if (ref.current) {
+        origin = {
+          left: parseInt(ref.current.style.left, 10),
+          point: event.clientX,
+        };
+      }
+    },
+    onPointerMove: (event) => {
+      if (origin) {
+        ref.current.classList.add('moving');
+        const offset = event.clientX - origin.point + origin.left;
+        const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
+        ref.current.style.left = `${Math.max(-max, Math.min(max, offset))}px`;
+      }
+    },
+    onPointerUp: () => {
+      const left = parseInt(ref.current.style.left, 10);
+      const max = Math.min(window.innerWidth - 32, (2 + 16) * 16);
+      if (left >= max / 2) {
+        ref.current.style.left = `${max}px`;
+      }
+      else if (left <= -max / 2) {
+        ref.current.style.left = `${-max}px`;
+      }
+      else {
+        ref.current.style.left = 0;
+      }
+      origin = undefined;
+      ref.current.classList.remove('moving');
+    },
+  };
+  if (tablet && ref.current) {
+    ref.current.style.left = 0;
+  }
   return (
-    <div className="chat">
+    <div
+      className="chat"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...(tablet ? {} : onPointerEvents)}
+      ref={ref}
+    >
       <ChatLeft />
       <ChatCenter />
       <ChatRight />
diff --git a/src/client/chat.scss b/src/client/chat.scss
index e95e8f9..c9e003a 100644
--- a/src/client/chat.scss
+++ b/src/client/chat.scss
@@ -3,15 +3,22 @@
 .chat {
   display: flex;
   height: 100%;
+  position: absolute;
   width: 100%;
+  &:not(.moving) {
+    transition: 0.2s left;
+  }
 }
 
 .flexed {
-  display: none;
+  position: absolute;
   height: 100%;
   width: 4em;
   overflow: hidden;
+  &:not(.center) {
+    max-width: calc(100% - 2em);
+  }
   @include breakpoint(tablet) {
-    display: block;
+    position: static;
   }
 }