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

B: Fix tabIndex for modals

Browse Source
This commit is contained in:
Ivan 2025-02-22 11:23:11 +03:00
parent 536705c00b
commit 418fbdf195
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.txt
View File

@ -2,7 +2,7 @@
For more specific TODOs see comments in code For more specific TODOs see comments in code
[Bugs - PENDING] [Bugs - PENDING]
- Tab index still selecting background elements when modal is active -
[Functionality - PENDING] [Functionality - PENDING]
- Landing page - Landing page

8
rsconcept/frontend/src/app/ApplicationLayout.tsx
View File

@ -3,6 +3,7 @@ import { Outlet } from 'react-router';
import { ModalLoader } from '@/components/Modal'; import { ModalLoader } from '@/components/Modal';
import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout'; import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
import { useDialogsStore } from '@/stores/dialogs';
import { NavigationState } from './Navigation/NavigationContext'; import { NavigationState } from './Navigation/NavigationContext';
import { Footer } from './Footer'; import { Footer } from './Footer';
@ -20,6 +21,7 @@ export function ApplicationLayout() {
const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation); const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
const noNavigation = useAppLayoutStore(state => state.noNavigation); const noNavigation = useAppLayoutStore(state => state.noNavigation);
const noFooter = useAppLayoutStore(state => state.noFooter); const noFooter = useAppLayoutStore(state => state.noFooter);
const activeDialog = useDialogsStore(state => state.active);
return ( return (
<NavigationState> <NavigationState>
@ -39,7 +41,11 @@ export function ApplicationLayout() {
<Navigation /> <Navigation />
<div className='overflow-x-auto max-w-[100vw]' style={{ maxHeight: viewportHeight }}> <div
className='overflow-x-auto max-w-[100vw]'
style={{ maxHeight: viewportHeight }}
inert={activeDialog !== null}
>
<main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}> <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
<GlobalLoader /> <GlobalLoader />
<MutationErrors /> <MutationErrors />

22
rsconcept/frontend/src/styling/setup.css
View File

@ -4,16 +4,6 @@
@import './constants.css' layer(base); @import './constants.css' layer(base);
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--clr-prim-400);
}
}
@layer utilities { @layer utilities {
*, *,
*::after, *::after,
@ -24,6 +14,16 @@
/* background: hsla(135, 50%, 50%, 0.05); */ /* background: hsla(135, 50%, 50%, 0.05); */
/* outline: 2px solid hotpink; */ /* outline: 2px solid hotpink; */
} }
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--clr-prim-400);
}
html { html {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
@ -115,9 +115,7 @@
div:not(.dense) > p:not(:last-child) { div:not(.dense) > p:not(:last-child) {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
}
@layer components {
h1 { h1 {
font-weight: 600; font-weight: 600;
font-size: 1.125rem; font-size: 1.125rem;