From ab4ca233513e783b649134e7247c5ad8a550275b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ku=C4=87mierz?= <gkucmierz@gmail.com>
Date: Thu, 7 Dec 2023 17:15:07 +0100
Subject: [PATCH] user select: none; format split; height transition; turn off
 cursor: pointer (selection)

---
 src/App.vue             |  1 -
 src/components/Home.vue | 31 +++++++++++++++++++++++--------
 src/style.css           |  8 ++++++++
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8f859c9..dbd7026 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,6 @@ onMounted(updateBackground);
 window.addEventListener('resize', event => {
   const newWidth = round(event.target.innerWidth);
   const newHeight = round(event.target.innerHeight);
-  console.log(newWidth, width.value);
   if (newWidth === width.value && newHeight === height.value) return;
   width.value = newWidth;
   height.value = newHeight;
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 7b8229f..2184668 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const TIMEOUT = 15e3;
 
@@ -77,16 +77,24 @@ const recalc = () => {
   calcStdev();
 };
 
-const format = (price, precision = 2) => {
+const format = (price, precision = 2, split = false) => {
   const num = (price ?? 0);
-  return (Number.isNaN(num) ? 0 : num).toFixed(precision);
+  const str = (Number.isNaN(num) ? 0 : num).toFixed(precision);
+  if (!split) return str;
+  return (str.match(/(^\d{1,2}(?=(\d{3})*$)|\d{3})/g) || []).join(' ');
 };
 
+const dataSourcesEl = ref(null);
+const dataSourcesHeight = ref('100%');
 const average = ref();
 const prices = ref([]);
 const stdev = ref();
 const showSources = ref(true);
 
+onMounted(() => {
+  dataSourcesHeight.value = `${dataSourcesEl.value.offsetHeight}px`;
+});
+
 (() => {
   let idx = -1;
   const loop = async () => {
@@ -112,11 +120,11 @@ const showSources = ref(true);
 
 <template>
   <div class="box" @click="showSources = !showSources">
-    <p class="average">1 BTC = <span class="nobr">{{ format(average, 0) }} USD</span></p>
+    <p class="average"><span class="nobr">1 BTC</span> = <span class="nobr">{{ format(average, 0, true) }} USD</span></p>
     <Transition>
-      <div v-show="showSources">
+      <div v-show="showSources" ref="dataSourcesEl">
         <p>Data Sources:</p>
-        <ul>
+        <ul class="gray">
           <li v-for="(val, i) in dataSources">
             {{ val.name }}: {{ format(prices[i]) }}
           </li>
@@ -130,16 +138,23 @@ const showSources = ref(true);
 <style scoped>
 .v-enter-active,
 .v-leave-active {
-  transition: opacity 0.2s ease;
+  overflow: hidden;
+  transition: all 80ms ease-in-out;
+  height: v-bind(dataSourcesHeight);
 }
 
 .v-enter-from,
 .v-leave-to {
   opacity: 0;
+  height: 0;
+}
+
+.gray {
+  opacity: 0.6;
 }
 
 .box {
-  cursor: pointer;
+/*  cursor: pointer;*/
 
   position: absolute;
   top: 50%;
diff --git a/src/style.css b/src/style.css
index f6aab96..df3a4ff 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,9 @@
 @import 'reset-css';
+
+body {
+  user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+}