From 752660f5dcea086fc39c9f141b50a92d4295c295 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 12 Sep 2017 10:25:11 +0300
Subject: [PATCH] fix: theme options are not correctly shown on mobile

---
 package-lock.json                             | 36 ++++++++--------
 .../theme-options.component.html              | 42 ++++++++++---------
 .../theme-options.component.scss              |  7 +++-
 3 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2a06e75c..50ec6c94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4001,14 +4001,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -4019,6 +4011,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -8685,15 +8685,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "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": {
       "version": "2.1.1",
       "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": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html
index 55d3b694..bae52a49 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -13,37 +13,38 @@
     <md-list>
         <h3 md-subheader>Navigation:</h3>
         <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8" value="top">Top</md-radio-button>
-                <md-radio-button class="mr-8" value="left">Left</md-radio-button>
-                <md-radio-button class="mr-8" value="right">Right</md-radio-button>
-                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                            fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
+                <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="left">Left</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-list-item>
 
         <h3 md-subheader>Toolbar:</h3>
         <md-list-item>
             <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" 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="below">Below</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
             </md-radio-group>
         </md-list-item>
 
         <h3 md-subheader>Footer:</h3>
         <md-list-item>
             <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" 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="below">Below</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
             </md-radio-group>
         </md-list-item>
 
         <h3 md-subheader>Layout Mode:</h3>
         <md-list-item>
             <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" value="fullwidth">Fullwidth</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
+                <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
             </md-radio-group>
         </md-list-item>
 
@@ -53,22 +54,25 @@
 
         <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Toolbar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
         </md-list-item>
 
         <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Navigation Bar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
         </md-list-item>
 
         <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Footer Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
         </md-list-item>
 
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index ff68ff70..e3cae6f3 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -22,6 +22,12 @@
         width: 360px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
+        max-width: 80vw;
+        max-height: calc(100vh - 180px);
+        overflow: auto;
+
+        @include media-breakpoint-down('xs') {
+        }
 
         .close-button {
             position: absolute;
@@ -76,5 +82,4 @@
             opacity: 1;
         }
     }
-
 }