:recycle: address #81 | fix prop pass to youTube thumb | pass standard size feature-image for card | pass max size for hero

vue-theme/src/app.vue

@@ -15,11 +15,12 @@ import ciaFooter from '@/components/footer'
 import '@/sss'
 
 export default {
-    components: { ciaNav, ciaHero, 'cia-footer':ciaFooter }
+    components: { ciaNav, ciaHero, 'cia-footer': ciaFooter },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import './sss/variables.sss'
 @import './sss/theme.sss'
 
@@ -90,6 +91,5 @@ html
                     /* background-color: lightpink */
                 
         nav, footer
-            &.main
-                /* background-color: pink */
-</style>
+            &.main /* background-color: pink */
+</style>

vue-theme/src/components/breadcrumb.vue

@@ -14,15 +14,16 @@
 export default {
     props: {
         type: { type: String },
-        post: { type: Object }
-    }
+        post: { type: Object },
+    },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 .breadcrumb
     h5
         font-size: $ms--1
-</style>
+</style>

vue-theme/src/components/card.vue

@@ -6,7 +6,7 @@
     article.card--info(:class="{ 'wide': wide }")
         router-link(:to="`/${type}/${content.slug}`")
             //- set image to thumbnail setting
-            featured-image(:post="content")
+            featured-image(:post="content", thumbsize="'standard'")
         .f-col.w-max
             router-link(:to="`/${type}/${content.slug}`")
                 h1.t-up.t-cntr.t-b {{ content.title }}
@@ -17,11 +17,12 @@
 import featuredImage from '@/components/featured-image'
 export default {
     components: { featuredImage },
-    props: ['type', 'content', 'wide', 'hide-type']
+    props: ['type', 'content', 'wide', 'hide-type'],
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 .card
@@ -58,6 +59,4 @@ export default {
             display: flex
             padding: 0
             grid-gap: $ms-0
-
-            
 </style>

vue-theme/src/components/featured-image.vue

@@ -35,7 +35,7 @@ export default {
     methods: {
         getThumbnailFromYt(url) {
             let size = this.thumbsize ? this.thumbsize : 'max'
-            return ytThumbnail(url, 'max')
+            return ytThumbnail(url, size)
         },
     },
 }

vue-theme/src/components/footer.vue

@@ -73,17 +73,18 @@
 </template>
 
 <script>
-export default { 
+export default {
     computed: {
         today() {
             const today = new Date()
             return today.getFullYear()
-        }
+        },
     },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 
@@ -190,4 +191,4 @@ export default {
             > ul
                 /* background-color: teal */
                 background-color: $cia_red
-</style>
+</style>

vue-theme/src/components/gallery.vue

@@ -19,19 +19,23 @@
 export default {
     props: {
         activeImageIndex: { type: Number, required: true, default: 0 },
-        images: { type: Object, required: true }
+        images: { type: Object, required: true },
     },
     data() {
         return {
-            selected: 0
+            selected: 0,
         }
     },
     methods: {
         prev() {
-            this.selected > 0 ? this.selected-- : this.selected = Object.keys(this.images).length - 1
+            this.selected > 0
+                ? this.selected--
+                : (this.selected = Object.keys(this.images).length - 1)
         },
         next() {
-            this.selected < Object.keys(this.images).length - 1 ? this.selected++ : this.selected = 0
+            this.selected < Object.keys(this.images).length - 1
+                ? this.selected++
+                : (this.selected = 0)
         },
         hideGallery() {
             this.$emit('close')
@@ -48,12 +52,12 @@ export default {
                     this.hideGallery()
                     break
             }
-        }
+        },
     },
     watch: {
         activeImageIndex(newVal, oldVal) {
             this.selected = newVal
-        }
+        },
     },
     async mounted() {
         // Set the first selection
@@ -62,11 +66,12 @@ export default {
     },
     unmounted() {
         window.removeEventListener('keydown', this.interpretKeypress)
-    }
+    },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 
@@ -115,4 +120,4 @@ export default {
                 background-color: rgba(255, 255, 255, 0.1)
                 height: 100vh
                 padding: 1.0em
-</style>
+</style>

vue-theme/src/components/hero.vue

@@ -34,7 +34,7 @@ export default {
     data() {
         return {
             heroHeight: 0,
-            isPlaying: false
+            isPlaying: false,
         }
     },
     computed: {
@@ -47,20 +47,21 @@ export default {
         heroIdFromUrl() {
             const url = this.showHero.split('/')
             return url.pop()
-        }
+        },
     },
     methods: {
         onResize() {
             this.heroHeight = this.$el.offsetWidth / 1.8
         },
         getThumbnailFromYt(url) {
-            return ytThumbnail(url, 'large')
-        }
+            return ytThumbnail(url, 'max')
+        },
     },
     mounted() {
         this.heroHeight = this.$el.offsetWidth / 1.8
-        this.$nextTick(() => { 
-            window.addEventListener('resize', this.onResize) })
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize)
+        })
     },
     watch: {
         $route() {
@@ -70,18 +71,18 @@ export default {
             this.$store.commit('CLEAR_HERO')
         },
         heroHeight() {
-            if(!this.showHero) return
-            Object.assign(this.$el.style, {height: this.heroHeight + 'px'})
-        }
+            if (!this.showHero) return
+            Object.assign(this.$el.style, { height: this.heroHeight + 'px' })
+        },
     },
     beforeUnmount() {
         window.removeEventListener('resize', this.onResize)
     },
-    
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import './../sss/theme.sss'
 @import './../sss/variables.sss'
 
@@ -151,5 +152,4 @@ export default {
                     top: 18%
                     left: 30%
                     border-width: 1.5em 0 1.5em 2.5em
-            
-</style>
+</style>

vue-theme/src/components/navigation/navigation.vue

@@ -59,16 +59,17 @@ export default {
                 // 'posts',
             ]
             const filtered = postTypes.filter(val => !ignored.includes(val))
-            return [ ...filtered, ...extras ]
+            return [...filtered, ...extras]
         })
         return {
-            menuItems
+            menuItems,
         }
-    }
+    },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../../sss/variables.sss'
 @import '../../sss/theme.sss'
 
@@ -167,6 +168,4 @@ nav.main
     @media (min-width:  $extra-large)
         .menu > ul
             max-width: $max-width
-
-
-</style>
+</style>

vue-theme/src/components/sidebars/sidebar.vue

@@ -63,7 +63,7 @@ aside.sidebar
 </template>
 
 <script>
-// related sidebar list 
+// related sidebar list
 import relatedSidebar from './related'
 import exhibitionsSidebar from './exhibitions'
 import eventsSidebar from './events'
@@ -78,32 +78,31 @@ import { sortTypes } from '@/utils/helpers'
 export default {
     props: {
         type: {
-            type: String
+            type: String,
         },
         layout: {
-            type: String
+            type: String,
         },
         related: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     components: {
         exhibitionsSidebar,
         eventsSidebar,
-        relatedSidebar
+        relatedSidebar,
     },
     data() {
         return {
             sortTypes: {
-                'alphabetized': `${sortTypes.alpha}`,
+                alphabetized: `${sortTypes.alpha}`,
                 'by material': `${sortTypes.material}`,
                 'by artist': `${sortTypes.artist}`,
                 'by episode': `${sortTypes.episode}`,
                 'by artist type': `${sortTypes.artisttypes}`,
                 // 'by event type': `${sortTypes.eventtypes}`,
                 // 'by exhibition type': `${sortTypes.exhibitiontypes}`,
-
-            }
+            },
         }
     },
     computed: {
@@ -115,7 +114,6 @@ export default {
                         Object.keys(this.sortTypes)[0],
                         Object.keys(this.sortTypes)[1],
                         Object.keys(this.sortTypes)[4],
-
                     ]
                     break
                 case 'shorts':
@@ -132,12 +130,13 @@ export default {
                     break
             }
             return opts
-        }
-    }
+        },
+    },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../../sss/variables.sss'
 @import '../../sss/theme.sss'
 aside.sidebar
@@ -168,4 +167,4 @@ aside.sidebar
     aside.sidebar
         min-width: 25%
         width: 25%
-</style>
+</style>

vue-theme/src/pages/index.vue

@@ -40,11 +40,11 @@ import { convertTitleCase, postTypes, sortTypes } from '@/utils/helpers'
 export default {
     mixins: [postTypeGetters, scrollTop],
     components: { card },
-    data() { 
+    data() {
         return {
             firstRow: ['episodes', 'exhibitions', 'events', 'artists', 'posts'],
             secondRow: 'artists', // This is only ONE post
-            thirdRow: ['episodes', 'exhibitions', 'events', 'artists', 'posts']
+            thirdRow: ['episodes', 'exhibitions', 'events', 'artists', 'posts'],
         }
     },
     created() {
@@ -55,23 +55,30 @@ export default {
             // We try and fetch EVERYTHING except
             // for EVENTS and EXHIBITIONS we only grab
             // the current or upcoming on load
-            if(!['events', 'exhibitions'].includes(type)) {
+            if (!['events', 'exhibitions'].includes(type)) {
                 this.$store.dispatch(`getAll${capitalizedType}`)
             } else {
-                this.$store.dispatch(`getAll${capitalizedType}`, sortTypes.currentAndUpcoming)
+                this.$store.dispatch(
+                    `getAll${capitalizedType}`,
+                    sortTypes.currentAndUpcoming,
+                )
             }
         })
         this.checkAndSetHero('welcome')
     },
     methods: {
         async checkAndSetHero(type) {
-            if(!this['allPagesLoaded']) {
-                await this.$store.dispatch('getAllPages')    
+            if (!this['allPagesLoaded']) {
+                await this.$store.dispatch('getAllPages')
             }
             const page = this.allPages[type]
-            if(!page) return
+            if (!page) return
             let json = { url: page.featured, heroType: 'image' }
-            if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
+            if (
+                page.hero &&
+                JSON.parse(page.hero) &&
+                JSON.parse(page.hero).url
+            ) {
                 json = JSON.parse(page.hero)
                 json.heroType = 'video'
             }
@@ -81,16 +88,19 @@ export default {
             return Object.values(this[`all${convertTitleCase(type)}`])[0]
         },
         randomPostOfType(type) {
-            const postsOfType = Object.values(this[`all${convertTitleCase(type)}`])
+            const postsOfType = Object.values(
+                this[`all${convertTitleCase(type)}`],
+            )
             const max = postsOfType.length
             const rand = Math.floor(Math.random() * max)
             return postsOfType[rand]
-        }
-    }
+        },
+    },
 }
 </script>
 
 <style lang="postcss">
+// prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
 .page--index 

vue-theme/src/pages/list.vue

@@ -141,14 +141,43 @@ export default {
 </script>
 
 <style lang="postcss">
-@import '../sss/variables.sss' @import '../sss/theme.sss' .page--list
-    /* background-color: white */ article > header /* padding: 1em 0 1em 0 */
-    padding: 1em > h1 margin: 0 > .content padding: 0 width: 100%
-    /* posts not grid list */ ul img max-width: 50% .is-grid display: flex
-    flex-direction: row flex-wrap: wrap justify-content: space-between
-    /* extra padding required? */ /* padding: $ms-0 */
-    /* background-color: white */ section width: 32.5%
-    /* 4 column grid see how dense this becomes */ /* width: 24% */ ul flex-wrap:
-    wrap list-style: none img max-width: 100% @media (min-width: $medium)
-    .page--list.f-col flex-direction: row;
+// prettier-ignore
+@import '../sss/variables.sss'
+@import '../sss/theme.sss'
+.page--list
+    /* background-color: white */
+    article
+        > header
+            /* padding: 1em 0 1em 0 */
+            padding: 1em
+            > h1
+                margin: 0
+            > .content
+                padding: 0
+                width: 100%
+        /* posts not grid list */
+        ul
+            img
+                max-width: 50%
+
+        .is-grid
+            display: flex
+            flex-direction: row
+            flex-wrap: wrap
+            justify-content: space-between
+            /* extra padding required? */
+            /* padding: $ms-0 */
+            /* background-color: white */
+            section
+                width: 32.5%
+                /* 4 column grid see how dense this becomes */
+                /* width: 24% */
+            ul
+                flex-wrap: wrap
+                list-style: none
+                img
+                    max-width: 100%
+@media (min-width: $medium)
+    .page--list.f-col
+        flex-direction: row
 </style>

vue-theme/src/pages/single.vue

@@ -253,21 +253,83 @@ export default {
 </script>
 
 <style lang="postcss">
-@import '../sss/variables.sss' @import '../sss/theme.sss' .page--single
-    /* background-color: $cia_white2 */ article background-color: white padding:
-    $ms-0 h1 color: $cia_black /* font-weight: 800 */ /* padding: $ms--3 0 */ >
-    ul /* grid-gap: $ms-0 */ list-style: none
-    /* change to a 1/3 width of the article*/ img.feature width: 20em li
-    /* iframe container 16:9 */ .iframe-container position: relative width: 100%
-    padding-bottom: 56.25% /* iframe container portrait */ .iframe-container-v
-    position: relative width: 100% height: 100% padding-bottom: 125% iframe
-    position: absolute top: 0px left: 0px width: 100% height: 100%
-    .wp-block-embed .is-type-video position: relative width: 100% padding-bottom:
-    56.25% * hr border: $ms--3 margin: $ms-2 auto outline-style: auto
-    &.is-style-default height: 1px width: 15vw &.is-style-wide height: 1px width:
-    50vw &.is-style-dots outline-style: none font-weight: bolder breadcrumb h5
-    /* color: yellow */ color: $cia_red /* font-weight: 400 */
-    /* padding: $ms--6 0 */ //- end of article icon
-    footer padding: $ms-6 0 img height: $ms-3 width: $ms-3 @media
-    (min-width: $medium) .page--single.f-col flex-direction: row;
+// prettier-ignore
+@import '../sss/variables.sss'
+@import '../sss/theme.sss'
+.page--single
+    /* background-color: $cia_white2 */
+    article
+        background-color: white
+        padding: $ms-0
+        h1
+            color: $cia_black
+            /* font-weight: 800 */
+            /* padding: $ms--3 0 */
+        > ul
+            /* grid-gap: $ms-0 */
+            list-style: none
+            /* change to a 1/3 width of the article*/
+            img.feature
+                width: 20em 
+            li
+        /* iframe container 16:9 */
+        .iframe-container 
+            position: relative
+            width: 100% 
+            padding-bottom: 56.25% 
+
+        /* iframe container portrait */
+        .iframe-container-v
+            position: relative
+            width: 100%
+            height: 100%
+            padding-bottom: 125%
+            
+        iframe 
+            position: absolute 
+            top: 0px 
+            left: 0px 
+            width: 100% 
+            height: 100%
+        
+        .wp-block-embed .is-type-video
+            position: relative
+            width: 100% 
+            padding-bottom: 56.25% 
+
+        * hr
+            border: $ms--3
+            margin: $ms-2 auto
+            outline-style: auto
+
+            &.is-style-default
+                height: 1px
+                width: 15vw
+
+            &.is-style-wide
+                height: 1px
+                width: 50vw
+        
+            &.is-style-dots
+                outline-style: none
+                font-weight: bolder
+
+        breadcrumb
+            h5
+                /* color: yellow */
+                color: $cia_red
+                /* font-weight: 400 */
+                /* padding: $ms--6 0 */
+        
+        //- end of article icon
+        footer
+            padding: $ms-6 0
+            img
+                height: $ms-3
+                width: $ms-3
+
+        
+@media (min-width: $medium)
+    .page--single.f-col
+        flex-direction: row
 </style>