#131 fixed config editor on mobile devices

homebridge · Jul 30, 2018 · f1c5b84 · f1c5b84
1 parent 2f26200
commit f1c5b84
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. This projec
 ### Bug Fixes
 
 * **Config Editor:** Backup button actually downloads up the `config.json` now ([#144](https://github.com/oznu/homebridge-config-ui-x/issues/144))
+* **Config Editor:** Fixed issued using config editor on mobile devices ([#131](https://github.com/oznu/homebridge-config-ui-x/issues/131))
 * **Accessory Control:** Accessory layout changes are now persistent again
 
 ## 3.8.7 (2018-07-28)

diff --git a/ui/src/app/config/config.component.html b/ui/src/app/config/config.component.html
@@ -15,6 +15,7 @@ <h3 class="primary-text m-0">
   </div>
 
   <ace-editor
+    *ngIf="!isMobile"
     class="hb-ace-text-editor align-self-end h-100 mb-3 mt-3"
     [(text)]="homebridgeConfig"
     theme="xcode"
@@ -26,4 +27,9 @@ <h3 class="primary-text m-0">
     (keydown.control.s)="$event.preventDefault(); onSave()">
   </ace-editor>
 
+  <textarea wrap="off"
+    *ngIf="isMobile"
+    class="hb-plain-text-editor align-self-end h-100 w-100 mb-3 mt-3"
+    [(ngModel)]="homebridgeConfig">
+  </textarea>
 </div>
diff --git a/ui/src/app/config/config.component.ts b/ui/src/app/config/config.component.ts
@@ -20,6 +20,7 @@ import { ConfigRestoreBackupComponent } from './config.restore-backup.component'
 export class ConfigComponent implements OnInit {
   @Input() homebridgeConfig;
   public saveInProgress: boolean;
+  public isMobile: any = false;
   public backupUrl: string;
   public options: any = { printMargin: false };
 
@@ -32,6 +33,7 @@ export class ConfigComponent implements OnInit {
     private modalService: NgbModal
   ) {
     this.backupUrl = environment.apiBaseUrl + '/api/backup/config.json?token=' + this.$auth.user.token;
+    this.isMobile = this.$md.detect.mobile();
 
     // remove editor gutter on small screen devices
     if (this.$md.detect.phone()) {

diff --git a/ui/src/scss/styles.scss b/ui/src/scss/styles.scss
@@ -33,6 +33,12 @@ body {
   padding-top: 5.5rem;
 }
 
+@media only screen and (max-width: 600px) {
+  body {
+    padding-top: 4rem;
+  }
+}
+
 #log-output {
   bottom: 0;
   top: 0;
@@ -127,6 +133,15 @@ body {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
+.hb-plain-text-editor {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  border: none;
+  white-space: pre;
+  font-family: monospace;
+  overflow-wrap: normal;
+  overflow-x: scroll;
+}
+
 .status-circle {
   color: #ffffff;
   width: 40px;