Merge pull request #36 from johnarban/small-time-display

Adjustments for small screens

src/BlazeStarNova.vue

@@ -125,7 +125,7 @@
       <!-- Date Picker -->
        <div id="empty-space">
        </div>
-       <div id="playback-controls" :class="{'justify-md-end': isTourPlaying, 'px-4': isTourPlaying}">
+       <div id="playback-controls" :class="{'justify-md-end': isTourPlaying, 'px-4': isTourPlaying, 'pc-widescreen': aspectRatio > 1.5}">
 
           <icon-button
             @activate="() => playPauseTour()"
@@ -138,7 +138,7 @@
               </template>
           </icon-button>
           <icon-button
-            v-if="!isTourPlaying"
+            v-if="!isTourPlaying && !(aspectRatio > 1.5 && height < 330)"
             @activate="() => {
               toggleAndGoToNova();  
             }"
@@ -220,8 +220,7 @@
                 rounded="lg"
                 elevation="5"
                 >
-                <time-display v-if="!isTourPlaying" :date="localSelectedDate" ampm show-timezone :timezone="shortTimezone" 
-                :smAndDown="smAndDown"/>
+                <time-display class="bsn__time" v-if="!isTourPlaying" :date="localSelectedDate" ampm :short-time-date="smAndDown" show-timezone :timezone="shortTimezone" />
                 <v-icon class="td__icon">mdi-cursor-default-click</v-icon>
               </v-card>
             </template>
@@ -313,8 +312,9 @@ playbackControl.pause();
 const { timePlaying } = playbackControl;
 
 const touchscreen = supportsTouchscreen();
-const { smAndDown } = useDisplay();
+const { smAndDown, width, height } = useDisplay();
 
+const aspectRatio = computed(() => width.value / height.value);
 
 
 const props = withDefaults(defineProps<MainComponentProps>(), {
@@ -851,6 +851,10 @@ p {
 
 #top-content {
   position: relative;
+  // top: 0;
+  // left: 0;
+  // width: calc(100vw - 2rem);
+  max-height: 2rem;
   flex-grow:0;
   margin: 1rem;
   pointer-events: none;
@@ -859,6 +863,11 @@ p {
   justify-content: space-between;
   align-items: flex-start;
   gap: 10px;
+  z-index: 1000;
+}
+
+#top-content > #left-buttons > #controls {
+  pointer-events: auto;
 }
 
 #left-buttons {
@@ -923,6 +932,14 @@ p {
   justify-content: center;
 }
 
+#playback-controls.pc-widescreen {
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 5px;
+  max-height: calc(100vh - 5rem);
+}
+
 #bottom-content {
   display: flex;
   flex-direction: row;
@@ -1067,12 +1084,18 @@ video {
 .icon-wrapper {
   width: fit-content;
   min-width: 50px;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
 }
 
 .jl_icon-button {
   border-radius: 20px;
   border:2px solid  var(--accent-color);
   background-color: black;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
 }
 
 .jl_icon_button_text {
@@ -1102,11 +1125,25 @@ video {
   border: 1px solid var(--accent-color);
   text-align: right;
   position: relative;
+  overflow: visible;
 }
 
 .td__icon {
   position: absolute;
-  bottom: 2px;
-  right: 2px;
+  bottom: -4px;
+  right: 0px;
+  z-index: 10000;
+}
+
+.bsn__time .td__time_time {
+  font-size: var(--default-font-size);
+}
+
+.bsn__time .td__date_date {
+  font-size: calc(0.85 * var(--default-font-size));
+}
+
+.bsn__time .td__timezone_tz {
+  font-size: calc(0.85 * var(--default-font-size));
 }
 </style>

src/TimeDisplay.vue

@@ -1,15 +1,20 @@
 <template>
     <div class="td__container">
-      <div class="td__time">
-        <span v-if="!smAndDown" class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }}:{{ pad(props.date.getSeconds()) }} {{ props.ampm ? ampm : '' }}</span>
-        <span v-if="smAndDown" class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }} {{ props.ampm ? ampm : '' }}</span>
+      <div class="td__date" v-if="props.showDate && !props.shortTimeDate">
+        <span class="td__date_date">
+          {{ props.date.toLocaleString('default', { month: 'long' }) }} {{ pad(props.date.getDate()) }}, {{ props.date.getFullYear() }}
+        </span>
       </div>
-      <div class="td__date">
-        <span class="td__date_date">{{ props.date.getFullYear() }}-{{ pad(props.date.getMonth() + 1) }}-{{ pad(props.date.getDate()) }}</span>
+      <div class="td__time" v-if="!props.shortTimeDate">
+        <span class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }}:{{ pad(props.date.getSeconds()) }} {{ props.ampm ? ampm : '' }}</span>
       </div>
-      <div class="td__timezone" v-if="props.showTimezone">
+      <div class="td__timezone" v-if="props.showTimezone && !props.shortTimeDate">
         <span class="td__timezone_tz">{{ props.timezone }}</span>
       </div>
+      <div class="td__time" v-if="props.shortTimeDate"> 
+        <span class="td__time_time">{{ shortTimeDateString }}</span>
+      </div>
+
    </div>  
 </template>
 
@@ -21,16 +26,14 @@ import { computed, defineProps } from 'vue';
 const props = defineProps({
   date: { type: Date, required: true },
   ampm: { type: Boolean, default: false },
-  showTimezone: { type: Boolean, default: false, required: false },
+  showDate: { type: Boolean, default: true, required: false },
+  showTimezone: { type: Boolean, default: true, required: false },
+  shortTimeDate: { type: Boolean, default: false, required: false },
   timezone: { 
     type: String, 
     default: Intl.DateTimeFormat().resolvedOptions().timeZone, 
     required: false 
-  },
-  smAndDown: { 
-    type: Boolean, 
-    default: false, 
-    required: false }
+  }
 }
 );
 
@@ -53,6 +56,17 @@ const ampm = computed(() => {
   return props.date.getHours() >= 12 ? 'PM' : 'AM';
 });
 
+const shortTimeDateString = computed(() => {
+  // return date formatted as Oct 3 9:00 AM
+  const month = props.date.toLocaleString('default', { month: 'short' });
+  const day = props.date.getDate();
+  const hour = props.date.getHours() % 12;
+  const minute = pad(props.date.getMinutes());
+  const ampm = props.date.getHours() >= 12 ? 'PM' : 'AM';
+  const tz =  props.timezone;
+  return `${month} ${day} ${hour}:${minute} ${ampm}` + (props.showTimezone ? ` ${tz}` : '');
+});
+
 
 </script>
 
@@ -67,12 +81,18 @@ const ampm = computed(() => {
   color: currentColor;
 }
 
+.td__container > div > span {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
 .td__time {
   width: max-content;
 }
 
 .td__time_time {
-  font-size: var(--default-font-size);
+  font-size: 1em;
   color: inherit;
   text-align: center;
   text-wrap: nowrap;
@@ -84,7 +104,7 @@ const ampm = computed(() => {
 }
 
 .td__date_date {
-  font-size: calc(0.85 * var(--default-font-size));
+  font-size: 0.75em;
   color: inherit;
   text-align: center;
   text-wrap: nowrap;
@@ -96,7 +116,7 @@ const ampm = computed(() => {
 }
 
 .td__timezone_tz {
-  font-size: calc(0.85 * var(--default-font-size));
+  font-size: 0.75em;
   color: inherit;
   text-align: center;
   text-wrap: nowrap;