Skip to content

Commit

Permalink
Merge pull request #85 from olaoups/master
Browse files Browse the repository at this point in the history 
Calculate the --header-height from the div#view element
  • Loading branch information
@DBuit
DBuit authored May 9, 2023
2 parents 20aa46d + 28b0d28 commit 11afd68
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 20 deletions.
36 changes: 26 additions & 10 deletions dist/sidebar-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18045,15 +18045,16 @@ class SidebarCard extends LitElement {
const sidebarInner = this.shadowRoot.querySelector('.sidebar-inner');
const header = root.shadowRoot.querySelector('ch-header') || root.shadowRoot.querySelector('app-header');
const offParam = getParameterByName('sidebarOff');
let headerHeightPx = getHeaderHeightPx();
if (sidebarInner) {
sidebarInner.style.width = this.offsetWidth + 'px';
if (this.config.hideTopMenu) {
sidebarInner.style.height = `${window.innerHeight}px`;
sidebarInner.style.top = '0px';
}
else {
sidebarInner.style.height = `calc(${window.innerHeight}px - var(--header-height))`;
sidebarInner.style.top = 'var(--header-height)';
sidebarInner.style.height = `calc(${window.innerHeight}px - `+headerHeightPx+`)`;
sidebarInner.style.top = headerHeightPx;
}
}
}
Expand Down Expand Up @@ -18408,6 +18409,8 @@ function createCSS(sidebarConfig, width) {
let sidebarWidth = 25;
let contentWidth = 75;
let sidebarResponsive = false;
let headerHeightPx = getHeaderHeightPx();

if (sidebarConfig.width) {
if (typeof sidebarConfig.width == 'number') {
sidebarWidth = sidebarConfig.width;
Expand Down Expand Up @@ -18445,7 +18448,7 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18463,7 +18466,7 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.mobile +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18484,7 +18487,7 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18502,7 +18505,7 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.tablet +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18523,7 +18526,7 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18541,7 +18544,7 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.desktop +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -18561,7 +18564,7 @@ function createCSS(sidebarConfig, width) {
sidebarWidth +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand Down Expand Up @@ -18624,6 +18627,18 @@ function getRoot() {
root = root && root.querySelector('hui-root');
return root;
}
// return var(--header-height) from #view element
// We need to take from the div#view element in case of "kiosk-mode" module installation that defined new CSS var(--header-height) as local new variable, not available in div#customSidebar
function getHeaderHeightPx() {
let headerHeightPx = '0px';
const root = getRoot();
const view = root.shadowRoot.getElementById('view');
//debugger;
if(view!==undefined && window.getComputedStyle(view)!==undefined) {
headerHeightPx = window.getComputedStyle(view).marginTop;
}
return headerHeightPx;
}
// Returns the Home Assistant Sidebar element
function getSidebar() {
let sidebar = document.querySelector('home-assistant');
Expand Down Expand Up @@ -18677,13 +18692,14 @@ function updateStyling(appLayout, sidebarConfig) {
log2console('updateStyling', hassFooter ? 'Home Assistant footer found!' : 'Home Assistant footer not found!');
const offParam = getParameterByName('sidebarOff');
const view = root.shadowRoot.getElementById('view');
let headerHeightPx = getHeaderHeightPx();
if (sidebarConfig.hideTopMenu && sidebarConfig.hideTopMenu === true && sidebarConfig.showTopMenuOnMobile && sidebarConfig.showTopMenuOnMobile === true && width <= sidebarConfig.breakpoints.mobile && offParam == null) {
if (hassHeader) {
log2console('updateStyling', 'Action: Show Home Assistant header!');
hassHeader.style.display = 'block';
}
if (view) {
view.style.minHeight = 'calc(100vh - var(--header-height))';
view.style.minHeight = 'calc(100vh - '+headerHeightPx+')';
}
if (hassFooter) {
log2console('updateStyling', 'Action: Show Home Assistant footer!');
Expand Down
38 changes: 28 additions & 10 deletions src/sidebar-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,14 +236,16 @@ class SidebarCard extends LitElement {
const sidebarInner = this.shadowRoot.querySelector('.sidebar-inner');
const header = root.shadowRoot.querySelector('ch-header') || root.shadowRoot.querySelector('app-header');
const offParam = getParameterByName('sidebarOff');
let headerHeightPx = getHeaderHeightPx();

if (sidebarInner) {
sidebarInner.style.width = this.offsetWidth + 'px';
if(this.config.hideTopMenu) {
sidebarInner.style.height = `${window.innerHeight}px`;
sidebarInner.style.top = '0px';
} else {
sidebarInner.style.height = `calc(${window.innerHeight}px - var(--header-height))`;
sidebarInner.style.top = 'var(--header-height)';
sidebarInner.style.height = `calc(${window.innerHeight}px - `+headerHeightPx+`)`;
sidebarInner.style.top = headerHeightPx;
}
}
}
Expand Down Expand Up @@ -618,6 +620,8 @@ function createCSS(sidebarConfig: any, width: number) {
let sidebarWidth = 25;
let contentWidth = 75;
let sidebarResponsive = false;
let headerHeightPx = getHeaderHeightPx();

if (sidebarConfig.width) {
if (typeof sidebarConfig.width == 'number') {
sidebarWidth = sidebarConfig.width;
Expand Down Expand Up @@ -654,7 +658,7 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -671,7 +675,7 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.mobile +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -691,7 +695,7 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -708,7 +712,7 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.tablet +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -728,7 +732,7 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -745,7 +749,7 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.desktop +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand All @@ -764,7 +768,7 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarWidth +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc('+headerHeightPx+' + env(safe-area-inset-top));'}
}
#view {
width:` +
Expand Down Expand Up @@ -834,6 +838,19 @@ function getRoot() {
return root;
}

// return var(--header-height) from #view element
// We need to take from the div#view element in case of "kiosk-mode" module installation that defined new CSS var(--header-height) as local new variable, not available in div#customSidebar
function getHeaderHeightPx() {
let headerHeightPx = '0px';
const root = getRoot();
const view = root.shadowRoot.getElementById('view');
//debugger;
if(view!==undefined && window.getComputedStyle(view)!==undefined) {
headerHeightPx = window.getComputedStyle(view).marginTop;
}
return headerHeightPx;
}

// Returns the Home Assistant Sidebar element
function getSidebar() {
let sidebar: any = document.querySelector('home-assistant');
Expand Down Expand Up @@ -895,14 +912,15 @@ function updateStyling(appLayout: any, sidebarConfig: any) {
log2console('updateStyling', hassFooter ? 'Home Assistant footer found!' : 'Home Assistant footer not found!');
const offParam = getParameterByName('sidebarOff');
const view = root.shadowRoot.getElementById('view');
let headerHeightPx = getHeaderHeightPx();

if (sidebarConfig.hideTopMenu && sidebarConfig.hideTopMenu === true && sidebarConfig.showTopMenuOnMobile && sidebarConfig.showTopMenuOnMobile === true && width <= sidebarConfig.breakpoints.mobile && offParam == null) {
if (hassHeader) {
log2console('updateStyling', 'Action: Show Home Assistant header!');
hassHeader.style.display = 'block';
}
if (view) {
view.style.minHeight = 'calc(100vh - var(--header-height))';
view.style.minHeight = 'calc(100vh - '+headerHeightPx+')';
}
if (hassFooter) {
log2console('updateStyling', 'Action: Show Home Assistant footer!');
Expand Down

0 comments on commit 11afd68

Please sign in to comment.