|
|
|
@ -1,16 +1,13 @@
|
|
|
|
|
.context: 1
|
|
|
|
|
.type: masonry
|
|
|
|
|
.width: 33
|
|
|
|
|
created: 20240129095948486
|
|
|
|
|
creator: Octt
|
|
|
|
|
modified: 20240130144632702
|
|
|
|
|
modified: 20240201203754580
|
|
|
|
|
modifier: Octt
|
|
|
|
|
tags: $:/Apps
|
|
|
|
|
title: $:/Apps/MagicBox
|
|
|
|
|
|
|
|
|
|
\define SearchResults(fields)
|
|
|
|
|
<$list filter="[!is[system]search:$fields${$:/temp/MagicBox!!.input}sort[title]limit[100]]">
|
|
|
|
|
<div class=`MagicBoxApplet result ${[{$:/Apps/MagicBox!!.type}]}$` style=`background-image: url("${[{!!page-cover}]}$");`>
|
|
|
|
|
<$list filter="[!is[system]search:$fields${$:/temp/Apps/MagicBox!!.input}sort[title]limit[100]]">
|
|
|
|
|
<div class=`MagicBoxApplet result ${[{$:/state/Apps/MagicBox!!.type}]}$` style=`background-image: url("${[{!!page-cover}]}$");`>
|
|
|
|
|
<$button class="OcttKB-BorderFocus tc-btn-invisible">
|
|
|
|
|
<$action-sendmessage $message="tm-close-tiddler" $param=<<closeOnChoose>>/>
|
|
|
|
|
<$action-navigate $to={{!!title}}/>
|
|
|
|
@ -18,8 +15,8 @@ title: $:/Apps/MagicBox
|
|
|
|
|
<h3>
|
|
|
|
|
<$link to={{!!title}} tabindex="-1"/>
|
|
|
|
|
</h3>
|
|
|
|
|
<$if value={{$:/Apps/MagicBox!!.context}}>
|
|
|
|
|
<$context term={{$:/temp/MagicBox!!.input}} tabindex="-1"/>
|
|
|
|
|
<$if value={{$:/state/Apps/MagicBox!!.context}}>
|
|
|
|
|
<$context term={{$:/temp/Apps/MagicBox!!.input}} tabindex="-1"/>
|
|
|
|
|
</$if>
|
|
|
|
|
<!--</$link>-->
|
|
|
|
|
</$button>
|
|
|
|
@ -28,14 +25,14 @@ title: $:/Apps/MagicBox
|
|
|
|
|
\end
|
|
|
|
|
|
|
|
|
|
<div class="MagicBoxApplet options">
|
|
|
|
|
<$checkbox field=".context" checked="1">Context</$checkbox>
|
|
|
|
|
<$checkbox tiddler="$:/state/Apps/MagicBox" field=".context" checked="1">Context</$checkbox>
|
|
|
|
|
|
|
|
|
|
<!--<$edit-text field=".type" placeholder="Display Type"/>-->
|
|
|
|
|
<$checkbox field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox>
|
|
|
|
|
<$checkbox tiddler="$:/state/Apps/MagicBox" field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox>
|
|
|
|
|
|
|
|
|
|
<$range field=".width" min="19" max="49"/>{{!!.width}}
|
|
|
|
|
<$range tiddler="$:/state/Apps/MagicBox" field=".width" min="19" max="49"/>{{$:/state/Apps/MagicBox!!.width}}
|
|
|
|
|
|
|
|
|
|
<$edit-text tiddler="$:/temp/MagicBox" field=".input" class="OcttKB-BorderFocus _input" placeholder="Search..." tabindex="0"/>
|
|
|
|
|
<$edit-text tiddler="$:/temp/Apps/MagicBox" field=".input" class="OcttKB-BorderFocus _input" placeholder="Search..." tabindex="0"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<$action-sendmessage $message="tm-focus-selector" $param=".MagicBoxApplet.options > ._input"/>
|
|
|
|
@ -48,8 +45,8 @@ title: $:/Apps/MagicBox
|
|
|
|
|
<style>
|
|
|
|
|
@media (max-width: 500px) {
|
|
|
|
|
.MagicBoxApplet.result {
|
|
|
|
|
min-width: calc(({{!!.width}}% * 2) - 16px) !important;
|
|
|
|
|
max-width: calc(({{!!.width}}% * 3) - 16px) !important;
|
|
|
|
|
min-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 2) - 16px) !important;
|
|
|
|
|
max-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 3) - 16px) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.MagicBoxApplet.result {
|
|
|
|
@ -60,12 +57,12 @@ title: $:/Apps/MagicBox
|
|
|
|
|
background-position: center;
|
|
|
|
|
}
|
|
|
|
|
.MagicBoxApplet.result.grid {
|
|
|
|
|
width: calc({{!!.width}}% - 16px);
|
|
|
|
|
width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px);
|
|
|
|
|
aspect-ratio: 16/9;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
.MagicBoxApplet.result.masonry {
|
|
|
|
|
max-width: calc({{!!.width}}% - 16px);
|
|
|
|
|
max-width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px);
|
|
|
|
|
}
|
|
|
|
|
.MagicBoxApplet.result h3 {
|
|
|
|
|
margin-top: 25%;
|
|
|
|
@ -97,11 +94,11 @@ title: $:/Apps/MagicBox
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<$if value={{{ [{$:/temp/MagicBox!!.input}split[]count[]compare:integer:gteq[3]then[1]] }}}>
|
|
|
|
|
<$if value={{{ [search:title{$:/temp/MagicBox!!.input}then[0]else[1]] }}}>
|
|
|
|
|
<$if value={{{ [{$:/temp/Apps/MagicBox!!.input}split[]count[]compare:integer:gteq[3]then[1]] }}}>
|
|
|
|
|
<$if value={{{ [search:title{$:/temp/Apps/MagicBox!!.input}then[0]else[1]] }}}>
|
|
|
|
|
<$button>
|
|
|
|
|
<$action-sendmessage $message="tm-close-tiddler" $param=<<closeOnChoose>>/>
|
|
|
|
|
<$action-sendmessage $message="tm-new-tiddler" title={{$:/temp/MagicBox!!.input}} />
|
|
|
|
|
<$action-sendmessage $message="tm-new-tiddler" title={{$:/temp/Apps/MagicBox!!.input}} />
|
|
|
|
|
Create as New Tiddler
|
|
|
|
|
</$button>
|
|
|
|
|
</$if>
|
|
|
|
|