.context: 1
.type: masonry
.width: 24
created: 20240129095948486
creator: Octt
modified: 20240129135204381
modifier: Octt
tags: $:/Apps
title: $:/Apps/MagicBox

\define SearchResults(fields)
<$list filter="[!is[system]search:$fields${$:/temp/MagicBox!!.input}sort[title]limit[150]]">
	<div class=`MagicBoxResult ${[{$:/Apps/MagicBox!!.type}]}$` style=`background-image: url("${[{!!page-cover}]}$");`>
		<$link to={{!!title}}>
			<h3>
				<$link to={{!!title}}/>
			</h3>
			<$if value={{$:/Apps/MagicBox!!.context}}>
				<$context term={{$:/temp/MagicBox!!.input}}/>
			</$if>
		</$link>
	</div>
</$list>
\end

<div>
	<$edit-text tiddler="$:/temp/MagicBox" field=".input" placeholder="Search..."/>
	<$checkbox field=".context" checked="1">Context</$checkbox>
	<!--<$edit-text field=".type" placeholder="Display Type"/>-->
	<$checkbox field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox>
	<$range field=".width" min="24" max="49"/>{{!!.width}}%
</div>

<style>
	.MagicBoxResult {
		margin: 8px;
		display: inline-block;
		background-color: lightgray;
		background-size: cover;
		background-position: center;
	}
	.MagicBoxResult.grid {
		width: calc({{!!.width}}% - 16px);
		aspect-ratio: 16/9;
		vertical-align: top;
	}
	.MagicBoxResult.masonry {
		max-width: calc({{!!.width}}% - 16px);
	}
	.MagicBoxResult h3 {
		margin-top: 25%;
		padding: 8px;
		background-color: rgba(255, 255, 255, 0.75);
		text-align: center;
	}
	.MagicBoxResult pre {
		color: initial;
		max-height: 7em;
		overflow-y: auto;
		margin: 0;
		top: 1em;
		position: relative;
	}
	.MagicBoxResult > a {
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.MagicBoxResult > a:after {
		content: "" !important;
	}
</style>

<$if value={{{ [{$:/temp/MagicBox!!.input}split[]count[]compare:integer:gteq[3]then[1]] }}}>
	Title or Caption matches:
	<br/><<SearchResults "title,caption">>

	<div><br/><hr/><br/></div>

	Tags or Text matches:
	<br/><<SearchResults "tags,text">>
</$if>