1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

Rejig the page layout to use the scrollable widget

This is the start of some refactoring of the main layout CSS intended
to give us more flexibility and control.
This commit is contained in:
Jermolene 2014-03-25 14:29:16 +00:00
parent d3e178becc
commit 7c235566c4
7 changed files with 52 additions and 15 deletions

View File

@ -0,0 +1,8 @@
title: $:/core/ui/PageTemplate/alerts
tags: $:/tags/PageTemplate
<div class="tw-alerts">
<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
</div>

View File

@ -1,6 +1,10 @@
title: $:/core/ui/PageTemplate/sidebar
tags: $:/tags/PageTemplate
<div class="tw-sidebar-scrollable-backdrop"/>
<$scrollable fallthrough="no" class="tw-sidebar-scrollable">
<header class="sidebar-header">
<div class="titlebar">{{$:/SiteTitle}}</div>
@ -15,3 +19,5 @@ tags: $:/tags/PageTemplate
{{$:/core/ui/SideBarLists}}
</header>
</$scrollable>

View File

@ -1,17 +1,12 @@
title: $:/core/ui/PageTemplate/story
tags: $:/tags/PageTemplate
<$scrollable class="tw-story-scrollable">
<section class="story-river">
<!-- Alerts -->
<div class="tw-alerts">
<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/Alert]] [!is[shadow]!has[draft.of]tag[$:/tags/Alert]] +[sort[modified]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
</div>
<!-- The main story -->
<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} />
<!-- End of story river -->
</section>
</$scrollable>

View File

@ -1,3 +1,3 @@
title: $:/tags/PageTemplate
list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]]
list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]] [[$:/core/ui/PageTemplate/alerts]]

View File

@ -17,10 +17,10 @@ tags: [[$:/tags/stylesheet]]
text-align: left;
}
html .sidebar-header {
html .tw-sidebar-scrollable {
text-align: left;
left: 50%;
right: 0;
padding-left: 413px;
margin-left: 343px;
}
}

View File

@ -14,7 +14,7 @@ Placeholder for a more thorough refinement of Snow White
src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");
}
html body {
html body, .tw-sidebar-scrollable-backdrop {
font-family: "Arvo", "Times";
background: url(<<datauri "$:/themes/tiddlywiki/starlight/ltbg.jpg">>);
}

View File

@ -386,6 +386,7 @@ a.tw-tiddlylink-external:hover {
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
.sidebar-header {
padding: 14px;
}
@ -397,7 +398,21 @@ a.tw-tiddlylink-external:hover {
}
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
.sidebar-header {
.tw-story-scrollable {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tw-message-box {
margin: 21px -21px 21px -21px;
}
.tw-sidebar-scrollable {
z-index: 1100;
position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
@ -410,6 +425,18 @@ a.tw-tiddlylink-external:hover {
padding: 70px 0 28px 42px;
}
.tw-sidebar-scrollable-backdrop {
z-index: 1000;
position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
bottom: 0;
right: 0;
margin: 0 0 0 -42px;
background-color: <<colour page-background>>;
opacity: 0.8;
}
.story-river {
position: relative;
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}};
@ -1067,7 +1094,6 @@ canvas.tw-edit-bitmapeditor {
border: 1px solid <<colour message-border>>;
background: <<colour message-background>>;
padding: 0px 21px 0px 21px;
margin: 21px -21px 21px -21px;
font-size: 12px;
line-height: 18px;
color: <<colour message-foreground>>;
@ -1122,3 +1148,5 @@ canvas.tw-edit-bitmapeditor {
margin: 4px;
border: 1px solid #000;
}