only show device ID and other debug data when the field is hovered

RopeScore · Jul 11, 2023 · dd78aa5 · dd78aa5
1 parent 53e7d26
commit dd78aa5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/SpeedLiveScore.vue b/src/components/SpeedLiveScore.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border border-black bg-white dark:border-gray-600 dark:bg-black dark:text-white flex items-center justify-center relative overflow-hidden"
+    class="score-container border border-black bg-white dark:border-gray-600 dark:bg-black dark:text-white flex items-center justify-center relative overflow-hidden"
     :class="{
       'bg-green-100': scoresheet?.__typename === 'MarkScoresheet' && scoresheet?.completedAt,
       'dark:bg-green-900': scoresheet?.__typename === 'MarkScoresheet' && scoresheet?.completedAt,
@@ -30,7 +30,7 @@
       {{ tally?.step ?? 0 }}
     </div>
 
-    <div class="absolute top-2 right-2 text-gray-500">
+    <div class="debug absolute top-2 right-2 text-gray-500">
       <div v-if="deviceId">
         {{ deviceId }}
       </div>
@@ -97,6 +97,13 @@ const fontSize = computed(() => {
   font-size: var(--val, 20rem);
   line-height: 1;
 }
+
+.score-container .debug {
+  @apply hidden;
+}
+.score-container:hover .debug {
+  @apply block;
+}
 </style>
 
 <style src="./flag-bg.css"></style>
diff --git a/src/components/TimingLiveScore.vue b/src/components/TimingLiveScore.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border border-black bg-white dark:border-gray-600 dark:bg-black dark:text-white flex items-center justify-center relative overflow-hidden"
+    class="score-container border border-black bg-white dark:border-gray-600 dark:bg-black dark:text-white flex items-center justify-center relative overflow-hidden"
     :class="{
       'bg-green-100': scoresheet?.__typename === 'MarkScoresheet' && scoresheet?.completedAt,
       'dark:bg-green-900': scoresheet?.__typename === 'MarkScoresheet' && scoresheet?.completedAt,
@@ -30,7 +30,7 @@
       {{ tally?.seconds ?? 0 }}
     </div>
 
-    <div class="absolute top-2 right-2 text-gray-500">
+    <div class="debug absolute top-2 right-2 text-gray-500">
       <div v-if="deviceId">
         {{ deviceId }}
       </div>
@@ -97,6 +97,13 @@ const fontSize = computed(() => {
   font-size: var(--val, 20rem);
   line-height: 1;
 }
+
+.score-container .debug {
+  @apply hidden;
+}
+.score-container:hover .debug {
+  @apply block;
+}
 </style>
 
 <style src="./flag-bg.css"></style>