Icon menu, countdown optional

dribdat · Jun 21, 2024 · ef35923 · ef35923
1 parent 67ac896
commit ef35923
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/components/Challenges.vue b/src/components/Challenges.vue
@@ -82,7 +82,7 @@
             @preview="seePreview"
             :projects="filterProjects"></Honeycomb>
 
-    <Footer v-if="isHeadline" :event="event"></Footer>
+    <Footer v-if="isHeadline" :event="event" :isCountdown="isCountdown"></Footer>
 
     <div class="loading" v-if="projects == null" title="Loading ...">🏀</div>
 
@@ -93,31 +93,33 @@
         &#10060;
       </button>
       <input type="checkbox" v-model="isHeadline" id="isHeadline">
-        <label for="isHeadline" title="⛳">Header</label>
+        <label for="isHeadline" title="Header">⛳</label>
+      <input type="checkbox" v-model="isCountdown" id="isCountdown">
+        <label for="isCountdown" title="Countdown">⏰</label>
       <input type="checkbox" v-model="isPreviews" id="isPreviews">
-        <label for="isPreviews" title="👀">Popup</label>
+        <label for="isPreviews" title="Pop-ups">👀</label>
       <input type="checkbox" v-model="isExcerpts" id="isExcerpts">
-        <label for="isExcerpts" title="🖼️ ">Excerpt</label>
+        <label for="isExcerpts" title="Excerpts">🖼️</label>
       <input type="checkbox" v-model="isButtons" id="isButtons">
-        <label for="isButtons" title="🪟">Join/Contact</label>
+        <label for="isButtons" title="Join/Contact button">🪟</label>
       <input type="checkbox" v-model="isComments" id="isComments">
-        <label for="isComments" title="💬">Comment</label>
+        <label for="isComments" title="Comment buttons">💬</label>
       <input type="checkbox" v-model="isChallenges" id="isChallenges">
-        <label for="isChallenges" title="🏆">Challenges</label>
+        <label for="isChallenges" title="Show Challenges">🏆</label>
       <input type="checkbox" v-model="isHexagons" id="isHexagons">
-        <label for="isHexagons" title="⬣">Hexgrid</label>
+        <label for="isHexagons" title="Hexgrid mode">⬣</label>
       <select v-model="darkMode" id="darkMode"
              @change="changeDark">
         <option value="default" selected>🌗 Colors</option>
         <option v-for="option in darkOptions" 
                 v-bind:value="option.id" >{{ option.name }}</option>
-      </select>
+      </select>&nbsp;
       <select v-model="sortOrder" id="sortBy"
              @change="changeOrder">
         <option value="default" selected>🡻 Sort</option>
         <option v-for="option in sortOptions" 
                 v-bind:value="option.id" >{{ option.name }}</option>
-      </select>
+      </select>&nbsp;
       <span class="share-button">
         🌐<a :href="shareUrl()">Share</a>
       </span>
@@ -160,6 +162,7 @@ export default {
       isComments: false,
       isChallenges: false,
       isHeadline: false,
+      isCountdown: false,
       isHexagons: false,
       isPreviews: false,
       isExcerpts: false,
@@ -197,6 +200,7 @@ export default {
     const shareOptions = window.location.search || this.options;
     const urlParams = new URLSearchParams(shareOptions);
     this.isHeadline = Boolean(urlParams.get("headline"));
+    this.isCountdown = Boolean(urlParams.get("countdown"));
     this.isHexagons = Boolean(urlParams.get("hexagons"));
     this.isButtons = Boolean(urlParams.get("buttons"));
     this.isPreviews = Boolean(urlParams.get("previews"));
@@ -366,6 +370,7 @@ export default {
     shareUrl: function () {
       return '?' +
         (this.isHeadline ? '&headline=1' : '') +
+        (this.isCountdown ? '&countdown=1' : '') +
         (this.isHexagons ? '&hexagons=1' : '') +
         (this.isPreviews ? '&previews=1' : '') +
         (this.isExcerpts ? '&excerpts=1' : '') +

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -2,7 +2,7 @@
   <div class="section-footer"
       :title="timespan">
 
-    <countdown :deadline="deadline" />
+    <countdown :deadline="deadline" v-if="isCountdown" />
 
     <div container v-if="event.description" class="event-details">
       <markdown class="description col" 
@@ -21,7 +21,8 @@ export default {
   props: {
     event: {
       required: true
-    }
+    },
+    isCountdown: Boolean
   },
   components: {
     markdown: VueMarkdown,
@@ -60,10 +61,12 @@ export default {
 }
 .event-details {
   margin: 1em 20%;
-  padding: 0 0.8em;
+  padding: 0.5em 1em;
   border: 1px solid lightgray;
-  background: #eee;
-  box-shadow: 5px 5px 0px black;
+  background: #fafafa;
+  box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
+  font-size: 90%;
+  text-align: left;
 }
 
 </style>