mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Add caption and tweak styling for youtube macro

Browse Source 
More fixes for #1547
This commit is contained in:
Jermolene 2015-03-22 18:01:46 +00:00
parent ec598d5cf4
commit 9c27d22ea6
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/wiki/macros/youtube.tid
View File

@ -1,7 +1,7 @@
title: $:/core/macros/youtube
tags: $:/tags/Macro
\define youtube-thumbnail(link,width:"280",height:"157",image)
\define youtube-thumbnail(link,width:"280",height:"157",image,caption)
<$link to="""$link$""">
<div class="tc-youtube-wrapper">
<div class="tc-youtube-thumbnail">
@ -10,6 +10,9 @@ tags: $:/tags/Macro
<div class="tc-youtube-play-symbol">
{{$:/core/images/video}}
</div>
<div class="tc-youtube-caption">
$caption$
</div>
</div>
</$link>
\end

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

@ -8,7 +8,7 @@ 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.
<div style="float:right;">
<<youtube-thumbnail link:"Introduction Video" image:"Introduction Video Thumbnail.jpg">>
<<youtube-thumbnail link:"Introduction Video" image:"Introduction Video Thumbnail.jpg" caption:"Introduction to ~TiddlyWiki">>
</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.

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

@ -1654,6 +1654,7 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
.tc-youtube-wrapper {
position: relative;
display: inline-block;
border: 1px solid <<colour muted-foreground>>;
}
.tc-youtube-thumbnail svg,
@ -1688,6 +1689,22 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
margin-top: -1.5em;
}
.tc-youtube-caption {
position: absolute;
background-color: #666;
color: white;
text-align: center;
bottom: 0;
width: 100%;
filter: alpha(opacity=0.5);
opacity: 0.5;
}
.tc-youtube-wrapper:hover .tc-youtube-caption {
filter: alpha(opacity=1);
opacity: 1;
}
/*
** Errors
*/