gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-170,174): adjust layout of action buttons in RecordingForm for better responsiveness

Browse Source
This commit is contained in:
rstubryan
2025-11-20 09:20:39 +07:00
parent ac764c9d3b
commit cb236c191b
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/form/RecordingForm.tsx
+11 -9
View File
@@ -2624,9 +2624,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)} )}
{/* Action buttons */} {/* Action buttons */}
<div className='flex flex-row justify-between gap-2 flex-wrap'> <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
{/* Left side - Detail & Edit actions */} {/* Left side - Detail & Edit actions */}
<div className='flex flex-row justify-start gap-2'> <div className='flex flex-col sm:flex-row justify-start gap-2 w-full sm:w-auto'>
{type === 'detail' && deleteRecordingClickHandler && ( {type === 'detail' && deleteRecordingClickHandler && (
<Button <Button
type='button' type='button'
@@ -2660,7 +2660,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
)} )}
</div> </div>
<div className='flex flex-row justify-end gap-2'> {/* Right side actions */}
<div className='flex flex-col sm:flex-row sm:justify-end gap-2 w-full sm:w-auto'>
{type === 'detail' && isLayingCategory && ( {type === 'detail' && isLayingCategory && (
<Tooltip <Tooltip
content={ content={
@@ -2668,7 +2669,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
? 'Lanjut ke proses grading untuk telur konsumsi baik' ? 'Lanjut ke proses grading untuk telur konsumsi baik'
: 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik' : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
} }
position='top' position='left'
color={ color={
hasConsumableEggsInCurrentRecording ? 'info' : 'warning' hasConsumableEggsInCurrentRecording ? 'info' : 'warning'
} }
@@ -2677,6 +2678,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
type='button' type='button'
color='primary' color='primary'
disabled={!hasConsumableEggsInCurrentRecording} disabled={!hasConsumableEggsInCurrentRecording}
className='w-full sm:w-auto'
onClick={() => { onClick={() => {
const recordingId = const recordingId =
newRecordingData?.id || initialValues?.id; newRecordingData?.id || initialValues?.id;
@@ -2701,7 +2703,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)} )}
{type === 'edit' && ( {type === 'edit' && (
<> <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
<Button <Button
type='reset' type='reset'
color='warning' color='warning'
@@ -2724,11 +2726,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
> >
Submit Submit
</Button> </Button>
</> </div>
)} )}
{type === 'add' && ( {type === 'add' && (
<> <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
<Button <Button
type='reset' type='reset'
color='warning' color='warning'
@@ -2758,7 +2760,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
? 'Lanjut ke proses grading untuk telur konsumsi baik' ? 'Lanjut ke proses grading untuk telur konsumsi baik'
: 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik' : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
} }
position='top' position='left'
color={hasConsumableEggs ? 'info' : 'warning'} color={hasConsumableEggs ? 'info' : 'warning'}
> >
<Button <Button
@@ -2824,7 +2826,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
</Tooltip> </Tooltip>
)} )}
</> </div>
)} )}
</div> </div>
</div> </div>