little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

fixing bottom nav

Browse source
This commit is contained in:
SRP-mango 2023-08-02 01:34:46 +07:00
parent 11f7e06bde
commit 65d4f3d12a
4 changed files with 32 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icons/LittleLines.Devel.svg" />
// <link rel="icon" type="image/svg+xml" href="/icons/LittleLines.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

37
src/components/BottomNavigation.vue
View file

@ -1,30 +1,31 @@
<template>
<v-layout class="overflow-visible" style="height: 56px">
<v-bottom-navigation
class = "overflow"
v-model="value"
grow
>
<router-link :to="{name: 'home'}">
<v-btn :to="{name: 'home'}">
<v-bottom-navigation>
<v-btn :to="{name: 'home'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-map</v-icon>
แผนที่
</v-btn>
</router-link>
<router-link :to="{name: 'favorite'}">
<v-btn :to="{name: 'favorite'}">
<v-btn :to="{name: 'favorite'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-heart</v-icon>
สถานที่โปรด
</v-btn>
</router-link>
<router-link :to="{name: 'setting'}">
<v-btn :to="{name: 'setting'}">
<v-btn :to="{name: 'setting'}"
block rounded="lg"
min-width="20px"
max-width="120px">
<v-icon>mdi-cog</v-icon>
การตั้งค่า
</v-btn>
</router-link>
</v-bottom-navigation>
</v-layout>
</template>
@ -35,4 +36,10 @@ import {RouterLink} from 'vue-router';
data: () => ({ value: 1 }),
}
</script>
</script>
<style>
.v-btn {
min-width: 50px;
}
</style>

1
src/components/searchbar.vue
View file

@ -3,7 +3,6 @@
<v-app-bar scroll-threshold="0"
class="mx-auto px-auto"
>
<v-text-field
density="compact"
variant="solo"

16
src/views/Home.vue
View file

@ -6,12 +6,10 @@
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style=
"
height: 100%;
"height: 89%;
width: 100%;
position: fixed;
"
position: fixed;
"
>
<ol-view
ref="view"
@ -39,4 +37,10 @@ const center = ref([100.538611, 13.764722]);
const projection = ref("EPSG:4326");
const zoom = ref(19);
const rotation = ref(0);
</script>
</script>
<style>
.ol-zoom{
top: 40px;
}
</style>