fix the bug with scrolling post comments into view

Human-Connection · Sep 24, 2019 · 50feeed · 50feeed
1 parent 9eb90ee
commit 50feeed
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
@@ -47,6 +47,33 @@ export default {
         return comment.id === updatedComment.id ? updatedComment : comment
       })
     },
+    scrollCommentsIntoView() {
+      if (!window || !document) {
+        return
+      }
+      const container = document.getElementById('comments')
+      if (container) {
+        const top = container.offsetTop
+        window.scroll({
+          top,
+          left: 0,
+          behavior: 'smooth',
+        })
+      }
+    },
+  },
+  watch: {
+    $route(to, from) {
+      // scroll inside the same page
+      if (to.hash === '#comments') {
+        this.scrollCommentsIntoView()
+      }
+    },
+  },
+  mounted() {
+    if (this.$route.hash === '#comments') {
+      setTimeout(this.scrollCommentsIntoView, 250)
+    }
   },
 }
 </script>
diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
@@ -77,17 +77,6 @@ export default {
       ]
     },
   },
-  watch: {
-    $route(to, from) {
-      if (to.hash === '#comments') {
-        window.scroll({
-          top: document.getElementById('comments').offsetTop,
-          left: 0,
-          behavior: 'smooth',
-        })
-      }
-    },
-  },
 }
 </script>
 

diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
@@ -193,7 +193,7 @@ export default {
 
     .ds-card-image {
       img {
-        max-height: 300px;
+        height: 300px;
         object-fit: cover;
         object-position: center;
       }