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

add more adaptive styles

Browse Source
This commit is contained in:
smanylov
2026-01-20 18:52:21 +07:00
parent 7d7213b457
commit 3589487e39
3 changed files with 67 additions and 38 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.19.0",
"version": "0.20.0",
"private": true,
"scripts": {
"dev": "next dev -p 2999",
src/app/[locale]/pages/dashboard/page.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export default function Page() {
</div>
</div>
<DashboardFilesInfo />
<div className="grid grid-cols-2 mb-[30px] gap-[20px]">
<div className="dashboard-main-grid">
<DahboardLimitsSection />
<DahboardGeographySection />
</div>
src/app/styles/pages-styles.scss
+65 -36
View File
@@ -1292,6 +1292,14 @@
opacity: 0.2;
filter: blur(1px);
}
@media (max-width: 1360px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
grid-template-columns: repeat(2, 1fr);
}
}
.dashboard-main-grid {
@@ -1299,16 +1307,31 @@
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
width: 100%;
max-width: calc(100vw - var(--side-bar-width) - 60px);
.left-column {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
}
.right-column {
width: 100%;
display: flex;
flex-direction: column;
max-width: calc(100vw - var(--side-bar-width) - 40vw - 60px);
}
@media (max-width: 1360px) {
grid-template-columns: 1fr;
.left-column,
.right-column {
max-width: calc(100vw - var(--side-bar-width) - 60px);
}
}
}
@@ -1558,6 +1581,10 @@
font-size: 14px;
}
}
@media (max-width: 1360px) {
grid-template-columns: repeat(2, 1fr);
}
}
.dashboard-limits-section {
@@ -1805,11 +1832,16 @@
.violations-carousel {
display: flex;
flex-direction: column;
width: 100%;
.swiper-horizontal {
width: 100%;
}
.violation-slide {
.violation-image-container {
width: 100%;
height: 200px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
@@ -1822,8 +1854,8 @@
}
.violation-image {
width: 300px;
height: 100%;
width: 100%;
max-width: 200px;
object-fit: contain;
background: white;
}
@@ -1862,7 +1894,7 @@
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
width: 100%;
.violation-title-row {
display: flex;
@@ -1889,6 +1921,7 @@
text-transform: uppercase;
background: #dbeafe;
color: #1e40af;
/* display: none; */
}
}
@@ -1896,47 +1929,46 @@
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.violation-info-item {
padding: 10px 12px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.violation-info-item {
padding: 10px 12px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
.violation-info-value {
font-size: 13px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 6px;
}
.violation-info-value {
font-size: 13px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 6px;
}
.violation-info-label {
font-size: 10px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
.violation-info-label {
font-size: 10px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
}
}
}
.violation-actions-row {
display: flex;
gap: 10px;
margin-top: auto;
flex-shrink: 0;
}
.btn-visit-site {
flex: 1;
padding: 12px 20px;
padding: 12px 5px;
background: white;
color: #3b82f6;
border: 2px solid #3b82f6;
@@ -1958,7 +1990,7 @@
.violation-action {
flex: 1;
padding: 12px 20px;
padding: 12px 5px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
border: none;
@@ -2009,9 +2041,6 @@
&-stat-number {
font-size: 2rem;
font-weight: 700;
/* background: linear-gradient(135deg, #667eea, #764ba2);
background-clip: text;
-webkit-text-fill-color: transparent; */
color: v.$p-color;
margin-bottom: 0.5rem;
}