mirror of
https://github.com/KevinMidboe/leifsopplevelser.git
synced 2025-10-29 09:40:21 +00:00
Input images have nice alignment with background image center. Also disabled more debugging outputs to the DOM.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user