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

update matched table styles, add loading animation for some blocks

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