eloi
/
doxfood
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mostly improvements to mobile UX

main
Eloi Zalczer 2024-07-02 16:44:54 +02:00
parent af276df223
commit 12f7eab798
7 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>DOXFOOD</title> <title>DOXFOOD</title>
</head> </head>
<body> <body>

23
src/assets/datatable.css
View File

@ -4,11 +4,6 @@
@apply input-bordered; @apply input-bordered;
} }
.dt-full:has(.dt-length) {
@apply grid;
@apply grid-cols-2;
}
.dt-length { .dt-length {
@apply m-3; @apply m-3;
@apply justify-self-start; @apply justify-self-start;
@ -24,6 +19,24 @@
} }
} }
.dt-container .dt-layout-row {
display: table;
clear: both;
width: 100%;
}
.dt-container .dt-layout-cell {
display: table-cell;
vertical-align: middle;
padding: 5px 0;
}
@media screen and (max-width: 1024px) {
.dt-container .dt-layout-cell {
display: block;
}
}
.dataTable { .dataTable {
tbody { tbody {
tr { tr {

8
src/components/CreateRestaurantModal.vue
View File

@ -115,7 +115,7 @@ defineExpose({ show, hide, setRestaurantPosition });
@rejected="onRejected" @rejected="onRejected"
> >
<div class="flex flex-col place-content-center items-center h-full"> <div class="flex flex-col place-content-center items-center h-full">
<div class="flex flex-row flex-nowrap w-96"> <div class="flex flex-row flex-nowrap w-72 sm:w-96">
<div class="mx-5 my-4 w-full"> <div class="mx-5 my-4 w-full">
<label class="form-label"> Name </label> <label class="form-label"> Name </label>
<input <input
@ -127,7 +127,7 @@ defineExpose({ show, hide, setRestaurantPosition });
<label class="text-red-500">{{ errors.name }}</label> <label class="text-red-500">{{ errors.name }}</label>
</div> </div>
</div> </div>
<div class="flex flex-row flex-nowrap w-96"> <div class="flex flex-row flex-nowrap w-72 sm:w-96">
<div class="mx-5 my-4 w-full"> <div class="mx-5 my-4 w-full">
<label class="form-label"> Tags </label> <label class="form-label"> Tags </label>
<TagsField v-model="tags" v-bind="tagsAttrs" :options="tagsNames" /> <TagsField v-model="tags" v-bind="tagsAttrs" :options="tagsNames" />
@ -135,7 +135,7 @@ defineExpose({ show, hide, setRestaurantPosition });
<label class="text-red-500">{{ errors.tags }}</label> <label class="text-red-500">{{ errors.tags }}</label>
</div> </div>
</div> </div>
<div class="flex flex-row flex-nowrap w-96"> <div class="flex flex-row flex-nowrap w-72 sm:w-96">
<div class="mx-5 my-4 w-full"> <div class="mx-5 my-4 w-full">
<label class="form-label"> Price </label> <label class="form-label"> Price </label>
<select <select
@ -151,7 +151,7 @@ defineExpose({ show, hide, setRestaurantPosition });
<label class="text-red-500">{{ errors.price }}</label> <label class="text-red-500">{{ errors.price }}</label>
</div> </div>
</div> </div>
<div class="flex flex-row flex-nowrap w-96"> <div class="flex flex-row flex-nowrap w-72 sm:w-96">
<div class="mx-5 my-4 w-full"> <div class="mx-5 my-4 w-full">
<label class="form-label"> Google Maps Link (Optional) </label> <label class="form-label"> Google Maps Link (Optional) </label>
<input <input

2
src/components/MultiSelectField.vue
View File

@ -75,7 +75,7 @@ function filteredOptions() {
<input <input
ref="input" ref="input"
v-model="query" v-model="query"
class="input join-item h-auto min-w-[8ch] flex-1 border-0 p-0 focus:outline-0" class="input join-item h-auto lg:min-w-[8ch] flex-1 border-0 p-0 focus:outline-0"
role="combobox" role="combobox"
type="text" type="text"
:disabled="props.disabled" :disabled="props.disabled"

14
src/components/NavigationBar.vue
View File

@ -1,6 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import { currentUser, signOut } from "../pocketbase"; import { currentUser, signOut } from "../pocketbase";
function onRouterLinkClicked(event: Event) {
(event.target as HTMLButtonElement).blur();
}
</script> </script>
<template> <template>
@ -11,19 +15,19 @@ import { currentUser, signOut } from "../pocketbase";
<font-awesome-icon icon="fa-solid fa-bars" /> <font-awesome-icon icon="fa-solid fa-bars" />
</div> </div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[20000] p-2 shadow bg-base-100 rounded-box w-52"> <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[20000] p-2 shadow bg-base-100 rounded-box w-52">
<li><RouterLink class="btn btn-ghost" to="/">Home</RouterLink></li> <li><RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/">Home</RouterLink></li>
<li> <li>
<RouterLink class="btn btn-ghost" to="/random">Random</RouterLink> <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/random">Random</RouterLink>
</li> </li>
<li> <li>
<RouterLink class="btn btn-ghost" to="/list">List</RouterLink> <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/list">List</RouterLink>
</li> </li>
<li> <li>
<RouterLink class="btn btn-ghost" to="/create">Create Restaurant</RouterLink> <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/create">Create Restaurant</RouterLink>
</li> </li>
<li> <li>
<RouterLink class="btn btn-ghost" to="/about">About</RouterLink> <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/about">About</RouterLink>
</li> </li>
</ul> </ul>
</div> </div>

7
src/components/RestaurantsTable.vue
View File

@ -4,6 +4,7 @@ import "../assets/datatable.css";
import DataTable from "datatables.net-vue3"; import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net"; import DataTablesCore from "datatables.net";
import "datatables.net-select"; import "datatables.net-select";
import "datatables.net-responsive";
import { PropType, ref } from "vue"; import { PropType, ref } from "vue";
import RatingField from "./RatingField.vue"; import RatingField from "./RatingField.vue";
import Restaurant from "../models/restaurant"; import Restaurant from "../models/restaurant";
@ -80,9 +81,8 @@ defineExpose({ deselectAll });
:data="props.data" :data="props.data"
:options="{ :options="{
layout: { layout: {
top: ['pageLength', null, 'search'], topStart: 'pageLength',
topStart: null, topEnd: 'search',
topEnd: null,
bottom: 'paging', bottom: 'paging',
bottomStart: null, bottomStart: null,
bottomEnd: null, bottomEnd: null,
@ -90,6 +90,7 @@ defineExpose({ deselectAll });
select: { select: {
style: 'single', style: 'single',
}, },
responsive: true,
}" }"
@select="onRowSelected" @select="onRowSelected"
> >

2
src/utils/filters.ts
View File

@ -62,7 +62,7 @@ export function makeFilters(config: SearchPreferences) {
const lowerIndex = prices.findIndex((element) => element == config.lowerPriceBound); const lowerIndex = prices.findIndex((element) => element == config.lowerPriceBound);
const upperIndex = prices.findIndex((element) => element == config.upperPriceBound); const upperIndex = prices.findIndex((element) => element == config.upperPriceBound);
const values = prices.slice(lowerIndex, upperIndex); const values = prices.slice(lowerIndex, upperIndex + 1);
filters.push(filterValues.bind(undefined, "price", values, false, undefined)); filters.push(filterValues.bind(undefined, "price", values, false, undefined));
} }