diff --git a/CHANGELOG.md b/CHANGELOG.md index 58fb827bf..49025481b 100644 --- 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 index bdb63f2fd..72557317d 100644 --- a/ui/src/app/config/config.component.html +++ b/ui/src/app/config/config.component.html @@ -15,6 +15,7 @@

(keydown.control.s)="$event.preventDefault(); onSave()"> + diff --git a/ui/src/app/config/config.component.ts b/ui/src/app/config/config.component.ts index ac95100af..92dbbd9b3 100644 --- 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 index 5d9dc8a23..7e0e696e1 100644 --- 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;