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>
</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>

View File

@@ -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

View File

@@ -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;
}
}