From c414686dfb41dd9cb108d48b280e5907ce242b54 Mon Sep 17 00:00:00 2001
From: T-angmo <natruja769@gmail.com>
Date: Fri, 8 Sep 2023 03:32:15 +0700
Subject: [PATCH] DestinationInfoCard & change size pin on favorite page

---
 src/components/DestinationInfoCard.vue | 156 +++++++++++++++++--------
 src/views/Favorite.vue                 |  11 +-
 2 files changed, 117 insertions(+), 50 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index 95d6bc1..dca9e0e 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,75 +1,139 @@
 <template>
-    <v-img
-        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
-        height="250px"
-        cover
+  <v-img 
+    src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
+    height="100%" 
+    cover
     ></v-img>
-    
-    <v-card
-    class="stick-bottom card-height"
-    width="100%"
-    style="padding-top: 15px;"
-    >
-        <v-card-title>
-        Destination.Title
-        </v-card-title>
 
-        <v-card-subtitle>
-        Destination.SubTitle
-        </v-card-subtitle>
+  <v-card 
+  class="stick-bottom card-height" 
+  width="100%" 
+  style="padding-top: 15px; font-weight:bold;"
+  :title="destination.title" 
+  :subtitle="destination.subTitle"
+  >
 
-        <v-card-text>
-        Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non.
-        </v-card-text>
+    <v-list lines="one">
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[0].icon" 
+            class="iconCheck"
+            />
+          </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>
 
-        
-          <v-card-actions class = "stick-bottom btnlist-height justify-sa">
-              <v-btn rounded="xl" variant="tonal"
-              width="45vw" height = "44px"
-              >
-                เพิ่มลงในสถานที่โปรด</v-btn>
-              <v-btn rounded="xl" variant="flat"
-              class="text-white"
-              width="45vw" height = "44px"
-              color="#f16322">
-                ดูเส้นทาง</v-btn>
-          </v-card-actions>
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[1].icon" 
+            class="icon"
+            />
+          </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-btn  variant="tonal" icon="mdi-close"
-          
-          style="position: absolute; top: 15px; right: 15px;"
-          />
-        
-    
-    </v-card>
+      <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="detial[2].icon" 
+            class="icon"
+            />
+          </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>
 
+
+    </v-list>
+
+    <v-card-actions class="stick-bottom btnlist-height justify-sa">
+      <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
+        เพิ่มลงในสถานที่โปรด</v-btn>
+      <v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+        ดูเส้นทาง</v-btn>
+    </v-card-actions>
+
+    <v-btn variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+
+
+  </v-card>
 </template>
   
 <script setup>
-
+import findLocation from '../../icons/Material/find-location.svg';
+import clock from '../../icons/Material/clock.svg';
+import check from '../../icons/Material/check-round.svg';
+const destination = {
+  title: "อนุสาวรีย์ชัยสมรภูมิ",
+  subTitle: "ราชเทวี , กรุงเทพมหานคร"
+}
+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',
+  },
+]
 </script>
 
 <style>
-.stick-bottom{
-  position:fixed;
-  bottom:0;
+.stick-bottom {
+  position: fixed;
+  bottom: 0;
 }
-.card-height{
+
+.card-height {
   height: 75%;
 }
-.btnlist-height{
+
+.btnlist-height {
   height: 25%;
   width: 100%;
 }
+
 .v-card-actions.justify-sa {
   display: flex;
   justify-content: space-around;
 }
-.btn-width{
+
+.btn-width {
   width: 35vw;
 }
-.text-white{
+
+.text-white {
   color: white;
 }
+
+.icon, .iconCheck {
+  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;
+}
 </style>
   
\ No newline at end of file
diff --git a/src/views/Favorite.vue b/src/views/Favorite.vue
index fd9281e..1d457d7 100644
--- a/src/views/Favorite.vue
+++ b/src/views/Favorite.vue
@@ -39,10 +39,13 @@
             
             >
             <template v-slot:prepend>
-                <v-img
-                :width="32"
-                src= "./icons/Adwaita/pin.svg"
-                ></v-img>
+                <v-avatar>
+                    <v-img
+                    :height="30"
+                    src= "./icons/Adwaita/pin.svg"
+                    ></v-img>
+                </v-avatar>
+                
             </template>
 
             <v-list-item-title v-text="item.title"></v-list-item-title>