Each variation will be presented in the following section.
Einrichtung test dann mit sehr
Funktion
Aufgabengebiet
Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.
+49(0)8933298657
+49(0)8933298656
component)Modul to show the detailsite of one person in a lightbox. The Markup will be integrated (hardcopy) in the templates.js-file (src/app/shared/scripts) to generate a overlay filled with an JSON-Object.
Veams#5.0.0veams install bp absolute/filepath/to/person-detail
person-detail.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.personDetailClasses | String | '' |
Modifier classes for component |
| settings.personDetailContextClass | String | 'default' |
Context class of component |
| settings.personDetailJsOptions | Object | null |
JavaScript options object which gets stringified |
| Parameter | Type | Description |
|---|---|---|
| content.personDetailField | String | Please add a description! |
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $person-detail-my-custom-var | 0px |
Please add a description! |
There are modifier classes you can add to c-person-detail:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
<div class="c-person-detail{{#if settings.personDetailContextClass}}--{{settings.personDetailContextClass}}{{else}}--default{{/if}}{{#if settings.personDetailClasses}} {{settings.personDetailClasses}}{{/if}}"
data-css="c-person-detail"
data-js-module="person-detail"{{#if settings.personDetailJsOptions}}
data-js-options='{{stringify settings.personDetailJsOptions}}'{{/if}}>
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<div class="person-detail__frame">
{{#if content.personname}}<h1 class="person-detail__personname">{{content.personname}}</h1>{{/if}}
<div class="person-detail__infoarea">
{{#if content.figure}}
{{#with content.figure}}
{{> figure }}
{{/with}}
{{/if}}
<div class="person-detail__info">
{{#if content.organization_unit}}
<p class="person-detail__organization-unit">{{content.organization_unit}}</p>
{{/if}}
{{#if content.function}}
<p class="person-detail__function">{{content.function}}</p>
{{/if}}
{{#if content.job_description}}
<p class="person-detail__job-description">{{content.job_description}}</p>
{{/if}}
{{#if content.personinfo}}
<p class="person-detail__personinfo">{{content.personinfo}}</p>
{{/if}}
</div>
<div class="person-detail__contactarea">
<div class="person-detail__address">
{{#if content.office}}
<p class="person-detail__office">{{content.office}}</p>
{{/if}}
{{#if content.room}}
<p class="person-detail__room">{{content.room}}</p>
{{/if}}
{{#if content.street}}
<p class="person-detail__street">{{content.street}}</p>
{{/if}}
{{#if content.plz_city}}
<p class="person-detail__plz-city">{{content.plz_city}}</p>
{{/if}}
{{#if content.addressitems}}
<p class="person-detail__linkarea">
{{#each content.addressitems}}
{{> person-detail__link}}
{{/each}}
</p>
{{/if}}
</div>
<div class="person-detail__contact">
{{#if content.contactitems}}
{{#each content.contactitems}}
<p class="person-detail__linkarea"></p>
{{> person-detail__link}}
</p>
{{/each}}
{{/if}}
{{#if content.phone}}
<p class="person-detail__phone">
{{content.phone}}
</p>
{{/if}}
{{#if content.fax}}
<p class="person-detail__fax">
{{content.fax}}
</p>
{{/if}}
</div>
</div>
</div>
</div>
{{/wrapWith}}
{{/wrapWith}}
</div>
<a {{#if content.linkTarget}}target="{{content.linkTarget}}" {{/if}}href="{{content.linkHref}}"
class="person-detail__link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}{{#is
content.linkTarget "_blank"}} is-external{{/is}}" {{#is
content.linkTarget "_blank"}} title="Link öffnet in neuem Fenster"{{/is}}>{{content.linkText}}</a>
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"personDetailContextClass": "default",
"personDetailClasses": "",
"personDetailJsOptions": {}
},
"content": {
"personname":"Prof. Dr. Irene Götz mit einem ganz langen Namen",
"figure": {
"settings": {
"figureId": "",
"figureContextClass": "default",
"figureClasses": "person-detail__figure is-right",
"figureJsModule": "overlay-handler"
},
"content": {
"figureZoom": false,
"figurePicture": {
"settings": {
"pictureContextClass": "default",
"pictureClasses": "person-detail__picture",
"lazyload": false,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/400x400",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/300x300",
"imageWidth": "300w"
},
{
"src": "https://placehold.co/600x600",
"imageWidth": "600w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
}
],
"sizes": [
{
"screenWidth": "",
"imageWidth": "1vw"
},
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "33.33333vw"
}
]
}
]
}
}
}
},
"organization_unit":"Einrichtung test dann mit sehr",
"function":"Funktion",
"job_description":"Aufgabengebiet",
"personinfo":"Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.",
"office":"Dienststelle",
"room":"Erdgeschoss, Raum 404 B",
"street":"Martiusstr.2",
"plz_city":"80333 München",
"addressitems": [
{
"content": {
"linkText": "Wegbeschreibung",
"linkClasses": "is-external",
"linkHref": "http://www.zuendfunk.de",
"linkTarget": "_blank"
}
}
],
"contactitems":[
{
"content": {
"linkText": "Email schreiben",
"linkClasses": "is-mail",
"linkHref": "mailto:info@lmu.de",
"linkTarget": false
}
},
{
"content": {
"linkText": "persönliche Website",
"linkClasses": "is-external",
"linkHref": "https://www.lmu.de",
"linkTarget": "_blank"
}
},
{
"content": {
"linkText": "+49 (0)8956565656",
"linkClasses": "is-phone",
"linkHref": "tel:+4908923232314",
"linkTarget": false
}
},
{
"content": {
"linkText": "Weitere Informationen",
"linkClasses": "is-download",
"linkHref": "https://www.lmu.de",
"linkTarget": false
}
}
],
"phone":"+49(0)8933298657",
"fax":"+49(0)8933298656"
}
}
}
}
/* ===================================================
component: person-detail
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-person-detail"] {
background-color: $color-white;
.person-detail__frame {
padding-top: 30px;
padding-bottom: 100px;
@include bp($bp-tablet-p) {
padding-bottom: 30px;
}
}
.person-detail__personname {
@include headline-h1-styles();
}
.person-detail__figure {
@include grid-column(12);
display: none;
@include bp($bp-tablet-p) {
@include grid-column(4);
display: inline-block;
margin-bottom: 30px;
}
/*
MODIFIERS
----------------------- */
&.is-right {
float: right;
margin-left: 40px;
}
&.is-left {
margin-left: 0;
margin-right: 40px;
}
}
.person-detail__contactarea {
clear: both;
@include bp($bp-tablet-l) {
clear: none;
}
}
.person-detail__organization-unit {
font-size: 1.7rem;
line-height: (24/17);
letter-spacing: .3px;
color: $color-dark;
font-family: $font-bold;
font-weight: 700;
margin-bottom: 13px;
@include bp($bp-tablet-p) {
font-size: 1.8rem;
line-height: (28/18);
margin-bottom: 10px;
}
@include bp($bp-desktop-m) {
font-size: 2rem;
line-height: (28/20);
margin-bottom: 15px;
}
}
.person-detail__function, .person-detail__job-description {
color: $color-gray;
}
.person-detail__personinfo {
margin-top: 18px;
@include bp($bp-tablet-p) {
margin-top: 15px;
}
@include bp($bp-desktop-m) {
margin-top: 20px;
}
}
.person-detail__contactarea {
margin-top: 22px;
display: flex;
flex-direction: column;
@include bp($bp-tablet-p) {
margin-top: 20px;
flex-direction: row;
}
@include bp($bp-desktop-m) {
margin-top: 25px;
}
.person-detail__link {
font-family: $font-bold;
font-weight: 700;
font-size: 1.5rem;
color: $color-green;
text-decoration: none;
transition: color $animation-duration-std/2 $animation-easing-std;
@include bp($bp-desktop-m) {
font-size: 1.6rem;
}
&:focus {
outline: none;
}
&:hover,
&:focus {
color: $color-dark;
&::before {
@include sprites-icon-arrow-black();
transform: translateX(5px);
}
}
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
position: relative;
display: inline-block;
top: 1px;
margin-right: 10px;
vertical-align: unset;
transition: transform $animation-duration-std $animation-easing-std;
}
/*
MODIFIERS
----------------------- */
&.a11y-focus-key {
@include a11y-focus-key();
}
&.is-external {
color: $color-green;
transition: color $animation-duration-std/3 $animation-easing-std;
&:focus {
outline: none;
}
&:hover,
&.a11y-focus-key {
color: $color-dark;
&::before {
@include sprites-icon-externalarrow-black();
}
}
&.a11y-focus-key {
@include a11y-focus-key();
}
&::before {
@include pseudo();
@include sprites-icon-externalarrow-green100();
position: relative;
display: inline-block;
top: 1px;
margin-right: 10px;
vertical-align: unset;
@include print() {
display: none;
}
}
}
&.is-internal {
&:hover,
&.a11y-focus-key {
color: $color-dark;
}
&.a11y-focus-key {
@include a11y-focus-key();
}
}
&.is-mail,
&[href*="mailto:"] {
color: $color-green;
transition: color $animation-duration-std/3 $animation-easing-std;
display: inline-block;
&:focus {
outline: none;
}
&:hover,
&.a11y-focus-key {
color: $color-dark;
&::before {
@include sprites-icon-mail-grey();
}
}
&.a11y-focus-key {
@include a11y-focus-key();
}
&::before {
@include pseudo();
@include sprites-icon-mail-green();
position: relative;
display: inline-block;
top: 1px;
margin-right: 10px;
vertical-align: unset;
@include print() {
display: none;
}
}
}
&.is-download {
color: $color-green;
transition: color $animation-duration-std/3 $animation-easing-std;
display: inline-block;
&:focus {
outline: none;
}
&:hover,
&.a11y-focus-key {
color: $color-dark;
&::before {
@include sprites-icon-download-black();
}
}
&.a11y-focus-key {
@include a11y-focus-key();
}
&::before {
@include pseudo();
@include sprites-icon-download-green100();
position: relative;
display: inline-block;
top: 1px;
margin-right: 10px;
vertical-align: unset;
@include print() {
display: none;
}
}
}
&.is-phone {
color: $color-dark;
transition: color $animation-duration-std/3 $animation-easing-std;
display: inline-block;
&:focus {
outline: none;
}
&:hover,
&.a11y-focus-key {
color: $color-green;
&::before {
@include sprites-icon-phone-green();
}
}
&.a11y-focus-key {
@include a11y-focus-key();
}
&::before {
@include pseudo();
@include sprites-icon-phone-grey();
position: relative;
display: inline-block;
top: 3px;
margin-right: 10px;
vertical-align: unset;
@include print() {
top: 0px;
width: auto;
background-image: none;
content: "Tel.:"
}
}
}
}
}
.person-detail__address {
width: 100%;
@include bp($bp-tablet-p) {
width: 50%;
padding-right: 15px;
}
.person-detail__linkarea{
margin-top: 25px;
}
}
.person-detail__contact {
width: 100%;
padding-top: 22px;
@include bp($bp-tablet-p) {
width: 50%;
padding-left: 15px;
padding-top: 0px;
}
.person-detail__linkarea {
margin-bottom: 5px;
}
}
.person-detail__phone {
font-family: $font-bold;
font-weight: 700;
display: block;
&::before {
@include pseudo();
@include sprites-icon-phone-grey();
position: relative;
display: inline-block;
top: 3px;
margin-right: 10px;
vertical-align: unset;
@include print() {
top: 0px;
width: auto;
background-image: none;
content: "Tel.:"
}
}
}
.person-detail__fax {
font-family: $font-bold;
font-weight: 700;
display: block;
&::before {
@include pseudo();
@include sprites-icon-fax-grey();
position: relative;
display: inline-block;
top: 3px;
margin-right: 10px;
vertical-align: unset;
@include print() {
top: 0px;
width: auto;
background-image: none;
content: "Fax:"
}
}
}
.person-detail__office {
font-family: $font-bold;
font-weight: 700;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-person-detail--default {
}
/**
* Description of PersonDetail.
* Class properties and decorators are supported.
*
* @module PersonDetail
* @version v1.0.0
*
* @author your_name
*/
// Imports
import $ from 'jquery';
import Component from '@veams/component';
class PersonDetail extends Component {
/**
* Class Properties
*/
$el = $(this.el);
/**
* 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);
}
/**
* Subscribe to global events of Veams or App namespace.
*/
get subscribe() {
return {
'{{context.EVENTS.resize}}': 'render'
};
}
didMount() {
setTimeout(() => {
this.getPersonDetailHeightScroll();
}, 3500);
}
/**
* Render class
*/
render() {
setTimeout(() => {
this.getPersonDetailHeightScroll();
}, 500);
}
/**
* Get the Height of the Persondetailcontainer
*/
getPersonDetailHeightScroll() {
let heightViewport = window.innerHeight;
this.options.screenHeight = heightViewport;
this.el.style.height = 'auto';
this.el.style.overflowY = 'visible';
let heightPersondetail = this.$el.outerHeight();
if(heightPersondetail > heightViewport){
this.el.style.height = heightViewport + 'px';
this.el.style.overflowY = 'scroll';
} else {
this.el.style.height = 'auto';
this.el.style.overflowY = 'visible';
}
}
}
export default PersonDetail;
<div class="c-person-detail--default" data-css="c-person-detail" data-js-module="person-detail" data-js-options='{}'>
<div class="grid__container">
<div class="grid__row">
<div class="person-detail__frame">
<h1 class="person-detail__personname">Prof. Dr. Irene Götz mit einem ganz langen Namen</h1>
<div class="person-detail__infoarea">
<figure class="c-figure--default person-detail__figure is-right" data-css="c-figure" data-js-module="overlay-handler">
<div class="figure__wrapper">
<picture class="c-picture--default
person-detail__picture" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source srcset="
https://placehold.co/300x300 300w ,
https://placehold.co/600x600 600w ,
https://placehold.co/1200x1200 1200w " sizes="
1vw
, (min-width: 768px) 33.33333vw " />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
<div class="person-detail__info">
<p class="person-detail__organization-unit">Einrichtung test dann mit sehr</p>
<p class="person-detail__function">Funktion</p>
<p class="person-detail__job-description">Aufgabengebiet</p>
<p class="person-detail__personinfo">Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="person-detail__contactarea">
<div class="person-detail__address">
<p class="person-detail__office">Dienststelle</p>
<p class="person-detail__room">Erdgeschoss, Raum 404 B</p>
<p class="person-detail__street">Martiusstr.2</p>
<p class="person-detail__plz-city">80333 München</p>
<p class="person-detail__linkarea">
<a target="_blank" href="http://www.zuendfunk.de" class="person-detail__link is-external is-external" title="Link öffnet in neuem Fenster">Wegbeschreibung</a>
</p>
</div>
<div class="person-detail__contact">
<p class="person-detail__linkarea"></p>
<a href="mailto:info@lmu.de" class="person-detail__link is-mail">Email schreiben</a>
</p>
<p class="person-detail__linkarea"></p>
<a target="_blank" href="https://www.lmu.de" class="person-detail__link is-external is-external" title="Link öffnet in neuem Fenster">persönliche Website</a>
</p>
<p class="person-detail__linkarea"></p>
<a href="tel:+4908923232314" class="person-detail__link is-phone">+49 (0)8956565656</a>
</p>
<p class="person-detail__linkarea"></p>
<a href="https://www.lmu.de" class="person-detail__link is-download">Weitere Informationen</a>
</p>
<p class="person-detail__phone">
+49(0)8933298657
</p>
<p class="person-detail__fax">
+49(0)8933298656
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>