Merge pull request #7 from KevinMidboe/WIP

Did lots of changes directly in vm, these are the changes

package.json

@@ -40,10 +40,10 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "3.2.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
@@ -62,10 +62,10 @@
     "vue-style-loader": "^3.1.2",
     "vue-template-compiler": "^2.5.2",
     "vue2-collapse": "^1.0.15",
-    "webpack": "^3.6.0",
+    "webpack": "4.30.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-dev-server": "3.3.1",
     "webpack-merge": "^4.1.0"
   },
   "engines": {

src/components/AdventureGallery.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <!-- <button @click="toggleView">Toggle view</button> -->
+
+    <div class="gallery-container" :class="mobileFriendly ? 'mobile' : 'large'">
+
+      <gallery-image v-for="(image, key) in gallery" :image="image" :key="key" :index="key" :thumbnail="thumbnail" @click="imageSelected"></gallery-image>
+
+    </div>
+
+    <div class="gallery--load-more">
+      <button class="button" @click="viewAll">View all</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import GalleryImage from '@/components/GalleryImage'
+import GalleryText from '@/components/GalleryText'
+
+import { mapGetters } from 'vuex'
+import store from '@/store'
+
+import { imagesByAdventureId } from '@/utils/leifsbackend-api'
+
+
+export default {
+  name: 'Gallery-Item',
+  components: { GalleryImage, GalleryText },
+  props: {
+    id: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      selected: undefined,
+      wide: false,
+      gallery: [],
+      ASSET_URL: 'https://leifsopplevelser.no/assets',
+      thumbnail: true,
+      mobileFriendly: false,
+    }
+  },
+  created() {
+    
+    this.adventureImages = imagesByAdventureId(this.id)
+      .then(adventureImages => {
+        adventureImages.forEach(image => {
+          let [filename, filextension] = image.filename.split('.')
+
+          console.log('filename:', filename)
+          console.log('filextension:', filextension)
+          const url = `${this.ASSET_URL}/${filename}_lg.${filextension}`
+
+          this.gallery.push({
+            type: 'image',
+            url
+          })
+        })
+      })
+
+    // this.setPopoverAlbum(this.gallery)
+
+    // const that = this;
+    // window.addEventListener('resize', function() {
+    //   that.setMobileFriendly()
+    // });
+  },
+  methods: {
+    viewAll() {
+    },
+    setMobileFriendly() {
+      const monitor = document.getElementsByClassName('gallery-container');
+      const image = document.getElementsByClassName('gallery-image')
+
+      if (monitor === undefined || image === undefined)
+        return
+      console.log('monitor and image', monitor[0].offsetWidth, image[0].offsetWidth)
+
+      this.mobileFriendly = monitor[0].offsetWidth < image[0].offsetWidth * 1.5;
+    },
+    toggleView() {
+      this.wide = !this.wide;
+      this.thumbnail = !this.thumbnail;
+    },
+    // setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
+
+    imageSelected(selectedImage) {
+      const selectedImageIndex = this.gallery.findIndex(image => selectedImage === image);
+
+      console.log('this is the selected image index', selectedImageIndex)
+
+      store.dispatch('setPopoverAlbum', this.gallery);
+      store.dispatch('setPopoverAlbumIndex', selectedImageIndex)
+      store.dispatch('showPopover');
+      // store.dispatch('incrementPopoverImage', this.selectedIndexInGallery())
+    },
+    selectedIndexInGallery() {
+      const gallery = this.gallery;
+      const selected = this.selected;
+
+      for(var i = 0; i < gallery.length; i += 1) {
+        if(gallery[i] === selected) {
+          return i;
+        }
+      }
+      return -1;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../scss/buttons.scss';
+
+  .gallery-container {
+    display: flex;
+    flex-direction: row;
+    // justify-content: space-evenly;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 1rem 0.5rem;
+
+    &.mobile {
+      // background-color: NavajoWhite;
+    }
+  }
+
+  .gallery--load-more {
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/components/Calendar.vue

@@ -15,9 +15,9 @@
 
 
     <div class="calendar">
-      <div v-for="dayName in days" class="calendar--dayName">{{ dayName }}</div>
+      <h3 v-for="dayName in days" class="calendar--dayName">{{ dayName }}</h3>
       <div v-for="(day, index) in cal">
-        <day-element :key="index" :day="day" @click="clickedDay(day)"></day-element>
+        <day-element :key="index" :day="day"></day-element>
       </div>
 
     </div>
@@ -64,10 +64,10 @@ export default {
     this.initCalendar()
   },
   methods: {
-    clickedDay(day) {
+    clickedDay(event=day.events) {
-      console.log('clicked', day)
+      console.log('clicked', event)
-      if (day.events.length) {
+      if (event) {
-        this.$router.push({ name: 'EditEvent', query: { id: day.events[0].id } })
+        this.$router.push({ name: 'EditEvent', query: { id: event.id } })
       } else {
         this.$router.push({name: 'EditEvent', params: { formData: {
           title: undefined,
@@ -172,6 +172,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.container {
+  max-width: 90vw;
+}
+
 .header--inline {
   display: flex;
 

src/components/EditEvent.vue

@@ -6,6 +6,8 @@
       
       <!-- {{ formData }} -->
       <event-form v-if="notWaitingForFormdata || formData" :formData="formData"></event-form>
+
+      <AdventureGallery :id="parseInt($route.query.id)"></AdventureGallery>
     </div>
 
     <!-- <div class="image-grid">
@@ -53,6 +55,7 @@ import axios from 'axios'
 import VueGridLayout from 'vue-grid-layout';
 import ClickOutside from 'vue-click-outside'
 import EventForm from './EventForm'
+import AdventureGallery from '@/components/AdventureGallery'
 
 import { adventureById, createAdventure } from '@/utils/leifsbackend-api'
 
@@ -60,7 +63,8 @@ export default {
   components: { 
     GridLayout: VueGridLayout.GridLayout,
     GridItem: VueGridLayout.GridItem,
-    EventForm: EventForm
+    EventForm: EventForm,
+    AdventureGallery
   },
   computed: {
     rowHeight: function() {
@@ -274,7 +278,6 @@ export default {
     // background-color: green;
 
     display: block;
-    width: 70vw;
     margin: 4rem auto;
 
     @media screen and (max-width: 650px) {

src/components/EventForm.vue

@@ -12,14 +12,14 @@
         <div class="field first-name">
           <label class="caption">
             <input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
-            fra dato
+            fra dato (dd-mm-yyyy)
           </label>
         </div>
 
         <div class="field last-name">
           <label class="caption">
             <input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
-            til dato
+            til dato (dd-mm-yyyy)
           </label>
         </div>
       </fieldset>

src/components/EventPage.vue

@@ -8,7 +8,29 @@
       </router-link>
     </div>
 
-    <div class="gallery">
+
+    <div>
+      <h1>{{ title }}</h1>
+      <div class="eventDescription">
+        <p>{{ eventDuration }}</p>
+        
+        <div v-if="locationName">
+          <span>{{ locationName }}</span>
+          <div style="margin: 1rem 0">
+            <a @click="showMap = !showMap"> {{ showMap ? 'Lukk kart' : 'Vis kart' }}</a>
+          </div>
+
+          <transition name="slide" class="transition">
+            <map-view v-if="showMap" :locationName="locationName"></map-view>
+          </transition>
+
+          <AdventureGallery :id="eventData.id"></AdventureGallery>
+        </div>
+      </div>
+    </div>
+
+
+<!--     <div class="gallery">
       <div class="gallery--header">
         <h1>{{ eventData.title || title }}</h1>
         <div class="gallery--info">
@@ -26,16 +48,13 @@
         </div>
       </div>
 
-      <!-- <map-view :cords="cords"></map-view> -->
-      <!-- <calendar></calendar> -->
-
       <gallery :short="false" :id="eventData.id"></gallery>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import Gallery from '@/components/Gallery'
+import AdventureGallery from '@/components/AdventureGallery'
 import MapView from '@/components/MapView'
 import moment from 'moment'
 
@@ -43,7 +62,7 @@ import { locationByName } from '@/utils/leifsbackend-api'
 
 export default {
   components: {
-    Gallery, MapView
+    AdventureGallery, MapView
   },
   props: {
     eventData: {
@@ -52,57 +71,51 @@ export default {
     }
   },
   computed: {
-    eventDate: function() {
+    eventDuration: function() {
-      return { 
+      let start = moment(this.startDate).format('DD.MM.YYYY');
-        from: this.startDate || '28.09.18',
+      let end = moment(this.endDate).format('DD.MM.YYYY');
-        until: this.endDate || '12.10.19'
+
-      }
+      return `${ start } - ${ end }`
     }
   },
   data() {
     return {
       showMap: false,
       mapboxData: undefined,
-
+      id: undefined,
-      title: 'Topptur til gaustadtoppen',
+      title: undefined,
-      eventLocation: 'Oslo, Gardermoen, Norge',
+      locationName: undefined,
       startDate: 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). ',
+      subtext: undefined
-      // mapboxData: {"id":"address.3598204582760676","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"point"},"text":"Rosendalsveien","place_name":"Rosendalsveien50b,1166Oslo,Norway","center":[10.799471,59.853973],"geometry":{"type":"Point","coordinates":[10.799471,59.853973]},"address":"50b","context":[{"id":"postcode.9489910510813950","text":"1166"},{"id":"place.17289044417596980","short_code":"NO-03","wikidata":"Q585","text":"Oslo"},{"id":"country.16020050790143780","short_code":"no","wikidata":"Q20","text":"Norway"}]}
     }
   },
   created() {
     const id = this.$route.params.id;
-    console.log('id found', id)
+    console.log('id found', id);
     if (id) {
       adventureById(id)
-        .then(data => this.eventData = data)
+        .then(this.setEventData(data))
+    } else {
+      this.setEventData(this.eventData)
     }
   },
   methods: {
-    dateToDayMonthYear(date) {
+    setEventData(event) {
-      return moment(date).format('DD.MM.YYYY')
+      console.log('evnent', event)
-
+      this.id = event.id;
+      this.title = event.title;
+      this.locationName = event.locationName;
+      this.startDate = event.dateStart;
+      this.endDate = event.dateEnd;
+      this.subtext = event.subtext;
     },
-    toggleMap() {
-      if (this.showMap) {
-        this.showMap = false
-        return
-      }
-
-      locationByName(this.eventData.locationName)
-        .then(data => {
-          this.mapboxData = data.mapboxData;
-          this.showMap = true;
-        })
-        .catch((err) => console.log('error fetching locations by name from server. Error:', err))
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '../scss/buttons.scss';
 
 .slide-enter-active, .slide-leave-active {
 transition: margin-bottom .1s ease-out;
@@ -141,15 +154,7 @@ margin-bottom: 0px;
       margin-top: 0.8rem;
     }
 
-    a {
+   
-      font-family: 'Ambroise std demi';
-      font-style: normal;
-      color: #3b70a2;
-
-      &:visited {
-        color: #3b70a2;
-      }
-    }
   }
 
   &--subtext {
@@ -167,34 +172,5 @@ margin-bottom: 0px;
   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>

src/components/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="footer">
     <div class="start"><a href="mailto:kevin.midboe@gmail.com?Subject=Ref Leifsopplevelser:%20">Kontakt</a></div>
-    <div class="middle">2</div>
+    <div class="middle"><a href="https://github.com/search?q=user%3AKevinMidboe+leifs+in%3Aname&type=Repositories">github</a></div>
     <div class="end">© Kevin Midboe, 2019</div>
   </footer>
 </template>

src/components/Gallery.vue

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <button @click="toggleView">Toggle view</button>
-
-    <div class="gallery-container">
-
-      
-      <div v-for="(item, key) in gallery">
-        <gallery-image v-if="item.type === 'image'" :image="item" :index="key" :wide="wide" @click="imageSelected"></gallery-image> 
-        <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import GalleryImage from '@/components/GalleryImage'
-import GalleryText from '@/components/GalleryText'
-
-import { mapGetters } from 'vuex'
-import store from '@/store'
-
-import { imagesByAdventureId } from '@/utils/leifsbackend-api'
-
-
-export default {
-  name: 'Gallery-Item',
-  components: { GalleryImage, GalleryText },
-  props: {
-    short: {
-      default: false,
-      type: Boolean
-    },
-    id: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      selected: undefined,
-      wide: false,
-      gallery: [],
-      ASSET_URL: 'https://leifsopplevelser.no/assets'
-    }
-  },
-  created() {
-    this.setPopoverAlbum(this.gallery)
-  },
-  watch: {
-    gallery: function (val) {
-      this.setPopoverAlbum(val)
-    }
-  },
-  created() {
-    imagesByAdventureId(this.id)
-      .then(images => {
-        console.log('events', images)
-        images.forEach(image => {
-          let [filename, filextension] = image.filename.split('.')
-
-          console.log('filename:', filename)
-          console.log('filextension:', filextension)
-          const url = `${this.ASSET_URL}/${filename}_lg.${filextension}`
-
-          this.gallery.push({
-            type: 'image',
-            url
-          })
-        })
-      })
-  },
-  methods: {
-    toggleView() {
-      this.wide = !this.wide;
-    },
-    setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
-
-    imageSelected(image) {
-      console.log('selected image', image)
-      this.selected = image;
-      // store.dispatch('incrementPopoverImage', this.selectedIndexInGallery())
-    },
-    selectedIndexInGallery() {
-      const gallery = this.gallery;
-      const selected = this.selected;
-
-      for(var i = 0; i < gallery.length; i += 1) {
-        if(gallery[i] === selected) {
-          return i;
-        }
-      }
-      return -1;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .gallery-container {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    // justify-content: space-evenly;
-    flex-wrap: wrap;
-    padding: 1rem 0;
-  }
-</style>

src/components/GalleryImage.vue

@@ -1,7 +1,8 @@
 <template>
   <div v-bind:class="{ isWide: wide }">
     <transition name="fade">
-      <img :src="image.url" @click="popover(image)" v-on:load="onLoaded" v-show="loaded"/>
+      {{ image }}
+      <img :src="dynamicImageUrl" @click="popover(image)" v-on:load="onLoaded" v-show="loaded" class="gallery-image" />
     </transition>
     <p>{{ image.name }}</p>
   </div>
@@ -19,10 +20,24 @@ export default {
     index: {
       type: Number,
     },
+    thumbnail: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     wide: {
       type: Boolean
     }
   },
+  computed: {
+    dynamicImageUrl: function() {
+      console.log('thumbnail', this.thumbnail)
+      if (this.thumbnail) {
+        return this.image.url.replace('_lg.', '_thumb.');
+      }
+      return this.image.url.replace('_lg.', '_sm.');
+    }
+  },
   data() {
     return {
       loaded: false
@@ -35,8 +50,8 @@ export default {
     onLoaded() { this.loaded = true },
 
     popover(image) {
-      this.setPopoverAlbumIndex(this.index)
+      // this.setPopoverAlbumIndex(this.index)
-      this.showPopover()
+      // this.showPopover()
       this.$emit('click', image)
     }
   }
@@ -53,17 +68,10 @@ export default {
 }
 
 img {
-  max-height: 300px;
+  max-width: 90vw;
-  max-width: 300px;
+  // width: 350px;
-  width: 300px;
   cursor: pointer;
-  margin: 0.6rem;
+  padding: 0.2rem;
-
-  @media screen and (max-width: 600px) {
-    background-color: red;
-    height: unset;
-    width: 100%;
-  }
 }
 
  .isWide img {

src/components/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <header>
-    <div class="navigate-back">Tilbake</div>
+    <!-- <div class="navigate-back">Tilbake</div> -->
+    <h1><slot></slot></h1>
   </header>
 </template>
 
@@ -24,10 +25,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:700|Roboto+Slab:700|Source+Sans+Pro:600');
+  
   header {
-    width: 100%;
+    height: 490px;
-    height: 3.5rem;
+    @media screen and (max-width: 600px) {
-    background-color: NavajoWhite;
+      height: 350px;
+    }
+    background-color: #f5af52;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    background-image: url('https://eu.blackdiamondequipment.com/on/demandware.static/-/Library-Sites-SharedLibrary/default/dwf668bbc0/images/heroes/S19_Wind-Shells_HP-Hero.jpg');
+    background-position: center;
+
+    h1 {
+      font-family: 'Roboto Slab', sans-serif;
+      // font-family: 'Source Sans Pro', sans-serif;
+      // font-family: 'Alegreya Sans SC', sans-serif;
+      color: white;
+      background-color: rgba(0,0,0,0.4);
+      text-transform: capitalize;
+      margin-right: 15%;
+      font-size: 3.5rem;
+
+      @media screen and (max-width: 600px) {
+        margin: 10px;
+        padding: 1rem;
+        font-size: 2.8rem;
+        text-align: center;
+      }
+
+      padding: 1.5rem;
+      border: 4px solid white;
+    }
   }
 
   .navigate-back {

src/components/Home.vue

@@ -4,15 +4,24 @@
 <!--     <h1>{{ title }}</h1>
     <h2>Han har ikke hatt nok etter 60 år!</h2>
     {{ date }} -->
-    <!-- <Header></Header> -->
+    <Header>Leifs opplevelser 2019</Header>
+    <!-- <Navigation></Navigation> -->
     
-    <div class="header">
+
+    <!-- <div style="height: 2px; background-color: #cb0b0b; width:100%;"></div> -->
+    
+    <!-- <div class="header">
       <h1>{{ title }}</h1>
-    </div>
+    </div> -->
 
     <calendar :long="false"></calendar>
+
+    <div class="add-adventure" @click="$router.push({path: '/edit'})">
+        <h1 class="add-adventure__text">Legg til en ny opplevelse +</h1>
+    </div>
     
-    <div class="container" v-for="event in events">
+    <div style="margin: 2rem;" v-for="event in events">
+    <!-- <div class="container" v-for="event in events"> -->
       <event-page :eventData="event"></event-page>
     </div>
 
@@ -22,6 +31,7 @@
 
 <script>
 import Header from '@/components/Header'
+import Navigation from '@/components/Navigation'
 import EventPage from '@/components/EventPage'
 import Calendar from '@/components/Calendar'
 import Footer from '@/components/Footer'
@@ -29,7 +39,7 @@ import Footer from '@/components/Footer'
 import { adventureList } from '@/utils/leifsbackend-api'
 
 export default {
-  components: { Header, EventPage, Calendar, Footer },
+  components: { Header, Navigation, EventPage, Calendar, Footer },
   data() {
     return {
       title: 'leifs opplevelser',
@@ -58,13 +68,40 @@ export default {
 }
 </script>
 
-<style language="scss" scoped>
+
+<style lang="scss" scoped>
 
   .header {
-    margin: 0 auto;
+    /*margin: 0 auto;*/
-    max-width: 1200px;
+    /*max-width: 1200px;*/
-    padding: 2.5rem 0rem 2rem 3.5rem;
+    margin: 2rem 2rem;
+    // width: 100%;
+    /*padding: 2.5rem 0rem 2rem 3.5rem;*/
     /*margin-bottom: 5rem;*/
+    h1 {
+      text-align: center;
+      font-size: 3rem;
+    }
+  }
+
+  .add-adventure {
+    width: 85vw;
+    border: 2px solid #cb0b0b;
+    border-radius: 6px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center; 
+    justify-content: center;
+    cursor: pointer;
+
+    &__text {
+      text-align: center;
+      margin: 1.2rem 1rem;
+
+      @media screen and (max-width: 400px) {
+        font-size: 1.6rem;
+      }
+    }
   }
 
   h2 {

src/components/MapView.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="map">
+  <div class="map" v-if="mapboxData">
     {{ mapboxData.center }}
     <mapbox
       :access-token="accessToken"
       :map-options="options"
       @map-init="mapInitialized"
-      @map-load="mapLoaded"></mapbox>
+      @map-load="setLocationMarker"></mapbox>
   </div>
 </template>
 
 <script>
 import mapboxgl from 'mapbox-gl';
 import Mapbox from 'mapbox-gl-vue';
+import { locationByName } from '@/utils/leifsbackend-api'
 
 export default {
   components: { Mapbox },
   props: {
-    mapboxData: {
+    locationName: {
-      type: Object,
+      type: String,
       required: true
     }
   },
@@ -25,23 +26,34 @@ export default {
     return {
       marker: undefined,
       map: undefined,
+      mapboxData: undefined,
+      options: undefined,
 
-      accessToken: "pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w",
+      accessToken: undefined
-      options: {
+    }
+  },
+  async created() {
+    console.log('created')
+    const response = await locationByName(this.locationName);
+    const mapData = response.mapboxData;
+    
+    this.setupMap(mapData)
+    this.mapboxData = mapData;
+  },
+  methods: {
+    setupMap(mapData) {
+      console.log('mapData', mapData)
+      const mapCenter = mapData.center;
+      this.options = {
           style: 'mapbox://styles/kevinmidboe/cjrvwyoft1tij1ftb94f75lqs',
           sprite: 'mapbox://styles/kevinmidboe/cjrvwyoft1tij1ftb94f75lqs',
-          center: this.mapboxData.center,
           zoom: 10,
+          center: mapCenter,
           minZoom: 0,
           maxZoom: 18
       }
-    }
-  },
-  methods: {
-    mapInitialized(map) { this.map = map },
-    mapLoaded() {
-      this.setLocationMarker()
     },
+    mapInitialized(map) { this.map = map },
     setLocationMarker() {
        if(this.marker != undefined) this.marker.remove();
 

src/components/Navigation.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="navigation">
+		<div>home</div>
+		<div>fag</div>
+		<div>about</div>
+		<div>contact</div>
+	</div>
+</template>
+
+<script>
+
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.navigation {
+	height: 45px;
+	width: 100%;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	border-bottom: 1px solid #d71514;
+
+	> div {
+		margin: 0 1rem;
+		height: 100%;
+		padding: 0 3rem;
+		display: flex;
+		align-items: center;
+		font-size: 1.2rem;
+		font-weight: bold;
+		color: #d71514;
+
+		&:hover {
+			color: white;
+			background-color: #d71514;
+		}
+	}
+}
+</style>

src/components/Popover.vue

@@ -2,12 +2,17 @@
   <div class="popover">
     <div class="popover-content" @click="hidePopover" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
       <div class="image-container">
-        <img :src="album[index].url.replace('thumb', 'lg')" />
+        <picture>
+            <source :srcset="album[index].url"
+                    media="(min-width: 1200px)">
+            <source :srcset="album[index].url.replace('_lg.', '_md.')"
+                    media="(min-width: 650px)">
+            <img :src="album[index].url.replace('_lg.', '_sm.')" />
+        </picture>
       
-        <div class="other-elements">
+        <!-- <div class="other-elements">
           <p>There is something here</p>
-        </div>
+        </div> -->
-      
       </div>
     </div>
     
@@ -36,7 +41,7 @@ export default {
     }
   },
   destroyed() {
-    window.removeEventListener('keyup')
+    window.removeEventListener('keyup', this.arrowNavigation)
     document.ontouchmove = function (e) {
       return true;
     };
@@ -166,7 +171,7 @@ export default {
 
   .nav-arrow.left::before, .nav-arrow.left::after {
     left: 0;
-    border-left: solid 1.5px rgba(255,255,255,.9);
+    border-left: solid 2.5px rgba(255,255,255,.9);
   }
 
   .nav-arrow.left::before {
@@ -182,7 +187,7 @@ export default {
   }
 
   .nav-arrow.right::before, .nav-arrow.right::after {
-    border-right: solid 1.5px rgba(255,255,255,.9);
+    border-right: solid 2.5px rgba(255,255,255,.9);
     right: 0;
   }
 

src/components/calendar/DayElement.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="calendar--day" @click="$emit('click')">
+  <div class="calendar--day" @click="clickedEvent(null)" v-bind:class="{ empty: day.events.length === 0 }">
-    <div 
+    <div
       class="calendar--date" 
       v-bind:style="{ color: color }"
       v-bind:class="{'currentDay': day.currentDay}">
 
-    {{ day.date }}
+      {{ day.date }}
-  </div>
+    </div>
 
-    <div v-if="day.events.length" v-for="event in day.events" class="calendar--event">
+    <div v-if="day.events.length > 0" v-for="(event, index) in day.events" class="calendar--event">
-      {{ event.title }}
+      <span class="calendar--event-title" v-bind:style="{ backgroundColor: eventColors[index] }" @click="clickedEvent(event.id)">{{ event.title }}</span>
     </div>
   </div>
 </template>
@@ -37,13 +37,32 @@ export default {
         'current': 'black',
         'after': 'dimgray',
         'event': '#cb0b0b'
-      }
+      },
+      eventColors: ['orange', 'green', 'blue' ],
+      eventClicked: false
     }
   },
   created() {
     this.setColor()
   },
   methods: {
+    clickedEvent(id) {
+      if (this.eventClicked) return
+
+      if (id) {
+        this.eventClicked = true;
+        this.$router.push({ name: 'EditEvent', query: { id } })
+      } else {
+        this.$router.push({ name: 'EditEvent', params: { formData: {
+          title: undefined,
+          dateStart: this.day.m,
+          dateEnd: undefined,
+          locationName: undefined,
+          subtext: undefined
+        } } })
+      }
+
+    },
     setColor() {
       if (this.day.events.length) {
         this.color = this.states['event']
@@ -58,50 +77,64 @@ export default {
 
 <style lang="scss" scoped>
 .calendar {
-  &--day {
+  .empty {
-    border: 0.5px solid rgba(0,0,0,.2);
+     @media screen and (max-width: 400px) {
-    min-height: 2rem;
+      display: none;
-    
-    @media screen and (min-width: 400px) {
-      min-height: 4rem;
-    }
-
-    @media screen and (min-width: 1100px) {
-      min-height: 5.6rem;
-    }
-
-    &:hover {
-      cursor: pointer;
     }
   }
 
-  &--date {
+  &--day {
-    display: inline-block;
+    border: 0.5px solid rgba(0,0,0,.2);
+    min-height: 6rem;
+    min-width: 6rem;
+  }
 
-    text-align: right;
+  &--date {
+    width: 100%;
     float: right;
+    text-align: right;
     margin-top: .6rem;
     margin-right: .6rem;
+    margin-bottom: .6rem;
     font-weight: 600;
     font-size: 0.95rem;
+    
+    @media screen and (max-width: 400px) {
+      width: unset;
+      float: left;
+      margin-left: 0.5rem;
+    }
   }
 
   & .currentDay {
     background-color: #cb0b0b;
     border-radius: 50%;
     height: 21px;
-    width: 24px;
+    width: 21px;
     margin-top: 0.35rem;
-    padding-top: 0.35rem;
+    padding-top: 0.32rem;
-    margin-right: 0.3rem;
+    margin-right: 0.32rem;
-    padding-right: 0.2rem;
+    padding-right: 0.35rem;
     color: ghostwhite !important;
   }
 
   &--event {
-    margin: 0.5rem;
+    margin: 0.3rem 0;
-    font-size: 0.8rem;
+
-    width: 100%;
+    &:hover {
+      cursor: pointer;
+    }
+
+    &-title {
+      margin: 0 0.5rem;
+      padding: 0.15rem 0.3rem;
+      font-size: 0.95rem;
+      text-transform: capitalize;
+      background-color: #d71514;
+      color: white;
+      display: flex;
+      border-radius: 2px;
+    }
 
     @media screen and (max-width: 400px) {
       font-size: unset;

src/components/calendar/MonthSummary.vue

@@ -3,7 +3,7 @@
     <h1>Summary</h1>
 
     <div v-for="event in events" class="list-item">
-      <router-link :to="{ name: 'EventPage', query: { id: event.id }}">
+      <router-link :to="{ name: 'EditEvent', query: { id: event.id }}">
 
         <h2>{{event.title}}</h2>
         <p>{{ dateToDayMonthYear(event.dateStart) }} - {{ dateToDayMonthYear(event.dateEnd) }}</p>

src/scss/buttons.scss

@@ -0,0 +1,30 @@
+.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;
+  }
+}

src/scss/main.scss

@@ -16,6 +16,13 @@ html, body {
 
 a {
   cursor: pointer;
+  font-family: 'Ambroise std demi';
+  font-style: normal;
+  color: #3b70a2;
+
+  &:visited {
+    color: #3b70a2;
+  }
 }
 
 #app {

src/store.js

@@ -6,7 +6,8 @@ Vue.use(Vuex)
 const state = {
   popover: false,
   popoverAlbum: [],
-  popoverAlbumIndex: 0,
+  popoverAlbumLength: 0,
+  popoverAlbumIndex: 0
 }
 
 const mutations = {
@@ -20,18 +21,20 @@ const mutations = {
 
   setPopoverAlbum (state, album) {
     state.popoverAlbum = album;
+    state.popoverAlbumLength = album.length - 1;
   },
 
   setPopoverAlbumIndex (state, index) {
     state.popoverAlbumIndex = index;
+    console.log('new index', index);
   },
 
   incrementPopoverImage (state) {
     let index = state.popoverAlbumIndex;
-    index++
-    console.log('Setting popover index:', index)
 
-    if (index > state.popoverAlbum.length - 1) {
+    if (index < state.popoverAlbumLength) {
+      index++;
+    } else {
       index = 0;
     }
 
@@ -40,11 +43,11 @@ const mutations = {
 
   decrementPopoverImage (state) {
     let index = state.popoverAlbumIndex;
-    index--
-    console.log('Setting popover index:', index)
 
-    if (index < 0) {
+    if (index > 0) {
-      index = state.popoverAlbum.length - 1;
+      index--;
+    } else {
+      index = state.popoverAlbumLength;
     }
 
     state.popoverAlbumIndex = index;
@@ -55,8 +58,8 @@ const mutations = {
 const actions = {
   showPopover: ({ commit }) => commit('showPopover'),
   hidePopover: ({ commit }) => commit('hidePopover'),
-  setPopoverAlbum: ({ commit }, payload) => commit('setPopoverAlbum', payload),
+  setPopoverAlbum: ({ commit }, images) => commit('setPopoverAlbum', images),
-  setPopoverAlbumIndex: ({ commit }, payload) => commit('setPopoverAlbumIndex', payload),
+  setPopoverAlbumIndex: ({ commit }, index) => commit('setPopoverAlbumIndex', index),
   incrementPopoverImage: ({ commit }) => commit('incrementPopoverImage'),
   decrementPopoverImage: ({ commit }) => commit('decrementPopoverImage'),
 

src/utils/leifsbackend-api.js

@@ -1,9 +1,10 @@
 import axios from 'axios'
 
-const BASE_URL = 'http://localhost:5000/api/'
+// const BASE_URL = 'http://localhost:5000/api/'
+const BASE_URL = 'https://api.leifsopplevelser.no/api/'
 
-function adventureList() {
+function adventureList(sort='desc') {
-  const url = BASE_URL + 'adventure';
+  const url = BASE_URL + `adventure?sort=${sort}`;
   
   return fetch(url)
     .then(resp => resp.json())