mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-26 17:06:51 +00:00
Code Issues Releases Wiki Activity

Front page link panels prototype

Browse Source 
Starting to explore #1609
This commit is contained in:
Jermolene 2015-03-23 16:05:25 +00:00
parent bd6472c1d1
commit b31237c86d
12 changed files with 113 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
core/wiki/macros/thumbnails.tid
View File

@ -1,24 +1,33 @@
title: $:/core/macros/thumbails
tags: $:/tags/Macro
\define thumbnail(link,width:"280",height:"157",image,caption)
\define thumbnail(link,icon,color,background-color,image,caption,width:"280",height:"157")
<$link to="""$link$""">
<div class="tc-thumbnail-wrapper">
<div class="tc-thumbnail-image">
[img width="$width$" height="$height$" [$image$]]
<div class="tc-thumbnail-image" style="width:$width$px;height:$height$px;">
<$reveal type="nomatch" text="" default="""$image$""" tag="div" style="width:$width$px;height:$height$px;">
[img[$image$]]
</$reveal>
<$reveal type="match" text="" default="""$image$""" tag="div" class="tc-thumbnail-background" style="width:$width$px;height:$height$px;background-color:$background-color$;">
</$reveal>
</div>
<div class="tc-thumbnail-symbol">
{{$:/core/images/video}}
<div class="tc-thumbnail-icon" style="fill:$color$;">
$icon$
</div>
<div class="tc-thumbnail-caption">
$caption$
</div>
</div>
</$link>
</div></$link>
\end
\define thumbnail-right(link,width:"280",height:"157",image,caption)
\define thumbnail-right(link,icon,color,background-color,image,caption,width:"280",height:"157")
<div class="tc-thumbnail-right-wrapper">
<<thumbnail """$link$""" """$width$""" """$height$""" """$image$""" """$caption$""">>
<<thumbnail """$link$""" """$icon$""" """$color$""" """$background-color$""" """$image$""" """$caption$""" """$width$""" """$height$""">>
</div>
\end
\define list-thumbnails(filter,width:"280",height:"157")
<$list filter="""$filter$""">
<$macrocall $name="thumbnail" link={{!!link}} icon={{!!icon}} color={{!!color}} background-color={{!!background-color}} image={{!!image}} caption={{!!caption}} width="""$width$""" height="""$height$"""/>
</$list>
\end

6
editions/tw5.com/tiddlers/hellothere/HelloThere.tid
View File

@ -7,10 +7,14 @@ type: text/vnd.tiddlywiki
Welcome to ~TiddlyWiki, a versatile note-taking web application you can download for free, store wherever you like and customise however you wish. Use it to capture, organise and share your notes in ways that word processors and other note-taking tools cannot.
<<thumbnail-right link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki">>
<div style="font-size:0.7em;">
<<list-thumbnails filter:"[tag[HelloThumbnail]]" width:"140" height:"79">>
</div>
~TiddlyWiki is designed to be non-linear, structuring content with stories, tags, hyperlinks, and other features. You can organise and retrieve your notes in ways that conform to your personal thought patterns, rather than feel chained to one preset organisational structure.
<<thumbnail-right link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki" icon:"""{{$:/core/images/video}}""" color:"red">>
You can use ~TiddlyWiki as a single file that you view and edit through any web browser, whether you are online or offline. Or you can use it as a powerful [[Node.js application|TiddlyWiki on Node.js]] that stores each of your notes as a separate file.
How can you make ~TiddlyWiki work for you? We recommend you start with our introductory documentation listed below, and then browse the TableOfContents, available in the Contents tab in the sidebar. Or just [[follow our simple instructions|GettingStarted]] and try it out for yourself!

2
editions/tw5.com/tiddlers/hellothere/HelloThumbnail.tid Normal file
View File

@ -0,0 +1,2 @@
title: HelloThumbnail
list:

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Developers.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - Developers
tags: HelloThumbnail
color: #58FFB9
background-color: #39CBB6
icon: {{$:/core/images/plugin-generic-theme}}
caption: Developers
link: Developers

8
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Follow on Twitter.tid Normal file
View File

@ -0,0 +1,8 @@
title: HelloThumbnail - Follow TiddlyWiki on Twitter
tags: HelloThumbnail
color: #D5EAB7
background-color: #fff
icon: {{$:/core/images/plugin-generic-language}}
caption: Follow ~TiddlyWiki on Twitter
link: Follow TiddlyWiki on Twitter
image: Motovun Jack.jpg

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - GettingStarted.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - GettingStarted
tags: HelloThumbnail
color: #cfc
background-color: #2c2
icon: <div style="font-weight:bold;color:white;background-color:#2a2;border-radius:16em;padding:0 9px 0 9px;">Go</div>
caption: Beginners Start Here
link: GettingStarted

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - HelpingTiddlyWiki.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - HelpingTiddlyWiki
tags: HelloThumbnail
color: #B7D5EA
background-color: #fff
caption: Helping ~TiddlyWiki
link: HelpingTiddlyWiki
image: Tiddler Poster.png

8
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Introduction Video.tid Normal file
View File

@ -0,0 +1,8 @@
title: HelloThumbnail - Introduction Video
tags: HelloThumbnail
color: red
background-color: #fff
icon: {{$:/core/images/video}}
caption: Introduction to ~TiddlyWiki
link: Introduction Video
image: Introduction Video Thumbnail.jpg

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - News.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - News
tags: HelloThumbnail
color: #D5B7EA
background-color: #E44A4A
icon: {{$:/core/images/globe}}
caption: Latest News
link: Community

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyDesktop.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - TiddlyDesktop
tags: HelloThumbnail
color: #D5B7EA
background-color: #4A4AE4
icon: {{Motovun Jack.svg}}
caption: Install ~TiddlyDesktop
link: TiddlyDesktop

7
editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyFox.tid Normal file
View File

@ -0,0 +1,7 @@
title: HelloThumbnail - TiddlyFox
tags: HelloThumbnail
color: #D5B7EA
background-color: #E44AE4
icon: {{Motovun Jack.svg}}
caption: Install ~TiddlyFox
link: TiddlyFox

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

@ -1655,6 +1655,8 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
position: relative;
display: inline-block;
border: 1px solid <<colour muted-foreground>>;
border-radius: 3px;
margin: 2px;
}
.tc-thumbnail-right-wrapper {
@ -1662,10 +1664,16 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
margin: 0.5em 0 0.5em 0.5em;
}
.tc-thumbnail-image {
text-align: center;
}
.tc-thumbnail-image svg,
.tc-thumbnail-image img {
filter: alpha(opacity=0.6);
opacity: 0.6;
max-width: 100%;
max-height: 100%;
}
.tc-thumbnail-wrapper:hover .tc-thumbnail-image svg,
@ -1674,24 +1682,30 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
opacity: 1;
}
.tc-thumbnail-symbol svg,
.tc-thumbnail-symbol img {
width: 3em;
height: 3em;
fill: #f44;
.tc-thumbnail-background {
position: absolute;
border-radius: 2px;
}
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol svg,
.tc-thumbnail-wrapper:hover .tc-thumbnail-symbol img {
fill: #f00;
.tc-thumbnail-icon svg,
.tc-thumbnail-icon img {
width: 2em;
height: 2em;
<<filter "drop-shadow(2px 2px 2px rgba(0,0,0,0.3))">>
}
.tc-thumbnail-symbol {
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
fill: #fff;
<<filter "drop-shadow(3px 3px 2px rgba(0,0,0,0.6))">>
}
.tc-thumbnail-icon {
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.5em;
margin-top: -1.5em;
margin-left: -1em;
margin-top: -1em;
}
.tc-thumbnail-caption {
@ -1701,8 +1715,11 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
text-align: center;
bottom: 0;
width: 100%;
filter: alpha(opacity=0.5);
opacity: 0.5;
filter: alpha(opacity=0.6);
opacity: 0.6;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border: 1px solid #666;
}
.tc-thumbnail-wrapper:hover .tc-thumbnail-caption {