mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-15 21:36:52 +00:00
Lock the position of the header and sidebars (#15820)
This commit is contained in:
parent
10ef22fe98
commit
df3350955a
@ -19,3 +19,51 @@
|
||||
//$sidebar-pad-medium: 15px;
|
||||
//$sidebar-pad-wide: 20px;
|
||||
//$sidebar-width-wide: 300px;
|
||||
|
||||
html {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: inline-block;
|
||||
height: calc(100% - 68px);;
|
||||
margin-top: 68px;
|
||||
overflow-y: scroll;
|
||||
padding-top: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.grid {
|
||||
position: fixed;
|
||||
width: 33.33%;
|
||||
.brand-logo-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
#sidebar {
|
||||
.grid {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.site-header {
|
||||
.pull-right {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
.hero {
|
||||
> .grid-wrapper {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
@ -8,7 +8,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
body > footer {
|
||||
body > footer, .page-content > footer {
|
||||
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
|
||||
background-color: $footer-background;
|
||||
// height: $footer-height;
|
||||
|
@ -2,4 +2,5 @@
|
||||
@import 'custom/paulus';
|
||||
@import 'custom/component_page';
|
||||
@import 'custom/syntax';
|
||||
@import 'custom/print';
|
||||
@import 'custom/print';
|
||||
@import 'custom/layout';
|
@ -32,3 +32,15 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
// Some sidebars are longer than the screen so they can't be locked.
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sidebar = document.querySelector("#sidebar").querySelector(".grid");
|
||||
if (sidebar) {
|
||||
const content = document.querySelector(".page-content").querySelector(".grid-wrapper")
|
||||
if (sidebar.clientHeight > content.clientHeight || sidebar.clientHeight > window.innerHeight) {
|
||||
sidebar.style.display = "contents"
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
@ -4,6 +4,7 @@
|
||||
<header class='site-header'>
|
||||
{% include site/header.html %}
|
||||
</header>
|
||||
<div class="page-content">
|
||||
|
||||
{% if page.hero_unit %}
|
||||
{% include site/hero_unit.html %}
|
||||
@ -38,6 +39,7 @@
|
||||
{% include site/footer.html %}
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
{% include javascripts/scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
x
Reference in New Issue
Block a user