COPARTNER (component )

src/app/shared/components/copartner/templates

Demo Section

Each variation will be presented in the following section.

Default

LMU Cooperation Partners

test
 
test
test
test
test
test
test
test

Default Big

LMU Cooperation Partners

test
 
test
test
test
test
test
test
test

RTE

LMU Cooperation Partners

test
 
test
test
test
test
test
test
test

RTE-Gross

LMU Cooperation Partners

test
 
test
test
test
test
test
test
test

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://placehold.co/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://placehold.co/300x300" alt="test" title="copyright">
				</a>
			</div>

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

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

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

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

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

			<div class="copartner-item">
				<a href="#">
					<img class="copartner-img" src="https://placehold.co/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://placehold.co/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://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/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://placehold.co/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://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/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://placehold.co/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://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/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://placehold.co/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://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x600" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x100" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x200" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
		<div class="copartner-item">
			<a href="#">
				<img class="copartner-img" src="https://placehold.co/300x300" alt="test" title="copyright">
			</a>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link