NEWSBOARD (component )
src/app/shared/components/newsboard/templates
Demo Section
Each variation will be presented in the following section.
Readme
newsboard (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/newsboard
Fields
newsboard.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.newsboardClasses | String | '' |
Modifier classes for component |
| settings.newsboardContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.newsboardField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $newsboard-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-newsboard:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
newsboard.hbs
<div class="c-newsboard{{#if settings.newsboardContextClass}}--{{settings.newsboardContextClass}}{{else}}--default{{/if}}{{#if settings.newsboardClasses}} {{settings.newsboardClasses}}{{/if}}" data-css="c-newsboard">
{{#if content.headline}}
<h2 class="newsboard__headline">{{content.headline}}</h2>
{{/if}}
<div id="{{settings.selectorId}}"
class="newsboard__vue"
data-config='{
"thema": "{{content.thema}}",
"filterClassPage": "{{content.filterClassPage}}",
"jsonUrl": "{{#if (prod)}}{{content.prodJsonUrl}}{{else}}{{content.devJsonUrl}}{{/if}}",
"enableDateFilter": "{{content.enableDateFilter}}",
"frontendPath": "{{content.frontendPath}}",
"lng": "{{content.lng}}",
"archive": {{content.archive}},
{{#if content.itemsPerPage}}
"itemsPerPage": {{content.itemsPerPage}},
{{/if}}
{{#if content.pastYears}}
"pastYears": {{content.pastYears}},
{{/if}}
{{#if content.mandatoryTopics}}
"mandatoryTopics": {{{json content.mandatoryTopics}}},
{{/if}}
"topics": {{{json content.topics}}}
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("{{settings.selectorId}}");
})
</script>
<script src="{{@root.assets}}scripts/newsboard.bundle.vue_3.js" defer></script>
Data File
newsboard.hjson
{
"variations": {
"news": {
"docs": {
"variationName": "News"
},
"settings": {
"newsboardContextClass": "default",
"newsboardClasses": "",
"selectorId": "newsboard-app-1"
},
"content": {
"headline": "Newsboard News App",
"filterClassPage": "is-lpage",
"prodJsonUrl": "/assets/mocks/newsboard/news/data.json",
"devJsonUrl": "/api/newsboard/news",
"thema": "news",
"enableDateFilter": true,
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "DE",
"itemsPerPage": 5,
"pastYears": 2,
"archive": false,
"topics": [
{
"id":"21632",
"tName":"Marketing"
},
{
"id":"21568",
"tName":"Finanzen"
}
]
}
},
"event": {
"docs": {
"variationName": "Events (archive)"
},
"settings": {
"newsboardContextClass": "default",
"newsboardClasses": "",
"selectorId": "newsboard-app-2"
},
"content" : {
"headline": "Newsboard Events App",
"filterClassPage": "is-lpage",
"prodJsonUrl": "/assets/mocks/newsboard/events/data.json",
"devJsonUrl": "/api/newsboard/events",
"thema": "events",
"noHitTxt": "Keine Events verfügbar",
"enableDateFilter": true,
"frontendPath": "https://cms-cdn.lmu.de/assets",
"itemsPerPage": 5,
"archive": true,
"lng": "EN",
"topics": [
{
"id":"21185",
"tName":"Marketing"
},
{
"id":"21184",
"tName":"Finanzen"
}
],
"dateTill": "till"
}
},
"event_past_year": {
"docs": {
"variationName": "Events (pastYear = 2)"
},
"settings": {
"newsboardContextClass": "default",
"newsboardClasses": "",
"selectorId": "newsboard-app-3"
},
"content" : {
"headline": "Newsboard Events App 2 Past Year",
"filterClassPage": "is-lpage",
"prodJsonUrl": "/assets/mocks/newsboard/events/data.json",
"devJsonUrl": "/api/newsboard/events",
"thema": "events",
"noHitTxt": "Keine Events verfügbar",
"enableDateFilter": true,
"frontendPath": "https://cms-cdn.lmu.de/assets",
"itemsPerPage": 5,
"archive": false,
"pastYears": 2,
"lng": "EN",
"topics": [
{
"id":"21185",
"tName":"Marketing"
},
{
"id":"21184",
"tName":"Finanzen"
}
],
"dateTill": "till"
}
},
"event_all": {
"docs": {
"variationName": "Events (pastYear = false)"
},
"settings": {
"newsboardContextClass": "default",
"newsboardClasses": "",
"selectorId": "newsboard-app-4"
},
"content" : {
"headline": "Newsboard Events App",
"filterClassPage": "is-lpage",
"prodJsonUrl": "/assets/mocks/newsboard/events/data.json",
"devJsonUrl": "/api/newsboard/events",
"thema": "events",
"noHitTxt": "Keine Events verfügbar",
"enableDateFilter": true,
"frontendPath": "https://cms-cdn.lmu.de/assets",
"itemsPerPage": 5,
"archive": false,
"lng": "EN",
"topics": [
{
"id":"21185",
"tName":"Marketing"
},
{
"id":"21184",
"tName":"Finanzen"
}
],
"dateTill": "till"
}
},
"news-detail": {
"docs": {
"variationName": "News Detail"
},
"settings": {
"newsboardContextClass": "rte",
"newsboardClasses": "",
"selectorId": "newsboard-app-5"
},
"content": {
"headline": "News App Detail",
"filterClassPage": "is-rte",
"prodJsonUrl": "/assets/mocks/newsboard/news/data.json",
"devJsonUrl": "/api/newsboard/news",
"thema": "news",
"enableDateFilter": true,
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "DE",
"itemsPerPage": 5,
"pastYears": 2,
"archive": false,
"topics": [
{
"id":"21632",
"tName":"Marketing"
},
{
"id":"21568",
"tName":"Finanzen"
}
]
}
}
}
}
Styles
newsboard.scss
/* ===================================================
component: newsboard
=================================================== */
/*
Animation
----------------------- */
@include keyframes(newsboardBoxAppear) {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
48% {
opacity: 1;
}
64% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-newsboard"] {
clear: both;
display: inline-block;
position: relative;
width: 100%;
margin: 0 auto 60px;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
margin-bottom: 100px;
}
@include bp(1920px) {
margin-bottom: 120px;
}
.newsboard__headline {
@include headline-h2-styles();
}
.newsboard__load-init-loader {
@include centering(h);
position: relative;
top: 0px;
display: flex;
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;
&.is-loading {
opacity: 1;
}
}
.newsboard__load-init-loader-box {
display: block;
margin: 10px;
border: 1em solid $color-green;
opacity: 0;
/*
MODIFIERS
----------------------- */
&.is-one {
animation: newsboardBoxAppear 2s linear infinite;
}
&.is-two {
animation: newsboardBoxAppear 2s linear .3s infinite;
}
&.is-three {
animation: newsboardBoxAppear 2s linear .62s infinite;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-newsboard--default {
}
.c-newsboard--lpage {
.newsboard__headline {
@include bp($bp-tablet-p) {
@include grid-column-width(12);
@include grid-push-h(0);
}
}
}
.c-newsboard--rte {
@include rte-dimensions();
margin-bottom: 60px;
.newsboard__headline {
width: 100%;
flex: 0 0 100%;
margin-left: 0px;
}
}
HTML Output
News
<div class="c-newsboard--default" data-css="c-newsboard">
<h2 class="newsboard__headline">Newsboard News App</h2>
<div id="newsboard-app-1" class="newsboard__vue" data-config='{
"thema": "news",
"filterClassPage": "is-lpage",
"jsonUrl": "/assets/mocks/newsboard/news/data.json",
"enableDateFilter": "true",
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "DE",
"archive": false,
"itemsPerPage": 5,
"pastYears": 2,
"topics": [{"id":"21632","tName":"Marketing"},{"id":"21568","tName":"Finanzen"}]
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("newsboard-app-1");
})
</script>
<script src="./scripts/newsboard.bundle.vue_3.js" defer></script>Events (archive)
<div class="c-newsboard--default" data-css="c-newsboard">
<h2 class="newsboard__headline">Newsboard Events App</h2>
<div id="newsboard-app-2" class="newsboard__vue" data-config='{
"thema": "events",
"filterClassPage": "is-lpage",
"jsonUrl": "/assets/mocks/newsboard/events/data.json",
"enableDateFilter": "true",
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "EN",
"archive": true,
"itemsPerPage": 5,
"topics": [{"id":"21185","tName":"Marketing"},{"id":"21184","tName":"Finanzen"}]
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("newsboard-app-2");
})
</script>
<script src="./scripts/newsboard.bundle.vue_3.js" defer></script>Events (pastYear = 2)
<div class="c-newsboard--default" data-css="c-newsboard">
<h2 class="newsboard__headline">Newsboard Events App 2 Past Year</h2>
<div id="newsboard-app-3" class="newsboard__vue" data-config='{
"thema": "events",
"filterClassPage": "is-lpage",
"jsonUrl": "/assets/mocks/newsboard/events/data.json",
"enableDateFilter": "true",
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "EN",
"archive": false,
"itemsPerPage": 5,
"pastYears": 2,
"topics": [{"id":"21185","tName":"Marketing"},{"id":"21184","tName":"Finanzen"}]
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("newsboard-app-3");
})
</script>
<script src="./scripts/newsboard.bundle.vue_3.js" defer></script>Events (pastYear = false)
<div class="c-newsboard--default" data-css="c-newsboard">
<h2 class="newsboard__headline">Newsboard Events App</h2>
<div id="newsboard-app-4" class="newsboard__vue" data-config='{
"thema": "events",
"filterClassPage": "is-lpage",
"jsonUrl": "/assets/mocks/newsboard/events/data.json",
"enableDateFilter": "true",
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "EN",
"archive": false,
"itemsPerPage": 5,
"topics": [{"id":"21185","tName":"Marketing"},{"id":"21184","tName":"Finanzen"}]
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("newsboard-app-4");
})
</script>
<script src="./scripts/newsboard.bundle.vue_3.js" defer></script>News Detail
<div class="c-newsboard--rte" data-css="c-newsboard">
<h2 class="newsboard__headline">News App Detail</h2>
<div id="newsboard-app-5" class="newsboard__vue" data-config='{
"thema": "news",
"filterClassPage": "is-rte",
"jsonUrl": "/assets/mocks/newsboard/news/data.json",
"enableDateFilter": "true",
"frontendPath": "https://cms-cdn.lmu.de/assets",
"lng": "DE",
"archive": false,
"itemsPerPage": 5,
"pastYears": 2,
"topics": [{"id":"21632","tName":"Marketing"},{"id":"21568","tName":"Finanzen"}]
}'>
<span class="newsboard__load-init-loader is-loading">
<span class="newsboard__load-init-loader-box is-one"></span>
<span class="newsboard__load-init-loader-box is-two"></span>
<span class="newsboard__load-init-loader-box is-three"></span>
</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.LmuNewsboard.init("newsboard-app-5");
})
</script>
<script src="./scripts/newsboard.bundle.vue_3.js" defer></script>