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

So much has happend. A lot of cleanup, now popover gets the full album list and can iterate over it manually. We have a store. Images on upload have popover and are previewed under upload button.

Browse Source
This commit is contained in:
Kevin
2019-02-20 21:46:06 +01:00
parent 0bcf2e92f5
commit 73f51f43bd
21 changed files with 435 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Leifsopplevelser</title><link href=/leifsopplevelser/static/css/app.06c3d16bdfd8f54218ea34dc76087238.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/leifsopplevelser/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/leifsopplevelser/static/js/vendor.1dd08ff12fd004ad0169.js></script><script type=text/javascript src=/leifsopplevelser/static/js/app.bd295510d8bf60f6eba8.js></script></body></html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Leifsopplevelser</title><link href=/leifsopplevelser/static/css/app.06c3d16bdfd8f54218ea34dc76087238.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/leifsopplevelser/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/leifsopplevelser/static/js/vendor.1f21b90567d3da7fffd9.js></script><script type=text/javascript src=/leifsopplevelser/static/js/app.48eebc047293f1f07bda.js></script></body></html>

2
docs/static/js/app.48eebc047293f1f07bda.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/app.48eebc047293f1f07bda.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
docs/static/js/app.bd295510d8bf60f6eba8.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/app.bd295510d8bf60f6eba8.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/static/js/manifest.2ae2e69a05c33dfc65f8.js.map vendored
View File

@@ -1 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap 353c1c370f5c2dfefcf3"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 353c1c370f5c2dfefcf3"],"sourceRoot":""} {"version":3,"sources":["webpack:///webpack/bootstrap 0e1695a7aa4d9b0c8094"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 0e1695a7aa4d9b0c8094"],"sourceRoot":""}

1
docs/static/js/vendor.1dd08ff12fd004ad0169.js.map vendored
View File

File diff suppressed because one or more lines are too long

16
docs/static/js/vendor.1dd08ff12fd004ad0169.js → docs/static/js/vendor.1f21b90567d3da7fffd9.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/vendor.1f21b90567d3da7fffd9.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

30
src/App.vue
View File

@@ -1,28 +1,26 @@
<template> <template>
<div id="app" class="container"> <div id="app" class="container">
<router-view /> <router-view />
<Popover class="popup" v-if="popoverState"></Popover>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import Home from '@/components/Home.vue' import Popover from '@/components/Popover'
import routes from '@/routes' import routes from '@/routes'
import { mapGetters, mapActions } from 'vuex'
export default { export default {
name: 'App', name: 'App',
components: { components: { Popover },
Home computed: mapGetters([
}, 'popoverState',
data() { ]),
return { }
loaded: false
}
},
methods: {
}
}
</script> </script>
<style lang="scss"> <style lang="scss">

187
src/components/EventForm.vue
View File

@@ -31,11 +31,8 @@
<textarea v-model="subtext"></textarea> <textarea v-model="subtext"></textarea>
</div> </div>
<div class="form-item">
<label class="title">last opp bilder</label> <form-element-upload @newFiles="setFiles"></form-element-upload>
<input id="file-upload" type="file" @change="processFile" multiple>
{{ files.length }}
</div>
<div> <div>
<button class="button" type="submit">Legg til</button> <button class="button" type="submit">Legg til</button>
@@ -57,10 +54,12 @@
import axios from 'axios' import axios from 'axios'
import ClickOutside from 'vue-click-outside' import ClickOutside from 'vue-click-outside'
import FormElementLocation from './form/FormElementLocation' import FormElementLocation from './form/FormElementLocation'
import FormElementUpload from './form/FormElementUpload'
export default { export default {
components: { components: {
FormElementLocation FormElementLocation,
FormElementUpload
}, },
data() { data() {
return { return {
@@ -68,8 +67,8 @@ export default {
dateStart: '', dateStart: '',
dateEnd: '', dateEnd: '',
chosenLocation: undefined, chosenLocation: undefined,
chosenFiles: undefined,
subtext: '', subtext: '',
files: [],
} }
}, },
computed: { computed: {
@@ -81,10 +80,13 @@ export default {
} }
}, },
methods: { methods: {
setLocation(inputLocation) { setLocation(location) {
console.log('detected location changed') console.log('detected location changed')
console.log('inputLocation', inputLocation) console.log('inputLocation', location)
this.chosenLocation = inputLocation; this.chosenLocation = location;
},
setFiles(files) {
this.chosenFiles = files;
}, },
processForm: function() { processForm: function() {
let data = { let data = {
@@ -111,177 +113,12 @@ export default {
.then((resp) => console.log('response from posting to server:', resp)) .then((resp) => console.log('response from posting to server:', resp))
.catch((error) => console.error('error from post request:', error)) .catch((error) => console.error('error from post request:', error))
}, },
processFile(event) {
this.files = event.target.files;
console.log('files', this.files)
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form {
box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
clear: both;
color: rgba(0, 0, 0, 0.701961);
letter-spacing: normal;
line-height: 22.399999618530273px;
outline-color: rgba(0, 0, 0, 0.701961);
outline-style: none;
outline-width: 0px;
padding: 0px 15px 17px;
position: relative;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
&-item {
border-width: 0px;
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
line-height: 17px;
margin: 0 0 1rem -12px;
min-width: min-content;
padding: 0px;
& .title {
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
font-style: normal;
font-weight: 300;
height: 17px;
letter-spacing: normal;
line-height: 17px;
}
& .field {
display: block;
float: left;
// margin-bottom: 24px;
position: relative;
width: 290.9375px;
@media screen and (max-width: 650px) {
max-width: 40vw;
min-width: 120px;
}
&:last-of-type {
margin-left: 11px;
}
& .caption {
cursor: pointer;
display: inline;
font-family: 'Proxima Nova';
font-size: 12px;
font-style: normal;
font-weight: 300;
height: auto;
letter-spacing: normal;
line-height: 14px;
}
}
}
& input {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: rgb(250, 250, 250);
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
box-sizing: border-box;
cursor: auto;
display: inline-block;
height: 42px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
line-height: 16px;
margin: 6px 0 4px;
padding: 12px;
width: 100%;
}
& textarea {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
border-color: rgb(204, 204, 204);
border-left-radius: 2px;
border-right-radius: 2px;
border-style: solid;
border-width: 1px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
box-sizing: border-box;
line-height: 14px;
margin: 6px 0px 4px;
min-height: 100px;
overflow-x: auto;
overflow-y: auto;
padding: 12px;
resize: vertical;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: pre-wrap;
width: 100%;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: horizontal-tb;
}
}
.field-autocompleted {
width: calc(100% - 1.26rem);
position: absolute;
padding: 0;
margin: 0;
margin-top: -6px;
background-color: white;
li {
list-style: none;
height: 2.3rem;
line-height: 2.3rem;
padding-left: 0.5rem;
white-space: nowrap;
overflow: hidden;
&:hover {
background-color: #e6e6e6;
cursor: pointer;
}
}
border-color: rgb(204, 204, 204);
border-radius: 2px;
border-style: solid;
border-width: 1px;
}
.button { .button {

33
src/components/Gallery.vue
View File

@@ -2,7 +2,7 @@
<div class="gallery-container"> <div class="gallery-container">
<div v-for="(item, key) in gallery"> <div v-for="(item, key) in gallery">
<gallery-image v-if="item.type === 'image'" :image="item" @click="imageSelected"></gallery-image> <gallery-image v-if="item.type === 'image'" :image="item" :index="key" @click="imageSelected"></gallery-image>
<gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text>
</div> </div>
</div> </div>
@@ -12,6 +12,9 @@
import GalleryImage from '@/components/GalleryImage' import GalleryImage from '@/components/GalleryImage'
import GalleryText from '@/components/GalleryText' import GalleryText from '@/components/GalleryText'
import { mapGetters } from 'vuex'
import store from '@/store'
export default { export default {
name: 'Gallery-Item', name: 'Gallery-Item',
components: { GalleryImage, GalleryText }, components: { GalleryImage, GalleryText },
@@ -64,12 +67,20 @@ export default {
} }
}, },
created() { created() {
eventHub.$on('iteratePopoverImage', this.iteratePopoverImage) this.setPopoverAlbum(this.gallery)
}, },
methods: { watch: {
gallery: function (val) {
this.setPopoverAlbum(val)
}
},
methods: {
setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
imageSelected(image) { imageSelected(image) {
console.log('selected image', image)
this.selected = image; this.selected = image;
console.log(this.selected.name) // store.dispatch('incrementPopoverImage', this.selectedIndexInGallery())
}, },
selectedIndexInGallery() { selectedIndexInGallery() {
const gallery = this.gallery; const gallery = this.gallery;
@@ -82,20 +93,6 @@ export default {
} }
return -1; return -1;
}, },
iteratePopoverImage(direction) {
let i = this.selectedIndexInGallery() + direction;
// Overflow handler
if (i >= this.gallery.length) {
i = 0;
} else if (i == -1) {
i = this.gallery.length - 1;
}
let image = this.gallery[i];
eventHub.$emit('openPopover', image);
this.selected = image;
}
} }
} }
</script> </script>

24
src/components/GalleryImage.vue
View File

@@ -1,31 +1,31 @@
<template> <template>
<div> <div>
<img :src="image.url" @click="popOver(image)"/> {{ index }}
<img :src="image.url" @click="popover(image)"/>
<p>{{ image.name }}</p> <p>{{ image.name }}</p>
</div> </div>
</template> </template>
<script> <script>
import store from '@/store'
export default { export default {
components: {
},
props: { props: {
image: { image: {
type: Object, type: Object,
required: true required: true
},
index: {
type: Number,
} }
}, },
data() {
return {
}
},
created() {},
beforeMount() {},
methods: { methods: {
popOver(image) { showPopover: () => store.dispatch('showPopover'),
eventHub.$emit('openPopover', image); setPopoverAlbumIndex: (index) => store.dispatch('setPopoverAlbumIndex', index),
popover(image) {
this.setPopoverAlbumIndex(this.index)
this.showPopover()
this.$emit('click', image) this.$emit('click', image)
} }
} }

65
src/components/Home.vue
View File

@@ -6,10 +6,6 @@
{{ date }} --> {{ date }} -->
<!-- <Header></Header> --> <!-- <Header></Header> -->
<Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
<div class="container"> <div class="container">
<h1 class="header">leifs opplevelser</h1> <h1 class="header">leifs opplevelser</h1>
<event-page style="height: 100%; overflow: auto;"></event-page> <event-page style="height: 100%; overflow: auto;"></event-page>
@@ -18,42 +14,37 @@
</template> </template>
<script> <script>
import Header from '@/components/Header' import Header from '@/components/Header'
import EventPage from '@/components/EventPage' import EventPage from '@/components/EventPage'
import Popover from '@/components/Popover'
export default { export default {
components: { Header, EventPage, Popover }, components: { Header, EventPage },
data() { data() {
return { return {
title: 'Leifs opplevelser', title: 'Leifs opplevelser',
date: undefined, date: undefined,
bool: false, bool: false,
popoverImage: undefined,
popoverShow: false }
} },
},
created() { methods: {
this.date = new Date(); // openPopover(url) {
eventHub.$on('openPopover', this.openPopover) // console.log('popover received with', url)
eventHub.$on('closePopover', this.closePopover) // this.popoverImage = url;
}, // this.popoverShow = true;
methods: { // document.body.classList.add('disableScroll');
openPopover(image) { // },
this.popoverImage = image; // closePopover(url) {
this.popoverShow = true; // this.popoverShow = false;
document.body.classList.add('disableScroll'); // document.body.classList.remove('disableScroll');
}, // },
closePopover(image) { navigate: function() {
this.popoverShow = false; console.log(this.$router)
document.body.classList.remove('disableScroll'); this.$router.push('/edit');
},
navigate: function() {
console.log(this.$router)
this.$router.push('/edit');
}
} }
} }
}
</script> </script>
<style language="scss" scoped> <style language="scss" scoped>

32
src/components/Popover.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards"> <div class="popover" @click="hidePopover" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
<div class="popover-content"> <div class="popover-content">
<div class="image-container"> <div class="image-container">
<img :src="image.url" /> <img :src="album[index].url" />
<div class="other-elements"> <div class="other-elements">
<p>There is something here</p> <p>There is something here</p>
@@ -21,37 +21,31 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import store from '@/store'
export default { export default {
components: { computed: {
album: () => store.getters.popoverAlbum,
}, index: () => store.getters.popoverAlbumIndex,
props: {
image: {
type: Object,
required: true,
}
}, },
created() { created() {
window.addEventListener('keyup', this.arrowNavigation) window.addEventListener('keyup', this.arrowNavigation)
}, },
methods: { methods: {
forwards() { hidePopover: () => store.dispatch('hidePopover'),
eventHub.$emit('iteratePopoverImage', 1) forwards: () => store.dispatch('incrementPopoverImage'),
}, backwards: () => store.dispatch('decrementPopoverImage'),
backwards() {
eventHub.$emit('iteratePopoverImage', -1)
},
arrowNavigation(event) { arrowNavigation(event) {
if (event.key === 'ArrowLeft') { if (event.key === 'ArrowLeft') {
this.backwards() this.backwards()
} else if (event.key === 'ArrowRight') { } else if (event.key === 'ArrowRight') {
this.forwards() this.forwards()
} else if (event.key === 'Escape') {
this.hidePopover()
} }
}, },
close() {
eventHub.$emit('closePopover')
},
beforeDestroy() { beforeDestroy() {
window.removeEventListener('keyup') window.removeEventListener('keyup')
} }

165
src/components/form/FormElementLocation.vue
View File

@@ -141,139 +141,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form {
box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
clear: both;
color: rgba(0, 0, 0, 0.701961);
letter-spacing: normal;
line-height: 22.399999618530273px;
outline-color: rgba(0, 0, 0, 0.701961);
outline-style: none;
outline-width: 0px;
padding: 0px 15px 17px;
position: relative;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
&-item {
border-width: 0px;
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
line-height: 17px;
margin: 0 0 1rem -12px;
min-width: min-content;
padding: 0px;
& .title {
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
font-style: normal;
font-weight: 300;
height: 17px;
letter-spacing: normal;
line-height: 17px;
}
& .field {
display: block;
float: left;
// margin-bottom: 24px;
position: relative;
width: 290.9375px;
@media screen and (max-width: 650px) {
max-width: 40vw;
min-width: 120px;
}
&:last-of-type {
margin-left: 11px;
}
& .caption {
cursor: pointer;
display: inline;
font-family: 'Proxima Nova';
font-size: 12px;
font-style: normal;
font-weight: 300;
height: auto;
letter-spacing: normal;
line-height: 14px;
}
}
}
& input {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: rgb(250, 250, 250);
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
box-sizing: border-box;
cursor: auto;
display: inline-block;
height: 42px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
line-height: 16px;
margin: 6px 0 4px;
padding: 12px;
width: 100%;
}
& textarea {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
border-color: rgb(204, 204, 204);
border-left-radius: 2px;
border-right-radius: 2px;
border-style: solid;
border-width: 1px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
box-sizing: border-box;
line-height: 14px;
margin: 6px 0px 4px;
min-height: 100px;
overflow-x: auto;
overflow-y: auto;
padding: 12px;
resize: vertical;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: pre-wrap;
width: 100%;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: horizontal-tb;
}
}
.field-autocompleted { .field-autocompleted {
width: calc(100% - 1.26rem); width: calc(100% - 1.26rem);
@@ -307,36 +174,4 @@ export default {
} }
} }
.button {
-webkit-appearance: none;
-webkit-backface-visibility: none;
background-color: rgb(39, 39, 39);
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;
font-weight: 600;
height: 42px;
letter-spacing: 1px;
line-height: 14px;
margin-left: -10px;
padding: 0 1rem;
text-align: center;
text-decoration: none;
text-shadow: none;
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;
}
</style> </style>

111
src/components/form/FormElementUpload.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div class="form-item">
<label class="title">last opp bilder</label>
<input id="file-upload" type="file" @change="processFile" multiple>
<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)"/>
</div>
</div>
</div>
</template>
<script>
import store from '@/store'
export default {
data() {
return {
files: [],
previewFiles: []
}
},
watch: {
files() {
this.$emit('newFiles', this.files)
}
},
methods: {
setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
setPopoverAlbumIndex: (index) => store.dispatch('setPopoverAlbumIndex', index),
showPopover: () => store.dispatch('showPopover'),
processFile(event) {
const files = event.target.files;
let album = []
for (var i = files.length - 1; i >= 0; i--) {
album.push({
url: URL.createObjectURL(files[i]),
index: i,
})
}
album.reverse()
this.setPopoverAlbum(album)
this.files = album;
},
popOver(image) {
console.log('popover called')
this.setPopoverAlbumIndex(image.index)
this.showPopover()
// EventBus.$emit('openPopover', image);
}
}
}
</script>
<style lang="scss" scoped>
.previewWindow {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: #fafafa;
border: 1px solid #cccccc;
border-radius: 3px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: auto;
display: inline-block;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
line-height: 16px;
width: 100%;
margin-top: -6px;
border-top: unset;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
&--title {
padding-left: 0.6rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
margin-bottom: 0.8rem;
width: calc(100% - 0.6rem);
font-size: 1rem;
border-bottom: 1px solid #cccccc;
}
&--image {
width: 100%;
& img {
padding: 0.2rem;
width: calc(25% - 0.4rem);
height: auto;
}
vertical-align: middle;
// max-width: 250px;
}
}
</style>

2
src/main.js
View File

@@ -6,6 +6,7 @@ import router from './routes'
import axios from 'axios' import axios from 'axios'
import BootstrapVue from 'bootstrap-vue' import BootstrapVue from 'bootstrap-vue'
import Vue2TouchEvents from 'vue2-touch-events' import Vue2TouchEvents from 'vue2-touch-events'
import store from './store'
Vue.config.productionTip = false Vue.config.productionTip = false
@@ -16,6 +17,7 @@ new Vue({
el: '#app', el: '#app',
axios, axios,
router, router,
store,
BootstrapVue, BootstrapVue,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'

133
src/scss/form.scss Normal file
View File

@@ -0,0 +1,133 @@
.form {
box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
clear: both;
color: rgba(0, 0, 0, 0.701961);
letter-spacing: normal;
line-height: 22.399999618530273px;
outline-color: rgba(0, 0, 0, 0.701961);
outline-style: none;
outline-width: 0px;
padding: 0px 15px 17px;
position: relative;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
&-item {
border-width: 0px;
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
line-height: 17px;
margin: 0 0 1rem -12px;
min-width: min-content;
padding: 0px;
& .title {
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
font-style: normal;
font-weight: 300;
height: 17px;
letter-spacing: normal;
line-height: 17px;
}
& .field {
display: block;
float: left;
// margin-bottom: 24px;
position: relative;
width: 290.9375px;
@media screen and (max-width: 650px) {
max-width: 40vw;
min-width: 120px;
}
&:last-of-type {
margin-left: 11px;
}
& .caption {
cursor: pointer;
display: inline;
font-family: 'Proxima Nova';
font-size: 12px;
font-style: normal;
font-weight: 300;
height: auto;
letter-spacing: normal;
line-height: 14px;
}
}
}
& input {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: rgb(250, 250, 250);
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
box-sizing: border-box;
cursor: auto;
display: inline-block;
height: 42px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
line-height: 16px;
margin: 6px 0 4px;
padding: 12px;
width: 100%;
}
& textarea {
-webkit-appearance: none;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
border-color: rgb(204, 204, 204);
border-left-radius: 2px;
border-right-radius: 2px;
border-style: solid;
border-width: 1px;
font-family: 'Proxima Nova';
letter-spacing: normal;
font-size: 14px;
box-sizing: border-box;
line-height: 14px;
margin: 6px 0px 4px;
min-height: 100px;
overflow-x: auto;
overflow-y: auto;
padding: 12px;
resize: vertical;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: pre-wrap;
width: 100%;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: horizontal-tb;
}
}

1
src/scss/main.scss
View File

@@ -1,4 +1,5 @@
@import './typography.scss'; @import './typography.scss';
@import './form.scss';
// @import 'bootstrap/dist/css/bootstrap.css'; // @import 'bootstrap/dist/css/bootstrap.css';
// @import 'bootstrap-vue/dist/bootstrap-vue.css'; // @import 'bootstrap-vue/dist/bootstrap-vue.css';

77
src/store.js Normal file
View File

@@ -0,0 +1,77 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
popover: false,
popoverAlbum: [],
popoverAlbumIndex: 0,
}
const mutations = {
showPopover (state) {
state.popover = true;
},
hidePopover (state) {
state.popover = false;
},
setPopoverAlbum (state, album) {
state.popoverAlbum = album;
},
setPopoverAlbumIndex (state, index) {
state.popoverAlbumIndex = index;
},
incrementPopoverImage (state) {
let index = state.popoverAlbumIndex;
index++
console.log('Setting popover index:', index)
if (index > state.popoverAlbum.length - 1) {
index = 0;
}
state.popoverAlbumIndex = index;
},
decrementPopoverImage (state) {
let index = state.popoverAlbumIndex;
index--
console.log('Setting popover index:', index)
if (index < 0) {
index = state.popoverAlbum.length - 1;
}
state.popoverAlbumIndex = index;
}
}
const actions = {
showPopover: ({ commit }) => commit('showPopover'),
hidePopover: ({ commit }) => commit('hidePopover'),
setPopoverAlbum: ({ commit }, payload) => commit('setPopoverAlbum', payload),
setPopoverAlbumIndex: ({ commit }, payload) => commit('setPopoverAlbumIndex', payload),
incrementPopoverImage: ({ commit }) => commit('incrementPopoverImage'),
decrementPopoverImage: ({ commit }) => commit('decrementPopoverImage'),
}
const getters = {
popoverState: state => state.popover,
popoverAlbum: state => state.popoverAlbum,
popoverAlbumIndex: state => state.popoverAlbumIndex,
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})