Merge pull request #9 from tub-aiglart/develop

Merge into master
tub-aiglart · Jun 14, 2019 · b31235e · b31235e
2 parents 4c04138 + e19b100
commit b31235e
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 268 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -7,10 +7,30 @@ export default {
     title: 'tub-aiglart.',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'main' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0, user-scalable=no' },
+      { hid: 'description', name: 'description', content: 'Tuija Unho-Berger ist eine in Bayern lebende finnische Künstlerin mit berühmten Ursprung (Ilmari Unho, Satu Unho). Auf ihrer Webseite können Sie ihre Werke begutachten, sowohl als auch Termine von kommenden oder vergangenen Ausstellungen einsehen.' },
+      { hid: 'author', name: 'author', content: 'Oskar "Rxsto" Lang (https://rxsto.me)' },
+      { hid: 'publisher', name: 'publisher', content: 'Tuija Unho-Berger' },
+      { hid: 'image', name: 'image', content: 'https://tub-aiglart.com/img/logo.png' },
+      { hid: 'robots', name: 'robots', content: 'index, follow' },
+      { hid: 'application-name', name: 'application-name', content: 'tub-aiglart' },
+      { hid: 'theme-color', name: 'theme-color', content: '#000000' },
+      { hid: 'og:title', property: 'og:title', content: 'tub-aiglart' },
+      { hid: 'og:site_name', property: 'og:site_name', content: 'tub-aiglart' },
+      { hid: 'og:type', property: 'og:type', content: 'website' },
+      { hid: 'og:url', property: 'og:url', content: 'https://tub-aiglart.com' },
+      { hid: 'og:description', property: 'og:description', content: 'Tuija Unho-Berger ist eine in Bayern lebende finnische Künstlerin mit berühmten Ursprung (Ilmari Unho, Satu Unho). Auf ihrer Webseite können Sie ihre Werke begutachten, sowohl als auch Termine von kommenden oder vergangenen Ausstellungen einsehen.' },
+      { hid: 'og:locale', property: 'og:locale', content: 'en_US' },
+      { hid: 'og:image', property: 'og:image', content: 'https://tub-aiglart.com/img/logo.png' },
+      { hid: 'og:image:type', property: 'og:image:type', content: 'image/png' },
+      { hid: 'og:image:width', property: 'og:image:width', content: '500' },
+      { hid: 'og:image:height', property: 'og:image:height', content: '500' },
+      { hid: 'og:image:alt', property: 'og:image:alt', content: 'tub-aiglart logo' },
+      { hid: 'twitter:card', name: 'twitter:card', content: 'summary' },
+      { hid: 'twitter:creator', name: 'twitter:creator', content: '@rxsto_official' }
     ],
     link: [
+      { rel: 'canonical', href: 'https://tub-aiglart.com' },
       { rel: 'icon', href: '/img/logo.png' },
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto:400,500,700&display=swap' },
       { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.7.1/css/all.css' }
@@ -25,14 +45,15 @@ export default {
 
   modules: [
     '@nuxtjs/axios',
-    '@nuxtjs/pwa'
+    '@nuxtjs/pwa',
+    ['nuxt-env', {
+      keys: [
+        'CDN_PATH',
+        'BASE_URL'
+      ]
+    }]
   ],
 
-  env: {
-    CDN_PATH: process.env.CDN_PATH,
-    BASE_URL: process.env.BASE_URL
-  },
-
   build: {
     extend(config, ctx) {
       if (ctx.isDev && ctx.isClient) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "dotenv": "^8.0.0",
     "node-sass": "^4.12.0",
     "nuxt": "^2.8.0",
+    "nuxt-env": "^0.1.0",
     "sass-loader": "^7.1.0"
   },
   "devDependencies": {

diff --git a/pages/exhibitions.vue b/pages/exhibitions.vue
@@ -79,8 +79,8 @@
 
 <script>
 export default {
-  async asyncData({ env, $axios }) {
-    const result = await $axios.$get(env.BASE_URL + '/exhibitions')
+  async asyncData({ app }) {
+    const result = await app.$axios.$get(`${app.$env.BASE_URL}/exhibitions`)
     return {
       solo: result.filter(exhibition => exhibition.type === 'solo').sort((a, b) => (a.year.includes('-') ? a.year.split('-')[0] : a.year) - (b.year.includes('-') ? b.year.split('-')[0] : b.year)),
       group: result.filter(exhibition => exhibition.type === 'group').sort((a, b) => (a.year.includes('-') ? a.year.split('-')[0] : a.year) - (b.year.includes('-') ? b.year.split('-')[0] : b.year))
@@ -106,6 +106,7 @@ export default {
       margin-bottom: 25px;
 
       .table {
+        width: 100%;
 
         .head {
 

diff --git a/pages/gallery.vue b/pages/gallery.vue
@@ -27,11 +27,11 @@
 
 <script>
 export default {
-  async asyncData({ env, $axios }) {
-    const result = await $axios.$get(env.BASE_URL + '/images')
+  async asyncData({ app }) {
+    const result = await app.$axios.$get(`${app.$env.BASE_URL}/images`)
     return {
-      images: result.filter(image => image.displayed === true),
-      path: process.env.CDN_PATH + 'images/'
+      images: result.filter(image => image.displayed === true || image.displayed === 'true'),
+      path: `${app.$env.CDN_PATH}/images/`
     }
   },
   methods: {
@@ -40,11 +40,9 @@ export default {
       const image = document.getElementById(`full-${id}`)
       if (image.style.display === 'flex') {
         image.style.display = 'none'
-        image.style.top = '0'
         body.style.overflow = 'initial'
       } else {
         image.style.display = 'flex'
-        image.style.top = window.scrollY + 'px'
         body.style.overflow = 'hidden'
       }
     }
@@ -65,9 +63,10 @@ export default {
     margin: 25px 25px 0 25px;
     padding: 50px;
     box-shadow: var(--shadow-all);
+    flex-wrap: wrap;
 
     .full {
-      position: absolute;
+      position: fixed;
       display: none;
       flex-direction: row;
       justify-content: center;
@@ -99,16 +98,21 @@ export default {
         font-weight: 700;
         font-family: var(--font-mono);
         text-align: center;
+
+        &:hover {
+          cursor: pointer;
+          background: var(--white);
+        }
       }
     }
 
     .thumbnail {
-      width: 50%;
+      margin-right: 50px;
 
       .source {
         width: auto;
         height: auto;
-        max-height: 100%;
+        max-height: 500px;
         max-width: 100%;
 
         &:hover {
@@ -121,8 +125,6 @@ export default {
     .text {
       display: flex;
       flex-direction: column;
-      padding: 0 50px;
-      max-width: 40%;
 
       .title {
         font-size: 50px;
@@ -155,11 +157,13 @@ export default {
 
       .thumbnail {
         width: auto;
+        margin: 0;
       }
 
       .text {
         max-width: 100%;
         padding: 20px 0 0 0;
+        text-align: center;
       }
     }
   }
@@ -173,7 +177,7 @@ export default {
       .text {
 
         .title {
-          font-size: 30px;
+          font-size: 25px;
         }
 
         .description {

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="index">
+    <div v-if="news.displayed" class="news">
+      <h1 class="title">
+        {{ news.title }}
+      </h1>
+      <p class="description">
+        {{ news.description }}
+      </p>
+    </div>
     <div class="wrapper">
       <img class="portrait" src="/img/portrait.jpg" alt="tuija unho-berger">
       <p class="cv">
@@ -11,22 +19,48 @@
 
 <script>
 export default {
+  async asyncData({ app }) {
+    const result = await app.$axios.$get(`${app.$env.BASE_URL}/news`)
+    return {
+      news: result
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .index {
   display: flex;
+  flex-direction: column;
   padding: 25px;
 
+  .news {
+    display: flex;
+    flex-direction: column;
+    background: var(--black);
+    box-shadow: var(--shadow-all);
+    padding: 50px;
+    margin-bottom: 25px;
+
+    .title {
+      font-size: 50px;
+      font-weight: 700;
+    }
+
+    .description {
+      font-size: 25px;
+      margin-top: 10px;
+      font-family: var(--font-mono);
+    }
+  }
+
   .wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
     background: var(--black);
     box-shadow: var(--shadow-all);
     padding: 50px;
-    width: 100%;
 
     .portrait {
       width: 100%;

diff --git a/static/css/default.css b/static/css/default.css