diff --git a/package.json b/package.json index d4fab12..3f8eae6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.19.0", + "version": "0.20.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index 32fc157..2c81c21 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -33,7 +33,7 @@ export default function Page() { -
+
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 56d9772..d435660 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -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; }