Total.js CMS widgets template suggestion

ContentNoticesMasonry-template.html

<!-- This is a suggestion based on https://github.com/totaljs/widgets/blob/master/ContentNoticesMasonry/widget.html -->
<style>
	.wc140 { column-width: 280px; column-gap: 20px; width: 100%; margin: 30px auto; }
	.wc140 figure { width: 100%; background: white; border: 1px solid #E0E0E0; margin: 0 2px 20px; padding: 15px; display: inline-block; column-break-inside: avoid; border-radius: 4px; line-height: 18px; }
	.wc140 .date { font-size: 11px; color: #A0A0A0; margin-bottom: 10px; }
	.wc140 .date .fa { margin-right: 5px; }
	.wc140 figure img { border-radius: 3px; }
	.wc140 figure code { background-color: #F0F0F0; padding: 1px 3px; border-radius: 3px; font-size: 12px; }
	.wc140 figure blockquote { background-color: #F0F0F0; padding: 10px; margin: 0 0 15px; border-radius: 4px; }
	.wc140 figure p { margin-top: 0; margin-bottom: 15px; }
	.wc140 h3 { margin: 0 0 5px 0; }
	.wc140link { display: inline-block; position: relative; background-color: #E0E0E0; border-radius: 3px; padding: 4px 15px; font-size: 12px; color: black; }
	.wc140link .fa { margin-right: 5px; }
	.wc140link:hover { text-decoration: none; opacity: 0.9; }
</style>

<script editor>
	option('type', 'Type', 'all', ['all', 'pinned', 'unpinned']);
	option('category', 'Category', 'all', 'Notices');
	option('count', 'Count', 3);
	option('linkbutton', 'Button', 'Read more');
	option('name', 'Show name', true);
	option('date', 'Show date', true);
	option('dateformat', 'Date format', 'yyyy-MM-dd');
</script>

<script total>
	exports.render = function(options, html, next, template) {
		var self = this;
		var opt = {};
		opt.limit = options.count || 3;
		opt.category = options.category === 'all' ? null : options.category;
		opt.ispinned = options.type === 'all' ? null : options.type === 'pinned';

		if (opt.category === 'event') {
			opt.event = true;
			opt.sort = 'event_asc';
		}

		$QUERY('Notice', opt, function(err, response) {
			var responseHtml = F.viewCompile(template, response, options);
			next(html.substring(0, html.indexOf('<div class="totaljs')) + '<div class="wc140">{0}</div></div>'.format(responseHtml));
		});
	};

</script>

<div class="wm wp wb">
	<div class="totaljs">Notices Masonry</div>
</div>

<script type="text/html">
  @{if model.count}
    @{foreach m in model.items}
      <figure>
        @{if m.name}<h3>@{m.name}</h3>@{fi}
        @{if m.date}<div class="date"><i class="fa fa-clock-o"></i>@{m.date.format(options.dateformat)}</div>@{fi}
        <div class="markdown">@{m.body}</div>
        @{if m.url}<a href="@{m.url}" target="_blank" class="wc140link"><i class="fa fa-plus"></i>@{options.linkbutton}</a>@{fi}
      </figure>
    @{end}
  @{else}
    <p>There are no notices.</p>
  @{fi}
</script>

Disclaimer, untested, may not work as intended 😆