antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

small mobile optimization

Browse Source
This commit is contained in:
Anton Tranelis 2024-06-16 12:50:40 +02:00
parent dbaf74442f
commit 66defb2a04
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Components/Map/hooks/useFilter.tsx
View File

@ -3,6 +3,7 @@ import * as React from "react";
import { LayerProps, Tag } from "../../../types";
import { useLayers } from "./useLayers";
import { useLocation, useNavigate } from "react-router-dom";
import useWindowDimensions from "./useWindowDimension";
type ActionType =
| { type: "ADD_TAG"; tag: Tag }
@ -64,6 +65,7 @@ function useFilterManager(initialTags: Tag[]): {
const initialLayers = useLayers()
const navigate = useNavigate()
const windowDimensions = useWindowDimensions();
const [visibleLayers, dispatchLayers] = useReducer((state: LayerProps[], action: ActionType) => {
switch (action.type) {
@ -96,7 +98,10 @@ function useFilterManager(initialTags: Tag[]): {
let urlTags = params.get("tags");
if(!urlTags?.includes(tag.name))
params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ',' : ''}${tag.name}`)
navigate(location.pathname + `${params ? `?${params}` : ""}`);
if(windowDimensions.width < 786 && location.pathname.split("/").length > 2) navigate("/" + `${params ? `?${params}` : ""}`);
else navigate(location.pathname + `${params ? `?${params}` : ""}`);
dispatchTags({

6
src/Components/Templates/ItemCard.tsx
View File

@ -4,14 +4,18 @@ import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
import { Item } from '../../types'
import { useNavigate } from 'react-router-dom'
import { getValue } from '../../Utils/GetValue'
import useWindowDimensions from '../Map/hooks/useWindowDimension'
export const ItemCard = ({i,loading, url, parameterField, deleteCallback}:{i:Item, loading: boolean, url:string, parameterField: string, deleteCallback: any}) => {
const navigate = useNavigate();
const windowDimensions = useWindowDimensions();
return (
<div className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-4 tw-mb-4 tw-h-fit' onClick={() => {
let params = new URLSearchParams(window.location.search);
navigate(url + getValue(i, parameterField) + `${params ? `?${params}` : ""}`)
windowDimensions.width >= 786 && navigate(url + getValue(i, parameterField) + `${params ? `?${params}` : ""}`)
windowDimensions.width < 786 && navigate("/" + getValue(i, parameterField) + `${params ? `?${params}` : ""}`)
}}>
<HeaderView loading={loading} item={i} api={i.layer?.api} itemAvatarField={i.layer?.itemAvatarField} itemNameField={i.layer?.itemNameField} itemSubnameField={i.layer?.itemSubnameField} editCallback={() => navigate("/edit-item/" + i.id)} deleteCallback={() => deleteCallback(i)}></HeaderView>
<div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>