ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix viewport units for mobile

Browse Source
This commit is contained in:
IRBorisov 2024-06-05 18:07:02 +03:00
parent 6a8794f5f2
commit 69baba7848
6 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rsconcept/frontend/src/app/Footer.tsx
View File

@ -12,10 +12,9 @@ function Footer() {
} }
return ( return (
<footer <footer
tabIndex={-1}
className={clsx( className={clsx(
'z-navigation', 'z-navigation',
'w-full', 'mx-auto',
'sm:px-4 sm:py-2 flex flex-col items-center gap-1', 'sm:px-4 sm:py-2 flex flex-col items-center gap-1',
'text-xs sm:text-sm select-none whitespace-nowrap' 'text-xs sm:text-sm select-none whitespace-nowrap'
)} )}

4
rsconcept/frontend/src/components/ui/Modal.tsx
View File

@ -89,8 +89,8 @@ function Modal({
className={clsx('overflow-auto overscroll-contain', className)} className={clsx('overflow-auto overscroll-contain', className)}
style={{ style={{
overflow: overflowVisible ? 'visible' : 'auto', overflow: overflowVisible ? 'visible' : 'auto',
maxHeight: 'calc(100vh - 8rem)', maxHeight: 'calc(100svh - 8rem)',
maxWidth: 'calc(100vw - 2rem)' maxWidth: 'calc(100svw - 2rem)'
}} }}
> >
{children} {children}

10
rsconcept/frontend/src/context/OptionsContext.tsx
View File

@ -98,11 +98,11 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
const calculateHeight = useCallback( const calculateHeight = useCallback(
(offset: string, minimum: string = '0px') => { (offset: string, minimum: string = '0px') => {
if (noNavigation) { if (noNavigation) {
return `max(calc(100vh - (${offset})), ${minimum})`; return `max(calc(100dvh - (${offset})), ${minimum})`;
} else if (noFooter) { } else if (noFooter) {
return `max(calc(100vh - 3rem - (${offset})), ${minimum})`; return `max(calc(100dvh - 3rem - (${offset})), ${minimum})`;
} else { } else {
return `max(calc(100vh - 6.75rem - (${offset})), ${minimum})`; return `max(calc(100dvh - 6.75rem - (${offset})), ${minimum})`;
} }
}, },
[noNavigation, noFooter] [noNavigation, noFooter]
@ -114,11 +114,11 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
}, [setDarkMode]); }, [setDarkMode]);
const mainHeight = useMemo(() => { const mainHeight = useMemo(() => {
return !noNavigation ? 'calc(100vh - 6.75rem)' : '100vh'; return !noNavigation ? 'calc(100dvh - 6.75rem)' : '100dvh';
}, [noNavigation]); }, [noNavigation]);
const viewportHeight = useMemo(() => { const viewportHeight = useMemo(() => {
return !noNavigation ? 'calc(100vh - 3rem)' : '100vh'; return !noNavigation ? 'calc(100dvh - 3rem)' : '100dvh';
}, [noNavigation]); }, [noNavigation]);
return ( return (

2
rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
View File

@ -52,7 +52,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
value={{ value: state.cst_type, label: labelCstType(state.cst_type) }} value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
onChange={data => partialUpdate({ cst_type: data?.value ?? CstType.BASE })} onChange={data => partialUpdate({ cst_type: data?.value ?? CstType.BASE })}
/> />
<BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' /> <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100svh-2rem)]' />
<TextInput <TextInput
id='dlg_cst_alias' id='dlg_cst_alias'
dense dense

2
rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
View File

@ -60,7 +60,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
}} }}
onChange={data => updateData({ cst_type: data?.value ?? CstType.BASE })} onChange={data => updateData({ cst_type: data?.value ?? CstType.BASE })}
/> />
<BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' /> <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100svh-2rem)]' />
<TextInput <TextInput
id='dlg_cst_alias' id='dlg_cst_alias'
dense dense

2
rsconcept/frontend/src/dialogs/DlgShowAST.tsx
View File

@ -67,7 +67,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
</div> </div>
) : null} ) : null}
</div> </div>
<div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100vh-14rem-2px)]'> <div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100svh-14rem-2px)]'>
<GraphUI <GraphUI
animated={false} animated={false}
nodes={nodes} nodes={nodes}