mirror of
https://github.com/KevinMidboe/leifsopplevelser.git
synced 2025-10-29 01:30:22 +00:00
Split up form and fine tuned navigation within the form
This commit is contained in:
@@ -1,103 +1,42 @@
|
||||
<template>
|
||||
<div class="parent">
|
||||
<h1 class="slipping-left">registrer en ny opplevelse</h1>
|
||||
|
||||
<div class="container">
|
||||
<div class="cont2">
|
||||
<div class="form-item required">
|
||||
<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="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>
|
||||
</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>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-item required">
|
||||
<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">
|
||||
<li v-for="result in features" @click="choosePlace(result)">{{ result.place_name_no }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="form-item field textarea required">
|
||||
<label class="title" for="textarea4-field">love letter <span class="required">*</span></label>
|
||||
|
||||
<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="Registrer">
|
||||
</div>
|
||||
|
||||
<!-- <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>
|
||||
|
||||
<div class="hidden form-submission-html" data-submission-html=""></div>
|
||||
|
||||
</div>
|
||||
<h1 class="slipping-left">registrer en ny opplevelse</h1>
|
||||
|
||||
<event-form></event-form>
|
||||
</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="reorder"
|
||||
:is-resizable="false"
|
||||
:is-mirrored="false"
|
||||
:margin="[10, 10]"
|
||||
:use-css-transforms="true">
|
||||
|
||||
|
||||
<!-- <div style="
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
border: 1px solid red;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: -0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
">
|
||||
|
||||
</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="reorder"
|
||||
: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>
|
||||
<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>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tools">
|
||||
@@ -112,11 +51,13 @@
|
||||
import axios from 'axios'
|
||||
import VueGridLayout from 'vue-grid-layout';
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import EventForm from './EventForm'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GridLayout: VueGridLayout.GridLayout,
|
||||
GridItem: VueGridLayout.GridItem
|
||||
GridItem: VueGridLayout.GridItem,
|
||||
EventForm: EventForm
|
||||
},
|
||||
computed: {
|
||||
rowHeight: function() {
|
||||
@@ -127,12 +68,17 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locationInput: undefined,
|
||||
timeout: undefined,
|
||||
features: [],
|
||||
showAutocompleted: false,
|
||||
selectedPlace: undefined,
|
||||
imageGrid: undefined,
|
||||
title: '',
|
||||
dateStart: '',
|
||||
dateEnd: '',
|
||||
subtext: '',
|
||||
location: undefined,
|
||||
files: [],
|
||||
reorder: false,
|
||||
grid: {
|
||||
cols: { lg: 6, md: 5, sm: 4, xs: 3, xxs: 2 },
|
||||
@@ -173,7 +119,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
locationInput: function(newVal, preVal) {
|
||||
location: function(newVal, preVal) {
|
||||
console.log('input changed')
|
||||
let place = this.selectedPlace ? this.selectedPlace.place_name_no : false
|
||||
|
||||
@@ -187,6 +133,35 @@ export default {
|
||||
this.imageGrid = this.$refs.imageGrid;
|
||||
},
|
||||
methods: {
|
||||
processForm: function() {
|
||||
let data = {
|
||||
title: this.title,
|
||||
dateStart: this.dateStart,
|
||||
dateEnd: this.dateEnd,
|
||||
subtext: this.subtext,
|
||||
locationName: this.location,
|
||||
geoposition: this.selectedPlace.geometry.coordinates,
|
||||
mapboxData: this.selectedPlace
|
||||
}
|
||||
|
||||
fetch('http://localhost:5000/api/adventure', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
// axios.post('localhost:5000/api/adventure', {
|
||||
// body: JSON.stringify(data)
|
||||
// })
|
||||
.then((resp) => console.log('response from posting to server:', resp))
|
||||
.catch((error) => console.error('error from post request:', error))
|
||||
},
|
||||
processFile(event) {
|
||||
this.files = event.target.files;
|
||||
console.log('files', this.files)
|
||||
},
|
||||
gridSettings() {
|
||||
let breakpoint = this.$refs.imageGrid.lastBreakpoint;
|
||||
let currentColCount = this.grid.cols[breakpoint];
|
||||
@@ -200,7 +175,7 @@ export default {
|
||||
},
|
||||
choosePlace(place) {
|
||||
console.log('Chooosen');
|
||||
this.locationInput = place.place_name_no;
|
||||
this.location = place.place_name_no;
|
||||
this.selectedPlace = place;
|
||||
this.showAutocompleted = false;
|
||||
},
|
||||
@@ -211,7 +186,7 @@ export default {
|
||||
this.showAutocompleted = true;
|
||||
},
|
||||
call() {
|
||||
axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.locationInput}.json`, {
|
||||
axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.location}.json`, {
|
||||
params: {
|
||||
access_token: 'pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w',
|
||||
autocomplete: true,
|
||||
@@ -288,7 +263,7 @@ export default {
|
||||
// background-color: green;
|
||||
|
||||
display: block;
|
||||
width: 90vw;
|
||||
width: 70vw;
|
||||
margin: 4rem auto;
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
@@ -300,224 +275,15 @@ export default {
|
||||
|
||||
.container {
|
||||
color: rgba(0, 0, 0, 0.701961);
|
||||
display: block;
|
||||
// margin: 0 auto;
|
||||
font-family: 'Proxima Nova';
|
||||
margin-top: 3rem;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
height: 502px;
|
||||
letter-spacing: normal;
|
||||
line-height: 22.399999618530273px;
|
||||
padding-right: 0px;
|
||||
width: 100%;
|
||||
max-width: 612px;
|
||||
|
||||
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.cont2 {
|
||||
box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
|
||||
clear: both;
|
||||
color: rgba(0, 0, 0, 0.701961);
|
||||
display: block;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
height: 485px;
|
||||
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;
|
||||
}
|
||||
|
||||
.form-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;
|
||||
}
|
||||
}
|
||||
|
||||
.field-autocompleted {
|
||||
// width: 591.8px;
|
||||
width: calc(100% - 1.26rem);
|
||||
// height: 200px;
|
||||
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;
|
||||
}
|
||||
|
||||
& 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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>
|
||||
317
src/components/EventForm.vue
Normal file
317
src/components/EventForm.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<form class="form" @submit.prevent="">
|
||||
<!-- <form class="form" @submit.prevent="processForm"> -->
|
||||
<div class="form-item required">
|
||||
<label class="title">tittel <span class="required">*</span></label>
|
||||
<input class="field-element" v-model="title" type="text" :tabindex="1">
|
||||
</div>
|
||||
|
||||
<fieldset class="form-item">
|
||||
<div class="title">dato <span class="required">*</span></div>
|
||||
<div class="field first-name">
|
||||
<label class="caption">
|
||||
<input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
|
||||
fra dato
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field last-name">
|
||||
<label class="caption">
|
||||
<input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
|
||||
til dato
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<form-element-location @newLocation="setLocation"></form-element-location>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="title">love letter <span class="required">*</span></label>
|
||||
|
||||
<textarea v-model="subtext"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label class="title">last opp bilder</label>
|
||||
<input id="file-upload" type="file" @change="processFile" multiple>
|
||||
{{ files.length }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button" type="submit">Legg til</button>
|
||||
</div>
|
||||
|
||||
<!-- <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>
|
||||
|
||||
<div class="hidden form-submission-html" data-submission-html=""></div>
|
||||
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import FormElementLocation from './form/FormElementLocation'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormElementLocation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
dateStart: '',
|
||||
dateEnd: '',
|
||||
chosenLocation: undefined,
|
||||
subtext: '',
|
||||
files: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
LocationName() {
|
||||
return this.chosenLocation ? this.chosenLocation.place_name_no : undefined;
|
||||
},
|
||||
LocationGeoposition() {
|
||||
return this.chosenLocation ? this.chosenLocation.geometry.coordinates : undefined;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLocation(inputLocation) {
|
||||
console.log('detected location changed')
|
||||
console.log('inputLocation', inputLocation)
|
||||
this.chosenLocation = inputLocation;
|
||||
},
|
||||
processForm: function() {
|
||||
let data = {
|
||||
title: this.title,
|
||||
dateStart: this.dateStart,
|
||||
dateEnd: this.dateEnd,
|
||||
subtext: this.subtext,
|
||||
locationName: this.LocationName,
|
||||
geoposition: this.LocationGeoposition,
|
||||
mapboxData: this.chosenLocation
|
||||
}
|
||||
|
||||
fetch('http://localhost:5000/api/adventure', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
// axios.post('localhost:5000/api/adventure', {
|
||||
// body: JSON.stringify(data)
|
||||
// })
|
||||
.then((resp) => console.log('response from posting to server:', resp))
|
||||
.catch((error) => console.error('error from post request:', error))
|
||||
},
|
||||
processFile(event) {
|
||||
this.files = event.target.files;
|
||||
console.log('files', this.files)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
-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>
|
||||
@@ -9,8 +9,12 @@
|
||||
<div class="gallery">
|
||||
<div class="gallery--header">
|
||||
<h1>Topptur til gaustadtoppen æøå {{ id }}</h1>
|
||||
<p class="gallery--info">{{ eventDate.from }} - {{ eventDate.until }}</p>
|
||||
<p class="gallery--info">{{ eventLocation }}. <a href="#">Se kart</a></p>
|
||||
<div class="gallery--info">
|
||||
<p>{{ eventDate.from }} - {{ eventDate.until }}</p>
|
||||
<p>{{ eventLocation }}. <a href="#">Se kart</a></p>
|
||||
|
||||
<p>{{ subtext }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <map-view :cords="cords"></map-view> -->
|
||||
@@ -34,7 +38,8 @@ export default {
|
||||
return {
|
||||
eventLocation: 'Oslo, Gardermoen, Norge',
|
||||
startDate: undefined,
|
||||
endDate: undefined
|
||||
endDate: undefined,
|
||||
subtext: 'On November 1, 2018, we embarked on our tour with Triathalon. Thank you so much to everyone who came to see us, for buying our merch, for saying hello after the shows, to the amazing hard-working people at the venues, and of course to our team + Live Nation, Ones to Watch, for booking us on our favorite tour this year. And thank you to Claud, Girl Ultra and Kevin Krauter for playing these shows with us. \n\n Here are some of our favorite moments captured by one of our favorite people, Meghan Cummings (@meghancummings). '
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -49,29 +54,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popover {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding: 2.1rem;
|
||||
// padding: 2.1rem;
|
||||
|
||||
&--header {
|
||||
padding-bottom: 4rem;
|
||||
padding-bottom: 1rem;
|
||||
// background-color: NavajoWhite;
|
||||
}
|
||||
|
||||
&--info {
|
||||
font-family: 'Proxima Nova';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6rem;
|
||||
letter-spacing: 0rem;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
color: rgba(0, 0, 0, .8);
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0.8rem;
|
||||
@@ -86,6 +82,13 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--subtext {
|
||||
font-size: 15px;
|
||||
line-height: 1.6rem;
|
||||
letter-spacing: 0rem;
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
|
||||
@@ -107,6 +107,6 @@ export default {
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -10,7 +10,10 @@
|
||||
|
||||
<Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
|
||||
|
||||
<event-page style="height: 100%; overflow: auto;"></event-page>
|
||||
<div class="container">
|
||||
<h1 class="header">leifs opplevelser</h1>
|
||||
<event-page style="height: 100%; overflow: auto;"></event-page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,10 +56,24 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style language="scss">
|
||||
<style language="scss" scoped>
|
||||
|
||||
.header {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 1029px;
|
||||
|
||||
margin: 25px auto 85px;
|
||||
padding: 4em;
|
||||
max-width: 888px;
|
||||
/*max-width: 100%;*/
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -85,8 +85,8 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
max-height: 92vh;
|
||||
max-width: 92vw;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
max-width: 95vw;
|
||||
|
||||
342
src/components/form/FormElementLocation.vue
Normal file
342
src/components/form/FormElementLocation.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="form-item required" style="overflow: hidden">
|
||||
{{ highlightedLocation }}
|
||||
|
||||
<label class="title">sted<span class="required">*</span></label>
|
||||
<input
|
||||
v-model="locationInput"
|
||||
@keyup.down="highlightNext"
|
||||
@keyup.enter="getMapboxPlaces"
|
||||
@click="show"
|
||||
:tabindex="4"
|
||||
ref="listInput"
|
||||
type="text">
|
||||
|
||||
<ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && resultMapboxLocations.length > 1">
|
||||
<!-- :style="{ selected: highlightedLocation === index }" -->
|
||||
<li
|
||||
v-for="(location, index) in resultMapboxLocations"
|
||||
@click="locationSelected(location)"
|
||||
:tabindex="5 + index"
|
||||
@keyup.enter="locationSelected(location)"
|
||||
@keyup.down="highlightNext"
|
||||
@keyup.up="highlightPrev"
|
||||
ref="listElement">
|
||||
|
||||
{{ location.place_name_no }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined,
|
||||
resultMapboxLocations: [],
|
||||
showAutocompleted: false,
|
||||
chosenLocation: undefined,
|
||||
locationInput: undefined,
|
||||
highlightedLocation: -1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
locationInput: function(newVal, preVal) {
|
||||
if (newVal === '') {
|
||||
this.resultMapboxLocations = []
|
||||
return
|
||||
}
|
||||
console.log('input changed')
|
||||
let place = this.chosenLocation ? this.LocationName : false
|
||||
|
||||
if (place !== newVal) {
|
||||
this.debounce(this.getMapboxPlaces)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
LocationName() {
|
||||
return this.chosenLocation ? this.chosenLocation.place_name_no : undefined;
|
||||
},
|
||||
tabIndex(index) {
|
||||
return 4 + index;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
highlightNext() {
|
||||
let curr = this.highlightedLocation;
|
||||
const max = this.resultMapboxLocations.length -1;
|
||||
|
||||
if (curr < max) {
|
||||
curr++
|
||||
console.log('curr', curr, this.$refs.listElement[curr])
|
||||
this.$refs.listElement[curr].focus({preventScroll: true})
|
||||
|
||||
this.highlightedLocation = curr;
|
||||
return
|
||||
}
|
||||
|
||||
this.$refs.listInput.focus({preventScroll: true})
|
||||
this.highlightedLocation = -1;
|
||||
},
|
||||
highlightPrev() {
|
||||
let curr = this.highlightedLocation;
|
||||
|
||||
if (curr > 0) {
|
||||
curr--
|
||||
console.log('curr', curr, this.$refs.listElement[curr])
|
||||
this.$refs.listElement[curr].focus()
|
||||
|
||||
this.highlightedLocation = curr;
|
||||
return
|
||||
}
|
||||
|
||||
this.$refs.listInput.focus()
|
||||
this.highlightedLocation = -1;
|
||||
},
|
||||
debounce(fn, time=1000) {
|
||||
const functionCall = () => fn.apply(this, arguments);
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(functionCall, time);
|
||||
},
|
||||
locationSelected(place) {
|
||||
console.log('Chosen');
|
||||
this.chosenLocation = place;
|
||||
this.locationInput = this.LocationName
|
||||
this.showAutocompleted = false;
|
||||
this.$emit('newLocation', place)
|
||||
},
|
||||
hide() {
|
||||
this.showAutocompleted = false;
|
||||
},
|
||||
show() {
|
||||
this.showAutocompleted = true;
|
||||
},
|
||||
getMapboxPlaces() {
|
||||
axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.locationInput}.json`, {
|
||||
params: {
|
||||
access_token: 'pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w',
|
||||
autocomplete: true,
|
||||
language: 'no'
|
||||
}
|
||||
|
||||
})
|
||||
.then((resp) => {
|
||||
this.resultMapboxLocations = resp.data.features;
|
||||
this.showAutocompleted = true;
|
||||
})
|
||||
console.log('CALLING')
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
ClickOutside
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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, &:focus {
|
||||
background-color: #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
border-color: rgb(204, 204, 204);
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
& .selected {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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>
|
||||
@@ -37,10 +37,11 @@ h1 {
|
||||
font-family: 'Ambroise std demi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
font-size: 36px;
|
||||
font-size: 34px;
|
||||
text-transform: lowercase;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
letter-spacing: .01em;
|
||||
color: #cb0b0b;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
Reference in New Issue
Block a user