Demo Section

Each variation will be presented in the following section.

Default

LMU Cooperation Partners

Default Big

LMU Cooperation Partners

RTE

LMU Cooperation Partners

RTE-Gross

LMU Cooperation Partners

Readme

copartner (`component`)

Description

This blueprint is based on the blueprint of Veams.

Requirements

Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/copartner

Fields

`copartner.hbs`

Settings

Parameter	Type	Default	Description
settings.copartnerClasses	String	`''`	Modifier classes for component
settings.copartnerContextClass	String	`'default'`	Context class of component
settings.copartnerJsOptions	Object	`null`	JavaScript options object which gets stringified

Content

Parameter	Type	Description
content.copartnerField	String	Please add a description!

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description
optionOne	String	`'is-option'`	Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description
$copartner-my-custom-var	`0px`	Please add a description!

Modifier Classes

There are modifier classes you can add to c-copartner:

Modifier	Description
is-modifier	Please add a description!

Templates

copartner.hbs

<div class="c-copartner{{#if settings.copartnerContextClass}}--{{settings.copartnerContextClass}}{{else}}--default{{/if}}{{#if settings.copartnerClasses}} {{settings.copartnerClasses}}{{/if}}"
     data-css="c-copartner"
     data-js-module="copartner"{{#if settings.copartnerJsOptions}}
     data-js-options='{{stringify settings.copartnerJsOptions}}'{{/if}}>
		<h2 class="copartner-title">LMU Cooperation Partners</h2>
		<div class="copartner-wrapper">
			<div class="copartner-item-premium">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-vl">&nbsp;</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x600"  alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x100"  alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x200"  alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x200"  alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x300"  alt="test" title="copyright">
				</a>
			</div>

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://via.placeholder.com/300x300"  alt="test" title="copyright">
				</a>
			</div>
		</div>
</div>

Data File

copartner.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"copartnerContextClass": "default",
				"copartnerClasses": "",
				"copartnerJsOptions": {}
			},
			"content": {}
		},
		"defaultbig": {
			"docs": {
				"variationName": "Default Big"
			},
			"settings": {
				"copartnerContextClass": "default",
				"copartnerClasses": "is-big",
				"copartnerJsOptions": {}
			},
			"content": {}
		},
		"rte": {
			"docs": {
				"variationName": "RTE"
			},
			"settings": {
				"copartnerContextClass": "rte",
				"copartnerClasses": "",
				"copartnerJsOptions": {}
			},
			"content": {}
		},
		"rtebig": {
			"docs": {
				"variationName": "RTE-Gross"
			},
			"settings": {
				"copartnerContextClass": "rte",
				"copartnerClasses": "is-big",
				"copartnerJsOptions": {}
			},
			"content": {}
		}
	}
}

Styles

copartner.scss

/* ===================================================
component: copartner
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-copartner"] {
	border-top: 1px solid $color-gray-light;
	border-bottom: 1px solid $color-gray-light;
	margin-bottom: 60px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	clear: both;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
		align-items: flex-start;

	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	@include print() {
		margin-bottom: 80px;
		align-items: flex-start;
	}


	.copartner-img {
		/*object-fit: contain;*/
		max-width: 70px;
		max-height: 70px;
		margin: 0 auto;
		width: auto;
	}

	.copartner-title {

		font-size: 1.25rem;
		line-height: (17/12);
		padding: 10px 0 0 0;
	}

	.copartner-wrapper {
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: center;
		padding: 20px 0;
		clear: both;

		@include bp($bp-mobile-p) {
			flex-direction: row;
			padding: 8px 0 20px 0;
			width: 100%;
		}

		@include print() {
			flex-direction: row;
			padding: 8px 0 20px 0;
			width: 100%;
		}

		.copartner-vl {
			font-size: 1px;
			width: 70px;
			border-top: 1px solid $color-gray;
			height: 1px;

			@include bp($bp-mobile-p) {
				border-left: 1px solid $color-gray;
				border-top: 0;
				height: 70px;
				width: 1px;
				padding: 8px 20px 8px 0px;
				float: left;
			}

			@include print() {
				border-left: 1px solid $color-gray;
				border-top: 0;
				height: 70px;
				width: 1px;
				padding: 8px 20px 8px 0px;
				float: left;
			}
		}

		.copartner-item-premium, .copartner-item {
			width: 140px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 20px;

			@include bp($bp-mobile-p) {
				width: auto;
				height: auto;
				padding: 8px 40px 8px 0px;
				float: left;
			}

			@include print() {
				width: auto;
				height: auto;
				padding: 8px 40px 8px 0px;
				float: left;
			}
		}

		.copartner-item-premium {
			&:first-of-type {
				padding-top: 0px;
				padding-bottom: 20px;
			}

			@include bp($bp-mobile-p) {
				&:first-of-type {
					padding-bottom: 0px;
					padding-left: 0px;
					padding-right: 20px;
				}
			}

			@include print() {
				&:first-of-type {
					padding-bottom: 0px;
					padding-left: 0px;
					padding-right: 20px;
				}
			}
		}

		.copartner-item {

			&:first-of-type {
				padding-top: 0px;
				padding-bottom: 0px;
			}

			&:last-of-type {
				padding-bottom: 0;
			}

			@include bp($bp-mobile-p) {
				&:first-of-type {
					padding: 8px 40px 8px 0px;
				}

				&:last-of-type {
					padding: 8px 0px 8px 0px;
				}
			}

			@include print() {
				&:first-of-type {
					padding: 8px 40px 8px 0px;
				}

				&:last-of-type {
					padding: 8px 0px 8px 0px;
				}
			}
		}


	}
}



/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-copartner--default {
	&.is-big {

		.copartner-title {
			@include headline-h4-styles();
			padding: 20px 0 0 0;
		}

		.copartner-wrapper {
			padding: 0px 0px 20px 0px;
		}

		.copartner-vl {
			width: 120px;

			@include bp($bp-mobile-p) {
				width: auto;
				height: 120px;
				padding: 6.5px 30px 6.5px 0px;
			}

			@include print() {
				width: auto;
				height: 120px;
				padding: 6.5px 30px 6.5px 0px;
			}
		}

		.copartner-img {
			max-width: 120px;
			max-height: 120px;
		}

		.copartner-item {
			padding-top: 30px;

			&:first-of-type {
				padding-bottom: 0px;
			}

			@include bp($bp-mobile-p) {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 60px 10px 0px;
				}
			}

			@include print() {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 60px 10px 0px;
				}
			}
		}

		.copartner-item-premium {

			padding-top: 30px;

			&:first-of-type {
				padding-bottom: 30px;
			}

			@include bp($bp-mobile-p) {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 30px 10px 0px;
				}
			}

			@include print() {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 30px 10px 0px;
				}
			}
		}


	}
}

.c-copartner--rte {
	@include rte-dimensions();
	margin-bottom: 60px;

	.copartner-title {
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0px;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	&.is-big {

		.copartner-title {
			@include headline-h4-styles();
			padding: 20px 0 0 0;
		}

		.copartner-wrapper {
			padding: 0px 0px 20px 0px;
		}

		.copartner-vl {
			width: 120px;

			@include bp($bp-mobile-p) {
				width: auto;
				height: 120px;
				padding: 6.5px 30px 6.5px 0px;
			}

			@include print() {
				width: auto;
				height: 120px;
				padding: 6.5px 30px 6.5px 0px;
			}
		}

		.copartner-img {
			max-width: 120px;
			max-height: 120px;
		}

		.copartner-item {
			padding-top: 30px;

			&:first-of-type {
				padding-bottom: 0px;
			}

			@include bp($bp-mobile-p) {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 60px 10px 0px;
				}
			}

			@include print() {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 60px 10px 0px;
				}
			}
		}

		.copartner-item-premium {

			padding-top: 30px;

			&:first-of-type {
				padding-bottom: 30px;
			}

			@include bp($bp-mobile-p) {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 30px 10px 0px;
				}
			}

			@include print() {
				padding: 10px 60px 10px 0px;

				&:first-of-type {
					padding: 10px 30px 10px 0px;
				}
			}
		}
	}
}

Scripts

copartner.js

/**
 * Description of Copartner.
 * Class properties and decorators are supported.
 * LMU Cooperation partner Absatzyvorlage veams component.
 *
 * @module Copartner
 * @version v1.0.0
 *
 * @author Serkan Ertan
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class Copartner extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);

    /**
     * Event & subscribe handling
     */

	// Local Handlers
    get events() {
        return {
            'click': 'handleClick'
        };
    }

	handleClick = (evt, target) => {
        console.log(`You clicked on: `, target);
        console.log('You got the following event: ', evt);
	};

	// Global Handlers
    get subscribe() {
        return {
            '{{context.EVENTS.resize}}': 'handleResize'
        };
    }

	handleResize = () => {
		console.log(`Browser was resized and catched by Copartner!`);
	};

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {},
			classes: {}
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component Copartner mounted!');
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default Copartner;

HTML Output

Default

<div class="c-copartner--default" data-css="c-copartner" data-js-module="copartner" data-js-options='{}'>
	<h2 class="copartner-title">LMU Cooperation Partners</h2>
	<div class="copartner-wrapper">
		<div class="copartner-item-premium">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-vl">&nbsp;</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
	</div>
</div>

Default Big

<div class="c-copartner--default is-big" data-css="c-copartner" data-js-module="copartner" data-js-options='{}'>
	<h2 class="copartner-title">LMU Cooperation Partners</h2>
	<div class="copartner-wrapper">
		<div class="copartner-item-premium">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-vl">&nbsp;</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
	</div>
</div>

RTE

<div class="c-copartner--rte" data-css="c-copartner" data-js-module="copartner" data-js-options='{}'>
	<h2 class="copartner-title">LMU Cooperation Partners</h2>
	<div class="copartner-wrapper">
		<div class="copartner-item-premium">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-vl">&nbsp;</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
	</div>
</div>

RTE-Gross

<div class="c-copartner--rte is-big" data-css="c-copartner" data-js-module="copartner" data-js-options='{}'>
	<h2 class="copartner-title">LMU Cooperation Partners</h2>
	<div class="copartner-wrapper">
		<div class="copartner-item-premium">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-vl">&nbsp;</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://via.placeholder.com/300x300" alt="test" title="copyright">
			</a>
		</div>
	</div>
</div>

COPARTNER (component )

src/app/shared/components/copartner/templates

Demo Section

Default

LMU Cooperation Partners

Default Big

LMU Cooperation Partners

RTE

LMU Cooperation Partners

RTE-Gross

LMU Cooperation Partners

Readme

copartner (`component`)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

`copartner.hbs`

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

copartner.hbs

Data File

copartner.hjson

Styles

copartner.scss

Scripts

copartner.js

HTML Output

Default

Default Big

RTE

RTE-Gross

Wonach suchst du?

COPARTNER (component )

src/app/shared/components/copartner/templates

Demo Section

Default

LMU Cooperation Partners

Default Big

LMU Cooperation Partners

RTE

LMU Cooperation Partners

RTE-Gross

LMU Cooperation Partners

Readme

copartner (component)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

copartner.hbs

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

copartner.hbs

Data File

copartner.hjson

Styles

copartner.scss

Scripts

copartner.js

HTML Output

Default

Default Big

RTE

RTE-Gross

Wonach suchst du?

copartner (`component`)

`copartner.hbs`