1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-28 15:08:46 +00:00

Simplify the link panels

This commit is contained in:
Jermolene 2015-03-25 11:11:18 +00:00
parent 4eb2e3d3b4
commit 2186a393a7
2 changed files with 9 additions and 26 deletions

View File

@ -2,32 +2,20 @@ title: $:/core/macros/thumbails
tags: $:/tags/Macro tags: $:/tags/Macro
\define thumbnail(link,icon,color,background-color,image,caption,width:"280",height:"157") \define thumbnail(link,icon,color,background-color,image,caption,width:"280",height:"157")
<$link to="""$link$"""> <$link to="""$link$"""><div class="tc-thumbnail-wrapper">
<div class="tc-thumbnail-wrapper"> <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;">
<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$]] [img[$image$]]
</$reveal> </$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-icon" style="fill:$color$;">
<$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-icon" style="fill:$color$;">
$icon$ $icon$
</div> </div><div class="tc-thumbnail-caption">
<div class="tc-thumbnail-caption">
$caption$ $caption$
</div> </div></div></$link>
</div></$link>
\end \end
\define thumbnail-right(link,icon,color,background-color,image,caption,width:"280",height:"157") \define thumbnail-right(link,icon,color,background-color,image,caption,width:"280",height:"157")
<div class="tc-thumbnail-right-wrapper"> <div class="tc-thumbnail-right-wrapper"><<thumbnail """$link$""" """$icon$""" """$color$""" """$background-color$""" """$image$""" """$caption$""" """$width$""" """$height$""">></div>
<<thumbnail """$link$""" """$icon$""" """$color$""" """$background-color$""" """$image$""" """$caption$""" """$width$""" """$height$""">>
</div>
\end \end
\define list-thumbnails(filter,width:"280",height:"157") \define list-thumbnails(filter,width:"280",height:"157")
<$list filter="""$filter$"""> <$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>
<$macrocall $name="thumbnail" link={{!!link}} icon={{!!icon}} color={{!!color}} background-color={{!!background-color}} image={{!!image}} caption={{!!caption}} width="""$width$""" height="""$height$"""/>
</$list>
\end \end

View File

@ -1656,15 +1656,13 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
} }
/* /*
** YouTube macros ** Thumbnail macros
*/ */
.tc-thumbnail-wrapper { .tc-thumbnail-wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
border: 1px solid <<colour muted-foreground>>; margin: 0;
border-radius: 3px;
margin: 2px;
vertical-align: top; vertical-align: top;
} }
@ -1694,7 +1692,6 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
.tc-thumbnail-background { .tc-thumbnail-background {
position: absolute; position: absolute;
border-radius: 2px;
} }
.tc-thumbnail-icon svg, .tc-thumbnail-icon svg,
@ -1727,8 +1724,6 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
width: 100%; width: 100%;
filter: alpha(opacity=0.9); filter: alpha(opacity=0.9);
opacity: 0.9; opacity: 0.9;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
line-height: 1.4; line-height: 1.4;
} }