From 43112834221a9b115245e6fc9879e392833e21a5 Mon Sep 17 00:00:00 2001
From: T-angmo <natruja769@gmail.com>
Date: Sat, 9 Sep 2023 16:45:27 +0700
Subject: [PATCH] Finish DestinationInfoCard

---
 src/components/DestinationInfoCard.vue | 42 +++++++++++---------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index dca9e0e..53601d4 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,13 +1,14 @@
 <template>
   <v-img 
-    src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
-    height="100%" 
-    cover
-    ></v-img>
-
+  class="image"
+  src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
+  cover
+  ></v-img>
+  
   <v-card 
-  class="stick-bottom card-height" 
-  width="100%" 
+  class="stick-bottom card-height"
+  width="100%"
+  height="60vh"
   style="padding-top: 15px; font-weight:bold;"
   :title="destination.title" 
   :subtitle="destination.subTitle"
@@ -23,7 +24,7 @@
           </v-avatar>
         </template>
         <v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
-        <v-list-item-subtitle >{{detial[0].subtitle}}</v-list-item-subtitle>
+        <v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">{{detial[0].subtitle}}</a></v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item>
@@ -35,7 +36,6 @@
           </v-avatar>
         </template>
         <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
-        <v-list-item-subtitle>{{detial[1].subtitle}}</v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item>
@@ -47,7 +47,6 @@
           </v-avatar>
         </template>
         <v-list-item-title>{{detial[2].title}}</v-list-item-title>
-        <v-list-item-subtitle>{{detial[2].subtitle}}</v-list-item-subtitle>
       </v-list-item>
 
 
@@ -60,7 +59,7 @@
         ดูเส้นทาง</v-btn>
     </v-card-actions>
 
-    <v-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+    <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
 
 
   </v-card>
@@ -76,19 +75,16 @@ const destination = {
 }
 const detial = [
   {
-    color: '',
     icon: check,
     subtitle: 'เรียนรู้เพิ่มเติม',
     title: 'Unrestricted Wheelchair access',
   },
   {
-    color: '',
     icon: findLocation,
     subtitle: '',
     title: '13.76493, 100.53828',
   },
   {
-    color: '',
     icon: clock,
     subtitle: '',
     title: 'Mo-Su 11:30-22:00',
@@ -102,10 +98,6 @@ const detial = [
   bottom: 0;
 }
 
-.card-height {
-  height: 75%;
-}
-
 .btnlist-height {
   height: 25%;
   width: 100%;
@@ -116,10 +108,6 @@ const detial = [
   justify-content: space-around;
 }
 
-.btn-width {
-  width: 35vw;
-}
-
 .text-white {
   color: white;
 }
@@ -128,12 +116,18 @@ const detial = [
   width: 30px;
   height: 30px;
 }
+
 .iconCheck, .textCheck {
   filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
 }
 
-v-list:disabled {
-  color: purple;
+.knowMore {
+  filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
+}
+
+.image { 
+  width: 100%;
+  height: 45vh;
 }
 </style>
   
\ No newline at end of file