From c6829da46cdbcef18e92160b40306cc36417330f Mon Sep 17 00:00:00 2001 From: Tiago Melo Date: Sat, 28 Mar 2020 01:44:18 -0100 Subject: [PATCH] mgr/dashboard: Reduce size of component styles Fixes: https://tracker.ceph.com/issues/44811 Signed-off-by: Tiago Melo --- .../app/ceph/cluster/logs/logs.component.scss | 11 +-- .../dashboard/health/health.component.scss | 21 +---- .../info-card/info-card.component.scss | 7 +- .../table-actions.component.scss | 6 -- .../datatable/table/table.component.scss | 24 +----- .../mgr/dashboard/frontend/src/styles.scss | 1 + .../src/styles/bootstrap-extends.scss | 76 +++++++++++++++++++ 7 files changed, 81 insertions(+), 65 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss index d8b1b8de49820..8e0f19a411694 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss @@ -1,4 +1,4 @@ -@import 'styles'; +@import 'defaults.scss'; p { font-family: monospace; @@ -47,15 +47,6 @@ p { } } -label { - @extend .mr-2; -} - -.form-group { - @extend .mr-3; - @extend .mb-3; -} - .middle { padding-top: 7px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss index 9c7684a5c6f69..f765ac5e8a213 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss @@ -1,10 +1,7 @@ -@import 'styles'; +@import 'defaults.scss'; cd-info-card { padding: 0 0.5vw 0 0.5vw; - @extend .d-flex; - @extend .flex-column; - @extend .mb-4; } ::ng-deep .pg-status-popover-wrapper { @@ -42,19 +39,3 @@ cd-info-card { .popover-info:hover { cursor: pointer; } - -::ng-deep cd-info-card { - @extend .col-12; - @extend .col-sm-12; - @extend .col-md-6; - @extend .col-lg-4; - - &.cd-status-card { - @extend .col-xl-3; - } - - &.cd-performance-card, - &.cd-capacity-card { - @extend .col-xl; - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss index f5cfcb708ff3a..07732f3edc871 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss @@ -1,4 +1,4 @@ -@import 'styles'; +@import 'defaults.scss'; $card-font-min-width: 320px; $card-font-max-width: 2048px; @@ -7,7 +7,6 @@ $card-font-max-size: 21px; .card { height: 100%; - @extend .pb-2; border: 0.5px solid $color-info-card-border; border-radius: 3px; box-shadow: 0 1px 1px $color-shadow-gray; @@ -26,10 +25,6 @@ $card-font-max-size: 21px; left: 0; top: 0; } - - .card-text { - @extend .pt-2; - } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss index 58ba9a31abd14..e3c3492a403ea 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss @@ -1,10 +1,4 @@ -@import '~bootstrap/scss/bootstrap-grid'; - .dropdown-menu > .disabled > a { pointer-events: auto; cursor: default !important; } - -::ng-deep .btn-toolbar .btn-group { - @extend .mr-1; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss index e358a9d2fa766..9dccecba61f66 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss @@ -1,4 +1,4 @@ -@import 'styles'; +@import 'defaults.scss'; .dataTables_wrapper { margin-bottom: 25px; @@ -13,14 +13,8 @@ .widget-toolbar { float: right; - // width: auto; - // height: 30px; - // line-height: 28px; - // position: relative; border-left: 1px solid $color-table-seperator-border; - // cursor: pointer; padding: 0 8px; - // text-align: center; .form-check { padding-left: 0; @@ -237,27 +231,11 @@ } } .datatable-footer { - @extend .p-2; - .selected-count, .page-count { font-style: italic; padding-left: 5px; } - .datatable-pager { - // .pager - ul { - @extend .pagination; - - li { - @extend .page-item; - - a { - @extend .page-link; - } - } - } - } } .cd-datatable-checkbox { diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 79367b7191343..bb883e43ec012 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -25,6 +25,7 @@ $popover-max-width: 350px; @import '~bootstrap/scss/bootstrap'; @import '~fork-awesome/scss/fork-awesome'; @import 'app/ceph/dashboard/info-card/info-card-popover.scss'; +@import 'bootstrap-extends'; /* Reset checkbox success color */ .was-validated .custom-control-input:valid, diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss new file mode 100644 index 0000000000000..b04131dff9ba7 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss @@ -0,0 +1,76 @@ +/* + * Include here all styles from components that extend from bootstrap. + * This removes the need to @import bootstrap into those componenet, + * thus reducing the final css size. +*/ + +cd-info-card { + .card { + @extend .pb-2; + + .card-body { + .card-text { + @extend .pt-2; + } + } + } +} + +.btn-toolbar cd-table-actions.btn-group { + @extend .mr-2; +} + +cd-table { + .cd-datatable { + .datatable-footer { + @extend .p-2; + + .datatable-pager { + ul { + @extend .pagination; + + li { + @extend .page-item; + + a { + @extend .page-link; + } + } + } + } + } + } +} + +cd-health { + cd-info-card { + @extend .d-flex; + @extend .flex-column; + @extend .mb-4; + + @extend .col-12; + @extend .col-sm-12; + @extend .col-md-6; + @extend .col-lg-4; + + &.cd-status-card { + @extend .col-xl-3; + } + + &.cd-performance-card, + &.cd-capacity-card { + @extend .col-xl; + } + } +} + +cd-logs { + label { + @extend .mr-2; + } + + .form-inline > .form-group { + @extend .mr-3; + @extend .mb-3; + } +} -- 2.39.5