mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-07 22:33:50 +00:00
Code Issues Releases Wiki Activity

Rejig the page layout to use the scrollable widget

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/ui/PageTemplate/alerts.tid Normal file
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>

6
core/ui/PageTemplate/sidebar.tid
View File

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

13
core/ui/PageTemplate/story.tid
View File

@ -1,17 +1,12 @@
title: $:/core/ui/PageTemplate/story title: $:/core/ui/PageTemplate/story
tags: $:/tags/PageTemplate tags: $:/tags/PageTemplate
<$scrollable class="tw-story-scrollable">
<section class="story-river"> <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}} /> <$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/ViewTemplate" editTemplate="$:/core/ui/EditTemplate" storyview={{$:/view}} />
<!-- End of story river -->
</section> </section>
</$scrollable>

2
core/wiki/tags/PageTemplate.tid
View File

@ -1,3 +1,3 @@
title: $:/tags/PageTemplate 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]]

4
themes/tiddlywiki/centralised/styles.tid
View File

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

2
themes/tiddlywiki/starlight/styles.tid
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"); src: local("Arvo"), url(<<datauri "$:/themes/tiddlywiki/starlight/arvo.woff">>) format("woff");
} }
html body { html body, .tw-sidebar-scrollable-backdrop {
font-family: "Arvo", "Times"; font-family: "Arvo", "Times";
background: url(<<datauri "$:/themes/tiddlywiki/starlight/ltbg.jpg">>); background: url(<<datauri "$:/themes/tiddlywiki/starlight/ltbg.jpg">>);
} }

32
themes/tiddlywiki/vanilla/base.tid
View File

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