daily details now have short and long form depending on viewport size

Author: michaelchadwick

assets/css/layout/root.css

@@ -197,7 +197,7 @@ section#game {
     width: 100%;
 
     .setting-row {
-      font-size: 20px;
+      font-size: 1.1rem;
       margin: 0 auto;
       padding: 4px;
       text-align: center;
@@ -257,6 +257,7 @@ section#game {
     display: none;
     font-size: 0.75rem;
     height: 20px;
+    line-height: 1;
     margin: 5px 0 0;
     padding: 4px 4px 0;
     transform: scale(0);
@@ -268,6 +269,20 @@ section#game {
       .day {
         font-family: "Changa Bold", sans-serif;
         font-weight: 400;
+
+        &.long {
+          display: none;
+        }
+
+        @media (min-width: 576px) {
+          &.short {
+            display: none;
+          }
+
+          &.long {
+            display: inline;
+          }
+        }
       }
     }
   }

assets/js/app/lib/helpers.js

@@ -54,25 +54,31 @@ Deckdle.__getFormattedDate = (date) => {
 
   return formatted_date
 }
-Deckdle.__getTodaysDate = () => {
+Deckdle.__getTodaysDate = (type = 'short') => {
   const d = new Date(Date.now())
-  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ]
-
-  return `${days[d.getDay()]}, ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
+  let days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+  if (type == 'long') {
+    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+    const months = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]
+
+    return `${days[d.getDay()]}, ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
+  } else {
+    return `${days[d.getDay()]}, ${d.getFullYear()}/${d.getMonth()}/${d.getDate()}`
+  }
 }
 
 Deckdle.__hasParentWithMatchingSelector = (target, selector) => {

assets/js/app/ui.js

@@ -257,7 +257,8 @@ Deckdle.ui._dealCards = (animate = false) => {
 Deckdle.ui._updateDailyDetails = (index) => {
   Deckdle.dailyNumber = parseInt(index) + 1
   Deckdle.dom.dailyDetails.querySelector('.index').innerHTML = (parseInt(index) + 1).toString()
-  Deckdle.dom.dailyDetails.querySelector('.day').innerHTML = Deckdle.__getTodaysDate()
+  Deckdle.dom.dailyDetails.querySelector('.day.long').innerHTML = Deckdle.__getTodaysDate('long')
+  Deckdle.dom.dailyDetails.querySelector('.day.short').innerHTML = Deckdle.__getTodaysDate('short')
 }
 Deckdle.ui._updateCardCounts = () => {
   Deckdle.dom.tableauCount.innerText = Deckdle._tableauCount()

index.html

@@ -293,7 +293,8 @@ <h1>Deckdle</h1>
         </div>
 
         <div id="daily-details" class="setting-row">
-          Deckdle #<span class="index"></span> for <span class="day"></span>
+          Deckdle #<span class="index"></span> for <span class="day short"></span
+          ><span class="day long"></span>
         </div>
       </div>