mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-25 06:43:15 +00:00
Improve sidebar behaviour on narrow screens
Now the sidebar is a fixed overlay. It is scrollable, taking up 50% of the height of the screen, so that the underlying page can be partially seen. There’s more to be done: on narrow screens we probably want the sidebar to be hidden by default.
This commit is contained in:
parent
e5cd8313a0
commit
cac6d3b4d9
|
@ -606,10 +606,28 @@ button.tc-untagged-label {
|
||||||
|
|
||||||
.tc-sidebar-header {
|
.tc-sidebar-header {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
min-height: 32px;
|
<<if-no-sidebar "
|
||||||
|
padding: inherit;
|
||||||
|
">>
|
||||||
margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tc-sidebar-scrollable {
|
||||||
|
position: fixed;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
z-index: 1000;
|
||||||
|
background-color: <<colour page-background>>;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
<<if-no-sidebar "
|
||||||
|
width: auto;
|
||||||
|
max-height: auto;
|
||||||
|
">>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.tc-story-river {
|
.tc-story-river {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user