From ff2bad045570dcf1035b47d0928bcc5d6b1ad7c9 Mon Sep 17 00:00:00 2001
From: gzbender <gzbender74@gmail.com>
Date: Tue, 9 Jul 2019 02:01:42 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B5=20=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7?=
 =?UTF-8?q?=D1=8B=D0=B2=D0=B0=D1=82=D1=8C=20=D0=B1=D0=BE=D0=BB=D1=8C=D1=88?=
 =?UTF-8?q?=D0=B5=203=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0?=
 =?UTF-8?q?=D1=80=D0=B8=D0=B5=D0=B2=20=D0=BF=D0=BE=D0=B4=20=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BE=20=D0=B2=20=D1=83=D1=80=D0=BE=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Comments.vue | 37 +++++++++++++++++++++++++++++----
 web/src/sass/_common.sass       |  5 ++++-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Comments.vue b/web/src/components/Comments.vue
index 9b4e0f6b..ed4e868b 100644
--- a/web/src/components/Comments.vue
+++ b/web/src/components/Comments.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="questions" :class="{'questions--chat': isChat, 'questions--loading': loading}">
-    <div v-show="nodes.length" class="questions__items">
-      <ul v-for="(node, index) in nodes" :key="index">
-        <li>
+    <div v-show="nodes.length" class="questions__items" ref="itemsContainer" :style="{height: height ? height + 'px' : 'auto'}">
+      <ul>
+        <li ref="items" v-for="(node, index) in nodes" :key="index">
           <comment v-if="! node.deactivated_at" :comment="node" :controller="controller" v-on:remove="remove"></comment>
         </li>
       </ul>
     </div>
+    <a class="questions__toggle" href="#" v-if="toggleVisible" @click.prevent="toggle"
+       v-text="this.height ? 'Развернуть комментарии' : 'Свернуть комментарии'">
+    </a>
     <div v-if="!$root.store.user.id && !isChat && noComments">Авторизуйтесь и оставьте первый комментарий!</div>
     <comment-form v-if="$root.store.user.id && ! replyTo" :controller="controller"></comment-form>
   </div>
@@ -28,6 +31,9 @@
                 controller: this,
                 flatComments: {},
                 noComments: false,
+                toggleVisible: false,
+                minHeight: null,
+                height: null,
             }
         },
         methods: {
@@ -111,11 +117,17 @@
                 let channel = pusher.subscribe('comments_' + this.objType + '_' + this.objId);
                 channel.bind('add', this.onAdd);
                 channel.bind('delete', this.onRemove);
-            }
+            },
+            toggle(){
+                this.height = this.height ? null : this.minHeight;
+            },
         },
         mounted() {
             let vm = this;
             this.loading = true;
+            if(this.$root.store.isMobile){
+                this.height = 250;
+            }
             let request = api.getObjComments(this.objId, this.objType, this.isChat ? 'update_at' : '-update_at');
             request
                 .then((response) => {
@@ -123,6 +135,23 @@
                     vm.nodes = response.data;
                     vm.noComments = ! vm.nodes.length;
                     vm.connectToPusher();
+                    if(vm.$root.store.isMobile){
+                        vm.$nextTick(() => {
+                            if(vm.$refs.itemsContainer.scrollHeight - vm.height > 100){
+                                let h = vm.$refs.items.slice(-3).reduce((h, i) => h + i.scrollHeight, 0);
+                                if(vm.height - h > 100){
+                                    h = vm.$refs.items.slice(-2).reduce((h, i) => h + i.scrollHeight, 0);
+                                }
+                                vm.minHeight = h;
+                                vm.height = h;
+                                vm.toggleVisible = true;
+                                vm.$refs.itemsContainer.scrollTop = vm.$refs.itemsContainer.scrollHeight;
+                            }
+                            else{
+                                vm.height = vm.$refs.itemsContainer.scrollHeight;
+                            }
+                        });
+                    }
                 })
                 .catch(() => {
                     vm.loading = false;
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index dabc7a25..94f49c79 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -2973,6 +2973,9 @@ a.grey-link
     height: 17px
     :hover
       fill: #000000
+  &__toggle
+    margin-top: 10px
+    display: inline-block
   &--heart
     &__content
       font-size: 24px
@@ -2987,7 +2990,7 @@ a.grey-link
     max-height: 400px
     overflow: auto
     +m
-      max-height: 250px
+      max-height: 800px
   &--chat &__item, &--chat &__item_reply
     +m
       padding: 0