From bd869798be175c1958755ffcb4729df5240a91b9 Mon Sep 17 00:00:00 2001 From: smanylov Date: Sat, 24 Jan 2026 13:19:48 +0700 Subject: [PATCH] edit small screen layout --- src/app/actions/auth.ts | 1 + src/app/styles/global-styles.scss | 16 ++++ src/app/styles/header.scss | 26 ++++++ src/app/styles/pages-styles.scss | 79 +++++++++++++++++++ src/app/styles/settings.scss | 1 - .../setting-referral-program.tsx | 4 +- 6 files changed, 124 insertions(+), 3 deletions(-) diff --git a/src/app/actions/auth.ts b/src/app/actions/auth.ts index bd6a870..15b4213 100644 --- a/src/app/actions/auth.ts +++ b/src/app/actions/auth.ts @@ -222,6 +222,7 @@ export async function registration( message_body: { token: string }, message_code: string }; + console.log(parsed); if (parsed.message_desc === 'Operation successful') { await createSession(parsed.message_body.token, email as string); } else { diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index c2f5c4b..b80125b 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -41,6 +41,10 @@ color: v.$white; max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + h1 { font-size: 2rem; font-weight: 700; @@ -73,6 +77,10 @@ display: flex; gap: 28px; align-items: center; + + @media (max-width: 440px) { + flex-direction: column; + } } .header-stat-item { @@ -101,6 +109,10 @@ padding: 30px; background: v.$bg-light; min-height: 100vh; + + @media (max-width: 440px) { + padding: 15px; + } } .main-containter { @@ -121,6 +133,10 @@ &.auto { width: auto; } + + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } } .btn { diff --git a/src/app/styles/header.scss b/src/app/styles/header.scss index e534826..e978741 100644 --- a/src/app/styles/header.scss +++ b/src/app/styles/header.scss @@ -14,11 +14,19 @@ padding: 20px 20px; } + @media (max-width: 440px) { + padding: 10px 10px; + } + .header-action { display: flex; align-items: center; gap: 15px; + @media (max-width: 440px) { + gap: 10px; + } + .icon-btn { width: 40px; height: 40px; @@ -36,6 +44,11 @@ background: v.$bg-hover; transform: translateY(-2px); } + + @media (max-width: 440px) { + width: 30px; + height: 30px; + } } } @@ -68,12 +81,20 @@ @media (max-width: 490px) { padding: 8px; } + + @media (max-width: 440px) { + padding: 8px; + } } .tokens-count { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; + + @media (max-width: 440px) { + font-size: 12px; + } } .tokens-label { @@ -192,6 +213,11 @@ cursor: pointer; transition: all 0.3s; text-transform: uppercase; + + @media (max-width: 440px) { + width: 30px; + height: 30px; + } } .user-dropdown { diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 8adc088..0f9b21e 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -941,6 +941,10 @@ grid-template-columns: auto; } + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + .stat-card { background: white; padding: 18px; @@ -1008,6 +1012,10 @@ text-align: center; max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + .referral-link-input { display: flex; gap: 15px; @@ -1032,6 +1040,10 @@ align-items: center; justify-content: center; white-space: nowrap; + + @media (max-width: 490px) { + font-size: 10px; + } } .copy-btn { @@ -1276,6 +1288,16 @@ margin-bottom: 30px; border: none; + + @media (max-width: 440px) { + padding: 0; + box-shadow: none; + } + + .settings-form-wrapper { + width: 100%; + } + .form-group { margin-bottom: 20px; @@ -1284,6 +1306,10 @@ margin-bottom: 8px; font-weight: 600; color: v.$text-s; + + @media (max-width: 440px) { + font-size: 12px; + } } input, @@ -1294,6 +1320,11 @@ border-radius: 10px; font-size: 14px; transition: border-color 0.3s; + + @media (max-width: 440px) { + font-size: 12px; + padding: 10px; + } } } @@ -1302,6 +1333,10 @@ align-items: center; gap: 10px; margin-bottom: 15px; + + @media (max-width: 440px) { + font-size: 14px; + } } .btn-primary { @@ -1322,6 +1357,7 @@ grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 40px; + max-width: calc(100vw - var(--side-bar-width) - 60px); .stat-card.matches { --card-color-1: #3b82f6; @@ -1420,6 +1456,11 @@ @media (max-width: 860px) { grid-template-columns: repeat(2, 1fr); } + + @media (max-width: 440px) { + grid-template-columns: auto; + max-width: calc(100vw - var(--side-bar-width) - 30px); + } } .dashboard-main-grid { @@ -1453,6 +1494,14 @@ max-width: calc(100vw - var(--side-bar-width) - 60px); } } + + @media (max-width: 440px) { + + .left-column, + .right-column { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + } } .content-section { @@ -1591,6 +1640,8 @@ grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; + width: 100%; + max-width: calc(100vw - var(--side-bar-width) - 60px); .type-card.images { --card-color-1: #ff6b8a; @@ -1705,6 +1756,11 @@ @media (max-width: 1360px) { grid-template-columns: repeat(2, 1fr); } + + @media (max-width: 440px) { + grid-template-columns: auto; + max-width: calc(100vw - var(--side-bar-width) - 30px); + } } .dashboard-limits-section { @@ -1891,6 +1947,12 @@ display: flex; justify-content: space-between; align-items: center; + max-width: calc(100vw - var(--side-bar-width) - 60px); + + @media (max-width: 440px) { + flex-direction: column; + max-width: calc(100vw - var(--side-bar-width) - 30px); + } .last-check-title { font-size: 14px; @@ -2143,6 +2205,10 @@ margin-bottom: 2rem; max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + &-stat-card { background: white; padding: 1.5rem; @@ -2262,6 +2328,10 @@ box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1); max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + .my-cases-header { display: flex; align-items: center; @@ -2419,6 +2489,11 @@ gap: 24px; max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + flex-direction: column; + } + .check-all-left { flex: 1; position: relative; @@ -2474,6 +2549,10 @@ margin-bottom: 24px; max-width: calc(100vw - var(--side-bar-width) - 60px); + @media (max-width: 440px) { + max-width: calc(100vw - var(--side-bar-width) - 30px); + } + .section-header { display: flex; align-items: center; diff --git a/src/app/styles/settings.scss b/src/app/styles/settings.scss index 4d655ed..e4b4086 100644 --- a/src/app/styles/settings.scss +++ b/src/app/styles/settings.scss @@ -7,7 +7,6 @@ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; transition: all 0.3s ease; - overflow: hidden; } .form-section { diff --git a/src/app/ui/referral-page/setting-referral-program.tsx b/src/app/ui/referral-page/setting-referral-program.tsx index 6c4e1fe..f4fdfb1 100644 --- a/src/app/ui/referral-page/setting-referral-program.tsx +++ b/src/app/ui/referral-page/setting-referral-program.tsx @@ -8,7 +8,7 @@ export default function SettingReferralProgram() {
-
+

💳 Настройки выплат

@@ -32,7 +32,7 @@ export default function SettingReferralProgram() {
-
+

🔔 Уведомления