LIL-641 Конкурс. Галерея подгружается некорректно

apps/content/templates/content/blocks/video.html

@@ -6,10 +6,10 @@
     <div class="content-block__video iframe__container">
       {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
       <iframe src="https://www.youtube.com/embed/{{ content.video_index }}" frameborder="0" allow="autoplay; encrypted-media"
-        allowfullscreen></iframe>
+        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
       {% elif 'vimeo.com' in content.url %}
       <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
-        mozallowfullscreen allowfullscree>
+        mozallowfullscreen allowfullscreen>
       </iframe>
       {% endif %}
     </div>

project/templates/blocks/lil_store_js.html

@@ -3,6 +3,7 @@
   window.LIL_STORE = {
     staticUrl: '{% static "" %}',
     accessToken: '{{ request.user.auth_token }}',
+    isMobile: {{ request.user_agent.is_mobile|yesno:"true,false" }},
     user: {
       id: {{ request.user.id|default:'null' }},
     }

web/src/components/ContestWorks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="contest-works">
-    <div class="contest-works__works">
+    <div class="contest-works__works" v-if="! $root.store.isMobile">
       <div class="contest-works__column">
         <contest-work v-for="contestWork in columns[0]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
       </div>
@@ -11,6 +11,9 @@
         <contest-work v-for="contestWork in columns[2]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
       </div>
     </div>
+    <div class="contest-works__works" v-if="$root.store.isMobile" style="display: block;">
+      <contest-work v-for="contestWork in contestWorks" :key="contestWork.id" :contest-work="contestWork"></contest-work>
+    </div>
     <div v-show="loading" class="contest-works__loader"><div class="loading-loader"></div></div>
     <div v-if="loaded && !contestWorks.length"  class="contest-works__no-works">Здесь вы сможете увидеть работы участников после их добавления</div>
   </div>
@@ -48,12 +51,33 @@
     },
     computed: {
       columns() {
+        const columnWidth = 300;
+        const heights = [0, 0, 0];
         const first = [];
         const second = [];
         const third = [];
+        let index = 0;
         for(let i=0; i < this.contestWorks.length; i++) {
           const work = this.contestWorks[i];
-          [first, second, third][i % 3].push(work);
+          let column = index % 3;
+          const workHeight = work.img_height / work.img_width * columnWidth + 50;
+          let minHeight = 0;
+          if(i > 3){
+            for(let j=0; j < 3; j++){
+              let col = j % 3;
+              if(! minHeight || heights[j] < minHeight){
+                  minHeight = heights[j];
+                  if(heights[column] - heights[j] > workHeight * 0.1){
+                    column = j;
+                    index += j - column;
+                  }
+              }
+            }
+          }
+          
+          heights[column] += workHeight; 
+          [first, second, third][column].push(work);
+          index++;
         }
         return [first, second, third];
       }
@@ -97,6 +121,7 @@
       display: flex;
       flex-direction: column;
       margin-right: 20px;
+      width: 300px;
     }
     .contest-works__loader {
       width: 100%;