review fixes, clarify code

src/components/mobile_post_status_modal/mobile_post_status_modal.js

@@ -7,10 +7,10 @@ const MobilePostStatusModal = {
   },
   data () {
     return {
-      shown: true,
+      hidden: false,
       postFormOpen: false,
+      scrollingDown: false,
       oldScrollPos: 0,
-      scrollDirection: -1,
       amountScrolled: 0
     }
   },
@@ -28,7 +28,7 @@ const MobilePostStatusModal = {
   methods: {
     openPostForm () {
       this.postFormOpen = true
-      this.shown = false
+      this.hidden = true
 
       const el = this.$el.querySelector('textarea')
       this.$nextTick(function () {
@@ -37,27 +37,27 @@ const MobilePostStatusModal = {
     },
     closePostForm () {
       this.postFormOpen = false
-      this.shown = true
+      this.hidden = false
     },
     handleScroll: throttle(function () {
       const scrollAmount = window.scrollY - this.oldScrollPos
-      const direction = scrollAmount > 0 ? 1 : -1
+      const scrollingDown = scrollAmount > 0
 
-      if (direction !== this.scrollDirection) {
+      if (scrollingDown !== this.scrollingDown) {
         this.amountScrolled = 0
-        this.scrollDirection = direction
-        if (direction === -1) {
-          this.shown = true
+        this.scrollingDown = scrollingDown
+        if (!scrollingDown) {
+          this.hidden = false
         }
-      } else if (direction === 1) {
+      } else if (scrollingDown) {
         this.amountScrolled += scrollAmount
-        if (this.amountScrolled > 100 && this.shown) {
-          this.shown = false
+        if (this.amountScrolled > 100 && !this.hidden) {
+          this.hidden = true
         }
       }
 
       this.oldScrollPos = window.scrollY
-      this.scrollDirection = direction
+      this.scrollingDown = scrollingDown
     }, 100)
   }
 }

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

@@ -5,14 +5,14 @@
     v-show="postFormOpen"
     @click="closePostForm"
   >
-    <div class="modal-panel panel" @click.stop="">
+    <div class="post-form-modal-panel panel" @click.stop="">
       <div class="panel-heading">{{$t('post_status.new_status')}}</div>
       <PostStatusForm class="panel-body" @posted="closePostForm"/>
     </div>
   </div>
   <button
     class="new-status-button"
-    :class="{ 'shown': shown, 'hidden': !shown }"
+    :class="{ hidden }"
     @click="openPostForm"
   >
     <i class="icon-edit" />
@@ -30,7 +30,7 @@
   display: block;
 }
 
-.modal-panel {
+.post-form-modal-panel {
   flex-shrink: 0;
   margin: 25% 0 4em 0;
   width: 100%;
@@ -43,6 +43,8 @@
   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;
@@ -51,13 +53,9 @@
   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;
+  transition: 0.35s transform;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 
-  &.shown {
-
-  }
-
   &.hidden {
     transform: translateY(150%);
   }