Event page and started setting up edit/create-new event page.

This commit is contained in:
2019-02-12 18:38:56 +01:00
parent 40e5941bd2
commit e57fdd2c5e
19 changed files with 645 additions and 16 deletions

2
.gitignore vendored
View File

@@ -1,4 +1,6 @@
dist
.DS_Store
*/.DS_Store
node_modules
package-lock.json
yarn-error.log

View File

@@ -18,6 +18,7 @@
"vue": "^2.5.2",
"vue-axios": "^2.1.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2",
"vuex": "^3.0.1"
},
"devDependencies": {

View File

@@ -1,6 +1,6 @@
<template>
<div id="app" class="container">
<home></home>
<router-view />
</div>
</template>
@@ -8,6 +8,7 @@
<script>
import Vue from 'vue'
import Home from '@/components/Home.vue'
import routes from '@/routes'
export default {
name: 'App',

Binary file not shown.

BIN
src/assets/fonts/nova.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,277 @@
<template>
<div class="parent">
<h1>add new event</h1>
<div class="container">
<div class="cont2" data-block-type="9">
<div class="sqs-block-content">
<div class="form-wrapper">
<div class="form-inner-wrapper">
<form>
<div class="field-list clear">
<fieldset class="form-item fields name required">
<div class="title">name <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="text" spellcheck="false" maxlength="30" data-title="Last">
Til Dato</label>
</div>
</fieldset>
<div class="form-item field email required">
<label class="title" for="email2-field">email address <span class="required">*</span></label>
<input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false">
</div>
<div class="form-item field text required">
<label class="title" for="text3-field">subject <span class="required">*</span></label>
<input class="field-element text" type="text">
</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>
</div>
<div class="form-button-wrapper form-button-wrapper--align-left">
<input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
</form>
</div>
</div>
</div></div></div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
created() {},
beforeMount() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
.parent {
display: block;
width: 900px;
margin: 4rem auto;
}
.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: 612px;
}
.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-bottom: 17px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
position: relative;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
width: 582px;
}
.form-item {
border-bottom-color: rgba(0, 0, 0, 0.701961);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgba(0, 0, 0, 0.701961);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgba(0, 0, 0, 0.701961);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgba(0, 0, 0, 0.701961);
border-top-style: none;
border-top-width: 0px;
color: rgba(0, 0, 0, 0.701961);
display: block;
font-family: 'Proxima Nova';
font-size: 14px;
font-style: normal;
font-weight: 300;
height: 110px;
letter-spacing: normal;
line-height: 17px;
margin-bottom: 0px;
margin-left: -11.625px;
margin-right: 0px;
margin-top: 0px;
min-width: min-content;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 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;
width: 581.765625px;
}
& .field {
color: rgba(0, 0, 0, 0.701961);
display: block;
float: left;
font-family: 'Proxima Nova';
font-size: 14px;
font-style: normal;
font-weight: 300;
height: 69px;
letter-spacing: normal;
line-height: 17px;
margin-bottom: 24px;
margin-right: 0px;
margin-top: 0px;
position: relative;
width: 284.9375px;
&:last-of-type {
margin-left: 11px;
}
& .caption {
color: rgba(0, 0, 0, 0.701961);
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-attachment: scroll;
background-clip: border-box;
background-color: rgb(250, 250, 250);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: auto;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-style: normal;
font-variant-caps: normal;
font-weight: normal;
height: 42px;
letter-spacing: normal;
line-height: 16px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 6px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: baseline;
width: 284.9375px;
word-spacing: 0px;
writing-mode: horizontal-tb;
}
}
</style>

View File

@@ -0,0 +1,70 @@
<template>
<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>
<!-- <map-view :cords="cords"></map-view> -->
<gallery></gallery>
</div>
</template>
<script>
import Gallery from '@/components/Gallery'
export default {
components: {
Gallery
},
props: ['id'],
data() {
return {
eventLocation: 'Oslo, Gardermoen, Norge',
startDate: undefined,
endDate: undefined
}
},
computed: {
eventDate: function() {
return {
from: this.startDate || '28.09.18',
until: this.endDate || '12.10.19'
}
}
},
created() {},
beforeMount() {
console.log('routes', this.$router, this.id)
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.gallery {
margin: 2.1rem;
&--header {
padding-bottom: 4rem;
// background-color: NavajoWhite;
}
&--info {
font-family: 'proxima-nova-thin';
font-weight: 300;
font-style: normal;
font-size: 18px;
line-height: 1.6rem;
letter-spacing: 0rem;
color: rgba(0, 0, 0, .7);
&:first-of-type {
margin-top: 0.8rem;
}
}
}
</style>

View File

@@ -0,0 +1,68 @@
<template>
<div class="gallery-container">
<div v-for="item in gallery">
<gallery-image v-if="item.type === 'image'" :image="item"></gallery-image>
<gallery-text v-if="item.type === 'text'" :text="item"></gallery-text>
</div>
</div>
</template>
<script>
import GalleryImage from '@/components/GalleryImage'
import GalleryText from '@/components/GalleryText'
export default {
name: 'Gallery-Item',
components: { GalleryImage, GalleryText },
data() {
return {
gallery: [
{
type: 'image',
name: 'Dress to impress',
url: "https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeae7419202bdaaeaffc1/1515121386282/The-Marias-Art-2.jpg"
},
{
type: 'image',
name: 'Couple',
url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeaebec212d38915e659c/1515121395460/The-Marias-Art-6.PNG'
},
{
type: 'image',
name: 'Nice jacket',
url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeae8ec212d38915e64d2/1515121386336/The-Marias-Art-3.jpg?format=500w'
},
{
type: 'text',
title: 'title',
subtext: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
type: 'image',
name: 'plants 4 life',
url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeaee0852296d709ba5a6/1515121396456/The-Marias-Art-10.PNG?format=500w'
}
]
}
},
created() {},
beforeMount() {},
methods: {
popOver(image) {
console.log('Emitting to popover Image', JSON.stringify(image));
this.$emit('popover', image);
}
}
}
</script>
<style lang="scss" scoped>
.gallery-container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
</style>

View File

@@ -0,0 +1,44 @@
<template>
<div>
<img :src="image.url" @click="popOver(image)"/>
<p>{{ image.name }}</p>
</div>
</template>
<script>
export default {
components: {
},
props: {
image: {
type: Object,
required: false
}
},
data() {
return {
}
},
created() {},
beforeMount() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
img {
height: 300px;
cursor: pointer;
@media screen and (max-width: 600px) {
background-color: red;
height: unset;
width: 100%;
}
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div>
<h3>{{ text.title }}</h3>
<p>{{ text.subtext }}</p>
</div>
</template>
<script>
export default {
components: {
},
props: {
text: {
type: Object,
required: false
}
},
data() {
return {
}
},
created() {},
beforeMount() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>

38
src/components/Header.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<header>
<div class="navigate-back">Tilbake</div>
</header>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
created() {},
beforeMount() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
header {
width: 100%;
height: 3.5rem;
background-color: NavajoWhite;
}
.navigate-back {
height: 100%;
display: inline-block;
background-color: blue;
}
</style>

View File

@@ -1,15 +1,21 @@
<template>
<div class="col-md-10 col-sm-12">
<h1>Leifs opplevelser</h1>
<div class="site-header">
<!-- <h1>{{ title }}</h1>
<h2>Han har ikke hatt nok etter 60 år!</h2>
{{ date }}
{{ date }} -->
<!-- <Header></Header> -->
<router-link to="edit">Edit Page</router-link>
<event-page></event-page>
</div>
</template>
<script>
// import '' from ''
import Header from '@/components/Header'
import EventPage from '@/components/EventPage'
export default {
components: { Header, EventPage },
data() {
return {
title: 'Leifs opplevelser',
@@ -19,19 +25,17 @@
},
created() {
this.date = new Date();
},
methods: {
navigate: function() {
console.log(this.$router)
this.$router.push('/edit');
}
}
}
</script>
<style language="scss">
h1 {
font-size: 6rem;
font-weight: 400;
font-style: normal;
text-align: center;
text-transform: uppercase;
}
h2 {
text-align: center;
font-weight: normal;

View File

@@ -2,14 +2,17 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './routes'
import axios from 'axios'
import BootstrapVue from 'bootstrap-vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
axios,
router,
BootstrapVue,
components: { App },
template: '<App/>'

44
src/routes.js Normal file
View File

@@ -0,0 +1,44 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routes = [
{
name: 'Home',
path: '/',
components: require('@/components/Home')
},
{
name: 'Event page',
path: '/event/:id',
props: { default: true },
components: require('@/components/EventPage')
},
{
name: 'Edit event',
path: '/edit',
components: require('@/components/EditEvent')
},
{
name: 'Calendar',
path: '/calendar',
// components: require('@/components/EditEvent')
},
{
name: '404',
path: '*',
// components: require('')
}
];
const router = new Router({
routes
});
router.beforeEach((to, from, next) => {
console.log(to)
next();
})
export default router;

View File

@@ -13,6 +13,8 @@ html, body {
font-weight: 400;
}
.site-header {
border-bottom: 1px solid #e8e8e1;
}

View File

@@ -1,10 +1,45 @@
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
// @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@font-face {
font-family: "Proxima Nova";
src: url("assets/fonts/proxima-nova.ttf");
}
@font-face {
font-family: "proxima-nova-thin";
src: url("assets/fonts/proxima-nova-thin.ttf");
}
@font-face {
font-family: "Proxima-cocker";
src: url("assets/fonts/nova.ttf");
}
@font-face {
font-family: "Ambroise std demi";
src: url("assets/fonts/ambroise-std-demi.ttf");
}
html {
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Arial', sans-serif;
}
h1, h2, h3, h4, h5, p {
font-weight: normal;
font-style: normal;
margin: 0;
padding: 0;
}
h1 {
font-family: 'Ambroise std demi', sans-serif;
font-weight: 400;
line-height: 1.2em;
font-size: 36px;
text-transform: lowercase;
text-decoration: none;
text-align: left;
letter-spacing: .01em;
color: #cb0b0b;
}

View File

@@ -6249,6 +6249,11 @@ vue-resource@^1.5.1:
dependencies:
got "^8.0.3"
vue-router@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
vue-style-loader@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"