Demo Section

Each variation will be presented in the following section.

Default -Übersichtsseite

Deine Checkliste für's Studium

Alle Termine und Meldungen auf einem Blick

19.4.2018 - 21.4.2018

Stelle deinen Antrag auf Genehmigung des Studienplatztauschs zum Sommersemester 2018 bis zum 19.4.2018

zur Meldung
-

Änderung der Studienordnung zum Sommersemester 2018

LMU Studienordnung 2018 PDF / 1.1MB / nicht barrierefrei

Alle Workspaces

RTE - Detailseite

Deine Checkliste für's Studium

Alle Termine und Meldungen auf einem Blick

19.4.2018 - 21.4.2018

Stelle deinen Antrag auf Genehmigung des Studienplatztauschs zum Sommersemester 2018 bis zum 19.4.2018

zur Meldung
-

Änderung der Studienordnung zum Sommersemester 2018

LMU Studienordnung 2018 PDF / 1.1MB / nicht barrierefrei

Alle Workspaces

Readme

workspaceNews (`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/workspace-news

Fields

`workspace-news.hbs`

Settings

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

Content

Parameter	Type	Description
content.workspaceNewsField	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
$workspace-news-my-custom-var	`0px`	Please add a description!

Modifier Classes

There are modifier classes you can add to c-workspace-news:

Modifier	Description
is-modifier	Please add a description!

Templates

workspace-news.hbs

<div class="c-workspace-news{{#if settings.workspaceNewsContextClass}}--{{settings.workspaceNewsContextClass}}{{else}}--default{{/if}}{{#if settings.workspaceNewsClasses}} {{settings.workspaceNewsClasses}}{{/if}}"
     data-css="c-workspace-news"
     data-js-module="workspace-news"{{#if settings.workspaceNewsJsOptions}}
     data-js-options='{{stringify settings.workspaceNewsJsOptions}}'{{/if}}>
     {{#if settings.workspaceNewsPlaceholder}}
	   <div class="grid__container">
		<div class="grid__row">
	{{/if}}
	   <div class="workspace-news__container {{#if content.linkButton}}workspace-news__show-linkbutton{{/if}}">
           <h2 class="workspace-news__main-headline">Deine Checkliste für's Studium</h2>
           <p class="workspace-news__main-subline">Alle Termine und Meldungen auf einem Blick</p>

           <div class="workspace-news__wrapper {{#if content.linkButton}}workspace-news__show-linkbuttonline{{/if}}">
             <ul class="workspace-news__list">
               <li class="workspace-news__listitem">
                 <div class="workspace-news__listitem-type"><div class="workspace-news__listitem-type-icon is-event"></div></div>
                 <div class="workspace-news__listitem-content">
                   <div class="workspace-news__listitem-date">19.4.2018 - 21.4.2018</div>
                   <div class="workspace-news__listitem-info">
                     <div class="workspace-news__listitem-title">Stelle deinen Antrag auf Genehmigung des Studienplatztauschs zum Sommersemester 2018 bis zum 19.4.2018</div>
                     <div class="workspace-news__listitem-link"><a class="is-internal" href="#">zur Meldung</a></div>
                   </div>
                 </div>
               </li>
               <li class="workspace-news__listitem">
                 <div class="workspace-news__listitem-type"><div class="workspace-news__listitem-type-icon is-news"></div></div>
                 <div class="workspace-news__listitem-content">
                   <div class="workspace-news__listitem-date">-</div>
                   <div class="workspace-news__listitem-info">
                     <div class="workspace-news__listitem-title">Änderung der Studienordnung zum Sommersemester 2018</div>
                     <div class="workspace-news__listitem-link"><a class="is-download" href="#">LMU Studienordnung 2018 <span class="downloadinfo">PDF / 1.1MB / nicht barrierefrei</span></a></div>
                   </div>
                 </div>
               </li>
             </ul>
           </div>
		    {{#if content.linkButton}}
		{{#with content.linkButton}}
		{{> link-button }}
		{{/with}}
		{{/if}}
       </div>
	{{#if settings.workspaceNewsPlaceholder}}
	</div>
	</div>
	{{/if}}
</div>

Data File

workspace-news.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default -Übersichtsseite"
			},
			"settings": {
				"workspaceNewsContextClass": "default",
				"workspaceNewsClasses": "",
				"workspaceNewsPlaceholder": "yes",
				"workspaceNewsJsOptions": {}
			},
			"content": {
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "workspace-news__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Workspaces"
					}
				}
			}
		},
		"rte": {
			"docs": {
				"variationName": "RTE - Detailseite"
			},
			"settings": {
				"workspaceNewsContextClass": "rte",
				"workspaceNewsClasses": "",
				"workspaceNewsJsOptions": {}
			},
			"content": {
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "workspace-news__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Workspaces"
					}
				}
			}
		}
	}
}

Styles

workspace-news.scss

/* ===================================================
component: workspace-news
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-workspace-news"] {
	background-color: $color-light;
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 0 auto;

	margin-bottom: 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

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

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

	@include print() {
		background-color: $color-white;
	}

  .workspace-news__container {

    position: relative;
	box-sizing: border-box;

	.workspace-news__show-linkbuttonline {
		padding-bottom: 10px;
		border-bottom: 1px solid $color-gray-border;
	}

	.workspace-news__cta {
		position: absolute;
		bottom: -47px;

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

	}
  }



  .workspace-news__main-headline {
    @include headline-h2-styles();
  }

  .workspace-news__listitem {
    @include clearfix();

		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid $color-gray-border;
		position: relative;

    @include bp($bp-mobile-p) {
      align-items: flex-start;
    }

    @include bp($bp-tablet-l) {
      align-items: baseline;
    }

    @include bp($bp-desktop-l) {
      align-items: baseline;
    }

    /*
    MODIFIERS
    ----------------------- */
    &:last-of-type {
      border-bottom: none;
    }

  }

  .workspace-news__listitem-type {

    width: 50px;

    @include bp($bp-mobile-p) {
    }

    @include bp($bp-tablet-l) {
      margin: auto;
    }

    @include bp($bp-desktop-l) {
      margin: auto;
	}

	@include print() {
		display: none;
	}

    .workspace-news__listitem-type-icon {
      /*
  		MODIFIERS
  		----------------------- */
  		&.is-event {
  			@include sprites-icon_event();
  		}

  		&.is-news {
  			@include sprites-icon_announcement();
  		}
    }
  }

	.workspace-news__listitem-content {
    	width: calc(100% - 51px);
    	display: flex;
    	flex-wrap: wrap;
    	align-items: flex-start;

    	@include bp($bp-tablet-l) {
      		margin: auto;
      		flex-wrap: nowrap;
      		align-items: baseline;
    	}

    	@include bp($bp-desktop-l) {
      		margin: auto;
      		flex-wrap: nowrap;
      		align-items: baseline;
    	}

    .workspace-news__listitem-info {

    	width: 100%;

      	@include bp($bp-tablet-l) {
        	width: 82%;
  		}

  		@include bp($bp-desktop-l) {
        	margin: auto;
        	flex-wrap: nowrap;
        	display: flex;
  		}
    }

    .workspace-news__listitem-date {

    	font-weight: bold;
        width: 85%;
        padding-left: 15px;
        text-align: left;

      @include bp($bp-tablet-l) {
        width: 18%;
        margin: auto;
		  }

		@include print() {
			padding-left: 0;
		}
    }

    .workspace-news__listitem-title {

    	width: 100%;
        padding-left: 15px;

    	@include bp($bp-desktop-l) {
    		width: 68%;
    		margin: auto;
		  }

		  @include print() {
			padding-left: 0;
		}
    }

    .workspace-news__listitem-link {

        width: 100%;
        padding-left: 15px;
        margin-top: 3px;

    	@include bp($bp-desktop-l) {
    		margin: auto;
    		width: 32%;
    		padding-left: 5%;
		}

		@include print() {
			padding-left: 0;
		}

      	a {
    		display: inline-block;
    		color: $color-green-hc-dark;
    		padding-left: 30px;
    		text-decoration: none;
    		font-family: $font-bold;
    		position: relative;
    		font-size: 1.5rem;
    		letter-spacing: .028rem;
    		line-height: (22/15);
    		transition: color $animation-duration-std $animation-easing-std;

    		@include print() {
				color: $color-black;
				text-decoration: underline;
    		}

    		@include hcm() {
    			padding-left: 0;
    		}

    		.no-touch & {

    			&:hover {
    				color: $color-black;

    				&::before,
    				&::after {
    					transform: translateX(5px);
    				}

    				&::before {
    					opacity: 0;
    				}

    				&::after {
    					opacity: 1;
    				}
    			}
    		}

    		&::before,
    		&::after {

    			@include print() {
    				display: none;
    			}

    			@include pseudo();

    			position: absolute;
    			left: 0;
    			transition: transform $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std;
    		}

    		&::after {
    			opacity: 0;
    		}

    		//modifier

    		&.is-external {

    			margin: 0;

    			&::before,
    			&::after {
    				top: 3px;
    			}

    			&::before {

    				@include sprites-icon-externalarrow-green100();

    			}

    			&::after {

    				@include sprites-icon-externalarrow-black();

    			}
    		}

    		&.is-internal {

    		margin: 0;

    			&::before,
    			&::after {
    				top: 3px;
    			}

    			&::before {

    				@include sprites-icon-arrow-green100();

    			}

    			&::after {

    				@include sprites-icon-arrow-black();

    			}
    		}

        	&.is-download {

    			margin: 0;

    			&::before,
    			&::after {
    				top: 3px;
    			}

    			&::before {

    				@include sprites-icon-download-green100();

    			}

    			&::after {

    				@include sprites-icon-download-black();

    			}

          		.downloadinfo {
           			font-size: 1.2rem;
            		color: $color-gray;

            		&::before {
              			content: "\A";
              			white-space: pre;
            		}
          		}
    		}
    	}
	}

  }
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-workspace-news--default {

	.workspace-news__container {

		padding: 30px 0;

		/*
		Modifiers
		----------------------- */
		&.is-collapsed {
			max-width: 100%;
		}

		@include bp($bp-tablet-p) {
		  padding: 55px 0;
		}

		@include bp($bp-desktop-m) {
		  padding: 60px 0;
		}

		&.workspace-news__show-linkbutton {
			margin-bottom: 80px;
			padding: 30px 0 0 0;

			@include bp($bp-tablet-p) {
				margin-bottom: 110px;
				padding: 55px 0 0 0;
			  }

			  @include bp($bp-desktop-m) {
				padding: 60px 0 0 0;
			  }

			  @include print() {
				margin-bottom: 0;
			}
		}

		.workspace-news__cta {
			right: 0;
		}


	  }

	  .workspace-news__main-subline {
			font-family: $font-regular;
			font-size: 1.5rem;
			line-height: (22/15);
			letter-spacing: .025rem;
			padding-bottom: 40px;
			color: $color-dark;

			@include bp($bp-tablet-p) {
				font-size: 1.6rem;
				line-height: (24/16);
				letter-spacing: .025rem;
			}
	}

}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-workspace-news--rte {
	@include rte-dimensions();
	margin-bottom: 60px;

	h2 {
		margin: 0px;
		width: 100%;
	}

	.workspace-news__container {
		padding: 25px 15px;
		margin: 0 auto;
		width: 100%;

		@include bp($bp-tablet-p) {
        	padding: 30px 30px;
		}

		@include bp($bp-desktop-m) {
			padding: 47px 30px;
		}

		&.workspace-news__show-linkbutton {
			margin-bottom: 80px;
			padding: 25px 15px 0 15px;

			@include bp($bp-tablet-p) {
				margin-bottom: 100px;
				padding: 30px 30px 0 30px;
			}
			@include bp($bp-desktop-m) {
				padding: 47px 30px 0 30px;
			}
			@include print() {
				margin-bottom: 0;
			}
		}

		.workspace-news__listitem-link {

			a {
				color: $color-green-hc-dark;

				&.is-external, &.is-mail, &.is-internal, &.is-phone, &.is-download {
					color: $color-green-hc-dark;
				}
			}

		}

		.workspace-news__cta {
			right: 15px;
			@include bp($bp-tablet-p) {
				right: 30px;
			}
		}
	}

	.workspace-news__main-subline {
		@include content-p-styles();
	}

	.workspace-news__list {
		margin: 0px;
		width: 100%;
		list-style: none;

		li {
			padding-left: 0px;
			margin-top: 0;

			&::before {
				width: 0px;
				height: 0px;
			}
		}
	}
}

Scripts

workspace-news.js

/**
 * Description of WorkspaceNews.
 * Class properties and decorators are supported.
 *
 * @module WorkspaceNews
 * @version v1.0.0
 *
 * @author your_name
 */

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

class WorkspaceNews extends Component {
	/**
	* Class Properties
	*/

	/**
	 * 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 WorkspaceNews mounted!');
	}

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

export default WorkspaceNews;

HTML Output

Default -Übersichtsseite

<div class="c-workspace-news--default" data-css="c-workspace-news" data-js-module="workspace-news" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="workspace-news__container workspace-news__show-linkbutton">
				<h2 class="workspace-news__main-headline">Deine Checkliste für's Studium</h2>
				<p class="workspace-news__main-subline">Alle Termine und Meldungen auf einem Blick</p>
				<div class="workspace-news__wrapper workspace-news__show-linkbuttonline">
					<ul class="workspace-news__list">
						<li class="workspace-news__listitem">
							<div class="workspace-news__listitem-type">
								<div class="workspace-news__listitem-type-icon is-event"></div>
							</div>
							<div class="workspace-news__listitem-content">
								<div class="workspace-news__listitem-date">19.4.2018 - 21.4.2018</div>
								<div class="workspace-news__listitem-info">
									<div class="workspace-news__listitem-title">Stelle deinen Antrag auf Genehmigung des Studienplatztauschs zum Sommersemester 2018 bis zum 19.4.2018</div>
									<div class="workspace-news__listitem-link"><a class="is-internal" href="#">zur Meldung</a></div>
								</div>
							</div>
						</li>
						<li class="workspace-news__listitem">
							<div class="workspace-news__listitem-type">
								<div class="workspace-news__listitem-type-icon is-news"></div>
							</div>
							<div class="workspace-news__listitem-content">
								<div class="workspace-news__listitem-date">-</div>
								<div class="workspace-news__listitem-info">
									<div class="workspace-news__listitem-title">Änderung der Studienordnung zum Sommersemester 2018</div>
									<div class="workspace-news__listitem-link"><a class="is-download" href="#">LMU Studienordnung 2018 <span class="downloadinfo">PDF / 1.1MB / nicht barrierefrei</span></a></div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="c-link-button--default workspace-news__cta" data-css="c-link-button">
					<a class="link-button__link" href="#">Alle Workspaces</a>
				</div>
			</div>
		</div>
	</div>
</div>

RTE - Detailseite

<div class="c-workspace-news--rte" data-css="c-workspace-news" data-js-module="workspace-news" data-js-options='{}'>
	<div class="workspace-news__container workspace-news__show-linkbutton">
		<h2 class="workspace-news__main-headline">Deine Checkliste für's Studium</h2>
		<p class="workspace-news__main-subline">Alle Termine und Meldungen auf einem Blick</p>
		<div class="workspace-news__wrapper workspace-news__show-linkbuttonline">
			<ul class="workspace-news__list">
				<li class="workspace-news__listitem">
					<div class="workspace-news__listitem-type">
						<div class="workspace-news__listitem-type-icon is-event"></div>
					</div>
					<div class="workspace-news__listitem-content">
						<div class="workspace-news__listitem-date">19.4.2018 - 21.4.2018</div>
						<div class="workspace-news__listitem-info">
							<div class="workspace-news__listitem-title">Stelle deinen Antrag auf Genehmigung des Studienplatztauschs zum Sommersemester 2018 bis zum 19.4.2018</div>
							<div class="workspace-news__listitem-link"><a class="is-internal" href="#">zur Meldung</a></div>
						</div>
					</div>
				</li>
				<li class="workspace-news__listitem">
					<div class="workspace-news__listitem-type">
						<div class="workspace-news__listitem-type-icon is-news"></div>
					</div>
					<div class="workspace-news__listitem-content">
						<div class="workspace-news__listitem-date">-</div>
						<div class="workspace-news__listitem-info">
							<div class="workspace-news__listitem-title">Änderung der Studienordnung zum Sommersemester 2018</div>
							<div class="workspace-news__listitem-link"><a class="is-download" href="#">LMU Studienordnung 2018 <span class="downloadinfo">PDF / 1.1MB / nicht barrierefrei</span></a></div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default workspace-news__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Workspaces</a>
		</div>
	</div>
</div>

WORKSPACE-NEWS (Standard Module )

src/app/shared/components/workspace-news/templates

Demo Section

Default -Übersichtsseite

Deine Checkliste für's Studium

RTE - Detailseite

Deine Checkliste für's Studium

Readme

workspaceNews (`component`)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

`workspace-news.hbs`

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

workspace-news.hbs

Data File

workspace-news.hjson

Styles

workspace-news.scss

Scripts

workspace-news.js

HTML Output

Default -Übersichtsseite

RTE - Detailseite

Wonach suchst du?

WORKSPACE-NEWS (Standard Module )

src/app/shared/components/workspace-news/templates

Demo Section

Default -Übersichtsseite

Deine Checkliste für's Studium

RTE - Detailseite

Deine Checkliste für's Studium

Readme

workspaceNews (component)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

workspace-news.hbs

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

workspace-news.hbs

Data File

workspace-news.hjson

Styles

workspace-news.scss

Scripts

workspace-news.js

HTML Output

Default -Übersichtsseite

RTE - Detailseite

Wonach suchst du?

workspaceNews (`component`)

`workspace-news.hbs`