EXPERT-SERVICE (LMU Expert Service Module )

src/app/shared/components/expert-service/templates

Demo Section

Each variation will be presented in the following section.

Default

Readme

expertService (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/expert-service

Fields

expert-service.hbs

Settings

Parameter Type Default Description
settings.expertServiceClasses String '' Modifier classes for component
settings.expertServiceContextClass String 'default' Context class of component

Content

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

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$expert-service-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-expert-service:

Modifier Description
is-modifier Please add a description!

Templates

expert-service.hbs

<div id="expertservicelist"></div>


<script type="text/javascript">
	$(function() {
			LmuExpertservice.init({
				config: {
					url: "https://www-dev.lmu.de/lmu.de/de/die-lmu/struktur/zentrale-universitaetsverwaltung/kommunikation-und-presse/expertenservice/contenthub-json-generierungsseite.json",
					search:  {
						labeltitle: "Schnellsuche",
						placeholder: "Geben Sie ein oder mehrere Schlagworte ein"
					},
					resulttxt: {
						noentry: "Es gibt keine Treffer zu Ihrer Suche.",
						tabletitle1: "Themengebiet",
						tabletitle2: "Ansprechpartner"
					}
				},
				container: 'expertservicelist'
			})
    });
</script>

Data File

expert-service.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"expertServiceContextClass": "default",
				"expertServiceClasses": ""
			},
			"content": {}
		}
	}
}

Styles

expert-service.scss

/* ===================================================
component: expert-service
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-expert-service"] {

	.expert-service__area {
		&.is-loading {

			.expert-service__load-init-loader {
				opacity: 1;
				display: flex;
			}
		}
	}
	.expert-service__form {
		margin: 0;
		padding: 0;

		.expert-service__label-wrapper {
			@include rte-dimensions();
		}

		.expert-service__input-label {
			font-family: $font-bold;
			color: $color-dark;
			font-size: 1.2rem;
			letter-spacing: .5px;
			line-height: (16/12);
		}

		.expert-service__input-wrapper {
			@include rte-dimensions();
			margin-bottom: 45px;
			position: relative;
			display: block;
		}

		.expert-service__input-text {
			font-size: 1.5rem;
			text-indent: 10px;
			height: 45px;
			overflow: hidden;
			text-overflow: ellipsis;
			border: 1px solid $color-gray-light;
			font-family: $font-regular;
			color: $color-dark;
			width: calc(100%);
			padding: 10px;

			&:focus {
				outline: none;
			}

			@include bp($bp-mobile-p) {
				font-size: 1.6rem;
				line-height: 1.5;
				letter-spacing: .25px;
				height: 50px;
			}
		}
	}

	// LOAD INIT LOADER
	.expert-service__load-init-loader {
		@include centering(h);

		position: relative;

		display: none;
		width: 200px;
		flex-direction: row;
		background-color: $color-white;
		height: 60px;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		opacity: 0;
		transition: opacity $animation-duration-std $animation-easing-std;
		z-index: 100;
		border: 1px solid $color-green;
	}

	.expert-service__load-init-loader-box {
		display: block;
		margin: 10px;
		border: 1em solid $color-green;
		opacity: 0;

		/*
		MODIFIERS
		----------------------- */
		&.is-one {
			animation: boxAppear 2s linear infinite;
		}

		&.is-two {
			animation: boxAppear 2s linear .3s infinite;
		}

		&.is-three {
			animation: boxAppear 2s linear .62s infinite;
		}
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-expert-service--default {
}

HTML Output

Default

<div id="expertservicelist"></div>
<script type="text/javascript">
	$(function() {
		LmuExpertservice.init({
			config: {
				url: "https://www-dev.lmu.de/lmu.de/de/die-lmu/struktur/zentrale-universitaetsverwaltung/kommunikation-und-presse/expertenservice/contenthub-json-generierungsseite.json",
				search: {
					labeltitle: "Schnellsuche",
					placeholder: "Geben Sie ein oder mehrere Schlagworte ein"
				},
				resulttxt: {
					noentry: "Es gibt keine Treffer zu Ihrer Suche.",
					tabletitle1: "Themengebiet",
					tabletitle2: "Ansprechpartner"
				}
			},
			container: 'expertservicelist'
		})
	});
</script>

Wonach suchst du?

Datenschutzhinweis mit Link