inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1935] Content on widgets now wraps when viewing it on a small de… (#3117)

Browse Source 
* [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
This commit is contained in:
davidcanonieto 2018-03-26 13:32:46 +01:00 committed by Eugenio Romano
parent 838842caac
commit 3033102ae4
4 changed files with 101 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo-shell/src/app/components/process-service/process-service.component.scss
View File

@ -1,11 +1,11 @@
@mixin adf-process-service-component-theme($theme){
.adf-no-form-container { .adf-no-form-container {
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
} }
.adf-grid { .adf-grid {
.adf-grid-item { .adf-grid-item {
margin: 4px; margin: 4px;
@ -94,12 +94,9 @@
} }
} }
@media screen and (max-width: 1279px) { @media screen and ($mat-small) {
container-widget .grid-list { container-widget .grid-list {
flex-direction: column; flex-direction: column;
.grid-list-item {
width: 100% !important;
} }
} }
} }

4
demo-shell/src/custom-style-dev.scss
View File

@ -1,6 +1,8 @@
@import './app/components/app-layout/app-layout.component.scss'; @import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss'; @import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss'; @import './app/components/login/login.component.scss';
@import './app/components/process-service/process-service.component.scss';
@import 'content-services/styles/index'; @import 'content-services/styles/index';
@import 'process-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-app-layout-theme($theme);
@include adf-file-component-theme($theme); @include adf-file-component-theme($theme);
@include adf-login-component-theme($theme); @include adf-login-component-theme($theme);
@include adf-process-service-component-theme($theme);
@include adf-content-services-theme($theme); @include adf-content-services-theme($theme);
@include adf-process-services-theme($theme); @include adf-process-services-theme($theme);

4
demo-shell/src/custom-style.scss
View File

@ -1,6 +1,8 @@
@import './app/components/app-layout/app-layout.component.scss'; @import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss'; @import './app/components/files/files.component.scss';
@import './app/components/login/login.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-content-services/theming';
@import '~@alfresco/adf-process-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-app-layout-theme($theme);
@include adf-file-component-theme($theme); @include adf-file-component-theme($theme);
@include adf-login-component-theme($theme); @include adf-login-component-theme($theme);
@include adf-process-service-component-theme($theme);
@include adf-content-services-theme($theme); @include adf-content-services-theme($theme);
@include adf-process-services-theme($theme); @include adf-process-services-theme($theme);

7
lib/core/form/components/widgets/container/container.widget.scss
View File

@ -51,6 +51,12 @@
padding-right: 1%; padding-right: 1%;
} }
@media screen and ($mat-small) {
.grid-list-item {
flex: 1 0 100%;
}
}
.mat-form-field { .mat-form-field {
width: 100%; width: 100%;
} }
@ -91,4 +97,3 @@
} }
} }