Skip to content

Commit

Permalink
Fix topmenu over sidebar and bottomCard position
Browse files Browse the repository at this point in the history
  • Loading branch information
@DBuit
DBuit committed Apr 11, 2023
1 parent 130531c commit 29d5bd9
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 37 deletions.
40 changes: 22 additions & 18 deletions dist/sidebar-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18064,10 +18064,14 @@ class SidebarCard extends LitElement {
const offParam = getParameterByName('sidebarOff');
if (sidebarInner) {
sidebarInner.style.width = this.offsetWidth + 'px';
let headerHeight = this.config.hideTopMenu && offParam == null ? 0 : header.offsetHeight;
log2console('updateSidebarSize', 'headerHeight', headerHeight);
sidebarInner.style.height = `calc(${window.innerHeight}px - ${headerHeight}px)`; //100 * _1vh - headerHeight + 'px';
sidebarInner.style.top = headerHeight + '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)';
}
}
}
firstUpdated() {
Expand Down Expand Up @@ -18458,13 +18462,13 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.mobile) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18476,13 +18480,13 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.mobile +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.mobile) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18497,13 +18501,13 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.tablet) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18515,13 +18519,13 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.tablet +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.tablet) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18536,13 +18540,13 @@ function createCSS(sidebarConfig, width) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.desktop) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18554,13 +18558,13 @@ function createCSS(sidebarConfig, width) {
sidebarConfig.width.desktop +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.desktop) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -18574,13 +18578,13 @@ function createCSS(sidebarConfig, width) {
sidebarWidth +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
contentWidth +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand Down
40 changes: 21 additions & 19 deletions src/sidebar-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,13 +236,15 @@ 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');

if (sidebarInner) {
sidebarInner.style.width = this.offsetWidth + 'px';
let headerHeight = this.config.hideTopMenu && offParam == null ? 0 : header.offsetHeight;
log2console('updateSidebarSize', 'headerHeight', headerHeight);
sidebarInner.style.height = `calc(${window.innerHeight}px - ${headerHeight}px)`; //100 * _1vh - headerHeight + 'px';
sidebarInner.style.top = headerHeight + '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)';
}
}
}

Expand Down Expand Up @@ -652,13 +654,13 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.mobile) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
} else {
Expand All @@ -669,13 +671,13 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.mobile +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.mobile) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -689,13 +691,13 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.tablet) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
} else {
Expand All @@ -706,13 +708,13 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.tablet +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.tablet) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -726,13 +728,13 @@ function createCSS(sidebarConfig: any, width: number) {
`%;
overflow:hidden;
display:none;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.desktop) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
} else {
Expand All @@ -743,13 +745,13 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarConfig.width.desktop +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
(100 - sidebarConfig.width.desktop) +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand All @@ -762,13 +764,13 @@ function createCSS(sidebarConfig: any, width: number) {
sidebarWidth +
`%;
overflow:hidden;
${sidebarConfig.hideTopMenu ? '' : 'margin-top: calc(var(--header-height) + env(safe-area-inset-top));'}
}
#view {
width:` +
contentWidth +
`%;
padding-top:0!important;
margin-top:0!important;
${sidebarConfig.hideTopMenu ? 'padding-top:0!important;margin-top:0!important;' : ''}
}
`;
}
Expand Down

0 comments on commit 29d5bd9

Please sign in to comment.