M: Small UI layout fixes

This commit is contained in:
Ivan 2024-08-24 11:20:49 +03:00
parent a071f916e0
commit ce857bb2cb
5 changed files with 12 additions and 14 deletions

View File

@ -23,7 +23,7 @@ function ApplicationLayout() {
<div
id={globals.main_scroll}
className='flex flex-col items-start overflow-x-auto max-w-[100vw]'
className='overflow-x-auto max-w-[100vw]'
style={{
maxHeight: viewportHeight
}}

View File

@ -74,7 +74,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
spellCheck
label='Термин'
placeholder='Обозначение, используемое в текстовых определениях'
rows={2}
className='cc-fit-content max-h-[3.6rem]'
value={state.term_raw}
onChange={event => partialUpdate({ term_raw: event.target.value })}
/>
@ -104,7 +104,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
spellCheck
label='Текстовое определение'
placeholder='Текстовая интерпретация формального выражения'
rows={2}
className='cc-fit-content max-h-[3.6rem]'
value={state.definition_raw}
onChange={event => partialUpdate({ definition_raw: event.target.value })}
/>
@ -128,7 +128,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
spellCheck
label={isBasic ? 'Конвенция' : 'Комментарий'}
placeholder={isBasic ? 'Договоренность об интерпретации' : 'Пояснение разработчика'}
rows={2}
className='cc-fit-content max-h-[5.4rem]'
value={state.convention}
onChange={event => partialUpdate({ convention: event.target.value })}
/>

View File

@ -184,8 +184,8 @@ function FormCreateItem() {
onChange={event => setComment(event.target.value)}
/>
<div className='flex justify-between gap-3'>
<div className='flex flex-col gap-2 w-[7rem] h-min'>
<div className='flex justify-between gap-3 flex-grow'>
<div className='flex flex-col gap-2 min-w-[7rem] h-min'>
<Label text='Корень' />
<SelectLocationHead
value={head}
@ -197,7 +197,6 @@ function FormCreateItem() {
<TextArea
id='dlg_cst_body'
label='Путь'
className='w-[18rem]'
rows={4}
value={body}
onChange={event => setBody(event.target.value)}

View File

@ -20,11 +20,6 @@ import { information, labelCstTypification } from '@/utils/labels';
import EditorRSExpression from '../EditorRSExpression';
import ControlsOverlay from './ControlsOverlay';
/**
* Characters limit to start increasing number of rows.
*/
export const ROW_SIZE_IN_CHARACTERS = 70;
interface FormConstituentaProps {
disabled: boolean;
@ -166,7 +161,7 @@ function FormConstituenta({
{state ? (
<TextArea
id='cst_typification'
rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
className='cc-fit-content'
dense
noResize
noBorder
@ -220,12 +215,12 @@ function FormConstituenta({
<AnimateFade key='cst_convention_fade' hideContent={!showConvention || !state}>
<TextArea
id='cst_convention'
className='cc-fit-content max-h-[8rem]'
spellCheck
label={isBasic ? 'Конвенция' : 'Комментарий'}
placeholder={isBasic ? 'Договоренность об интерпретации' : 'Пояснение разработчика'}
value={convention}
disabled={disabled || (isBasic && state?.is_inherited)}
rows={convention.length > 2 * ROW_SIZE_IN_CHARACTERS || convention.includes('\n') ? 4 : 2}
onChange={event => setConvention(event.target.value)}
/>
</AnimateFade>

View File

@ -226,6 +226,10 @@
@apply flex gap-1;
}
.cc-fit-content {
field-sizing: content;
}
.cc-scroll-row {
scroll-snap-align: start;
scroll-snap-stop: always;