jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 14:56:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better column # management

Browse Source
This commit is contained in:
Paulus Schoutsen 2015-08-29 21:39:16 -07:00
parent 46dbd30fba
commit 3cb2e6a5db
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/home-assistant-main.html
View File

@ -17,10 +17,10 @@
<template> <template>
<notification-manager></notification-manager> <notification-manager></notification-manager>
<more-info-dialog></more-info-dialog> <more-info-dialog></more-info-dialog>
<iron-media-query query="(max-width: 600px)" query-matches="{{narrow}}"> <iron-media-query query="(max-width: 870px)" query-matches="{{narrow}}">
</iron-media-query> </iron-media-query>
<paper-drawer-panel id='drawer' force-narrow='[[computeForceNarrow(narrow, showSidebar)]]'> <paper-drawer-panel id='drawer' force-narrow='[[computeForceNarrow(narrow, showSidebar)]]' responsive-width='0'>
<ha-sidebar drawer></ha-sidebar> <ha-sidebar drawer></ha-sidebar>
<template is='dom-if' if='[[isSelectedStates]]'> <template is='dom-if' if='[[isSelectedStates]]'>

12
src/layouts/partial-zone.js
View File

@ -72,6 +72,7 @@ export default new Polymer({
showMenu: { showMenu: {
type: Boolean, type: Boolean,
value: false, value: false,
observer: 'windowChange',
}, },
states: { states: {
@ -86,19 +87,15 @@ export default new Polymer({
created() { created() {
this.windowChange = this.windowChange.bind(this); this.windowChange = this.windowChange.bind(this);
},
attached() {
const sizes = []; const sizes = [];
for (let i = 0; i < 4; i++) { for (let i = 0; i < 5; i++) {
sizes.push(940 + i * 350); sizes.push(278 + i * 278);
} }
this.mqls = sizes.map(width => { this.mqls = sizes.map(width => {
const mql = window.matchMedia(`(min-width: ${width}px)`); const mql = window.matchMedia(`(min-width: ${width}px)`);
mql.addListener(this.windowChange); mql.addListener(this.windowChange);
return mql; return mql;
}); });
this.windowChange();
}, },
detached() { detached() {
@ -106,7 +103,8 @@ export default new Polymer({
}, },
windowChange() { windowChange() {
this.columns = this.mqls.reduce((cols, mql) => cols + mql.matches, 1); const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
this.columns = Math.max(1, matchColumns - this.showMenu);
}, },
handleRefresh() { handleRefresh() {