From 85b77aeb9159297ac6a15e0529b22565a816ab2d Mon Sep 17 00:00:00 2001 From: smanylov Date: Sat, 18 Apr 2026 14:25:20 +0700 Subject: [PATCH] update matched table styles, add loading animation for some blocks --- package.json | 2 +- src/app/styles/global-styles.scss | 2 +- src/app/styles/pages-styles.scss | 3 +- src/app/styles/variable.scss | 1 + src/app/styles/violation-details.scss | 101 +++++++++++------- .../ui/dashboard/new/dashboard-user-files.tsx | 18 +++- .../new/dashboard-user-violations.tsx | 18 +++- .../violation-table/case-complaint.tsx | 33 ++++-- .../file-page/violation-table/case-legal.tsx | 66 ++++++++---- 9 files changed, 167 insertions(+), 77 deletions(-) diff --git a/package.json b/package.json index d20a134..d8d3a94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.91.0", + "version": "0.92.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 1873693..04a7aae 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -777,7 +777,7 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); width: 100%; box-sizing: border-box; - background: #000000; + background: v.$black; color: #FFFFFF; &:hover { diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 804dfd7..3de19f6 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -686,7 +686,7 @@ &:focus { outline-offset: 2px; - outline: 2px solid #0000; + outline: 2px solid v.$black; box-shadow: 0 0 0 2px #6365f187; } } @@ -1775,6 +1775,7 @@ display: flex; flex-direction: column; gap: 16px; + position: relative; .file-item { display: flex; diff --git a/src/app/styles/variable.scss b/src/app/styles/variable.scss index e1d91d8..362f1e7 100644 --- a/src/app/styles/variable.scss +++ b/src/app/styles/variable.scss @@ -12,6 +12,7 @@ $bg-light: #f8f9ff; $bg-darkening: #0000007a; $shadow-1: #0000001a; $white: #fff; +$black: #000; $red: #dc2626; $green: #00a63e; $p-color-disabled: #6365f18e; diff --git a/src/app/styles/violation-details.scss b/src/app/styles/violation-details.scss index bf56b32..bb910ce 100644 --- a/src/app/styles/violation-details.scss +++ b/src/app/styles/violation-details.scss @@ -1,5 +1,15 @@ @use './variable.scss' as v; +:root { + --violation-info-indents: 32px; +} + +@media (max-width: 1240px) { + :root { + --violation-info-indents: 16px; + } +} + .violation-details { .page-title-color-frame { display: flex; @@ -167,10 +177,20 @@ height: 80vh; margin-bottom: 20px; + @media (max-width: 980px) { + grid-template-columns: 1fr; + grid-template-rows: auto; + } + .sources-list { display: flex; flex-direction: column; gap: 15px; + overflow: auto; + + @media (max-width: 980px) { + flex-direction: row; + } .source-card { background: #fff; @@ -189,6 +209,10 @@ display: flex; gap: 10px; + @media (max-width: 1580px) { + flex-direction: column; + } + &:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); @@ -246,7 +270,7 @@ } .source-url { - color: #000; + color: v.$black; font-weight: 600; font-size: 14px; text-decoration: none; @@ -281,7 +305,7 @@ fill: #64748b; &:hover { - fill: #000; + fill: v.$black; } } } @@ -367,7 +391,7 @@ border: 1px solid #f3f4f6; border-radius: 20px; box-shadow: 0 4px 20px #0000001a; - padding: 15px; + padding: var(--violation-info-indents); display: flex; flex-direction: column; height: 100%; @@ -421,6 +445,11 @@ overflow: hidden; box-shadow: 4px 4px 10px v.$bg-darkening; + @media (max-width: 1240px) { + width: 150px; + height: 100px; + } + img { width: 100%; height: 100%; @@ -448,6 +477,11 @@ justify-content: center; transition: all 0.2s ease; + @media (max-width: 1240px) { + width: 18px; + height: 18px; + } + &:hover { background: #f1f5f9; transform: scale(1.05); @@ -463,8 +497,7 @@ display: flex; flex-direction: column; justify-content: space-between; - padding-left: 16px; - /* gap: 10px; */ + overflow: hidden; } &-date, @@ -475,7 +508,7 @@ } .source { - color: #000; + color: v.$black; word-break: break-all; font-weight: 500; } @@ -492,7 +525,7 @@ padding-bottom: 4px; &:hover { - fill: #000; + fill: v.$black; } } @@ -519,7 +552,7 @@ font-weight: 600; div { - color: #000; + color: v.$black; } } @@ -539,16 +572,18 @@ &-header { flex-shrink: 0; - padding-bottom: 5px; - padding-right: 16px; - padding-left: 10px; + padding-bottom: var(--violation-info-indents); border-bottom: 1px solid rgb(226, 232, 240); &-grid { display: grid; grid-template-columns: 300px auto; - gap: 10px; - margin-bottom: 10px; + gap: var(--violation-info-indents); + margin-bottom: var(--violation-info-indents); + + @media (max-width: 1240px) { + grid-template-columns: 150px auto; + } } &-bottom { @@ -559,7 +594,6 @@ } &-case { - padding: 10px; position: relative; height: 100%; display: flex; @@ -629,7 +663,7 @@ .violation-info-tabs { display: flex; gap: 20px; - padding: 10px; + padding: var(--violation-info-indents) 0; flex-shrink: 0; } @@ -643,9 +677,6 @@ &.active { - /* background: v.$status-in-work; - color: v.$white; - border: 2px solid transparent; */ border: 2px solid transparent; color: white; @@ -746,9 +777,15 @@ background-color: v.$white; max-width: 50%; + @media (max-width: 1240px) { + max-width: 100%; + } + &-item { border-bottom: 1px solid #f0f0f0; background-color: v.$bg-hover; + padding: 10px 16px; + border-bottom: 1px solid #e9ecef; &:last-child { border-bottom: none; @@ -757,10 +794,6 @@ &:first-child { font-weight: 700; color: v.$status-in-work; - - .complaint-details-header { - background-color: #fff; - } } &:nth-child(even) { @@ -772,23 +805,15 @@ } } - &-header { - /* background-color: v.$b-color-1; */ - padding: 10px 16px; - border-bottom: 1px solid #e9ecef; - } - &-title { - color: #495057; + color: v.$text-s; font-size: 14px; - font-weight: 500; - /* text-transform: uppercase; */ + font-weight: 600; letter-spacing: 0.5px; } - strong { - font-weight: 600; - color: #212529; + &-content { + color: v.$black; } } @@ -836,6 +861,8 @@ .note-form-flex { display: flex; gap: 10px; + width: 100%; + /* justify-content: space-between; */ } .note-case-label { @@ -852,6 +879,7 @@ box-sizing: border-box; padding: 10px 20px; border-radius: 0 0 8px 8px; + width: 100%; &:hover { background: v.$bg-light; @@ -892,16 +920,17 @@ border-radius: 8px; margin-bottom: 10px; overflow: hidden; + width: 100%; input { display: block; } - input[name="amount"] { + /* input[name="amount"] { &::placeholder { font-size: 12px; } - } + } */ } } diff --git a/src/app/ui/dashboard/new/dashboard-user-files.tsx b/src/app/ui/dashboard/new/dashboard-user-files.tsx index f0c4cf4..b8df510 100644 --- a/src/app/ui/dashboard/new/dashboard-user-files.tsx +++ b/src/app/ui/dashboard/new/dashboard-user-files.tsx @@ -125,6 +125,16 @@ export default function DashboardUserFiles() {
+ {isLoading && ( +
+
+
+
+ )} {tableData?.length ? ( tableData?.map((file) => { @@ -151,9 +161,11 @@ export default function DashboardUserFiles() { ) }) ) : ( -
- {t('there-are-no-files-yet')} -
+ !isLoading && ( +
+ {t('there-are-no-files-yet')} +
+ ) )}
diff --git a/src/app/ui/dashboard/new/dashboard-user-violations.tsx b/src/app/ui/dashboard/new/dashboard-user-violations.tsx index a930c5b..b2f9931 100644 --- a/src/app/ui/dashboard/new/dashboard-user-violations.tsx +++ b/src/app/ui/dashboard/new/dashboard-user-violations.tsx @@ -65,6 +65,16 @@ export default function DashboardUserViolations() {
+ {isLoading && ( +
+
+
+
+ )} {violationData?.length ? ( violationData?.map((file) => { @@ -94,9 +104,11 @@ export default function DashboardUserViolations() { ) }) ) : ( -
- {t('there-are-no-files-yet')} -
+ !isLoading && ( +
+ {t('there-are-no-files-yet')} +
+ ) )}
diff --git a/src/app/ui/file-page/violation-table/case-complaint.tsx b/src/app/ui/file-page/violation-table/case-complaint.tsx index 0e50439..5bfaf0c 100644 --- a/src/app/ui/file-page/violation-table/case-complaint.tsx +++ b/src/app/ui/file-page/violation-table/case-complaint.tsx @@ -279,29 +279,40 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
-
- {t('Status')}: {item.status} +
{t('Status')}:
+
+ {item.status}
-
- {t('date-of-creation')}: {item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'} +
{t('date-of-creation')}:
+
+ {item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
-
- {t('date-of-update')}: {item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'} +
{t('date-of-update')}:
+
+ {item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
-
- {t('text-of-the-complaint')}: -
- {item.complaint_text} - +
{t('text-of-the-complaint')}: + +
+
+ {item.complaint_text}
diff --git a/src/app/ui/file-page/violation-table/case-legal.tsx b/src/app/ui/file-page/violation-table/case-legal.tsx index 92fa21a..cc3890c 100644 --- a/src/app/ui/file-page/violation-table/case-legal.tsx +++ b/src/app/ui/file-page/violation-table/case-legal.tsx @@ -220,47 +220,71 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
-
-
{item.name}
+
{item.name}
+
+ +
+
+ {t('Status')}: +
+
+ {item.type}
-
- {t('Status')}: {item.type} +
+ {t('date-of-creation')}: +
+
+ {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
-
- {t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'} +
+ {t('date-of-update')}: +
+
+ {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}
-
- {t('date-of-update')}: {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'} +
+ {t('amount-of-damage')}: +
+
+ {item.amount}
-
- {t('amount-of-damage')}: {item.amount} +
+ {t('lawyer')}: +
+
+ {item.lawyer}
-
-
- {t('lawyer')}: {item.lawyer} +
+ {t('description')}:
-
- -
-
- {t('description')}: -
- {item.description} - +
+ {item.description}