frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix violation table styles

Browse Source
This commit is contained in:
smanylov
2026-04-23 11:42:54 +07:00
parent a508ede373
commit fc9dc836e7
4 changed files with 122 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/violation-details.scss
+19 -8
View File
@@ -1,12 +1,18 @@
@use './variable.scss' as v; @use './variable.scss' as v;
:root { :root {
--violation-info-indents: 32px; --violation-info-indents: 30px;
}
@media (max-width: 1480px) {
:root {
--violation-info-indents: 20px;
}
} }
@media (max-width: 1240px) { @media (max-width: 1240px) {
:root { :root {
--violation-info-indents: 16px; --violation-info-indents: 15px;
} }
} }
@@ -408,7 +414,7 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: auto;
} }
&-grid { &-grid {
@@ -441,8 +447,8 @@
} }
&-image { &-image {
width: 300px; width: 285px;
height: 200px; height: 190px;
position: relative; position: relative;
background: #f5f5f5; background: #f5f5f5;
border-radius: 8px; border-radius: 8px;
@@ -467,6 +473,8 @@
justify-content: center; justify-content: center;
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
left: 50%;
transform: translateX(-50%);
.image-btn { .image-btn {
width: 36px; width: 36px;
@@ -917,14 +925,17 @@
} }
} }
.note-form-section {
overflow: hidden;
margin-bottom: var(--violation-info-indents);
width: 100%;
}
.note-form-group { .note-form-group {
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
box-sizing: border-box; box-sizing: border-box;
padding: 0px; padding: 0px;
border-radius: 8px; border-radius: 8px;
margin-bottom: var(--violation-info-indents);
overflow: hidden;
width: 100%;
input { input {
display: block; display: block;
src/app/ui/file-page/violation-table/case-complaint.tsx
+36 -32
View File
@@ -87,23 +87,45 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
<form action={formAction}> <form action={formAction}>
<input type="hidden" name="violationId" value={localViolation.id} /> <input type="hidden" name="violationId" value={localViolation.id} />
<section <section
className="note-form-group" className="note-form-section"
> >
<label <div
className="note-case-label" className="note-form-group"
htmlFor="note"
> >
{t('text-of-the-complaint')} <label
</label> className="note-case-label"
htmlFor="note"
>
{t('text-of-the-complaint')}
</label>
<textarea <textarea
name="note" name="note"
className="note-textarea" className="note-textarea"
placeholder={`${t('text-area-error-fill-complaint-text')}...`} placeholder={`${t('text-area-error-fill-complaint-text')}...`}
value={noteText} value={noteText}
onChange={(e) => setNoteText(e.target.value)} onChange={(e) => setNoteText(e.target.value)}
> >
</textarea> </textarea>
</div>
{state?.errorMessage?.textArea && (
<p
className="text-sm text-red-500"
>
{
state?.errorMessage?.textArea.split('&').map((e, index) => {
return (
<span key={index}>
{t(e)}
<br />
</span>
)
})
}
</p>
)}
</section> </section>
<div <div
@@ -127,24 +149,6 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
> >
{t('submit-violation')} {t('submit-violation')}
</button> </button>
{state?.errorMessage?.textArea && (
<p
className="text-sm text-red-500"
>
{
state?.errorMessage?.textArea.split('&').map((e, index) => {
return (
<span key={index}>
{t(e)}
<br />
</span>
)
})
}
</p>
)}
</div> </div>
</form> </form>
src/app/ui/file-page/violation-table/case-legal.tsx
+50 -36
View File
@@ -80,20 +80,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
className="note-form-flex" className="note-form-flex"
> >
<section <section
className="note-form-group" className="note-form-section"
> >
<label <div
className="note-case-label" className="note-form-group"
htmlFor="caseTitle"
> >
{t('case-name')} <label
</label> className="note-case-label"
<input htmlFor="caseTitle"
type="text" >
name="caseTitle" {t('case-name')}
className="note-case-input" </label>
placeholder={t('fill-title-of-the-case') + '...'} <input
/> type="text"
name="caseTitle"
className="note-case-input"
placeholder={t('fill-title-of-the-case') + '...'}
/>
</div>
{state?.errorMessage?.caseTitle && ( {state?.errorMessage?.caseTitle && (
<p <p
className="text-sm text-red-500" className="text-sm text-red-500"
@@ -112,20 +117,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
)} )}
</section> </section>
<section <section
className="note-form-group" className="note-form-section"
> >
<label <div
className="note-case-label" className="note-form-group"
htmlFor="amount"
> >
{t('amount-of-damage')} <label
</label> className="note-case-label"
<input htmlFor="amount"
type="number" >
name="amount" {t('amount-of-damage')}
className="note-case-input" </label>
placeholder={t('enter-the-amount-of-damage') + '...'} <input
/> type="number"
name="amount"
className="note-case-input"
placeholder={t('enter-the-amount-of-damage') + '...'}
/>
</div>
{state?.errorMessage?.amount && ( {state?.errorMessage?.amount && (
<p <p
className="text-sm text-red-500" className="text-sm text-red-500"
@@ -146,21 +156,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
</div> </div>
<section <section
className="note-form-group" className="note-form-section"
> >
<label <div
className="note-case-label" className="note-form-group"
htmlFor="note"
> >
{t('text-of-the-case')} <label
</label> className="note-case-label"
htmlFor="note"
>
{t('text-of-the-case')}
</label>
<textarea <textarea
name="note" name="note"
className="note-textarea" className="note-textarea"
placeholder={t('fill-text-of-the-case') + '...'} placeholder={t('fill-text-of-the-case') + '...'}
> >
</textarea> </textarea>
</div>
{state?.errorMessage?.textArea && ( {state?.errorMessage?.textArea && (
<p <p
src/app/ui/file-page/violation-table/file-page-violation-info.tsx
+17 -17
View File
@@ -187,25 +187,25 @@ export default function FilePageViolationInfo({ selectedViolation, caseType }: {
target.src = '/images/no-image.png'; target.src = '/images/no-image.png';
}} }}
/> />
</div>
<div className="violation-info-image-buttons"> <div className="violation-info-image-buttons">
<button <button
className="image-btn image-btn-view" className="image-btn image-btn-view"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
title="Увеличить" title="Увеличить"
> >
<IconFullScreen /> <IconFullScreen />
</button> </button>
<button <button
className="image-btn image-btn-open" className="image-btn image-btn-open"
onClick={openInNewTab} onClick={openInNewTab}
title="Открыть в новой вкладке" title="Открыть в новой вкладке"
> >
<IconFollowToLink /> <IconFollowToLink />
</button> </button>
</div>
</div> </div>
</div> </div>
<div <div
className="violation-info-right-side" className="violation-info-right-side"
> >