Input images have nice alignment with background image center. Also disabled more debugging outputs to the DOM.

This commit is contained in:
2019-02-20 22:31:30 +01:00
parent 73f51f43bd
commit 4f17106e61
3 changed files with 17 additions and 12 deletions

View File

@@ -7,7 +7,7 @@
<event-form></event-form> <event-form></event-form>
</div> </div>
<div class="image-grid"> <!-- <div class="image-grid">
<grid-layout <grid-layout
ref="imageGrid" ref="imageGrid"
:layout.sync="layout" :layout.sync="layout"
@@ -36,13 +36,13 @@
</div> </div>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
</div> </div> -->
<!--
<div class="tools"> <div class="tools">
<button class="button" @click="reorder = !reorder" v-bind:class="{ active: reorder }">{{reorder ? 'submit' : 'reoder' }}</button> <button class="button" @click="reorder = !reorder" v-bind:class="{ active: reorder }">{{reorder ? 'submit' : 'reoder' }}</button>
</div> </div> -->
{{ reorder }} <!-- {{ reorder }} -->
</div> </div>
</template> </template>

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="form-item required" style="overflow: hidden"> <div class="form-item required" style="overflow: hidden">
{{ highlightedLocation }} <!-- {{ highlightedLocation }} -->
<label class="title">sted<span class="required">*</span></label> <label class="title">sted<span class="required">*</span></label>
<input <input

View File

@@ -6,7 +6,8 @@
<div class="previewWindow" v-if="files.length"> <div class="previewWindow" v-if="files.length">
<p class="previewWindow--title">{{ files.length }} bilder lagt til</p> <p class="previewWindow--title">{{ files.length }} bilder lagt til</p>
<div class="previewWindow--image"> <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> </div>
</div> </div>
@@ -98,13 +99,17 @@ export default {
&--image { &--image {
width: 100%; width: 100%;
margin-left: 0.1rem;
& img { & .img {
padding: 0.2rem; display: inline-block;
width: calc(25% - 0.4rem); margin: 0.1rem;
height: auto; width: calc(25% - 0.3rem);
height: 100px;
background-size: cover;
background-origin: content-box;
background-repeat: no-repeat;
} }
vertical-align: middle;
// max-width: 250px; // max-width: 250px;
} }
} }