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

rework notification-table

Browse Source
This commit is contained in:
smanylov
2026-04-13 15:10:24 +07:00
parent d8d1eec3ed
commit d0901961be
2 changed files with 511 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/pages-styles.scss
+277 -28
View File
@@ -5131,7 +5131,6 @@
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: v.$white;
display: flex;
justify-content: space-between;
align-items: center;
@@ -5142,6 +5141,35 @@
display: flex;
align-items: center;
}
.select-all-header {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
.btn-primary {
background: white;
color: black;
font-weight: 600;
font-size: 14px;
padding: 5px 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: none;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.15);
}
&:active {
transform: translateY(0);
}
}
}
}
&-action {
@@ -5162,30 +5190,76 @@
padding: 0;
background: v.$white;
.notification {
&-item {
border-bottom: 1px solid v.$b-color-2;
padding: 20px;
.notifications-table {
width: 100%;
}
.table-row {
display: flex;
border-bottom: 1px solid v.$b-color-2;
transition: background-color 0.2s ease;
&:last-child {
border-bottom: none;
}
&.n-header {
background-color: #f8f9fa;
border-bottom: 2px solid v.$b-color-2;
.table-cell {
padding: 15px 20px;
font-weight: 600;
color: v.$text-m;
font-size: 14px;
}
}
&.loading {
opacity: 0.6;
pointer-events: none;
}
&.READIED {
.notification-title,
.notification-text {
font-weight: 500;
opacity: 0.8;
}
}
&:hover:not(.n-header) {
background-color: #fafafa;
}
}
.table-cell {
padding: 20px;
&:first-child {
/* width: 60px;
min-width: 60px;
max-width: 60px; */
display: flex;
gap: 15px;
align-items: center;
}
&:last-child {
border-bottom: none;
}
&:last-child {
flex: 1;
}
}
&.loading {
opacity: 0.6;
}
.notification {
&-body {
flex-grow: 1;
}
&-header {
display: flex;
justify-content: space-between;
align-items: center;
}
&-body {
flex-grow: 1;
margin-bottom: 8px;
}
&-title {
@@ -5196,9 +5270,10 @@
&-text {
color: v.$text-s;
margin-bottom: 4px;
margin-bottom: 12px;
font-weight: 800;
font-size: 16px;
line-height: 1.4;
}
&-status {
@@ -5213,21 +5288,39 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
.btn-remove {
color: v.$white;
background: v.$status-new;
padding: 4px 18px;
padding: 6px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: all 0.2s ease;
&:hover {
background: #ff9100;
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
}
}
&-date {
color: v.$text-m;
font-size: 14px;
font-size: 13px;
text-align: start;
}
@@ -5238,16 +5331,29 @@
button {
cursor: pointer;
border: 2px solid v.$border-color-1;
border-radius: 4px;
border-radius: 6px;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
transition: all .3s ease-in;
transition: all 0.2s ease;
display: flex;
background: white;
padding: 0;
&:hover {
border: 2px solid v.$border-color-1-hover;
border-color: v.$border-color-1-hover;
transform: scale(1.05);
}
&:active {
transform: scale(0.95);
}
svg {
width: 14px;
height: 14px;
color: v.$status-new;
}
}
@@ -5258,19 +5364,162 @@
}
}
.notification-item.READIED {
.no-notifications {
text-align: center;
padding: 60px 20px;
color: v.$text-m;
font-size: 16px;
.notification-title,
.notification-text {
font-weight: 500;
opacity: 0.8;
&::before {
content: "🔔";
display: block;
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
}
}
&-footer {
padding: 10px;
padding: 15px;
border-top: 1px solid v.$b-color-2;
background: #fafafa;
}
.pagination-controls {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
button {
cursor: pointer;
border: 1px solid v.$b-color-2;
background: white;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
color: v.$text-s;
font-weight: 500;
min-width: 36px;
&:hover:not(:disabled) {
background: v.$b-color-2;
border-color: v.$border-color-1-hover;
transform: translateY(-1px);
}
&:active:not(:disabled) {
transform: translateY(0);
}
&.current {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
border-color: transparent;
}
&.other {
background: white;
}
&.arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
svg {
width: 16px;
height: 16px;
}
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
}
}
.pagination-controls-pages {
display: flex;
gap: 6px;
margin: 0 8px;
}
.error-message {
position: fixed;
bottom: 20px;
right: 20px;
background: #ef4444;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 1000;
animation: slideIn 0.3s ease;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
}
// Responsive adjustments
@media (max-width: 768px) {
.notifications-list {
&-wrapper {
max-width: calc(100vw - var(--side-bar-width) - 20px);
}
&-header {
flex-direction: column;
gap: 15px;
align-items: flex-start;
h4 {
height: auto;
}
}
.table-cell {
&:first-child {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
}
}
.notification-footer {
flex-direction: column;
align-items: flex-start !important;
gap: 10px !important;
}
.pagination-controls {
flex-wrap: wrap;
gap: 6px;
}
.select-all-header {
flex-wrap: wrap;
.btn-primary {
font-size: 12px;
padding: 4px 12px;
}
}
}
}