pillar/src/templates/mixins/components.pug

// {#
// Header of landing pages. title or text can be skipped:
// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")
// Any extra attributes added (in a separate group) will be passed as is:
// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")(data-node-id='{{ node._id }}')
// #}
mixin jumbotron(title, text, image, url)
	if url
		a.jumbotron.text-white(
			style='background-image: url(' + image + ');',
			href=url)&attributes(attributes)
			.container
				.row
					.col-md-9
						if title
							.display-4.text-uppercase.font-weight-bold
								=title
						if text
							.lead
								=text
								if block
									block
	else
		.jumbotron.text-white(style='background-image: url(' + image + ');')&attributes(attributes)
			.container
				.row
					.col-md-9
						if title
							.display-4.text-uppercase.font-weight-bold
								=title
						if text
							.lead
								=text
								if block
									block

// {# Secondary navigation.
// e.g. Workshops, Courses. #}
mixin nav-secondary(title)
	ul.nav.nav-secondary&attributes(attributes)
		if title
			li.nav-item
				span.nav-title.nav-link.font-weight-bold.pointer-events-none= title

		if block
			block
		else
			p No items defined.

mixin nav-secondary-link()
	li.nav-item
		a.nav-link&attributes(attributes)
			block

mixin card-deck(max_columns)
	.card-deck.card-padless.card-deck-responsive(class="card-" + max_columns + "-columns")&attributes(attributes)
		if block
			block

// {#
// Passes all attributes to the card.
// You can do fun stuff in a loop even like:
// +card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
// #}
mixin card()
	.card&attributes(attributes)
		if block
			block
		else
			p No card content defined.

mixin list-asset(name, url, image, type, date)
	if block
		block

// used together with timeline.js
mixin timeline(projectid, sortdirection)
	section.timeline.placeholder(
		data-project-id=projectid,
		data-sort-dir=sortdirection,
	)
		// TODO: Make nicer reuseable placeholder
		.h3.text-center.text-secondary.p-5.border-bottom
			i.pi-spin.spin