KevinMidboe/leifsopplevelser
1
0
Fork 0
mirror of https://github.com/KevinMidboe/leifsopplevelser.git synced 2025-10-29 17:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vue grid system for images

Browse Source
This commit is contained in:
Kevin
2019-02-13 23:51:55 +01:00
parent 869e63f166
commit fdc2f096c9
6 changed files with 210 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

150
src/components/EditEvent.vue
View File

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

44
src/components/EventPage.vue
View File

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

1
src/components/Home.vue
View File

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

1
src/components/Popover.vue
View File

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

25
yarn.lock
View File

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