diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index 89d20c8..56ca835 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -14,7 +14,7 @@ export default function Page() { const t = useTranslations('Global'); return ( -
+ <> ...}> @@ -24,6 +24,6 @@ export default function Page() {
- + ); } diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 98b6b90..7b9916d 100644 --- a/src/app/components/tanstakTable.tsx +++ b/src/app/components/tanstakTable.tsx @@ -336,29 +336,29 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { ) }, cell: ({ row }) => ( -
+
diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 1629730..914a09e 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -33,7 +33,7 @@ } .main-containter-wrapper { - margin-left: 280px; + margin-left: var(--side-bar-width);; flex: 1; padding: 30px; background: v.$bg-light; @@ -45,6 +45,21 @@ margin: 0 auto; } +.block-wrapper { + background: v.$white; + border-radius: 20px; + padding: 25px; + box-shadow: 0 4px 20px v.$shadow-1; + border: 1px solid v.$b-color-1; + margin-bottom: 30px; + width: 100%; + max-width: calc(100vw - var(--side-bar-width) - 60px); + + &.auto { + width: auto; + } +} + .btn { padding: 12px 24px; border-radius: 10px; @@ -165,7 +180,8 @@ } .sidebar { - width: 280px; + /* width: v.$side-bar-width; */ + width: var(--side-bar-width); background: linear-gradient(180deg, v.$p-color 0%, v.$s-color 100%); padding: 30px 0; position: fixed; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 51d4805..e69f2ac 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -281,15 +281,6 @@ } } -.block-wrapper { - background: v.$white; - border-radius: 20px; - padding: 25px; - box-shadow: 0 4px 20px v.$shadow-1; - border: 1px solid v.$b-color-1; - margin-bottom: 30px; -} - .upload-section { background: v.$white; border-radius: 20px; @@ -547,7 +538,6 @@ } .tanstak-table-block { - width: 100%; overflow-x: auto; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); @@ -557,6 +547,11 @@ width: 100%; table-layout: fixed; + + @media (max-width: 1200px) { + width: 1200px; + } + >*+* { border-top: 1px solid v.$b-color-2; } @@ -565,9 +560,6 @@ border-bottom: 1px solid v.$b-color-2; } - @media (min-width: 768px) { - table-layout: auto; - } &-head { background-color: v.$b-color-1; @@ -629,11 +621,32 @@ padding-bottom: 1rem; white-space: nowrap; } + + .actions { + display: flex; + justify-content: center; + gap: 0.5rem; + flex-wrap: wrap; + + button { + padding: 4px 12px; + font-size: 14px; + line-height: 20px; + border-radius: 4px; + color: v.$white; + + .icon {} + + @media (max-width: 1200px) { + padding: 4px; + } + } + } } } } -@media (max-width: 1300px) { +/* @media (max-width: 1300px) { .tanstak-table { max-width: 800px; margin: 0 auto; @@ -645,4 +658,4 @@ max-width: 500px; margin: 0 auto; } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/app/styles/variable.scss b/src/app/styles/variable.scss index 5d249a4..b5799a6 100644 --- a/src/app/styles/variable.scss +++ b/src/app/styles/variable.scss @@ -15,4 +15,12 @@ $red: #dc2626; $color-image: #f08c00; $color-video: #2f9e44; -$color-audio: #1971c2; \ No newline at end of file +$color-audio: #1971c2; + +:root { + --side-bar-width: 280px; + + @media (max-width: 1200px) { + --side-bar-width: 180px; + } +} \ No newline at end of file diff --git a/src/app/ui/dashboard/stats-grid.tsx b/src/app/ui/dashboard/stats-grid.tsx index 8cba27c..abc3e8c 100644 --- a/src/app/ui/dashboard/stats-grid.tsx +++ b/src/app/ui/dashboard/stats-grid.tsx @@ -4,7 +4,7 @@ export default function StatsGrid() { const t = useTranslations("Global"); return ( -
+

{t('your-content')}