Vue grid system for images

src/components/EditEvent.vue

@@ -5,25 +5,25 @@
     <div class="container">
       <div class="cont2">
         <div class="form-item required">
-          <label class="title" for="email2-field">Tittel <span class="required">*</span></label>
+          <label class="title" for="email2-field">tittel <span class="required">*</span></label>
           <input class="field-element" name="email" x-autocompletetype="email" type="email" spellcheck="false">
         </div>
 
         <fieldset class="form-item fields required">
-          <div class="title">Dato <span class="required">*</span></div>
+          <div class="title">dato <span class="required">*</span></div>
           <div class="field first-name">
             <label class="caption"><input class="field-element field-control" name="fname" x-autocompletetype="given-name" type="date" spellcheck="false" maxlength="30" data-title="First">
-                    Fra Dato</label>
+                    fra dato</label>
           </div>
 
           <div class="field last-name">
             <label class="caption"><input class="field-element field-control" name="lname" x-autocompletetype="surname" type="date" spellcheck="false" maxlength="30" data-title="Last">
-            Til Dato</label>
+            til dato</label>
           </div>
         </fieldset>
 
         <div class="form-item required">
-          <label class="title" for="text3-field">Sted<span class="required">*</span></label>
+          <label class="title" for="text3-field">sted<span class="required">*</span></label>
           <input class="field-element" v-model="locationInput" v-on:keydown.enter.prevent @click="show" type="text">
 
           <ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && features.length > 1">
@@ -37,11 +37,16 @@
           <textarea class="field-element "></textarea>
         </div>
 
+        <input id="file-upload" type="file" multiple>
+
         <div class="form-button-wrapper form-button-wrapper--align-left">
-          <input class="button sqs-system-button sqs-editable-button" type="submit" value="Legg til">
+          <input class="button sqs-system-button sqs-editable-button" type="submit" value="Registrer">
         </div>
 
-        <input id="file-upload" type="file" multiple>
+<!--         <div class="form-button-wrapper form-button-wrapper--align-left">
+          <button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
+        </div> -->
+
 
         <div class="hidden form-submission-text">Thank you!</div>
 
@@ -63,22 +68,101 @@
 
         </div> -->
 
+         <div class="image-grid">
+          <grid-layout
+            ref="imageGrid"
+            :layout.sync="layout"
+            :colNum="3"
+            :rowHeight="rowHeight"
+            :responsive="true"
+            :cols="grid.cols"
+            :breakpoints="grid.breakpoints"
+            :autoSize="true"
+            :is-draggable="true"
+            :is-resizable="false"
+            :is-mirrored="false"
+            :margin="[10, 10]"
+            :use-css-transforms="true">
+
+            <grid-item class="grid-item" v-for="item in layout"
+              :x="item.x"
+              :y="item.y"
+              :w="item.w"
+              :h="item.h"
+              :i="item.i"
+              :key="item.i">
+              <div v-bind:style="{ 'background-image': 'url(' + item.img + ')' }">
+                <span>{{item.i}}</span>
+              </div>
+              <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Obama_portrait_crop.jpg"> -->
+            </grid-item>
+          </grid-layout>
+        </div>
+
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import VueGridLayout from 'vue-grid-layout';
 import ClickOutside from 'vue-click-outside'
 
 export default {
-  components: { },
+  components: { 
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem
+  },
+  computed: {
+    rowHeight: function() {
+      if (this.imageGrid)
+        return this.grid.rows[this.imageGrid.lastBreakpoint]
+      return 150
+    }
+  },
   data() {
     return {
       locationInput: undefined,
       timeout: undefined,
       features: [],
       showAutocompleted: false,
-      selectedPlace: undefined
+      selectedPlace: undefined,
+      imageGrid: undefined,
+      grid: {
+        cols: { lg: 6, md: 4, sm: 3, xs: 2, xxs: 1 },
+        rows: { lg: 216, md: 240, sm: 280, xs: 250, xxs: 400 },
+        breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
+      },
+      layout: [
+        {"x":0,"y":0,"w":1,"h":1,"i":"0",img:"https://upload.wikimedia.org/wikipedia/commons/f/f9/Obama_portrait_crop.jpg"},
+        {"x":1,"y":0,"w":1,"h":1,"i":"1",img:"https://api.kevinmidboe.com/files/images/DSC_9029.JPG"},
+        {"x":2,"y":0,"w":1,"h":1,"i":"2"},
+
+        {"x":3,"y":0,"w":1,"h":1,"i":"3"},
+        {"x":4,"y":0,"w":1,"h":1,"i":"4"},
+        {"x":5,"y":0,"w":1,"h":1,"i":"5"},
+
+      // {"x":4,"y":0,"w":1,"h":3,"i":"2"},
+      // {"x":6,"y":0,"w":1,"h":3,"i":"3"},
+      // {"x":8,"y":0,"w":1,"h":3,"i":"4"},
+      // {"x":10,"y":0,"w":1,"h":3,"i":"5"},
+
+      // {"x":0,"y":1,"w":1,"h":3,"i":"6"},
+      // {"x":2,"y":1,"w":1,"h":3,"i":"7"},
+      // {"x":4,"y":1,"w":1,"h":3,"i":"8"},
+      // {"x":6,"y":1,"w":1,"h":3,"i":"9"},
+      // {"x":8,"y":1,"w":1,"h":3,"i":"10"},
+      // {"x":10,"y":1,"w":1,"h":3,"i":"11"},
+      
+      // {"x":0,"y":2,"w":1,"h":3,"i":"12"},
+      // {"x":2,"y":2,"w":1,"h":3,"i":"13"},
+      // {"x":4,"y":2,"w":1,"h":3,"i":"14"},
+      // {"x":6,"y":2,"w":1,"h":3,"i":"15"},
+      // {"x":8,"y":2,"w":1,"h":3,"i":"16"},
+      // {"x":10,"y":2,"w":1,"h":3,"i":"17"},
+      
+      // {"x":0,"y":3,"w":1,"h":3,"i":"18"},
+      // {"x":2,"y":3,"w":1,"h":3,"i":"19"}
+  ]
     }
   },
   watch: {
@@ -92,8 +176,15 @@ export default {
     }
   },
   created() {},
-  beforeMount() {},
+  mounted() {
+    this.imageGrid = this.$refs.imageGrid;
+  },
   methods: {
+    gridSettings() {
+      let breakpoint = this.$refs.imageGrid.lastBreakpoint;
+      let currentColCount = this.grid.cols[breakpoint];
+      console.log('gridSetting', breakpoint, currentColCount, this.$refs.imageGrid)
+    },
     debounce(fn, time=1000) {
       const functionCall = () => fn.apply(this, arguments);
       
@@ -135,9 +226,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .image-grid {
+    max-width: 1445px;
+  }
+
+  .grid-layout {
+    width: 100vw;
+
+  }
+
+  .grid-item {
+    // background-image: url('https://cdn1.thr.com/sites/default/files/imagecache/list_square_270x270/2018/10/joe_rogan-getty-headshot-2018.jpg');
+    
+    background-color: NavajoWhite;
+
+    font-size: 3rem;
+    color: blue;
+
+    > div > span {
+      display: inline-block;
+      position: absolute;
+    }
+
+    > div, > div > img {
+      // background-image: url('');
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      height: inherit;
+      width: inherit;
+      // max-height: 50vh;
+    }
+  }
+
+
   .parent {
+    // background-color: green;
+
     display: block;
-    width: max-content;
+    width: 90vw;
     margin: 4rem auto;
 
     @media screen and (max-width: 650px) {
@@ -341,6 +468,7 @@ export default {
     border-color: rgb(39, 39, 39);
     border-style: outset;
     border-width: 0px;
+    border-radius: 3px;
     color: rgb(255, 255, 255);
     cursor: pointer;
     font-size: 14px;