update

TODO.md

@@ -1,10 +1,5 @@
 ## TODO
-* General - fallbacks in case no api response
-* General - about page api call
-* General - sort things by sort_order
-* General - page headings etc - use api
 * mailer
-* remove testing/dev mode or whatever its called from axios in nuxt.config.js
 
 ## Maybes
 * gallery page - featured images in same style as on services page with the
@@ -73,6 +68,7 @@
         ]
 ```
 ```html
+// about
       <h2 class="heading heading-top">I Imagine Myself</h2>
       <blockquote class="quote">
         <p class="quote-text">"As a photographic artist, my creative pursuit is to escape the attempts to categorize, characterize, compartmentalize, explain, or limit my photographic expression. It is always pleasing to see how observers respond with delight to the ultimate visualizations of my quest. My fondest wish is to pursue my life as a photographer, unbridled and always with a resolve to improve and be the best I can, with a constant yearning to be better."</p>

components/ContentPage.vue

@@ -98,7 +98,7 @@ $z-index-top: 10;
 }
 
 .page-heading {
-  z-index: $z-index-top;
+  z-index: $z-index-top + 5;
   position: relative;
 }
 

components/GalleryPage.vue

@@ -12,7 +12,7 @@
                         @clickNext="handleClickNext"
                         @close="imageViewerIsVisible = false" />
     <article class="gallery">
-      <h1 class="page-heading page-title"><span class="shadow-deco">My Galleries</span></h1>
+      <h1 class="page-heading page-title"><span class="shadow-deco">{{ title }}</span></h1>
       <GalleryFeatured class="gallery__featured load-transition load-transition--1"
                        :galleries="galleries"
                        :gallery-active="activeGalleryIndex"
@@ -44,6 +44,13 @@ export default {
     galleries: {
       type: Array,
       required: true
+    },
+    title: {
+      type: String,
+      required: false,
+      default () {
+        return 'My Galleries'
+      },
     }
   },
 

pages/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentPage heading="About Me" class="about">
+  <ContentPage :heading="title" class="about">
     <div class="about-content" :class="{ 'no-content-container': isNoContent }">
       <h2 class="heading heading-top">{{ title }}</h2>
       <div v-html="body"></div>
@@ -27,7 +27,7 @@ export default {
 
   head () {
     return {
-      title: 'About Me',
+      title: this.title,
       meta: [{ 
         hid: 'description',
         name: 'description',

pages/contact.vue

@@ -1,7 +1,8 @@
 <template>
-  <ContentPage heading="Contact Me">
+  <ContentPage :heading="title">
 
     <form class="contact-form">
+      <div class="form-background"></div>
       <div class="form-content">
         <b-field label="Name"
                  :type="attemptedSubmit && form.name.length < 1 ? 'is-danger' : ''"
@@ -109,7 +110,7 @@ export default {
 
   head () {
     return {
-      title: 'Contact Me',
+      title: this.title,
       meta: [{ 
         hid: 'description',
         name: 'description',
@@ -163,14 +164,18 @@ export default {
 
   async asyncData ({ $axios }) {
     try {
-      const { imageUrl } = await $axios.$get('/api/v1/page/about')
+      let { imageUrl, title } = await $axios.$get('/api/v1/page/about')
       if (!imageUrl) {
         throw new Error('empty imageUrl')
       }
-      return { imageUrl }
+      if (!title || title === '') {
+        title = 'Contact Me'
+      }
+      return { imageUrl, title }
     } catch {
       return {
-        imageUrl: '/img/default-contact.jpg'
+        imageUrl: '/img/default-contact.jpg',
+        title: 'Contact Me',
       }
     }
   },
@@ -180,25 +185,36 @@ export default {
 <style scoped lang="scss">
 
 .contact-form {
+  position: relative;
   width: 100%;
   padding: 1rem 1rem 2rem;
   border-radius: 2px;
-  background-color: rgba(#fff, .9);
-  background: linear-gradient(
-                to bottom right,
-                rgba(#fff, .95),
-                rgba($color__neutral-800, .9)
-              ),
-              url(/img/keyboard--crop-rotate.jpg);
-  background-size: cover;
-  background-position: center center;
   
   @media (min-width: $bp__layout) {
     padding: 2rem;
   }
 }
 
+.form-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(#fff, .95);
+  background: linear-gradient(
+                to bottom right,
+                rgba(#fff, .95),
+                rgba($color__neutral-800, .97)
+              ),
+              url(/img/default-contact.jpg);
+  background-size: cover;
+  background-position: top left;
+  transform: scaleX(-1);
+}
+
 .form-content {
+  z-index: 5;
   max-width: 30em;
   margin: 0 auto;
 }

pages/galleries.vue

@@ -1,7 +1,7 @@
 <template>
   <GalleryPage v-if="galleries && galleries.length > 0" :galleries="galleries">
   </GalleryPage>
-  <NoContent v-else heading="My Galleries"
+  <NoContent v-else :heading="title"
              message="My galleries are being prepared for upload, please check back soon."
   />
 </template>
@@ -26,7 +26,8 @@ export default {
 
   head () {
     return {
-      title: 'My Galleries',
+      // title: 'My Galleries',
+      title: this.title,
       meta: [{ 
         hid: 'description',
         name: 'description',
@@ -37,8 +38,11 @@ export default {
 
   async asyncData ({ $axios }) {
     try {
-      let { galleries } = await $axios.$get('/api/v1/galleries')
-      return { galleries }
+      let { galleries, title } = await $axios.$get('/api/v1/galleries')
+      if (title === '') {
+        title = 'My Galleries'
+      }
+      return { galleries, title }
     } catch {
       return {
         galleries: []

pages/services.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentPage heading="My Services">
+  <ContentPage :heading="title">
     <BackgroundImagePreloader v-if="showPreloaderBackground && backgroundImageUrls.length > 0"
                               slot="background"
                               class="background-preloader"
@@ -65,7 +65,7 @@ export default {
 
   head () {
     return {
-      title: 'My Services',
+      title: this.title,
       meta: [{ 
         hid: 'description',
         name: 'description',
@@ -94,13 +94,17 @@ export default {
   async asyncData ({ $axios }) {
     try {
       const { services } = await $axios.$get('api/v1/services')
-      let { imageUrl } = await $axios.$get('api/v1/page/services')
+      let { imageUrl, title } = await $axios.$get('api/v1/page/services')
 
       if (!imageUrl) {
         imageUrl = '/img/default-services.jpg'
       }
 
-      return { services, imageUrl }
+      if (!title || title === '') {
+        title = 'My Services'
+      }
+
+      return { services, imageUrl, title }
     } catch {
       return {
         services: [],