Merge branch 'develop' into setthawut

# Conflicts:
#	src/components/AscGISMap.vue

src/components/AscGISMap.vue

@@ -199,22 +199,62 @@ onMounted(async () => {
 <template>
   <!-- Loading skeleton -->
   <div v-if="!poiPlaceName" class="col-12">
-    <q-skeleton height="35vh" width="100%" class="bg-grey-4" />
+    <q-skeleton
+      :height="$q.screen.gt.xs ? '35vh' : '45px'"
+      width="100%"
+      :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
+      class="bg-grey-4"
+    />
   </div>
 
-  <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
-    <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
+  <q-card
+    v-show="poiPlaceName"
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
+  >
+    <div v-if="$q.screen.gt.xs">
+      <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
 
-    <div
-      :class="
-        $q.screen.gt.xs
-          ? 'q-pa-xs text-weight-medium text-grey-8'
-          : 'q-pa-xs text-weight-medium text-grey-8'
-      "
-    >
-      พื้นที่ใกล้เคียง
-      <span class="q-px-sm">:</span>
-      {{ poiPlaceName }}
+      <div
+        :class="
+          $q.screen.gt.xs
+            ? 'q-pa-xs text-weight-medium text-grey-8'
+            : 'q-pa-xs text-weight-medium text-grey-8'
+        "
+      >
+        พื้นที่ใกล้เคียง
+        <span class="q-px-sm">:</span>
+        {{ poiPlaceName }}
+      </div>
     </div>
+
+    <q-card v-else style="border-radius: 20px">
+      <q-expansion-item
+        class="shadow-1 overflow-hidden bg-grey-4 text-left"
+        style="border-radius: 20px"
+        dense
+        default-opened
+      >
+        <template v-slot:header>
+          <q-item-section avatar class="q-pr-none expanAS">
+            <q-avatar icon="mdi-map-marker" />
+          </q-item-section>
+
+          <q-item-section>
+            {{ poiPlaceName }}
+          </q-item-section>
+        </template>
+
+        <div id="mapViewDisplay" style="height: 20vh"></div>
+      </q-expansion-item>
+    </q-card>
   </q-card>
 </template>
+
+<style>
+.expanAS.q-item__section--avatar {
+  min-width: 40px !important;
+}
+</style>