не показывать больше 3 комментариев под видео в уроках

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;

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