From 4f17106e619dc547c5dcf60c2e6d9b1966a5118f Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 20 Feb 2019 22:31:30 +0100
Subject: [PATCH] Input images have nice alignment with background image
 center. Also disabled more debugging outputs to the DOM.

---
 src/components/EditEvent.vue                | 10 +++++-----
 src/components/form/FormElementLocation.vue |  2 +-
 src/components/form/FormElementUpload.vue   | 17 +++++++++++------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/EditEvent.vue b/src/components/EditEvent.vue
index e2221b7..3b89747 100644
--- a/src/components/EditEvent.vue
+++ b/src/components/EditEvent.vue
@@ -7,7 +7,7 @@
       <event-form></event-form>
     </div>
 
-    <div class="image-grid">
+    <!-- <div class="image-grid">
       <grid-layout
         ref="imageGrid"
         :layout.sync="layout"
@@ -36,13 +36,13 @@
           </div>
         </grid-item>
       </grid-layout>
-    </div>
+    </div> -->
 
-    
+<!--     
     <div class="tools">
       <button class="button" @click="reorder = !reorder" v-bind:class="{ active: reorder }">{{reorder ? 'submit' : 'reoder' }}</button>
-    </div>
-    {{ reorder }}
+    </div> -->
+    <!-- {{ reorder }} -->
 
   </div>
 </template>
diff --git a/src/components/form/FormElementLocation.vue b/src/components/form/FormElementLocation.vue
index 495ddb7..1ce69ad 100644
--- a/src/components/form/FormElementLocation.vue
+++ b/src/components/form/FormElementLocation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-item required" style="overflow: hidden">
-    {{ highlightedLocation }}
+    <!-- {{ highlightedLocation }} -->
 
     <label class="title">sted<span class="required">*</span></label>
     <input 
diff --git a/src/components/form/FormElementUpload.vue b/src/components/form/FormElementUpload.vue
index f1f0860..9eca938 100644
--- a/src/components/form/FormElementUpload.vue
+++ b/src/components/form/FormElementUpload.vue
@@ -6,7 +6,8 @@
     <div class="previewWindow" v-if="files.length">
       <p class="previewWindow--title">{{ files.length }} bilder lagt til</p>
       <div class="previewWindow--image">
-        <img v-for="file in files" :src="file.url" @click="popOver(file)"/>
+        <!-- <img v-for="file in files" :src="file.url" @click="popOver(file)"/> -->
+        <div class="img" v-for="file in files" v-bind:style="{ 'background-image': `url(${file.url}`}" @click="popOver(file)"></div>
       </div>
     </div>
   </div>
@@ -98,13 +99,17 @@ export default {
 
   &--image {
     width: 100%;
+    margin-left: 0.1rem;
 
-    & img {
-      padding: 0.2rem;
-      width: calc(25% - 0.4rem);
-      height: auto;
+    & .img {
+      display: inline-block;
+      margin: 0.1rem;
+      width: calc(25% - 0.3rem);
+      height: 100px;
+      background-size: cover;
+      background-origin: content-box;
+      background-repeat: no-repeat;
     }
-    vertical-align: middle;
     // max-width: 250px;
   }
 }