diff --git a/README.md b/README.md
index 1b2572b..4f9b084 100644
--- a/README.md
+++ b/README.md
@@ -52,20 +52,24 @@ resources:
*If you have trouble installing please [read this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)*
-# Configuration
+## Important Info
* If you need to disable Kiosk-Mode temporarily add `?disable_km` to the end of your URL.
* Config is placed in the root of your Lovelace config: `kiosk_mode:` should not be indented & is per dashboard.
* If you want the same settings on other dashboards you'll need to repeat the config on those dashboards as well.
* Refresh page after config changes.
-## Simple Lovelace Config
-The following config method will be ignored if any [query strings/cache](#query-strings) are used or a [conditional config](#conditional-lovelace-config) has a match.
+## Config Options
-* `kiosk_mode:` has 4 options: `kiosk`, `hide_header`, `hide_sidebar`, and `ignore_entity_settings`.
-* Set any config option to true to activate.
-* `kiosk: true` sets `hide_header` and `hide_sidebar` to true, no need to set either when it's used.
-* `ignore_entity_settings` is useful only in [conditional configs](#conditional-lovelace-config) and will cause `entity_settings` to be ignored.
+| Config Option | Type | Default | Description |
+|:---------------|:---------------|:---------------|:----------|
+|`kiosk:`| Boolean | false | Hides both the header and sidebar.
+|`hide_header:` | Boolean | false | Hides only the header.
+|`hide_sidebar:` | Boolean | false | Hides only the sidebar.
+|`ignore_entity_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `entity_settings` to be ignored.
+|`ignore_mobile_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `mobile_settings` to be ignored.
+
+## Simple config example
```
kiosk_mode:
@@ -81,7 +85,7 @@ These use the same options as above, but placed under one of the following user/
### admin_settings:
Sets the config for every admin user.
-*Overwritten by user_settings & entity_settings ( unless `ignore_entity_settings` is used ).*
+*Overwritten by user_settings, mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
```
kiosk_mode:
@@ -92,7 +96,7 @@ kiosk_mode:
### non_admin_settings:
Sets the config for every regular user.
-*Overwritten by user_settings & entity_settings ( unless `ignore_entity_settings` is used ).*
+*Overwritten by user_settings, mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
```
kiosk_mode:
@@ -104,7 +108,7 @@ kiosk_mode:
### user_settings:
Sets the config for specific users. **This uses a user's name, not their username (if they're different)**.
-*Overwritten by entity_settings if `ignore_entity_settings` is not used.*
+*Overwritten by mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
```
kiosk_mode:
@@ -120,6 +124,19 @@ kiosk_mode:
```
+### mobile_settings:
+Sets the config for mobile devices. The default breakpoint is 812px, which can be changed by setting the `custom_width` option.
+*Overwritten by entity_settings, unless `ignore_entity_settings` is used, can be ignored with `ignore_mobile_settings`.*
+
+```
+kiosk_mode:
+ mobile_settings:
+ hide_header: true
+ ignore_entity_settings: true
+ custom_width: 768
+```
+
+
### entity_settings:
Dynamically change config on any entity's state. Under `entity:` list the entity followed by the state that will enable the config below. For more complex logic use this with a template sensor.
*Takes priority over all other config settings unless they use `ignore_entity_settings`.*
diff --git a/kiosk-mode.js b/kiosk-mode.js
index 88a7f59..f6ba228 100644
--- a/kiosk-mode.js
+++ b/kiosk-mode.js
@@ -84,8 +84,10 @@ function kioskMode(lovelace, config, dash) {
const adminConfig = config.admin_settings;
const nonAdminConfig = config.non_admin_settings;
const entityConfig = config.entity_settings;
- let userConfig = config.user_settings;
+ const userConfig = config.user_settings;
+ const mobileConfig = config.mobile_settings;
let ignoreEntity = false;
+ let ignoreMobile = false;
// Retrieve localStorage values & query string options.
let hideHeader = cached("kmHeader") || queryString(["kiosk", "hide_header"]);
@@ -101,6 +103,7 @@ function kioskMode(lovelace, config, dash) {
hideHeader = adminConfig.kiosk || adminConfig.hide_header;
hideSidebar = adminConfig.kiosk || adminConfig.hide_sidebar;
ignoreEntity = adminConfig.ignore_entity_settings;
+ ignoreMobile = adminConfig.ignore_mobile_settings;
}
// Non-Admin user settings.
@@ -108,6 +111,7 @@ function kioskMode(lovelace, config, dash) {
hideHeader = nonAdminConfig.kiosk || nonAdminConfig.hide_header;
hideSidebar = nonAdminConfig.kiosk || nonAdminConfig.hide_sidebar;
ignoreEntity = nonAdminConfig.ignore_entity_settings;
+ ignoreMobile = nonAdminConfig.ignore_mobile_settings;
}
// User Settings.
@@ -117,10 +121,21 @@ function kioskMode(lovelace, config, dash) {
hideHeader = conf.kiosk || conf.hide_header;
hideSidebar = conf.kiosk || conf.hide_sidebar;
ignoreEntity = conf.ignore_entity_settings;
+ ignoreMobile = conf.ignore_mobile_settings;
}
}
}
+ // Mobile settings.
+ if (mobileConfig && !ignoreMobile) {
+ const mobileWidth = mobileConfig.custom_width ? mobileConfig.custom_width : 812;
+ if (window.innerWidth <= mobileWidth) {
+ hideHeader = mobileConfig.kiosk || mobileConfig.hide_header;
+ hideSidebar = mobileConfig.kiosk || mobileConfig.hide_sidebar;
+ ignoreEntity = mobileConfig.ignore_entity_settings;
+ }
+ }
+
// Entity Settings.
if (entityConfig && !ignoreEntity) {
for (let conf of entityConfig) {