Add image support

lolevbeer · Dec 9, 2023 · 223c96c · 223c96c
1 parent 2cc291a
commit 223c96c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -34,6 +34,7 @@ <h1>{{ page.title }}</h1>
           </a>
           <img v-if="item.glutenFree == 'TRUE'" class="gf" src="./assets/gluten-free.svg"></img>
         </span>
+        <img v-if="item.entryImage" class="draft-entry-image" :src="item.entryImage" />
         <span v-if="item.type" class="beer-style">${ item.type }</span>
         <div v-if="item.options" class="options">
           <span v-for="option in (item.options.split('|'))">

diff --git a/_sass/main.sass b/_sass/main.sass
@@ -234,6 +234,11 @@ img[src$=".webp"]
 [data-tap="10"] .tap
   transform: translateX(-7px)
 
+.draft-entry-image
+  display: inline
+  height: 75px
+  vertical-align: middle
+
 .tap
   display: inline-block
   letter-spacing: 3px

diff --git a/assets/js/render-beer-persist.js b/assets/js/render-beer-persist.js
@@ -29,7 +29,6 @@ new Vue({
           });
           return item;
         });
-
         this.items = items;
         this.$nextTick(this.changeColors);
       } catch (error) {
@@ -58,6 +57,16 @@ new Vue({
       let offsetRight = boundingBox.right + window.pageXOffset;
       return { left: offsetLeft, right: offsetRight };
     },
+    addCounts() {
+      // Count all 'article' tags
+      var articleCount = document.querySelectorAll('article').length;
+
+      // Select the '#app' element, remove all existing classes, and add the new count class
+      var appElement = document.querySelector('#app');
+      if (appElement) {
+        appElement.className = 'count-' + articleCount;
+      }
+    },
     getWidths() {
       let articles = document.querySelectorAll("article");
 
@@ -88,7 +97,7 @@ new Vue({
     },
     adjustPosition(app) {
       let height = app.offsetHeight;
-      let margin = (window.innerHeight - height) / 2
+      let margin = (window.innerHeight - height) / 2;
       app.style.marginTop = (75 + margin) + 'px';
     },
     changeColors() {
@@ -117,7 +126,9 @@ new Vue({
     }, 10000);
     setInterval(() => {
       this.loadData(id, tab);
-      console.log('Data updated from Google Sheets')
+      console.log('Data updated from Google Sheets');
+      this.addCounts();
+      console.log("counts")
     }, 10000);
   }
 });