From 0c752cfb8c3c0fe9458e6dc4e944300b175f6dc4 Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Wed, 16 Oct 2024 12:13:57 +0300 Subject: [PATCH 01/20] feat/ table and card styles --- src/css/defaults/card.scss | 150 ++++++++++++++++++++++++++++++++++++ src/css/defaults/table.scss | 33 ++++++++ src/css/main.scss | 2 + 3 files changed, 185 insertions(+) create mode 100644 src/css/defaults/card.scss create mode 100644 src/css/defaults/table.scss diff --git a/src/css/defaults/card.scss b/src/css/defaults/card.scss new file mode 100644 index 000000000..32a9a9362 --- /dev/null +++ b/src/css/defaults/card.scss @@ -0,0 +1,150 @@ +// ----- new styles + +.tabs-page-wrapper { + display: flex; + flex-direction: column; + width: 100%; +} + +.wt-page-wrapper { + width: 100%; + + .main-container { + display: flex; + flex-direction: column; + width: 100%; + + & > section { + display: flex; + flex-direction: column; + height: 100%; + } + } +} + +// ----- old styles + +// inner content section +.object-content { + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 100%; + min-height: 65vh; + padding: 30px; + border-radius: var(--border-radius); + background: #fff; + + .pagination { + margin: auto 0 0 auto; + padding-top: 28px; + } +} + +.main-section__wrapper { + display: flex; + flex-direction: column; + width: 100%; +} + +.content-wrapper { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.btn-controls { + .btn { + margin-left: 28px; + } +} + +// SECTION HEADING +.content-header { + position: relative; + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-between; + margin: var(--spacing-sm) 0; + + .content-title { + @extend %typo-heading-3; + + + .hint { + top: -2px; + } + } + + // WRAP FOR SEARCH INPUT + .content-header__actions-wrap { + display: flex; + align-items: center; + gap: var(--table-actions-icon-gap); + } +} + +// GRID TEMPLATE FOR MODULE INPUTS +.object-input-grid { + display: grid; + align-items: flex-start; + grid-template-columns: 1fr 1fr; + grid-auto-rows: minmax(85px, auto); + grid-column-gap: 20px; + grid-row-gap: 10px; + + &__1-col { + grid-template-columns: 1fr; + } + + &__w50 { + width: 50%; + } +} + +.grid-w100 { + .object-input-grid { + grid-template-columns: 1fr; + } +} + +.grid-w50 { + .object-input-grid { + grid-template-columns: 50%; + } +} + +.value-pair { + display: grid; + align-items: center; + margin-bottom: 20px; + grid-template-columns: 1fr 1fr 24px; + grid-gap: 20px; +} + +.module-new .object-input-grid .select-preview { + margin-bottom: 20px; +} + +.module-new { + .new_w50 { + width: 50%; + + .form-input { + margin: 8px 0; + } + } + + &.object-with-tabs { + padding-top: 28px; + padding-right: 0; + padding-left: 0; + + .tabs-inner-component { + padding: 0 58px 38px 58px; + } + } +} +.dummy-wrapper { + height: 100%; +} diff --git a/src/css/defaults/table.scss b/src/css/defaults/table.scss new file mode 100644 index 000000000..97960b2b1 --- /dev/null +++ b/src/css/defaults/table.scss @@ -0,0 +1,33 @@ +.wt-page-wrapper { + flex-grow: 1; + display: flex; + max-height: 100%; + + :deep(.wt-page-wrapper__main) { + display: flex; + flex-direction: column; + max-height: 100%; + min-height: 0; + } +} + +.table-wrapper { + flex-grow: 1; + display: flex; + padding-top: var(--spacing-xs); + flex-direction: column; + gap: var(--spacing-xs); + max-height: 100%; + min-height: 0; + min-width: 0; + + .wt-table { + flex-grow: 1; + + .wt-table__head { + position: sticky; + top: 0; + z-index: 1; + } + } +} diff --git a/src/css/main.scss b/src/css/main.scss index ae5840c13..66c2980b6 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,5 +1,7 @@ @import 'styleguide/styleguide'; @import 'styleguide/display-helpers/display-helpers'; +@import 'defaults/table'; +@import 'defaults/card'; @include wt-placeholder; From ea4d80bdade0734da3699d16c54bd1778c3c8675 Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Thu, 17 Oct 2024 00:52:50 +0300 Subject: [PATCH 02/20] feat/ card page and table page styles [WTEL-5305] --- src/css/defaults/table.scss | 33 ------- src/css/main.scss | 4 +- .../card.scss => pages/card-page.scss} | 4 - src/css/pages/table-page.scss | 93 +++++++++++++++++++ 4 files changed, 95 insertions(+), 39 deletions(-) delete mode 100644 src/css/defaults/table.scss rename src/css/{defaults/card.scss => pages/card-page.scss} (98%) create mode 100644 src/css/pages/table-page.scss diff --git a/src/css/defaults/table.scss b/src/css/defaults/table.scss deleted file mode 100644 index 97960b2b1..000000000 --- a/src/css/defaults/table.scss +++ /dev/null @@ -1,33 +0,0 @@ -.wt-page-wrapper { - flex-grow: 1; - display: flex; - max-height: 100%; - - :deep(.wt-page-wrapper__main) { - display: flex; - flex-direction: column; - max-height: 100%; - min-height: 0; - } -} - -.table-wrapper { - flex-grow: 1; - display: flex; - padding-top: var(--spacing-xs); - flex-direction: column; - gap: var(--spacing-xs); - max-height: 100%; - min-height: 0; - min-width: 0; - - .wt-table { - flex-grow: 1; - - .wt-table__head { - position: sticky; - top: 0; - z-index: 1; - } - } -} diff --git a/src/css/main.scss b/src/css/main.scss index 66c2980b6..085b75db8 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,7 +1,7 @@ @import 'styleguide/styleguide'; @import 'styleguide/display-helpers/display-helpers'; -@import 'defaults/table'; -@import 'defaults/card'; +@import 'pages/table-page'; +@import 'pages/card-page'; @include wt-placeholder; diff --git a/src/css/defaults/card.scss b/src/css/pages/card-page.scss similarity index 98% rename from src/css/defaults/card.scss rename to src/css/pages/card-page.scss index 32a9a9362..e6456956e 100644 --- a/src/css/defaults/card.scss +++ b/src/css/pages/card-page.scss @@ -1,5 +1,3 @@ -// ----- new styles - .tabs-page-wrapper { display: flex; flex-direction: column; @@ -22,8 +20,6 @@ } } -// ----- old styles - // inner content section .object-content { display: flex; diff --git a/src/css/pages/table-page.scss b/src/css/pages/table-page.scss new file mode 100644 index 000000000..ccf058158 --- /dev/null +++ b/src/css/pages/table-page.scss @@ -0,0 +1,93 @@ +.wt-page-wrapper { + flex-grow: 1; + display: flex; + max-height: 100%; + + :deep(.wt-page-wrapper__main) { + display: flex; + flex-direction: column; + max-height: 100%; + min-height: 0; + } +} + +.table-wrapper { + display: flex; + flex: 1 1 100%; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; + padding-top: var(--spacing-xs); + width: 100%; + max-height: 100%; + min-height: 0; + gap: var(--spacing-sm); + + .wt-table { + flex-grow: 1; + + .wt-table__head { + position: sticky; + top: 0; + z-index: 1; + } + } + + .wt-pagination { + margin-top: 20px; + margin-left: auto; + } + + .table-action { + margin-left: 10px; + } + + /* + wrapper class for table content overflow: visible preserving table scroll itself + .table-wrapper>.table-wrapper__visible-scroll-wrapper>.wt-table + */ + .table-wrapper__visible-scroll-wrapper { + overflow: visible; + height: 100%; + + .wt-table { + overflow: visible; + } + } + + .table-wrapper__scroll-wrapper { + @extend %wt-scrollbar; + + overflow: auto; + height: 100%; + min-height: 0; + + .wt-table { + overflow: visible; + } + } +} + +.actions-panel-wrapper { + display: flex; + + .filter-wrap { + flex: 1; + } + + .wt-table-actions { + height: fit-content; + margin-top: 24px; + } +} + +.wt-page-wrapper__main { + min-height: 0; + + .wt-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} From 89ae83ec7ad6a5701f486f0d2a0b5b3640dcbb91 Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Fri, 18 Oct 2024 13:51:25 +0300 Subject: [PATCH 03/20] feat/ table, card styles [WTEL-5305] --- src/css/main.scss | 2 +- src/css/pages/card-page.scss | 122 +++++++++++----------------------- src/css/pages/table-page.scss | 101 ++++++++++------------------ 3 files changed, 77 insertions(+), 148 deletions(-) diff --git a/src/css/main.scss b/src/css/main.scss index 085b75db8..d962e489f 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,7 +1,7 @@ @import 'styleguide/styleguide'; @import 'styleguide/display-helpers/display-helpers'; -@import 'pages/table-page'; @import 'pages/card-page'; +@import 'pages/table-page'; @include wt-placeholder; diff --git a/src/css/pages/card-page.scss b/src/css/pages/card-page.scss index e6456956e..5aaa59eaf 100644 --- a/src/css/pages/card-page.scss +++ b/src/css/pages/card-page.scss @@ -1,40 +1,8 @@ -.tabs-page-wrapper { - display: flex; - flex-direction: column; - width: 100%; -} -.wt-page-wrapper { - width: 100%; - - .main-container { - display: flex; - flex-direction: column; - width: 100%; - - & > section { - display: flex; - flex-direction: column; - height: 100%; - } - } -} - -// inner content section -.object-content { +.tabs-page-wrapper { display: flex; flex-direction: column; - box-sizing: border-box; width: 100%; - min-height: 65vh; - padding: 30px; - border-radius: var(--border-radius); - background: #fff; - - .pagination { - margin: auto 0 0 auto; - padding-top: 28px; - } } .main-section__wrapper { @@ -49,14 +17,25 @@ flex-grow: 1; } -.btn-controls { - .btn { - margin-left: 28px; +.value-pair { + display: grid; + align-items: center; + margin-bottom: 20px; + grid-template-columns: 1fr 1fr 24px; + grid-gap: 20px; +} + +.object-with-tabs { + padding-top: 28px; + padding-right: 0; + padding-left: 0; + + .tabs-inner-component { + padding: 0 58px 38px 58px; } } -// SECTION HEADING -.content-header { +.opened-card-header { position: relative; display: flex; align-items: center; @@ -64,24 +43,38 @@ justify-content: space-between; margin: var(--spacing-sm) 0; - .content-title { + &__actions-wrap { + display: flex; + align-items: center; + gap: var(--table-actions-icon-gap); + } + + &__title { @extend %typo-heading-3; + .hint { top: -2px; } } +} - // WRAP FOR SEARCH INPUT - .content-header__actions-wrap { +.wt-page-wrapper { + width: 100%; +} + +.opened-card { + display: flex; + flex-direction: column; + width: 100%; + + & > section { display: flex; - align-items: center; - gap: var(--table-actions-icon-gap); + flex-direction: column; + height: 100%; } } -// GRID TEMPLATE FOR MODULE INPUTS -.object-input-grid { +.opened-card-input-grid { display: grid; align-items: flex-start; grid-template-columns: 1fr 1fr; @@ -99,48 +92,13 @@ } .grid-w100 { - .object-input-grid { + .opened-card-input-grid { grid-template-columns: 1fr; } } .grid-w50 { - .object-input-grid { + .opened-card-input-grid { grid-template-columns: 50%; } } - -.value-pair { - display: grid; - align-items: center; - margin-bottom: 20px; - grid-template-columns: 1fr 1fr 24px; - grid-gap: 20px; -} - -.module-new .object-input-grid .select-preview { - margin-bottom: 20px; -} - -.module-new { - .new_w50 { - width: 50%; - - .form-input { - margin: 8px 0; - } - } - - &.object-with-tabs { - padding-top: 28px; - padding-right: 0; - padding-left: 0; - - .tabs-inner-component { - padding: 0 58px 38px 58px; - } - } -} -.dummy-wrapper { - height: 100%; -} diff --git a/src/css/pages/table-page.scss b/src/css/pages/table-page.scss index ccf058158..8ca2cf04b 100644 --- a/src/css/pages/table-page.scss +++ b/src/css/pages/table-page.scss @@ -1,93 +1,64 @@ .wt-page-wrapper { - flex-grow: 1; - display: flex; - max-height: 100%; + width: 100%; + height: 100%; - :deep(.wt-page-wrapper__main) { - display: flex; - flex-direction: column; - max-height: 100%; + &__main { min-height: 0; + + .wt-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } } -.table-wrapper { +.table-section { display: flex; - flex: 1 1 100%; flex-direction: column; - justify-content: space-between; - box-sizing: border-box; - padding-top: var(--spacing-xs); width: 100%; - max-height: 100%; - min-height: 0; - gap: var(--spacing-sm); - .wt-table { - flex-grow: 1; + &__wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1 1 100%; + width: 100%; + gap: var(--spacing-sm); + min-height: 0; .wt-table__head { position: sticky; top: 0; z-index: 1; } - } - - .wt-pagination { - margin-top: 20px; - margin-left: auto; - } - - .table-action { - margin-left: 10px; - } - - /* - wrapper class for table content overflow: visible preserving table scroll itself - .table-wrapper>.table-wrapper__visible-scroll-wrapper>.wt-table - */ - .table-wrapper__visible-scroll-wrapper { - overflow: visible; - height: 100%; - - .wt-table { - overflow: visible; - } - } - - .table-wrapper__scroll-wrapper { - @extend %wt-scrollbar; - - overflow: auto; - height: 100%; - min-height: 0; - .wt-table { - overflow: visible; + .wt-pagination { + margin-top: auto; } } } -.actions-panel-wrapper { +.table-header { + position: relative; display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin: var(--spacing-sm) 0; - .filter-wrap { - flex: 1; - } + &__title { + @extend %typo-heading-3; - .wt-table-actions { - height: fit-content; - margin-top: 24px; + + .hint { + top: -2px; + } } -} - -.wt-page-wrapper__main { - min-height: 0; - .wt-loader { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + &__actions-wrap { + display: flex; + align-items: center; + gap: var(--table-actions-icon-gap); } } From 801cfd6a61d99a6aad1d6bcc27e56687a6f1d743 Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Mon, 21 Oct 2024 21:17:33 +0300 Subject: [PATCH 04/20] feat/ changes according to comment [WTEL-5305] --- src/css/pages/card-page.scss | 143 ++++++++++------------------------ src/css/pages/table-page.scss | 93 +++++++++++----------- 2 files changed, 91 insertions(+), 145 deletions(-) diff --git a/src/css/pages/card-page.scss b/src/css/pages/card-page.scss index 5aaa59eaf..f8016f76b 100644 --- a/src/css/pages/card-page.scss +++ b/src/css/pages/card-page.scss @@ -1,104 +1,47 @@ - -.tabs-page-wrapper { - display: flex; - flex-direction: column; - width: 100%; -} - -.main-section__wrapper { - display: flex; - flex-direction: column; - width: 100%; -} - -.content-wrapper { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.value-pair { - display: grid; - align-items: center; - margin-bottom: 20px; - grid-template-columns: 1fr 1fr 24px; - grid-gap: 20px; -} - -.object-with-tabs { - padding-top: 28px; - padding-right: 0; - padding-left: 0; - - .tabs-inner-component { - padding: 0 58px 38px 58px; - } -} - -.opened-card-header { - position: relative; - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - margin: var(--spacing-sm) 0; - - &__actions-wrap { - display: flex; - align-items: center; - gap: var(--table-actions-icon-gap); - } - - &__title { - @extend %typo-heading-3; - - + .hint { - top: -2px; - } - } -} - -.wt-page-wrapper { - width: 100%; -} - .opened-card { - display: flex; - flex-direction: column; - width: 100%; - - & > section { - display: flex; - flex-direction: column; - height: 100%; - } -} - -.opened-card-input-grid { - display: grid; - align-items: flex-start; - grid-template-columns: 1fr 1fr; - grid-auto-rows: minmax(85px, auto); - grid-column-gap: 20px; - grid-row-gap: 10px; - - &__1-col { - grid-template-columns: 1fr; - } - - &__w50 { - width: 50%; - } -} + &.wt-page-wrapper { + width: 100%; + } -.grid-w100 { - .opened-card-input-grid { - grid-template-columns: 1fr; - } -} + &-header { + position: relative; + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-between; + margin: var(--spacing-sm) 0; + + &__title { + @extend %typo-heading-3; + + + .hint { + top: -2px; + } + } + } -.grid-w50 { - .opened-card-input-grid { - grid-template-columns: 50%; - } + &-form { + display: flex; + flex-direction: column; + width: 100%; + } + &-input-grid { + display: grid; + align-items: flex-start; + grid-template-columns: 1fr 1fr; + grid-auto-rows: minmax(auto, auto); + grid-column-gap: var(--spacing-xs); + grid-row-gap: var(--spacing-xs); + + &--1-col { + grid-template-columns: 1fr; + } + + &--w50 { + width: 50%; + } + &--w100{ + grid-template-columns: 1fr; + } + } } diff --git a/src/css/pages/table-page.scss b/src/css/pages/table-page.scss index 8ca2cf04b..5a9b80725 100644 --- a/src/css/pages/table-page.scss +++ b/src/css/pages/table-page.scss @@ -1,64 +1,67 @@ -.wt-page-wrapper { - width: 100%; - height: 100%; +.table-page{ - &__main { - min-height: 0; + &.wt-page-wrapper { + width: 100%; + height: 100%; + + &__main { + min-height: 0; - .wt-loader { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + .wt-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } } -} - -.table-section { - display: flex; - flex-direction: column; - width: 100%; - &__wrapper { + .table-section { display: flex; flex-direction: column; - justify-content: space-between; - flex: 1 1 100%; width: 100%; - gap: var(--spacing-sm); - min-height: 0; - .wt-table__head { - position: sticky; - top: 0; - z-index: 1; - } + &__table-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1 1 100%; + width: 100%; + gap: var(--spacing-sm); + min-height: 0; - .wt-pagination { - margin-top: auto; + .wt-table__head { + position: sticky; + top: 0; + z-index: 1; + } + + .wt-pagination { + margin-top: auto; + } } } -} -.table-header { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - margin: var(--spacing-sm) 0; + .table-title { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin: var(--spacing-sm) 0; - &__title { - @extend %typo-heading-3; + &__title { + @extend %typo-heading-3; - + .hint { - top: -2px; + + .hint { + top: -2px; + } } - } - &__actions-wrap { - display: flex; - align-items: center; - gap: var(--table-actions-icon-gap); + &__actions-wrap { + display: flex; + align-items: center; + gap: var(--table-actions-icon-gap); + } } } From e2f1fa422b261b06f6b28cc0648c6d2c88c84c9b Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Mon, 21 Oct 2024 21:26:58 +0300 Subject: [PATCH 05/20] feat/ remove excessive code [WTEL-5305] --- src/css/main.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/css/main.scss b/src/css/main.scss index d962e489f..716386df9 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -33,11 +33,6 @@ body { } } -//main { -// min-height: 100%; -// height: 100%; -//} - h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: normal; From b00ead5a14cfd803ce2fd4603eb9fba65c14b70a Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Tue, 22 Oct 2024 18:02:37 +0300 Subject: [PATCH 06/20] feat/ docs [WTEL-5305] --- .../webitel-ui/pages/card-page/Readme.md | 99 +++++++++++++++ .../webitel-ui/pages/table-page/Readme.md | 119 ++++++++++++++++++ 2 files changed, 218 insertions(+) create mode 100644 docs/pages/webitel-ui/pages/card-page/Readme.md create mode 100644 docs/pages/webitel-ui/pages/table-page/Readme.md diff --git a/docs/pages/webitel-ui/pages/card-page/Readme.md b/docs/pages/webitel-ui/pages/card-page/Readme.md new file mode 100644 index 000000000..e15cca563 --- /dev/null +++ b/docs/pages/webitel-ui/pages/card-page/Readme.md @@ -0,0 +1,99 @@ +# Card page styles + +#### Що це +Це стилі для сторінки-картки (після таблиці, накриклад: створення чи редагування запису) + +Ці стилі знаходяться тут для того, щоб вирішити проблему з дублюванням стилів в проектах. + +Зараз ці стилі прокривають не великий об'єм елементів, тому по мірі використання - стилі потрібно буде додавати +## Які класи використовуються та їх порядок + +. + + opened-card + opened-card-form + + opened-card-tabs + opened-card-tabs__tab + + opened-card-header + opened-card-header__title + + opened-card-input-grid opened-card-input-grid--1-col opened-card-input-grid--w50 + + +## Приклад використання + +```vue + +// crm, opened-sources.vue + + +// crm, opened-sources-general.vue + + + +``` diff --git a/docs/pages/webitel-ui/pages/table-page/Readme.md b/docs/pages/webitel-ui/pages/table-page/Readme.md new file mode 100644 index 000000000..61a5c6c52 --- /dev/null +++ b/docs/pages/webitel-ui/pages/table-page/Readme.md @@ -0,0 +1,119 @@ +# Table page styles + +#### Що це +Це стилі для сторінки з стандартними таблицями. + +Ці стилі знаходяться тут для того, щоб вирішити проблему з дублюванням стилів в проектах. + +## Які класи використовуються та їх порядок + +. + + table-page + table-section + + table-title + table-title__title + table-title__actions-wrap + + table-section__table-wrapper + +## Приклад використання + +```vue + +// crm, the-sources.vue + + +``` From ac90680c833ffa3873b23df1fc85214904ea7d2d Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Tue, 22 Oct 2024 21:46:23 +0300 Subject: [PATCH 07/20] feat/ move to another directory [WTEL-5305] --- .../{pages/card-page/Readme.md => css/card-page/card-page.css.md} | 0 .../table-page/Readme.md => css/table-page/table-page.css.md} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename docs/pages/webitel-ui/{pages/card-page/Readme.md => css/card-page/card-page.css.md} (100%) rename docs/pages/webitel-ui/{pages/table-page/Readme.md => css/table-page/table-page.css.md} (100%) diff --git a/docs/pages/webitel-ui/pages/card-page/Readme.md b/docs/pages/webitel-ui/css/card-page/card-page.css.md similarity index 100% rename from docs/pages/webitel-ui/pages/card-page/Readme.md rename to docs/pages/webitel-ui/css/card-page/card-page.css.md diff --git a/docs/pages/webitel-ui/pages/table-page/Readme.md b/docs/pages/webitel-ui/css/table-page/table-page.css.md similarity index 100% rename from docs/pages/webitel-ui/pages/table-page/Readme.md rename to docs/pages/webitel-ui/css/table-page/table-page.css.md From dc82ca7421ea4d299902167bf1961aaec8a2abac Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Tue, 22 Oct 2024 21:51:18 +0300 Subject: [PATCH 08/20] feat/ package.json update [WTEL-5305] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1c58c22dd..97c22c148 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@webitel/ui-sdk", - "version": "24.10.46-6", + "version": "24.10.47", "private": false, "scripts": { "dev": "vite", From 762998277d583efe64505c60d2cb5f38ac2225bf Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Tue, 22 Oct 2024 21:57:48 +0300 Subject: [PATCH 09/20] feat/ add new route [WTEL-5305] --- docs/.vitepress/routes.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/.vitepress/routes.js b/docs/.vitepress/routes.js index a7c9fdc64..96cf711ae 100644 --- a/docs/.vitepress/routes.js +++ b/docs/.vitepress/routes.js @@ -66,6 +66,11 @@ const sidebarNav = [ items: useDocsPattern({ pattern: 'webitel-ui/assets' }), collapsed: false, }, + { + text: 'CSS', + items: useDocsPattern({ pattern: 'webitel-ui/css' }), + collapsed: false, + }, { text: 'Components', items: useDocsPattern({ pattern: 'webitel-ui/components' }), From 79d04d4e068fd3423d9a8f068ecc5109b1014142 Mon Sep 17 00:00:00 2001 From: Sviatoslav Bar Date: Wed, 23 Oct 2024 15:54:23 +0300 Subject: [PATCH 10/20] feat/ fixes according to comments [WTEL-5305] --- docs/.vitepress/routes.js | 2 +- .../webitel-ui/css/card-page/card-page.css.md | 75 ++++--------- .../css/table-page/table-page.css.md | 105 +++--------------- src/css/pages/card-page.scss | 4 +- 4 files changed, 42 insertions(+), 144 deletions(-) diff --git a/docs/.vitepress/routes.js b/docs/.vitepress/routes.js index 96cf711ae..95bc616b7 100644 --- a/docs/.vitepress/routes.js +++ b/docs/.vitepress/routes.js @@ -69,7 +69,7 @@ const sidebarNav = [ { text: 'CSS', items: useDocsPattern({ pattern: 'webitel-ui/css' }), - collapsed: false, + collapsed: true, }, { text: 'Components', diff --git a/docs/pages/webitel-ui/css/card-page/card-page.css.md b/docs/pages/webitel-ui/css/card-page/card-page.css.md index e15cca563..d87e3ab5e 100644 --- a/docs/pages/webitel-ui/css/card-page/card-page.css.md +++ b/docs/pages/webitel-ui/css/card-page/card-page.css.md @@ -1,25 +1,30 @@ # Card page styles +##### ! Стилі додаються автоматично в main.scss ! #### Що це -Це стилі для сторінки-картки (після таблиці, накриклад: створення чи редагування запису) - -Ці стилі знаходяться тут для того, щоб вирішити проблему з дублюванням стилів в проектах. -Зараз ці стилі прокривають не великий об'єм елементів, тому по мірі використання - стилі потрібно буде додавати -## Які класи використовуються та їх порядок +Це стилі для сторінки-картки (після таблиці, накриклад: створення чи редагування запису) -. +## Які класи використовуються - opened-card - opened-card-form + opened-card: загальний клас та обгортка сторінки, використовується з wt-page-wrapper + + opened-card-form: форма-обгортка для табів та прихованого інпуту + + opened-card-tabs: обгортка для табів - opened-card-tabs - opened-card-tabs__tab + pened-card-tabs__tab: таб router-view - opened-card-header - opened-card-header__title + opened-card-header: обгортка назви табу - opened-card-input-grid opened-card-input-grid--1-col opened-card-input-grid--w50 + opened-card-header__title: назву табу + + opened-card-input-grid: грід стилі таблиці + + --1-col: модифікатор грід стилів - одна колонка (без розділень) + + --w50: модифікатор грід стилів - половина ширини + --w100: модифікатор грід стилів - повна ширина ## Приклад використання @@ -28,34 +33,16 @@ // crm, opened-sources.vue diff --git a/docs/pages/webitel-ui/css/table-page/table-page.css.md b/docs/pages/webitel-ui/css/table-page/table-page.css.md index 61a5c6c52..5230ab0d5 100644 --- a/docs/pages/webitel-ui/css/table-page/table-page.css.md +++ b/docs/pages/webitel-ui/css/table-page/table-page.css.md @@ -1,22 +1,22 @@ # Table page styles +##### ! Стилі додаються автоматично в main.scss ! #### Що це Це стилі для сторінки з стандартними таблицями. -Ці стилі знаходяться тут для того, щоб вирішити проблему з дублюванням стилів в проектах. +## Які класи використовуються -## Які класи використовуються та їх порядок - -. - - table-page - table-section + table-page: загальний клас та обгортка сторінки, використовується з wt-page-wrapper + + table-section: обгортка хедеру, dummy, лоадеру та таблиці в темплейті main - table-title - table-title__title - table-title__actions-wrap + table-title: обгортка хедеру таблиці + + table-title__title: назва таблиці + + table-title__actions-wrap: обгортка для пошуку, іконок видалення, оновлення таблиці і тд. - table-section__table-wrapper + table-section__table-wrapper: обгортка таблиці ## Приклад використання @@ -27,91 +27,22 @@