simple mock up for fav* need icon set to align

This commit is contained in:
SRP-mango 2023-07-29 06:47:47 +07:00
parent 8ad3ef95d8
commit f9c18c55cb
5 changed files with 88 additions and 18 deletions

View file

@ -1,11 +1,9 @@
<template> <template>
<searchbar/>
<router-view/> <router-view/>
<bottomNavigation/> <bottomNavigation/>
</template> </template>
<script setup> <script setup>
import {RouterView} from 'vue-router'; import {RouterView} from 'vue-router';
import searchbar from '@/components/searchbar.vue';
import bottomNavigation from '@/components/BottomNavigation.vue'; import bottomNavigation from '@/components/BottomNavigation.vue';
</script> </script>

View file

@ -1,5 +1,5 @@
<template> <template>
<v-layout style="height: 55px;"> <v-layout style="height: 65px;">
<v-app-bar scroll-threshold="0" <v-app-bar scroll-threshold="0"
class="mx-auto px-auto" class="mx-auto px-auto"
> >

View file

@ -1,6 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createVuetify, ThemeDefinition } from 'vuetify' import { createVuetify, ThemeDefinition } from 'vuetify'
import { aliases, custom } from '../iconsets/custom'
const myCustomLightTheme = { const myCustomLightTheme = {
dark: false, dark: false,
colors: { colors: {
@ -24,4 +24,11 @@ export default createVuetify({
myCustomLightTheme, myCustomLightTheme,
}, },
}, },
icons: {
defaultSet: 'adwaita',
aliases,
sets: {
custom,
},
},
}) })

View file

@ -1,9 +1,73 @@
<template> <template>
<h1>Favorie</h1> <!-- <h1>Favorite</h1> -->
<ul>
<li>List of Destination</li> <!-- <v-card
<li>List of Destination</li> class="mx-auto"
<li>List of Destination</li> max-width="420"
<li>List of Destination</li> height="600"
</ul> >
</template>
<v-list lines="two">
<v-list-item
v-for="item in items"
:key="item.title"
:title="item.title"
:subtitle="item.desc"
:prepend-avatar="pin_svg"
></v-list-item>
</v-list>
</v-card> -->
<v-card
class="mx-auto"
max-width="420"
height="600"
>
<v-list
item-props
lines="two"
>
<v-list-item
v-for="(item, i) in items"
:key="i"
:value="item"
>
<template v-slot:prepend>
<v-img
:width="32"
src= "./icons/Adwaita/pin.svg"
></v-img>
</template>
<v-list-item-title v-text="item.title"></v-list-item-title>
<v-list-item-subtitle v-text="item.desc"></v-list-item-subtitle>
<v-divider></v-divider>
</v-list-item>
</v-list>
</v-card>
</template>
<script setup>
const pin_svg = "./icons/Adwaita/pin.svg"
const items = [
{
title: 'หอพักนักศึกษา',
desc: 'ลาดกระบัง, กรุงเทพมหานคร',
},
{
title: 'อนุสาวรีย์ชัยสมรภูมิ',
desc: 'ราชเทวี, กรุงเทพมหานคร',
},
]
</script>
<style >
.v-list__group__header__prepend-icon {
color: red;
}
</style>

View file

@ -1,6 +1,7 @@
<template> <template>
<!-- TO DO need someone to make map fuctional properly -->
<!--don't know why height auto didn't work so i write 1117px for temporary --> <searchbar/>
<ol-map <ol-map
:loadTilesWhileAnimating="true" :loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true" :loadTilesWhileInteracting="true"
@ -9,10 +10,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
" "
> >
<ol-view <ol-view
@ -27,11 +25,14 @@
<ol-source-osm /> <ol-source-osm />
</ol-tile-layer> </ol-tile-layer>
</ol-map> </ol-map>
</template> </template>
<script setup> <script setup>
import searchbar from '@/components/searchbar.vue';
import { ref } from "vue"; import { ref } from "vue";
const center = ref([100.538611, 13.764722]); const center = ref([100.538611, 13.764722]);