From f4bbf1d4e205e3c3438226d0cf71e77d4bc0be11 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 19 Sep 2019 13:27:37 -0400
Subject: add new module and modal to post new status

---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 719e00a4..46d3ac42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@
     />
     <MobilePostStatusModal />
     <UserReportingModal />
+    <PostStatusModal />
     <portal-target name="modal" />
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2


From d6a941a128f37a2d04f5e60ad21037c2c5efcfa3 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 19 Sep 2019 13:59:34 -0400
Subject: rename component

---
 src/App.js                                         |  4 +-
 src/App.vue                                        |  2 +-
 .../mobile_post_status_button.js                   | 93 ++++++++++++++++++++++
 .../mobile_post_status_button.vue                  | 55 +++++++++++++
 .../mobile_post_status_modal.js                    | 93 ----------------------
 .../mobile_post_status_modal.vue                   | 55 -------------
 6 files changed, 151 insertions(+), 151 deletions(-)
 create mode 100644 src/components/mobile_post_status_button/mobile_post_status_button.js
 create mode 100644 src/components/mobile_post_status_button/mobile_post_status_button.vue
 delete mode 100644 src/components/mobile_post_status_modal/mobile_post_status_modal.js
 delete mode 100644 src/components/mobile_post_status_modal/mobile_post_status_modal.vue

(limited to 'src/App.vue')

diff --git a/src/App.js b/src/App.js
index 40f362d2..fe63b54c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
-import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
+import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
@@ -27,7 +27,7 @@ export default {
     ChatPanel,
     MediaModal,
     SideDrawer,
-    MobilePostStatusModal,
+    MobilePostStatusButton,
     MobileNav,
     UserReportingModal,
     PostStatusModal
diff --git a/src/App.vue b/src/App.vue
index 46d3ac42..f1086e60 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -107,7 +107,7 @@
       :floating="true"
       class="floating-chat mobile-hidden"
     />
-    <MobilePostStatusModal />
+    <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
     <portal-target name="modal" />
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
new file mode 100644
index 00000000..3e77148a
--- /dev/null
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -0,0 +1,93 @@
+import { debounce } from 'lodash'
+
+const MobilePostStatusButton = {
+  data () {
+    return {
+      hidden: false,
+      scrollingDown: false,
+      inputActive: false,
+      oldScrollPos: 0,
+      amountScrolled: 0
+    }
+  },
+  created () {
+    if (this.autohideFloatingPostButton) {
+      this.activateFloatingPostButtonAutohide()
+    }
+    window.addEventListener('resize', this.handleOSK)
+  },
+  destroyed () {
+    if (this.autohideFloatingPostButton) {
+      this.deactivateFloatingPostButtonAutohide()
+    }
+    window.removeEventListener('resize', this.handleOSK)
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    isHidden () {
+      return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
+    },
+    autohideFloatingPostButton () {
+      return !!this.$store.state.config.autohideFloatingPostButton
+    }
+  },
+  watch: {
+    autohideFloatingPostButton: function (isEnabled) {
+      if (isEnabled) {
+        this.activateFloatingPostButtonAutohide()
+      } else {
+        this.deactivateFloatingPostButtonAutohide()
+      }
+    }
+  },
+  methods: {
+    activateFloatingPostButtonAutohide () {
+      window.addEventListener('scroll', this.handleScrollStart)
+      window.addEventListener('scroll', this.handleScrollEnd)
+    },
+    deactivateFloatingPostButtonAutohide () {
+      window.removeEventListener('scroll', this.handleScrollStart)
+      window.removeEventListener('scroll', this.handleScrollEnd)
+    },
+    openPostForm () {
+      this.$store.dispatch('openPostStatusModal')
+    },
+    handleOSK () {
+      // This is a big hack: we're guessing from changed window sizes if the
+      // on-screen keyboard is active or not. This is only really important
+      // for phones in portrait mode and it's more important to show the button
+      // in normal scenarios on all phones, than it is to hide it when the
+      // keyboard is active.
+      // Guesswork based on https://www.mydevice.io/#compare-devices
+
+      // for example, iphone 4 and android phones from the same time period
+      const smallPhone = window.innerWidth < 350
+      const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
+
+      const biggerPhone = !smallPhone && window.innerWidth < 450
+      const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
+      if (smallPhoneKbOpen || biggerPhoneKbOpen) {
+        this.inputActive = true
+      } else {
+        this.inputActive = false
+      }
+    },
+    handleScrollStart: debounce(function () {
+      if (window.scrollY > this.oldScrollPos) {
+        this.hidden = true
+      } else {
+        this.hidden = false
+      }
+      this.oldScrollPos = window.scrollY
+    }, 100, { leading: true, trailing: false }),
+
+    handleScrollEnd: debounce(function () {
+      this.hidden = false
+      this.oldScrollPos = window.scrollY
+    }, 100, { leading: false, trailing: true })
+  }
+}
+
+export default MobilePostStatusButton
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
new file mode 100644
index 00000000..9cf45de3
--- /dev/null
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-if="isLoggedIn">
+    <button
+      class="new-status-button"
+      :class="{ 'hidden': isHidden }"
+      @click="openPostForm"
+    >
+      <i class="icon-edit" />
+    </button>
+  </div>
+</template>
+
+<script src="./mobile_post_status_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.new-status-button {
+  width: 5em;
+  height: 5em;
+  border-radius: 100%;
+  position: fixed;
+  bottom: 1.5em;
+  right: 1.5em;
+  // TODO: this needs its own color, it has to stand out enough and link color
+  // is not very optimal for this particular use.
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+
+  transition: 0.35s transform;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+  &.hidden {
+    transform: translateY(150%);
+  }
+
+  i {
+    font-size: 1.5em;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
+@media all and (min-width: 801px) {
+  .new-status-button {
+    display: none;
+  }
+}
+
+</style>
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
deleted file mode 100644
index 3be4a1d8..00000000
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { debounce } from 'lodash'
-
-const MobilePostStatusModal = {
-  data () {
-    return {
-      hidden: false,
-      scrollingDown: false,
-      inputActive: false,
-      oldScrollPos: 0,
-      amountScrolled: 0
-    }
-  },
-  created () {
-    if (this.autohideFloatingPostButton) {
-      this.activateFloatingPostButtonAutohide()
-    }
-    window.addEventListener('resize', this.handleOSK)
-  },
-  destroyed () {
-    if (this.autohideFloatingPostButton) {
-      this.deactivateFloatingPostButtonAutohide()
-    }
-    window.removeEventListener('resize', this.handleOSK)
-  },
-  computed: {
-    isLoggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
-    isHidden () {
-      return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
-    },
-    autohideFloatingPostButton () {
-      return !!this.$store.state.config.autohideFloatingPostButton
-    }
-  },
-  watch: {
-    autohideFloatingPostButton: function (isEnabled) {
-      if (isEnabled) {
-        this.activateFloatingPostButtonAutohide()
-      } else {
-        this.deactivateFloatingPostButtonAutohide()
-      }
-    }
-  },
-  methods: {
-    activateFloatingPostButtonAutohide () {
-      window.addEventListener('scroll', this.handleScrollStart)
-      window.addEventListener('scroll', this.handleScrollEnd)
-    },
-    deactivateFloatingPostButtonAutohide () {
-      window.removeEventListener('scroll', this.handleScrollStart)
-      window.removeEventListener('scroll', this.handleScrollEnd)
-    },
-    openPostForm () {
-      this.$store.dispatch('openPostStatusModal')
-    },
-    handleOSK () {
-      // This is a big hack: we're guessing from changed window sizes if the
-      // on-screen keyboard is active or not. This is only really important
-      // for phones in portrait mode and it's more important to show the button
-      // in normal scenarios on all phones, than it is to hide it when the
-      // keyboard is active.
-      // Guesswork based on https://www.mydevice.io/#compare-devices
-
-      // for example, iphone 4 and android phones from the same time period
-      const smallPhone = window.innerWidth < 350
-      const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
-
-      const biggerPhone = !smallPhone && window.innerWidth < 450
-      const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
-      if (smallPhoneKbOpen || biggerPhoneKbOpen) {
-        this.inputActive = true
-      } else {
-        this.inputActive = false
-      }
-    },
-    handleScrollStart: debounce(function () {
-      if (window.scrollY > this.oldScrollPos) {
-        this.hidden = true
-      } else {
-        this.hidden = false
-      }
-      this.oldScrollPos = window.scrollY
-    }, 100, { leading: true, trailing: false }),
-
-    handleScrollEnd: debounce(function () {
-      this.hidden = false
-      this.oldScrollPos = window.scrollY
-    }, 100, { leading: false, trailing: true })
-  }
-}
-
-export default MobilePostStatusModal
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
deleted file mode 100644
index 38c5fce0..00000000
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div v-if="isLoggedIn">
-    <button
-      class="new-status-button"
-      :class="{ 'hidden': isHidden }"
-      @click="openPostForm"
-    >
-      <i class="icon-edit" />
-    </button>
-  </div>
-</template>
-
-<script src="./mobile_post_status_modal.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.new-status-button {
-  width: 5em;
-  height: 5em;
-  border-radius: 100%;
-  position: fixed;
-  bottom: 1.5em;
-  right: 1.5em;
-  // TODO: this needs its own color, it has to stand out enough and link color
-  // is not very optimal for this particular use.
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
-  z-index: 10;
-
-  transition: 0.35s transform;
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-
-  &.hidden {
-    transform: translateY(150%);
-  }
-
-  i {
-    font-size: 1.5em;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-  }
-}
-
-@media all and (min-width: 801px) {
-  .new-status-button {
-    display: none;
-  }
-}
-
-</style>
-- 
cgit v1.2.3-70-g09d2


From ad504768feacecdbd9f41f4bca470a58fdf0d059 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 19 Jul 2019 12:36:07 -0400
Subject: lock body scroll

---
 src/App.vue                                | 1 +
 src/components/media_modal/media_modal.vue | 5 +++++
 2 files changed, 6 insertions(+)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 719e00a4..d7453549 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
     :style="bgAppStyle"
   >
     <div
+      id="app_bg_wrapper"
       class="app-bg-wrapper"
       :style="bgStyle"
     />
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ab5a36a5..06ced5a1 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="showing"
+    v-body-scroll-lock="showing"
     class="modal-view media-modal-view"
     @click.prevent="hide"
   >
@@ -43,6 +44,10 @@
 .media-modal-view {
   z-index: 1001;
 
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;
-- 
cgit v1.2.3-70-g09d2


From 37ae0fd92c2d392cda56912707e6c52faec54334 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 5 Sep 2019 12:22:56 -0400
Subject: fix logo moving bug when lightbox is open

---
 src/App.scss |  1 +
 src/App.vue  | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 12 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.scss b/src/App.scss
index 3914cec2..a8850961 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -392,6 +392,7 @@ i[class*=icon-] {
   }
 
   .inner-nav {
+    position: relative;
     margin: auto;
     box-sizing: border-box;
     padding-left: 10px;
diff --git a/src/App.vue b/src/App.vue
index d7453549..eb571a17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,20 +15,20 @@
       class="nav-bar container"
       @click="scrollToTop()"
     >
-      <div
-        class="logo"
-        :style="logoBgStyle"
-      >
+      <div class="inner-nav">
         <div
-          class="mask"
-          :style="logoMaskStyle"
-        />
-        <img
-          :src="logo"
-          :style="logoStyle"
+          class="logo"
+          :style="logoBgStyle"
         >
-      </div>
-      <div class="inner-nav">
+          <div
+            class="mask"
+            :style="logoMaskStyle"
+          />
+          <img
+            :src="logo"
+            :style="logoStyle"
+          >
+        </div>
         <div class="item">
           <router-link
             class="site-name"
-- 
cgit v1.2.3-70-g09d2

