From 3033102ae4b4ceef534c60e794ff89b444e4266b Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Mon, 26 Mar 2018 13:32:46 +0100 Subject: [PATCH] =?UTF-8?q?[ADF-1935]=20Content=20on=20widgets=20now=20wra?= =?UTF-8?q?ps=20when=20viewing=20it=20on=20a=20small=20de=E2=80=A6=20(#311?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ADF-1935] Content on widgets now wraps when viewing it on a small device * [ADF-1935] Width property replaced for flex property * [ADF-1935] Query modified to work with variable * [ADF-1935] Removed unnecessary styling classes --- .../process-service.component.scss | 177 +++++++++--------- demo-shell/src/custom-style-dev.scss | 4 + demo-shell/src/custom-style.scss | 4 + .../widgets/container/container.widget.scss | 7 +- 4 files changed, 101 insertions(+), 91 deletions(-) diff --git a/demo-shell/src/app/components/process-service/process-service.component.scss b/demo-shell/src/app/components/process-service/process-service.component.scss index e8e97b5f4e..7a125726c3 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.scss +++ b/demo-shell/src/app/components/process-service/process-service.component.scss @@ -1,105 +1,102 @@ - -.adf-no-form-container { - text-align: center; - font-weight: 600; - font-size: 18px; -} - -.adf-grid { - - .adf-grid-item { - margin: 4px; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); - padding: 10px; +@mixin adf-process-service-component-theme($theme){ + .adf-no-form-container { + text-align: center; + font-weight: 600; + font-size: 18px; } - .adf-list-buttons { - margin-bottom: 24px; - } + .adf-grid { - .adf-list-buttons-start { - width: 100%; - } - - .adf-tasks-list.small-pagination, - .adf-processes-list.small-pagination { - .adf-pagination { - - flex-wrap: wrap; - padding-bottom: 24px; - padding-top: 8px; - - &__block { - border-right: none; - } - - &__range-block.adf-pagination__block:first-child { - order: 1; - width: 60%; - flex: 0 0 auto; - box-sizing: border-box; - padding-left: 2px; - justify-content: flex-start; - } - - &__perpage-block { - order: 3; - width: 60%; - box-sizing: border-box; - padding-left: 2px; - justify-content: flex-start; - } - - &__actualinfo-block { - order: 2; - width: 40%; - box-sizing: border-box; - padding-right: 2px; - justify-content: flex-end; - } - - &__controls-block { - order: 4; - width: 40%; - box-sizing: border-box; - padding-right: 2px; - justify-content: flex-end; - } - } - } - - .adf-list { - .adf-data-table { - border: none; + .adf-grid-item { + margin: 4px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); + padding: 10px; } - .adf-data-table tr, - .adf-data-table td { - height: 36px; - font-size: 14px; + .adf-list-buttons { + margin-bottom: 24px; } - .adf-data-table td { - padding-top: 0; - padding-bottom: 0; - border-bottom: none; + .adf-list-buttons-start { + width: 100%; } - .adf-data-table th { - padding-top: 0; - padding-bottom: 0; - height: 40px; - vertical-align: middle; - font-size: 14px; + .adf-tasks-list.small-pagination, + .adf-processes-list.small-pagination { + .adf-pagination { + + flex-wrap: wrap; + padding-bottom: 24px; + padding-top: 8px; + + &__block { + border-right: none; + } + + &__range-block.adf-pagination__block:first-child { + order: 1; + width: 60%; + flex: 0 0 auto; + box-sizing: border-box; + padding-left: 2px; + justify-content: flex-start; + } + + &__perpage-block { + order: 3; + width: 60%; + box-sizing: border-box; + padding-left: 2px; + justify-content: flex-start; + } + + &__actualinfo-block { + order: 2; + width: 40%; + box-sizing: border-box; + padding-right: 2px; + justify-content: flex-end; + } + + &__controls-block { + order: 4; + width: 40%; + box-sizing: border-box; + padding-right: 2px; + justify-content: flex-end; + } + } } - } - @media screen and (max-width: 1279px) { - container-widget .grid-list { - flex-direction: column; + .adf-list { + .adf-data-table { + border: none; + } - .grid-list-item { - width: 100% !important; + .adf-data-table tr, + .adf-data-table td { + height: 36px; + font-size: 14px; + } + + .adf-data-table td { + padding-top: 0; + padding-bottom: 0; + border-bottom: none; + } + + .adf-data-table th { + padding-top: 0; + padding-bottom: 0; + height: 40px; + vertical-align: middle; + font-size: 14px; + } + } + + @media screen and ($mat-small) { + container-widget .grid-list { + flex-direction: column; } } } diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss index 501f59b898..7f25c6ca5d 100644 --- a/demo-shell/src/custom-style-dev.scss +++ b/demo-shell/src/custom-style-dev.scss @@ -1,6 +1,8 @@ @import './app/components/app-layout/app-layout.component.scss'; @import './app/components/files/files.component.scss'; @import './app/components/login/login.component.scss'; +@import './app/components/process-service/process-service.component.scss'; + @import 'content-services/styles/index'; @import 'process-services/styles/index'; @@ -20,6 +22,8 @@ $theme: mat-light-theme($primary, $accent, $warn); @include adf-app-layout-theme($theme); @include adf-file-component-theme($theme); @include adf-login-component-theme($theme); +@include adf-process-service-component-theme($theme); + @include adf-content-services-theme($theme); @include adf-process-services-theme($theme); diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss index b48f2b1ba1..b17df8df24 100644 --- a/demo-shell/src/custom-style.scss +++ b/demo-shell/src/custom-style.scss @@ -1,6 +1,8 @@ @import './app/components/app-layout/app-layout.component.scss'; @import './app/components/files/files.component.scss'; @import './app/components/login/login.component.scss'; +@import './app/components/process-service/process-service.component.scss'; + @import '~@alfresco/adf-content-services/theming'; @import '~@alfresco/adf-process-services/theming'; @@ -20,6 +22,8 @@ $theme: mat-light-theme($primary, $accent, $warn); @include adf-app-layout-theme($theme); @include adf-file-component-theme($theme); @include adf-login-component-theme($theme); +@include adf-process-service-component-theme($theme); + @include adf-content-services-theme($theme); @include adf-process-services-theme($theme); diff --git a/lib/core/form/components/widgets/container/container.widget.scss b/lib/core/form/components/widgets/container/container.widget.scss index 3fe6d70745..abec1ca5d1 100644 --- a/lib/core/form/components/widgets/container/container.widget.scss +++ b/lib/core/form/components/widgets/container/container.widget.scss @@ -50,6 +50,12 @@ padding-left: 1%; padding-right: 1%; } + + @media screen and ($mat-small) { + .grid-list-item { + flex: 1 0 100%; + } + } .mat-form-field { width: 100%; @@ -91,4 +97,3 @@ } } -