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

edit small screen layout

Browse Source
This commit is contained in:
smanylov
2026-01-24 13:19:48 +07:00
parent f8ab107724
commit bd869798be
6 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/actions/auth.ts
+1
View File
@@ -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 {
src/app/styles/global-styles.scss
+16
View File
@@ -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 {
src/app/styles/header.scss
+26
View File
@@ -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 {
src/app/styles/pages-styles.scss
+79
View File
@@ -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;
src/app/styles/settings.scss
-1
View File
@@ -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 {
src/app/ui/referral-page/setting-referral-program.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ export default function SettingReferralProgram() {
</div>
<form className="settings-form">
<div>
<div className="settings-form-wrapper">
<h4>💳 Настройки выплат</h4>
<div className="form-group">
@@ -32,7 +32,7 @@ export default function SettingReferralProgram() {
</div>
</div>
<div>
<div className="settings-form-wrapper">
<h4>🔔 Уведомления</h4>
<div className="checkbox-group">