fix header height
This commit is contained in:
parent
cd84395308
commit
5efd8b3713
@ -11,7 +11,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-height: calc(100vh - 83px);
|
max-height: calc(100vh - var(--header-height));
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
> *:not(:last-child) {
|
> *:not(:last-child) {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
height: 75px;
|
height: var(--header-height);
|
||||||
padding: 0px var(--spacing-lg, 24px);
|
padding: 0px var(--spacing-lg, 24px);
|
||||||
|
|
||||||
border-bottom: 1px solid var(--menu-border, #d7dce0);
|
border-bottom: 1px solid var(--menu-border, #d7dce0);
|
||||||
|
@ -23,6 +23,8 @@ type IProps = {
|
|||||||
isUserConnected: boolean;
|
isUserConnected: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const headerHeight = 75;
|
||||||
|
|
||||||
export default function Header(props: IProps) {
|
export default function Header(props: IProps) {
|
||||||
const { isUserConnected } = props;
|
const { isUserConnected } = props;
|
||||||
|
|
||||||
@ -44,6 +46,7 @@ export default function Header(props: IProps) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
|
||||||
loadSubscription();
|
loadSubscription();
|
||||||
}, [loadSubscription]);
|
}, [loadSubscription]);
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
.sides {
|
.sides {
|
||||||
min-height: calc(100vh - 83px);
|
min-height: calc(100vh - var(--header-height));
|
||||||
width: 50%;
|
width: 50%;
|
||||||
@media (max-width: $screen-m) {
|
@media (max-width: $screen-m) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -31,7 +31,7 @@
|
|||||||
width: 50vw;
|
width: 50vw;
|
||||||
top: 83px;
|
top: 83px;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
@media (max-width: $screen-m) {
|
@media (max-width: $screen-m) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -67,7 +67,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200) solid;
|
border-right: 1px var(--color-neutral-200) solid;
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -66,7 +66,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
max-width: 56px;
|
max-width: 56px;
|
||||||
height: calc(100vh - 83px);
|
height: calc(100vh - var(--header-height));
|
||||||
border-right: 1px var(--color-neutral-200 solid);
|
border-right: 1px var(--color-neutral-200 solid);
|
||||||
|
|
||||||
@media (min-width: $screen-m) {
|
@media (min-width: $screen-m) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user