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>
<meta charset="UTF-8" />
<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>
</head>
<body>

23
src/assets/datatable.css
View File

@ -4,11 +4,6 @@
@apply input-bordered;
}
.dt-full:has(.dt-length) {
@apply grid;
@apply grid-cols-2;
}
.dt-length {
@apply m-3;
@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 {
tbody {
tr {

8
src/components/CreateRestaurantModal.vue
View File

@ -115,7 +115,7 @@ defineExpose({ show, hide, setRestaurantPosition });
@rejected="onRejected"
>
<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">
<label class="form-label"> Name </label>
<input
@ -127,7 +127,7 @@ defineExpose({ show, hide, setRestaurantPosition });
<label class="text-red-500">{{ errors.name }}</label>
</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">
<label class="form-label"> Tags </label>
<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>
</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">
<label class="form-label"> Price </label>
<select
@ -151,7 +151,7 @@ defineExpose({ show, hide, setRestaurantPosition });
<label class="text-red-500">{{ errors.price }}</label>
</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">
<label class="form-label"> Google Maps Link (Optional) </label>
<input

2
src/components/MultiSelectField.vue
View File

@ -75,7 +75,7 @@ function filteredOptions() {
<input
ref="input"
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"
type="text"
:disabled="props.disabled"

14
src/components/NavigationBar.vue
View File

@ -1,6 +1,10 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
import { currentUser, signOut } from "../pocketbase";
function onRouterLinkClicked(event: Event) {
(event.target as HTMLButtonElement).blur();
}
</script>
<template>
@ -11,19 +15,19 @@ import { currentUser, signOut } from "../pocketbase";
<font-awesome-icon icon="fa-solid fa-bars" />
</div>
<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>
<RouterLink class="btn btn-ghost" to="/random">Random</RouterLink>
<RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/random">Random</RouterLink>
</li>
<li>
<RouterLink class="btn btn-ghost" to="/list">List</RouterLink>
<RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/list">List</RouterLink>
</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>
<RouterLink class="btn btn-ghost" to="/about">About</RouterLink>
<RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/about">About</RouterLink>
</li>
</ul>
</div>

7
src/components/RestaurantsTable.vue
View File

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