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",
"version": "0.91.0",
"version": "0.92.0",
"private": true,
"scripts": {
"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);
width: 100%;
box-sizing: border-box;
background: #000000;
background: v.$black;
color: #FFFFFF;
&:hover {
src/app/styles/pages-styles.scss
+2 -1
View File
@@ -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;
src/app/styles/variable.scss
+1
View File
@@ -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;
src/app/styles/violation-details.scss
+65 -36
View File
@@ -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;
}
}
} */
}
}
src/app/ui/dashboard/new/dashboard-user-files.tsx
+12
View File
@@ -125,6 +125,16 @@ export default function DashboardUserFiles() {
</div>
<div className="user-files-list">
{isLoading && (
<div
className="loading-animation"
>
<div
className="global-spinner"
>
</div>
</div>
)}
{tableData?.length ? (
tableData?.map((file) => {
@@ -151,9 +161,11 @@ export default function DashboardUserFiles() {
)
})
) : (
!isLoading && (
<div>
{t('there-are-no-files-yet')}
</div>
)
)}
</div>
</div>
src/app/ui/dashboard/new/dashboard-user-violations.tsx
+12
View File
@@ -65,6 +65,16 @@ export default function DashboardUserViolations() {
</div>
<div className="user-files-list">
{isLoading && (
<div
className="loading-animation"
>
<div
className="global-spinner"
>
</div>
</div>
)}
{violationData?.length ? (
violationData?.map((file) => {
@@ -94,9 +104,11 @@ export default function DashboardUserViolations() {
)
})
) : (
!isLoading && (
<div>
{t('there-are-no-files-yet')}
</div>
)
)}
</div>
</div>
src/app/ui/file-page/violation-table/case-complaint.tsx
+21 -10
View File
@@ -279,29 +279,40 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('Status')}:</span> {item.status}
<div className="complaint-details-title">{t('Status')}:</div>
<div
className="complaint-details-content"
>
{item.status}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<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-title">{t('date-of-creation')}:</div>
<div
className="complaint-details-content"
>
{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<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-title">{t('date-of-update')}:</div>
<div
className="complaint-details-content"
>
{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('text-of-the-complaint')}:
<br />
<div className="complaint-details-title">{t('text-of-the-complaint')}:
</div>
<div
className="complaint-details-content"
>
{item.complaint_text}
</span>
</div>
</div>
</div>
src/app/ui/file-page/violation-table/case-legal.tsx
+41 -17
View File
@@ -220,47 +220,71 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
<div key={item.id}>
<div className="complaint-details">
<div className="complaint-details-item">
<div className="complaint-details-header">
<h5>{item.name}</h5>
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('Status')}: {item.type}</span>
<div className="complaint-details-title">
{t('Status')}:
</div>
<div
className="complaint-details-content"
>
{item.type}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</span>
<div className="complaint-details-title">
{t('date-of-creation')}:
</div>
<div
className="complaint-details-content"
>
{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-update')}: {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}</span>
<div className="complaint-details-title">
{t('date-of-update')}:
</div>
<div
className="complaint-details-content"
>
{item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('amount-of-damage')}: {item.amount}</span>
<div className="complaint-details-title">
{t('amount-of-damage')}:
</div>
<div
className="complaint-details-content"
>
{item.amount}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('lawyer')}: {item.lawyer}</span>
<div className="complaint-details-title">
{t('lawyer')}:
</div>
<div
className="complaint-details-content"
>
{item.lawyer}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('description')}:
<br />
<div className="complaint-details-title">
{t('description')}:
</div>
<div
className="complaint-details-content"
>
{item.description}
</span>
</div>
</div>
</div>