Fixed a bug with breakpoints and sidebar height

This commit is contained in:
squidfunk 2017-01-27 23:09:31 +01:00
parent 1655f18a20
commit c994ce1dd9
8 changed files with 35 additions and 17 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -45,7 +45,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cfcead01e1.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9fbcbbadc4.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
{% endif %}
@ -128,7 +128,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-5964b4977f.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-ce981a9b53.js"></script>
<script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

View File

@ -94,9 +94,10 @@ export default class Application {
}).listen()
/* Component: header shadow toggle */
new Material.Event.MatchMedia("(min-width: 1220px)",
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Header.Shadow("[data-md-component=container]")).listen()
], new Material.Header.Shadow("[data-md-component=container]")))
/* Component: tabs visibility toggle */
new Material.Event.Listener(window, [
@ -116,8 +117,13 @@ export default class Application {
"scroll", "resize", "orientationchange"
], new Material.Sidebar.Position("[data-md-component=navigation]")))
/* Component: sidebar with table of contents */
new Material.Event.MatchMedia("(min-width: 960px)",
/* Component: sidebar with table of contents - register two separate
listeners, as the offset at the top might change */
new Material.Event.MatchMedia("(min-width: 960px) and (max-width: 1219px)",
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Sidebar.Position("[data-md-component=toc]")))
new Material.Event.MatchMedia("(min-width: 1220px)",
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Sidebar.Position("[data-md-component=toc]")))

View File

@ -26,7 +26,7 @@ import Nav from "./Material/Nav"
import Search from "./Material/Search"
import Sidebar from "./Material/Sidebar"
import Source from "./Material/Source"
import Tabs from "./Material/tabs"
import Tabs from "./Material/Tabs"
/* ----------------------------------------------------------------------------
* Module

View File

@ -26,6 +26,8 @@
// Application header (stays always on top)
.md-header {
@include z-depth(3);
position: fixed;
top: 0;
right: 0;
@ -41,6 +43,10 @@
@include z-depth(2);
}
// [screen +]: Show shadow depending on scroll offset
@include break-from-device(screen) {
box-shadow: none;
// Show and animate shadow
&[data-md-state="shadow"] {
@include z-depth(3);
@ -49,6 +55,7 @@
background-color 0.25s,
box-shadow 0.25s;
}
}
// Hide for print
@media print {

View File

@ -30,6 +30,11 @@
background: $md-color-primary;
overflow-x: scroll;
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense
@include break-to-device(tablet) {
display: none;
}
// List of items
&__list {
margin: 0;