WIP snapshot before vacation remote work

src/components/AdventureGallery.vue

@@ -4,12 +4,12 @@
 
     <div class="gallery-container" :class="mobileFriendly ? 'mobile' : 'large'">
 
-      <gallery-image v-for="(image, key) in gallery" :image="image" :index="key" :thumbnail="true" @click="imageSelected"></gallery-image>
+      <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">View all</button>
+      <button class="button" @click="viewAll">View all</button>
     </div>
   </div>
 </template>
@@ -38,12 +38,8 @@ export default {
       wide: false,
       gallery: [],
       ASSET_URL: 'https://leifsopplevelser.no/assets',
-      mobileFriendly: undefined
+      thumbnail: true,
-    }
+      mobileFriendly: false,
-  },
-  watch: {
-    gallery: function (val) {
-      this.setPopoverAlbum(val)
     }
   },
   created() {
@@ -64,7 +60,7 @@ export default {
         })
       })
 
-    this.setPopoverAlbum(this.gallery)
+    // this.setPopoverAlbum(this.gallery)
 
     // const that = this;
     // window.addEventListener('resize', function() {
@@ -72,6 +68,8 @@ export default {
     // });
   },
   methods: {
+    viewAll() {
+    },
     setMobileFriendly() {
       const monitor = document.getElementsByClassName('gallery-container');
       const image = document.getElementsByClassName('gallery-image')
@@ -84,6 +82,7 @@ export default {
     },
     toggleView() {
       this.wide = !this.wide;
+      this.thumbnail = !this.thumbnail;
     },
     // setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
 

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/EventPage.vue

@@ -8,7 +8,27 @@
       </router-link>
     </div>
 
-    <div class="gallery">
+
+    <div>
+      <h1>{{ title }}</h1>
+      <div class="eventDescription">
+        <p>{{ eventDuration }}</p>
+        
+        <div v-if="locationName">
+          <span>{{ locationName }}</span>
+          <a @click="showMap = !showMap"> {{ showMap ? 'Lukk kart' : 'Vis kart' }}</a>
+
+          <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 +46,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 +60,7 @@ import { locationByName } from '@/utils/leifsbackend-api'
 
 export default {
   components: {
-    Gallery, MapView
+    AdventureGallery, MapView
   },
   props: {
     eventData: {
@@ -135,15 +152,7 @@ margin-bottom: 0px;
       margin-top: 0.8rem;
     }
 
-    a {
+   
-      font-family: 'Ambroise std demi';
-      font-style: normal;
-      color: #3b70a2;
-
-      &:visited {
-        color: #3b70a2;
-      }
-    }
   }
 
   &--subtext {

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,11 @@ export default {
 }
 
 img {
-  max-height: 300px;
+  // max-height: 350px;
-  max-width: 300px;
+  // max-width: 350px;
-  width: 300px;
+  // width: 350px;
   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

@@ -25,8 +25,13 @@ 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 {
     height: 490px;
+    @media screen and (max-width: 600px) {
+      height: 350px;
+    }
     background-color: #f5af52;
     display: flex;
     align-items: center;
@@ -36,11 +41,24 @@ export default {
     background-position: center;
 
     h1 {
-      font-family: 'Maddac';
+      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: 10%;
+      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;
     }
   }
 

src/components/Home.vue

@@ -4,15 +4,17 @@
 <!--     <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 class="header">
       <h1>{{ title }}</h1>
-    </div>
+    </div> -->
 
     <calendar :long="false"></calendar>
     
-    <div class="container" v-for="event in events">
+    <div class="" v-for="event in events">
+    <!-- <div class="container" v-for="event in events"> -->
       <event-page :eventData="event"></event-page>
     </div>
 
@@ -22,6 +24,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 +32,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 +61,20 @@ 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;
+    }
   }
 
   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: "pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w"
-      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/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)">{{ eventColors[index] + 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/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())