WIP snapshot before vacation remote work

2025-10-29 09:40:21 +00:00 · 2019-04-17 15:36:53 +02:00
parent 84886313bb
commit cb073bb452
13 changed files with 246 additions and 105 deletions
--- a/src/components/AdventureGallery.vue
+++ b/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
-    }
-  },
-  watch: {
-    gallery: function (val) {
-      this.setPopoverAlbum(val)
+      thumbnail: true,
+      mobileFriendly: false,
    }
  },
  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),

--- a/src/components/Calendar.vue
+++ b/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) {
-      console.log('clicked', day)
-      if (day.events.length) {
-        this.$router.push({ name: 'EditEvent', query: { id: day.events[0].id } })
+    clickedDay(event=day.events) {
+      console.log('clicked', event)
+      if (event) {
+        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;

--- a/src/components/EditEvent.vue
+++ b/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) {
--- a/src/components/EventPage.vue
+++ b/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 {
--- a/src/components/GalleryImage.vue
+++ b/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.showPopover()
+      // this.setPopoverAlbumIndex(this.index)
+      // this.showPopover()
      this.$emit('click', image)
    }
  }
@@ -53,17 +68,11 @@ export default {
 }

 img {
-  max-height: 300px;
-  max-width: 300px;
-  width: 300px;
+  // max-height: 350px;
+  // max-width: 350px;
+  // width: 350px;
  cursor: pointer;
-  margin: 0.6rem;
-
-  @media screen and (max-width: 600px) {
-    background-color: red;
-    height: unset;
-    width: 100%;
-  }
+  padding: 0.2rem;
 }

 .isWide img {
--- a/src/components/Header.vue
+++ b/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;
    }
  }

--- a/src/components/Home.vue
+++ b/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;
-    max-width: 1200px;
-    padding: 2.5rem 0rem 2rem 3.5rem;
+    /*margin: 0 auto;*/
+    /*max-width: 1200px;*/
+    margin: 2rem 2rem;
+    // width: 100%;
+    /*padding: 2.5rem 0rem 2rem 3.5rem;*/
    /*margin-bottom: 5rem;*/
+    h1 {
+      text-align: center;
+      font-size: 3rem;
+    }
  }

  h2 {
--- a/src/components/MapView.vue
+++ b/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: {
-      type: Object,
+    locationName: {
+      type: String,
      required: true
    }
  },
@@ -25,23 +26,34 @@ export default {
    return {
      marker: undefined,
      map: undefined,
+      mapboxData: undefined,
+      options: undefined,

-      accessToken: "pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w",
-      options: {
+      accessToken: "pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w"
+    }
+  },
+  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();

--- a/src/components/Navigation.vue
+++ b/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>
--- a/src/components/calendar/DayElement.vue
+++ b/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
      class="calendar--date" 
      v-bind:style="{ color: color }"
      v-bind:class="{'currentDay': day.currentDay}">

-    {{ day.date }}
-  </div>
+      {{ day.date }}
+    </div>

-    <div v-if="day.events.length" v-for="event in day.events" class="calendar--event">
-      {{ event.title }}
+    <div v-if="day.events.length > 0" v-for="(event, index) in day.events" class="calendar--event">
+      <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 {
-    border: 0.5px solid rgba(0,0,0,.2);
-    min-height: 2rem;
-    
-    @media screen and (min-width: 400px) {
-      min-height: 4rem;
-    }
-
-    @media screen and (min-width: 1100px) {
-      min-height: 5.6rem;
-    }
-
-    &:hover {
-      cursor: pointer;
+  .empty {
+     @media screen and (max-width: 400px) {
+      display: none;
    }
  }

-  &--date {
-    display: inline-block;
+  &--day {
+    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;
-    margin-right: 0.3rem;
-    padding-right: 0.2rem;
+    padding-top: 0.32rem;
+    margin-right: 0.32rem;
+    padding-right: 0.35rem;
    color: ghostwhite !important;
  }

  &--event {
-    margin: 0.5rem;
-    font-size: 0.8rem;
-    width: 100%;
+    margin: 0.3rem 0;
+
+    &: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;
--- a/src/components/calendar/MonthSummary.vue
+++ b/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>
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
--- a/src/utils/leifsbackend-api.js
+++ b/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() {
-  const url = BASE_URL + 'adventure';
+function adventureList(sort='desc') {
+  const url = BASE_URL + `adventure?sort=${sort}`;
  
  return fetch(url)
    .then(resp => resp.json())