inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1995] [Mobile] Menu button is not displayed - portrait orientation

Browse Source
This commit is contained in:
Eugenio Romano
2017-11-22 21:48:36 +00:00
parent 729a8b6bde
commit d7b790f2bb
3 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@@ -3,6 +3,13 @@
$minimumAppWidth: 320px; $minimumAppWidth: 320px;
$toolbarHeight: 64px; $toolbarHeight: 64px;
@media screen and ($mat-small) {
adf-search-bar {
width: 200px;
}
}
.adf-app-layout { .adf-app-layout {
display: block; display: block;
min-width: $minimumAppWidth; min-width: $minimumAppWidth;

10
lib/content-services/search/components/search-control.component.scss
View File

@@ -6,7 +6,14 @@
$mat-menu-border-radius: 2px !default; $mat-menu-border-radius: 2px !default;
.adf-search-container { .adf-search-container {
overflow: hidden; overflow: hidden !important;
adf-search-bar {
width: 200px;
}
}
.adf-search-button {
left: -13px;
} }
.adf { .adf {
@@ -39,7 +46,6 @@
background-color: mat-color($background, card); background-color: mat-color($background, card);
border-radius: $mat-menu-border-radius; border-radius: $mat-menu-border-radius;
@media screen and ($mat-small) { @media screen and ($mat-small) {
width: 160px; width: 160px;
white-space: nowrap; white-space: nowrap;

4
lib/content-services/search/components/search-control.component.ts
View File

@@ -29,8 +29,8 @@ import 'rxjs/add/operator/distinctUntilChanged';
styleUrls: ['./search-control.component.scss'], styleUrls: ['./search-control.component.scss'],
animations: [ animations: [
trigger('transitionMessages', [ trigger('transitionMessages', [
state('active', style({ transform: 'translateX(0%)' })), state('active', style({ transform: 'translateX(0%)', 'margin-left': '13px' })),
state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })), state('inactive', style({ transform: 'translateX(81%)'})),
state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })), state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
transition('inactive => active', transition('inactive => active',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),