feat: make retail-price-update-info plain text instead tooltip

ozgurg · Mar 30, 2024 · dad9be6 · dad9be6
1 parent b3a1d28
commit dad9be6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 45 deletions.
diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss
@@ -27,3 +27,7 @@
 .flex-1 {
     flex: 1
 }
+
+.text-balance {
+    text-wrap: balance
+}
diff --git a/components/retail-price-update-info.vue b/components/retail-price-update-info.vue
@@ -1,35 +1,16 @@
 <template>
-    <v-tooltip
-        right=""
-        max-width="224">
-        <template #activator="{ on, attrs }">
-            <v-btn
-                v-bind="attrs"
-                :href="sourceUrl"
-                target="_blank"
-                rel="nofollow noopener noreferrer"
-                plain=""
-                class="mx-n3"
-                v-on="on">
-                <span>{{ relativeFormattedDate }} güncellendi</span>
-                <v-icon
-                    size="16"
-                    right="">
-                    {{ mdiOpenInNew }}
-                </v-icon>
-            </v-btn>
-        </template>
-        <span>
-            Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <b>{{ domain }}</b> sitesinden elle güncellenmiştir.
-            <br />
-            Güncel fiyat farklı olabilir.
-        </span>
-    </v-tooltip>
+    <p class="text--secondary subtitle-2 mb-0 text-balance">
+        Piyasa fiyatı <b>{{ formattedDate }}</b> tarihinde <a
+        :href="sourceUrl"
+        class="text--secondary"
+        target="_blank"
+        rel="nofollow noopener noreferrer">{{ domain }}</a>
+        sitesinden elle güncellenmiştir. Güncel fiyat farklı olabilir.
+    </p>
 </template>
 
 <script setup="">
-import { mdiOpenInNew } from "@mdi/js";
-import { dateFormat, relativeDateFormat } from "@/utils/formatter.js";
+import { dateFormat } from "@/utils/formatter.js";
 import { getDomainFromUrl } from "@/utils/get-domain-from-url.js";
 
 const props = defineProps({
@@ -45,5 +26,4 @@ const props = defineProps({
 
 const domain = getDomainFromUrl(props.sourceUrl);
 const formattedDate = dateFormat(props.lastUpdatedDate);
-const relativeFormattedDate = relativeDateFormat(props.lastUpdatedDate);
 </script>
diff --git a/utils/formatter.js b/utils/formatter.js
@@ -41,24 +41,9 @@ const dateFormat = date => {
     return formatter.format(date);
 };
 
-/**
- * @param {Date} date
- * @returns {string}
- */
-const relativeDateFormat = date => {
-    const DAY_MILLISECONDS = 1000 * 60 * 60 * 24;
-    const timeDifference = Date.now() - date.getTime();
-    const daysDifference = Math.floor(timeDifference / DAY_MILLISECONDS);
-
-    const formatter = new Intl.RelativeTimeFormat("tr-TR", { numeric: "auto" });
-    const formatted = formatter.format(-daysDifference, "day");
-    return formatted.charAt(0).toUpperCase() + formatted.slice(1);
-};
-
 export {
     normalizePrice,
     moneyFormat,
     numberFormat,
-    dateFormat,
-    relativeDateFormat
+    dateFormat
 };