From b31237c86ddb75aa10609e3144a6606c773c0485 Mon Sep 17 00:00:00 2001 From: Jermolene Date: Mon, 23 Mar 2015 16:05:25 +0000 Subject: [PATCH] Front page link panels prototype Starting to explore #1609 --- core/wiki/macros/thumbnails.tid | 27 ++++++++---- .../tiddlers/hellothere/HelloThere.tid | 6 ++- .../tiddlers/hellothere/HelloThumbnail.tid | 2 + .../HelloThumbnail - Developers.tid | 7 +++ .../HelloThumbnail - Follow on Twitter.tid | 8 ++++ .../HelloThumbnail - GettingStarted.tid | 7 +++ .../HelloThumbnail - HelpingTiddlyWiki.tid | 7 +++ .../HelloThumbnail - Introduction Video.tid | 8 ++++ .../thumbnails/HelloThumbnail - News.tid | 7 +++ .../HelloThumbnail - TiddlyDesktop.tid | 7 +++ .../thumbnails/HelloThumbnail - TiddlyFox.tid | 7 +++ themes/tiddlywiki/vanilla/base.tid | 43 +++++++++++++------ 12 files changed, 113 insertions(+), 23 deletions(-) create mode 100644 editions/tw5.com/tiddlers/hellothere/HelloThumbnail.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Developers.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Follow on Twitter.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - GettingStarted.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - HelpingTiddlyWiki.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Introduction Video.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - News.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyDesktop.tid create mode 100644 editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyFox.tid diff --git a/core/wiki/macros/thumbnails.tid b/core/wiki/macros/thumbnails.tid index bc27af41a..af5afbe32 100644 --- a/core/wiki/macros/thumbnails.tid +++ b/core/wiki/macros/thumbnails.tid @@ -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$""">
-
-[img width="$width$" height="$height$" [$image$]] +
+<$reveal type="nomatch" text="" default="""$image$""" tag="div" style="width:$width$px;height:$height$px;"> +[img[$image$]] + +<$reveal type="match" text="" default="""$image$""" tag="div" class="tc-thumbnail-background" style="width:$width$px;height:$height$px;background-color:$background-color$;"> +
-
-{{$:/core/images/video}} +
+$icon$
$caption$
-
- +
\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")
-<> +<>
\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$"""/> + +\end diff --git a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid index 57c4ba666..2de190289 100644 --- a/editions/tw5.com/tiddlers/hellothere/HelloThere.tid +++ b/editions/tw5.com/tiddlers/hellothere/HelloThere.tid @@ -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. -<> +
+<> +
~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. +<> + 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! diff --git a/editions/tw5.com/tiddlers/hellothere/HelloThumbnail.tid b/editions/tw5.com/tiddlers/hellothere/HelloThumbnail.tid new file mode 100644 index 000000000..4d1a6ad01 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/HelloThumbnail.tid @@ -0,0 +1,2 @@ +title: HelloThumbnail +list: diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Developers.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Developers.tid new file mode 100644 index 000000000..e7a86cfc6 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Developers.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - Developers +tags: HelloThumbnail +color: #58FFB9 +background-color: #39CBB6 +icon: {{$:/core/images/plugin-generic-theme}} +caption: Developers +link: Developers diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Follow on Twitter.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Follow on Twitter.tid new file mode 100644 index 000000000..af7c32af5 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Follow on Twitter.tid @@ -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 diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - GettingStarted.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - GettingStarted.tid new file mode 100644 index 000000000..3f44bf3f0 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - GettingStarted.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - GettingStarted +tags: HelloThumbnail +color: #cfc +background-color: #2c2 +icon:
Go
+caption: Beginners Start Here +link: GettingStarted diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - HelpingTiddlyWiki.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - HelpingTiddlyWiki.tid new file mode 100644 index 000000000..46f477bca --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - HelpingTiddlyWiki.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - HelpingTiddlyWiki +tags: HelloThumbnail +color: #B7D5EA +background-color: #fff +caption: Helping ~TiddlyWiki +link: HelpingTiddlyWiki +image: Tiddler Poster.png diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Introduction Video.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Introduction Video.tid new file mode 100644 index 000000000..15ce2b073 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - Introduction Video.tid @@ -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 diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - News.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - News.tid new file mode 100644 index 000000000..75613164c --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - News.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - News +tags: HelloThumbnail +color: #D5B7EA +background-color: #E44A4A +icon: {{$:/core/images/globe}} +caption: Latest News +link: Community diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyDesktop.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyDesktop.tid new file mode 100644 index 000000000..eab1cf30a --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyDesktop.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - TiddlyDesktop +tags: HelloThumbnail +color: #D5B7EA +background-color: #4A4AE4 +icon: {{Motovun Jack.svg}} +caption: Install ~TiddlyDesktop +link: TiddlyDesktop diff --git a/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyFox.tid b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyFox.tid new file mode 100644 index 000000000..b639827e4 --- /dev/null +++ b/editions/tw5.com/tiddlers/hellothere/thumbnails/HelloThumbnail - TiddlyFox.tid @@ -0,0 +1,7 @@ +title: HelloThumbnail - TiddlyFox +tags: HelloThumbnail +color: #D5B7EA +background-color: #E44AE4 +icon: {{Motovun Jack.svg}} +caption: Install ~TiddlyFox +link: TiddlyFox diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index ffc416edc..1a3fad265 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -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 <>; + 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; + <> } -.tc-thumbnail-symbol { +.tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg, +.tc-thumbnail-wrapper:hover .tc-thumbnail-icon img { + fill: #fff; + <> +} + +.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 {