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

Fix overscroll behavior

Browse Source
This commit is contained in:
IRBorisov 2024-05-02 21:34:47 +03:00
parent 91c5993b10
commit 3024cde1b1
14 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -79,6 +79,7 @@
"NPRO",
"NUMR",
"Opencorpora",
"overscroll",
"passwordreset",
"perfectivity",
"PNCT",

2
rsconcept/frontend/README.md
View File

@ -12,7 +12,7 @@ Styling conventions
- outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
- rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0
- inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
- overflow behavior: overflow-scroll
- overflow behavior: overflow-scroll overscroll-contain
- border: borer-2 outline-none shadow-md
- colors: clr-controls
- text: text-start text-sm font-semibold whitespace-nowrap

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

@ -23,7 +23,7 @@ function ApplicationLayout() {
<div
id={globals.main_scroll}
className='overflow-y-auto overscroll-none min-w-fit'
className='cc-scroll-y min-w-fit'
style={{
maxHeight: viewportHeight,
overflowY: showScroll ? 'scroll' : 'auto'

2
rsconcept/frontend/src/components/select/SubstitutionsPicker.tsx
View File

@ -252,7 +252,7 @@ function SubstitutionsPicker({
dense
noHeader
noFooter
className='w-full overflow-y-auto text-sm border select-none'
className='w-full text-sm border select-none cc-scroll-y'
rows={rows}
contentHeight='1.3rem'
data={items}

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

@ -84,7 +84,7 @@ function Modal({
{header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
<div
className={clsx('overflow-auto', className)}
className={clsx('overflow-auto overscroll-contain', className)}
style={{
maxHeight: 'calc(100vh - 8rem)',
maxWidth: 'calc(100vw - 2rem)'

2
rsconcept/frontend/src/components/ui/Tooltip.tsx
View File

@ -32,7 +32,7 @@ function Tooltip({
delayShow={1000}
delayHide={100}
opacity={0.97}
className={clsx('overflow-auto sm:overflow-hidden', 'border shadow-md', layer, className)}
className={clsx('overflow-auto sm:overflow-hidden overscroll-contain', 'border shadow-md', layer, className)}
classNameArrow={layer}
style={{ ...{ paddingTop: '2px', paddingBottom: '2px' }, ...style }}
variant={darkMode ? 'dark' : 'light'}

2
rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
View File

@ -18,7 +18,7 @@ function ConstituentsList({ list, schema, title, prefix }: ConstituentsListProps
{title}: <b>{list.length}</b>
</p>
) : null}
<div className={clsx('h-[9rem]', 'px-3', 'overflow-y-auto', 'border', 'whitespace-nowrap')}>
<div className={clsx('h-[9rem]', 'px-3', 'cc-scroll-y', 'border', 'whitespace-nowrap')}>
{list.map(id => {
const cst = schema.cstByID.get(id);
return cst ? <p key={`${prefix}${cst.id}`}>{labelConstituenta(cst)}</p> : null;

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
View File

@ -18,7 +18,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
return (
<motion.div
className='dense border text-sm overflow-y-auto'
className='text-sm border dense cc-scroll-y'
initial={false}
animate={isOpen ? 'open' : 'closed'}
variants={animateParseResults}

2
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
View File

@ -360,7 +360,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
<Overlay
layer='z-tooltip'
position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
className={clsx('w-[25rem]', 'px-3', 'cc-scroll-y', 'border shadow-md', 'clr-app')}
>
<InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
</Overlay>

2
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
View File

@ -85,7 +85,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
'border-x border-b rounded-b-md',
'clr-input',
'text-sm',
'overflow-y-auto'
'cc-scroll-y'
)}
style={{ maxHeight: calculateHeight(windowSize.isSmall ? '12.rem + 2px' : '16.4rem + 2px') }}
initial={false}

2
rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
View File

@ -129,7 +129,7 @@ function ConstituentsTable({ items, activeID, onOpenEdit, maxHeight, denseThresh
<DataTable
dense
noFooter
className='text-sm select-none cc-scroll-y overscroll-none'
className='text-sm select-none cc-scroll-y'
style={{ maxHeight: maxHeight }}
data={items}
columns={columns}

1
rsconcept/frontend/src/styling/overrides.css
View File

@ -10,6 +10,7 @@
.cm-editor {
resize: vertical;
overflow-y: auto;
overscroll-behavior-y: contain;
border-color: var(--cl-bg-40);
.dark & {
border-color: var(--cd-bg-40);

1
rsconcept/frontend/src/styling/styles.css
View File

@ -223,6 +223,7 @@
.cc-scroll-y {
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
}

6
rsconcept/frontend/src/utils/codemirror.ts
View File

@ -133,7 +133,7 @@ export function domTooltipConstituenta(cst?: IConstituenta) {
'dense',
'p-2',
'border shadow-md',
'overflow-y-auto',
'cc-scroll-y',
'text-sm font-main'
);
@ -200,7 +200,7 @@ export function domTooltipEntityReference(ref: IEntityReference, cst: IConstitue
'dense',
'p-2 flex flex-col',
'border shadow-md',
'overflow-y-auto',
'cc-scroll-y',
'text-sm',
'select-none cursor-auto'
);
@ -247,7 +247,7 @@ export function domTooltipSyntacticReference(ref: ISyntacticReference, masterRef
'dense',
'p-2 flex flex-col',
'border shadow-md',
'overflow-y-auto',
'cc-scroll-y',
'text-sm',
'select-none cursor-auto'
);