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

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

@ -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;
}
}
}

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/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);

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/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);

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

@ -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 @@
}
}