gkorotkiy/anal-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust region ranking table layout

Browse Source
This commit is contained in:
Gleb Korotkiy
2026-06-21 10:17:45 +03:00
parent cf1fbb1b55
commit 5996c9e212
1 changed files with 26 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/ReportsView.vue
View File

@@ -49,10 +49,10 @@ const reportRows = computed<ReportsTableRows>(() =>
const reportColumns = computed<ReportsTableColumns>(() => [ const reportColumns = computed<ReportsTableColumns>(() => [
{ {
accessorKey: 'rank', accessorKey: 'rank',
align: 'right', align: 'center',
header: '№', header: '№',
sortable: false, sortable: false,
width: 48, width: 44,
}, },
{ {
accessorKey: 'region_name', accessorKey: 'region_name',
@@ -87,11 +87,7 @@ const isReportsTableLoading = computed(
</script> </script>
<template> <template>
<section class="reports-page" aria-labelledby="reports-page-title"> <section class="reports-page" aria-label="Рейтинг субъектов РФ">
<header class="reports-page-header">
<h1 id="reports-page-title" class="reports-page-title">Рейтинг субъектов РФ</h1>
</header>
<DataTable <DataTable
:class="[ :class="[
'reports-page-table', 'reports-page-table',
@@ -116,25 +112,7 @@ const isReportsTableLoading = computed(
<style scoped> <style scoped>
.reports-page { .reports-page {
display: grid;
min-width: 0; min-width: 0;
gap: 28px;
}
.reports-page-header {
display: flex;
min-height: 44px;
align-items: center;
}
.reports-page-title {
margin: 0;
color: var(--Infographic-Main-Dark-Blue, #022456);
font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
font-size: 24px;
line-height: 28px;
font-weight: 700;
letter-spacing: 0;
} }
.reports-page-table { .reports-page-table {
@@ -142,6 +120,12 @@ const isReportsTableLoading = computed(
--reports-page-table-scrollbar-right-offset: -68px; --reports-page-table-scrollbar-right-offset: -68px;
} }
.reports-page-table :deep(.gisp-data-table) {
border: 0;
border-radius: 0;
background: transparent;
}
.reports-page-table :deep(.gisp-data-table__body-scroll) { .reports-page-table :deep(.gisp-data-table__body-scroll) {
height: min(680px, calc(100dvh - 300px)); height: min(680px, calc(100dvh - 300px));
max-height: min(680px, calc(100dvh - 300px)); max-height: min(680px, calc(100dvh - 300px));
@@ -172,9 +156,23 @@ const isReportsTableLoading = computed(
.reports-page-table :deep(.gisp-data-table__table col:first-child), .reports-page-table :deep(.gisp-data-table__table col:first-child),
.reports-page-table :deep(.gisp-data-table__header-cell:first-child), .reports-page-table :deep(.gisp-data-table__header-cell:first-child),
.reports-page-table :deep(.gisp-data-table__cell:first-child) { .reports-page-table :deep(.gisp-data-table__cell:first-child) {
width: 48px !important; width: 44px !important;
min-width: 48px !important; min-width: 44px !important;
max-width: 48px !important; max-width: 44px !important;
}
.reports-page-table :deep(.gisp-data-table__header-cell:first-child),
.reports-page-table :deep(.gisp-data-table__cell:first-child) {
padding-right: 0 !important;
padding-left: 0 !important;
text-align: center !important;
}
.reports-page-table
:deep(.gisp-data-table__header-cell:first-child .gisp-data-table__header-content),
.reports-page-table :deep(.gisp-data-table__cell:first-child .gisp-data-table__cell-text) {
justify-content: center;
text-align: center;
} }
.reports-page-table :deep(.gisp-data-table__table col:nth-child(n + 3)), .reports-page-table :deep(.gisp-data-table__table col:nth-child(n + 3)),
@@ -238,10 +236,6 @@ const isReportsTableLoading = computed(
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.reports-page {
gap: 20px;
}
.reports-page-table { .reports-page-table {
--reports-page-table-scrollbar-right-offset: -36px; --reports-page-table-scrollbar-right-offset: -36px;
} }