Vue grid system for images

package.json

@@ -18,6 +18,7 @@
     "vue": "^2.5.2",
     "vue-axios": "^2.1.2",
     "vue-click-outside": "^1.0.7",
+    "vue-grid-layout": "^2.3.3",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.2",
     "vue2-touch-events": "^1.1.2",

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;

src/components/EventPage.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <div class="form">
+      <router-link to="edit">
+        <button class="button" type="submit">Rediger</button>
+      </router-link>
+    </div>
+
     <div class="gallery">
       <div class="gallery--header">
         <h1>Topptur til gaustadtoppen æøå {{ id }}</h1>
@@ -81,4 +87,42 @@ export default {
     }
   }
 }
+
+.form {
+  display: absolute;
+  float: right;
+  margin-top: 1rem;
+  margin-right: 1rem;
+
+}
+.button {
+  -webkit-appearance: none;
+  -webkit-backface-visibility: none;
+  border: 2.5px solid #c91119;
+  border-radius: 3px;
+  // color: rgb(255, 255, 255);
+  background-color: white;
+  color: #c91119;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  height: 42px;
+  letter-spacing: 1px;
+  line-height: 14px;
+  margin-left: -10px;
+  padding: 0 1rem;
+  text-transform: uppercase;
+  transition-delay: 0s;
+  transition-duration: 0.1s;
+  transition-property: opacity;
+  transition-timing-function: linear;
+  vertical-align: baseline;
+  white-space: pre;
+  writing-mode: horizontal-tb;
+
+  &:hover, &:active, &:focus {
+    color: white;
+    background-color: #c91119;
+  }
+}
 </style>

src/components/Home.vue

@@ -9,7 +9,6 @@
 
 
     <Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
-    <router-link to="edit">Edit Page</router-link>
 
     <event-page style="height: 100%; overflow: auto;"></event-page>
   </div>

src/components/Popover.vue

@@ -10,6 +10,7 @@
       
       </div>
     </div>
+    
     <div style="position: fixed; width: 100%; bottom: 2rem">
       <div style="display: block; width: max-content; margin: 0 auto;">
         <button @click="backwards">Backwards</button>

yarn.lock

@@ -881,6 +881,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -1991,6 +1996,13 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@
   version "1.3.88"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.88.tgz#f36ab32634f49ef2b0fdc1e82e2d1cc17feb29e7"
 
+element-resize-detector@^1.1.10:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.15.tgz#48eba1a2eaa26969a4c998d972171128c971d8d2"
+  integrity sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==
+  dependencies:
+    batch-processor "^1.0.0"
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -3067,6 +3079,11 @@ inquirer@3.0.6:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
+interactjs@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.3.4.tgz#9d5aa886f8fa03ea2f6c711e688792e3d3bde1ff"
+  integrity sha512-AQ2CdPEyHqiEEQ1FFgMBj79UEsU1+rUwSXuhOkflvB65p4iECft28SN/PvhD/Y9OtNge8aH1qTibjAi+RXQMqQ==
+
 internal-ip@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@@ -6226,6 +6243,14 @@ vue-functional-data-merge@^2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz#bdee655181eacdcb1f96ce95a4cc14e75313d1da"
 
+vue-grid-layout@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-grid-layout/-/vue-grid-layout-2.3.3.tgz#1552beac5e06867d52f2dbe73753bec25063c8a1"
+  integrity sha512-czzQ7TpetYziKb9cfnhxumaP6AVKfx4Jevymy/FdzmZ15HWKSGVVcWSNe1HBrtDE6DywewuO3KcFrCc0OehqYQ==
+  dependencies:
+    element-resize-detector "^1.1.10"
+    interactjs "^1.3.4"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"