purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme options are not correctly shown on mobile

Browse Source
This commit is contained in:
Sercan Yemen 2017-09-12 10:25:11 +03:00
parent 01f00121ba
commit 752660f5dc
3 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.4", "version": "1.0.5",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -4001,14 +4001,6 @@
} }
} }
}, },
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
@ -4019,6 +4011,14 @@
"strip-ansi": "3.0.1" "strip-ansi": "3.0.1"
} }
}, },
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"bundled": true, "bundled": true,
@ -8685,15 +8685,6 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true "dev": true
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": { "string-width": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -8721,6 +8712,15 @@
} }
} }
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

42
src/app/core/components/theme-options/theme-options.component.html
View File

@ -13,37 +13,38 @@
<md-list> <md-list>
<h3 md-subheader>Navigation:</h3> <h3 md-subheader>Navigation:</h3>
<md-list-item> <md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"> <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
<md-radio-button class="mr-8" value="top">Top</md-radio-button> fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
<md-radio-button class="mr-8" value="left">Left</md-radio-button> <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
<md-radio-button class="mr-8" value="right">Right</md-radio-button> <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item> </md-list-item>
<h3 md-subheader>Toolbar:</h3> <h3 md-subheader>Toolbar:</h3>
<md-list-item> <md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"> <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button> <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button> <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item> </md-list-item>
<h3 md-subheader>Footer:</h3> <h3 md-subheader>Footer:</h3>
<md-list-item> <md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"> <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="below">Below</md-radio-button> <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
<md-radio-button class="mr-8" value="above">Above</md-radio-button> <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
<md-radio-button class="mr-8" value="none">None</md-radio-button> <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item> </md-list-item>
<h3 md-subheader>Layout Mode:</h3> <h3 md-subheader>Layout Mode:</h3>
<md-list-item> <md-list-item>
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"> <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
<md-radio-button class="mr-8" value="boxed">Boxed</md-radio-button> <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
<md-radio-button class="mr-8" value="fullwidth">Fullwidth</md-radio-button> <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
</md-radio-group> </md-radio-group>
</md-list-item> </md-list-item>
@ -53,22 +54,25 @@
<md-list-item class="mb-8"> <md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Toolbar Color</h4> <h4 class="mr-8">Toolbar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker> <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item> </md-list-item>
<md-list-item class="mb-8"> <md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Navigation Bar Color</h4> <h4 class="mr-8">Navigation Bar Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker> <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item> </md-list-item>
<md-list-item class="mb-8"> <md-list-item class="mb-8">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Footer Color</h4> <h4 class="mr-8">Footer Color</h4>
<fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker> <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
(onValueChange)="onSettingsChange()"></fuse-material-color-picker>
</div> </div>
</md-list-item> </md-list-item>

7
src/app/core/components/theme-options/theme-options.component.scss
View File

@ -22,6 +22,12 @@
width: 360px; width: 360px;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
z-index: 999; z-index: 999;
max-width: 80vw;
max-height: calc(100vh - 180px);
overflow: auto;
@include media-breakpoint-down('xs') {
}
.close-button { .close-button {
position: absolute; position: absolute;
@ -76,5 +82,4 @@
opacity: 1; opacity: 1;
} }
} }
} }