REmoving things.
This commit is contained in:
calcu1on
@@ -1 +0,0 @@
|
||||
.DS_STORE
|
||||
@@ -1,21 +0,0 @@
|
||||
name: Accordion
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
accordionType:
|
||||
type: string
|
||||
title: Accordion Type
|
||||
description: 'The type of accordion.'
|
||||
slots:
|
||||
headline:
|
||||
title: Headline
|
||||
required: true
|
||||
description: This is the headline for an accordion.
|
||||
body:
|
||||
title: Body
|
||||
required: true
|
||||
description: This is the body for an accordion.
|
||||
libraryOverrides:
|
||||
dependencies:
|
||||
- core/drupal
|
||||
- core/once
|
||||
@@ -1 +0,0 @@
|
||||
@charset "UTF-8";.ib-accordion__item{margin:10px 0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.ib-accordion__headline{background-color:#efefef;padding:20px;cursor:pointer;display:flex;align-items:center}.ib-accordion__headline h1,.ib-accordion__headline h2,.ib-accordion__headline h3,.ib-accordion__headline h4,.ib-accordion__headline h5,.ib-accordion__headline h6{font-size:18px!important;margin:0!important;color:#3272b3;--bs-heading-color:#3272b3}.ib-accordion__headline::before{display:flex;float:left;content:"+";font-size:30px;font-weight:700;justify-content:center;align-items:center;background-color:var(--site-primary);border-radius:100%;width:30px;height:30px;color:#fff;margin-right:10px}.ib-accordion__body{padding:0 20px;max-height:0;overflow:hidden;will-change:max-height;transition:.25s ease-out;align-items:center}.ib-accordion__body>:first-child{margin:20px 0}.ib-accordion__active .ib-accordion__headline::before{content:"−"}
|
||||
@@ -1,38 +0,0 @@
|
||||
(function (Drupal, once) {
|
||||
Drupal.behaviors.accordion = {
|
||||
attach(context) {
|
||||
const accordions = once('accordion', '.ib-accordion__item', context);
|
||||
if (!accordions) {
|
||||
return;
|
||||
}
|
||||
|
||||
const openAccordion = (accordion) => {
|
||||
const content = accordion.querySelector(".ib-accordion__body");
|
||||
accordion.classList.add("ib-accordion__active");
|
||||
content.style.maxHeight = content.scrollHeight + "px";
|
||||
content.setAttribute('aria-expanded', true);
|
||||
}
|
||||
|
||||
const closeAccordion = (accordion) => {
|
||||
const content = accordion.querySelector(".ib-accordion__body");
|
||||
accordion.classList.remove("ib-accordion__active");
|
||||
content.style.maxHeight = null;
|
||||
content.setAttribute('aria-expanded', false)
|
||||
}
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
const headline = accordion.querySelector(".ib-accordion__headline");
|
||||
const content = accordion.querySelector(".ib-accordion__body");
|
||||
|
||||
headline.onclick = () => {
|
||||
if (content.style.maxHeight) {
|
||||
closeAccordion(accordion);
|
||||
} else {
|
||||
accordions.forEach((accordion) => closeAccordion(accordion));
|
||||
openAccordion(accordion);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
}(Drupal, once));
|
||||
@@ -1,59 +0,0 @@
|
||||
.ib-accordion {
|
||||
|
||||
&__item {
|
||||
margin: 10px 0;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
&__headline {
|
||||
background-color: #EFEFEF;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 18px !important;
|
||||
margin: 0 !important;
|
||||
color: #3272b3;
|
||||
--bs-heading-color: #3272b3;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: flex;
|
||||
float: left;
|
||||
content: "\002B";
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--site-primary);
|
||||
border-radius: 100%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 0 20px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
will-change: max-height;
|
||||
transition: all 0.25s ease-out;
|
||||
align-items: center;
|
||||
|
||||
> :first-child {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__active {
|
||||
.ib-accordion__headline::before {
|
||||
content: "\2212";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
{% set classes = [
|
||||
'ib-accordion__item',
|
||||
'ib-accordion__' ~ type|clean_class,
|
||||
] %}
|
||||
|
||||
{% set ariaLabel = 'accordion-' ~ random(0, 10000) %}
|
||||
<div class="{{ classes|join(" ") }}">
|
||||
<div class="ib-accordion__headline">
|
||||
{% block headline %}{% endblock %}
|
||||
</div>
|
||||
<div class="ib-accordion__body" aria-labelledby="{{ ariaLabel }}" aria-expanded="false">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,21 +0,0 @@
|
||||
name: Banner
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
bannerText:
|
||||
type: string
|
||||
title: Banner Text
|
||||
description: This is the text for the banner.
|
||||
bannerImage:
|
||||
type: string
|
||||
title: Banner Image
|
||||
description: This is the image for the banner.
|
||||
bannerType:
|
||||
type: string
|
||||
title: Banner Type
|
||||
description: The type of banner.
|
||||
enum: ["full", "thin"]
|
||||
addClasses:
|
||||
type: string
|
||||
title: Additonal Classes
|
||||
description: String of additional classses to add to the banner.
|
||||
@@ -1 +0,0 @@
|
||||
.banner__thin{height:192px}.banner__thin .banner__text{position:relative;top:50%;transform:translateY(-50%)}.banner-image{background-size:cover;background-position:center;background-repeat:no-repeat}
|
||||
@@ -1,21 +0,0 @@
|
||||
.banner {
|
||||
|
||||
&__thin {
|
||||
height: 192px;
|
||||
|
||||
.banner__text {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{%
|
||||
set classes = [
|
||||
'banner',
|
||||
'banner__' ~ bannerType|clean_class,
|
||||
]
|
||||
%}
|
||||
|
||||
{% if addClasses %}
|
||||
{% set classes = classes|merge([addClasses]) %}
|
||||
{% endif %}
|
||||
|
||||
<div class="{{ classes|join(" ") }}" style="background-image: url({{ bannerImage }})">
|
||||
<div class="banner__text container">
|
||||
{{ include('lawa:heading', { level: '1', headingText: bannerText, color: textColor }, with_context = false) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
name: Heading
|
||||
props:
|
||||
type: object
|
||||
required:
|
||||
- level
|
||||
properties:
|
||||
level:
|
||||
type: string
|
||||
title: Heading Level
|
||||
description: 'The level of the heading, i.e. h1'
|
||||
enum: ['1', '2', '3', '4', '5', '6']
|
||||
headingText:
|
||||
type: string
|
||||
title: Heading Text
|
||||
description: 'The text within the heading.'
|
||||
color:
|
||||
type: string
|
||||
title: Heading Text Color
|
||||
description: The color of the text for the heading.
|
||||
enum: ['primary', 'secondary', 'white', 'black', 'neutral', 'teal']
|
||||
addClasses:
|
||||
type: string
|
||||
title: Classes
|
||||
description: Additional classes for the heading.
|
||||
subheading:
|
||||
type: string
|
||||
title: Subheading
|
||||
description: Text that can appear under the heading.
|
||||
@@ -1 +0,0 @@
|
||||
.heading{margin:0}.heading__primary{color:#1d53a3}.heading__white{color:#fff}.heading__black{color:#000}.heading__neutral{color:#121212}.heading__teal{color:#01b9b6}
|
||||
@@ -1,27 +0,0 @@
|
||||
@import 'src/sass/partials/variables';
|
||||
|
||||
.heading {
|
||||
|
||||
margin: 0;
|
||||
|
||||
&__primary {
|
||||
color: $primary_navy;
|
||||
}
|
||||
|
||||
&__white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&__black {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&__neutral {
|
||||
color: $neutrals;
|
||||
}
|
||||
|
||||
&__teal {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
{% set classes = ['heading'] %}
|
||||
|
||||
{% if color %}
|
||||
{% set classes = classes|merge(['heading__' ~ color|clean_class]) %}
|
||||
{% endif %}
|
||||
|
||||
{% if addClasses %}
|
||||
{% set classes = classes|merge([addClasses])%}
|
||||
{% endif %}
|
||||
|
||||
{% set heading = headingText.0['#context']['value']|default(headingText) %}
|
||||
|
||||
{% if ariaLabel %}
|
||||
<h{{ level }} id="{{ ariaLabel }}" class="{{ classes|join(" ")}}">{{ heading }}</h{{ level}}>
|
||||
{% else %}
|
||||
<h{{ level }} class="{{ classes|join(" ")}}">
|
||||
{{ heading }}
|
||||
{% if subheading %}
|
||||
<br><em>{{ subheading }}</em>
|
||||
{% endif %}
|
||||
</h{{ level}}>
|
||||
{% endif %}
|
||||
@@ -1,42 +0,0 @@
|
||||
name: Ping Pong
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
mediaAlign:
|
||||
type: string
|
||||
title: Media Alignment
|
||||
description: 'Which side to put media on.'
|
||||
layout:
|
||||
type: string
|
||||
title: Layout
|
||||
description: 'The layout widths'
|
||||
enum: ['50-50', '33-66', '66-33', '25-75', '75-25']
|
||||
bgColor:
|
||||
type: string
|
||||
title: Color
|
||||
description: 'The background color.'
|
||||
slots:
|
||||
headline:
|
||||
title: Headline
|
||||
description: This is the headline for the text block.
|
||||
body:
|
||||
title: Body
|
||||
description: This is the body for the text block.
|
||||
cta:
|
||||
title: CTA
|
||||
description: The CTA link.
|
||||
media:
|
||||
title: Media
|
||||
description: The media item(s).
|
||||
|
||||
libraryOverrides:
|
||||
css:
|
||||
theme:
|
||||
../../libraries/swiper-bundle.min.css: { minified: true }
|
||||
ping-pong.css: { }
|
||||
js:
|
||||
../../libraries/swiper-bundle.min.js: { minified: true }
|
||||
ping-pong.js: { }
|
||||
dependencies:
|
||||
- core/drupal
|
||||
- core/once
|
||||
@@ -1,116 +0,0 @@
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ping-pong-wrapper {
|
||||
/* max-height: 600px; */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ping-pong {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ping-pong__info {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
color: var(--site-platinum, #fff);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.ping-pong__info-text p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ping-pong__info-text {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ping-pong__info-inner {
|
||||
width: 65%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.ping-pong__info-inner {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.ping-pong__info h2 {
|
||||
font-size: 3rem;
|
||||
color: var(--site-white, #fff);
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ping-pong.right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.ping-pong > div {
|
||||
flex: 1;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.ping-pong > div {
|
||||
flex: 1 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.field--name-field-ping-pong-cta a {
|
||||
background: var(--site-secondary, #fff);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
transition: background .5s ease;
|
||||
cursor: pointer;
|
||||
color: var(--site-white);
|
||||
}
|
||||
|
||||
.field--name-field-ping-pong-cta a:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/** slider styles */
|
||||
.ping-pong .swiper-slide img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
/*.ping-pong .slide.active img { */
|
||||
/* display: block; */
|
||||
/* opacity: 1; */
|
||||
/* visibility: visible; */
|
||||
/* transition: all .5s ease-in-out; */
|
||||
/*} */
|
||||
|
||||
/*.ping-pong .slide.hide img { */
|
||||
/* opacity: 0; */
|
||||
/* visibility: hidden; */
|
||||
/* transition: all .5s ease-in-out; */
|
||||
/*} */
|
||||
|
||||
/*.ping-pong .slide img { */
|
||||
/* display: none; */
|
||||
/* visibility: hidden; */
|
||||
/* opacity: 0; */
|
||||
/* transition: all .5s ease-in-out; */
|
||||
/*} */
|
||||
|
||||
/*.ping-pong ul.slides { */
|
||||
/* list-style-type: none; */
|
||||
/* padding: 0; */
|
||||
/* margin: 0; */
|
||||
/* max-height: 100%; */
|
||||
/*} */
|
||||
@@ -1,61 +0,0 @@
|
||||
(function (Drupal, once) {
|
||||
Drupal.behaviors.pingPongSlider = {
|
||||
|
||||
attach: function (context, settings) {
|
||||
let sliders = once('pingPongSlider', '.swiper', context);
|
||||
sliders.forEach((slider) => {
|
||||
const swiper = new Swiper(slider, {
|
||||
// Optional parameters
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
},
|
||||
|
||||
// If we need pagination
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
// And if we need scrollbar
|
||||
scrollbar: {
|
||||
el: '.swiper-scrollbar',
|
||||
},
|
||||
});
|
||||
// // get the slides
|
||||
// let slides = slider.querySelectorAll('.slide');
|
||||
// slides[0].classList.add("active");
|
||||
// if (slides.length <= 1) {
|
||||
// return;
|
||||
// }
|
||||
// changeSlide(slider);
|
||||
});
|
||||
|
||||
// function changeSlide(sliderDiv, loop = 1) {
|
||||
// setTimeout(() => {
|
||||
// let slideCount = sliderDiv.querySelectorAll('.slide').length;
|
||||
// let activeSlide = sliderDiv.querySelector('.slide.active');
|
||||
// let nextSlide = activeSlide.nextElementSibling;
|
||||
// if (loop == slideCount) {
|
||||
// nextSlide = sliderDiv.querySelectorAll('.slide')[0];
|
||||
// return;
|
||||
// // get the first slide
|
||||
// }
|
||||
// else {
|
||||
// loop++;
|
||||
// activeSlide.classList.toggle('active');
|
||||
// nextSlide.classList.toggle('active');
|
||||
// changeSlide(sliderDiv, loop);
|
||||
// }
|
||||
// }, 10000);
|
||||
// }
|
||||
}
|
||||
|
||||
};
|
||||
})(Drupal, once);
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
{#
|
||||
* Component variables
|
||||
*
|
||||
* props:
|
||||
* layout
|
||||
* media_alignment
|
||||
* background_color
|
||||
*
|
||||
* slots
|
||||
* headline
|
||||
* body
|
||||
* cta
|
||||
* media
|
||||
*
|
||||
#}
|
||||
{% set classes = [
|
||||
'ping-pong',
|
||||
mediaAlign|clean_class
|
||||
] %}
|
||||
{{ title_prefix }}
|
||||
{{ title_suffix }}
|
||||
<div {{ attributes.addClass(classes) }} style="background-color: {{ bgColor }}">
|
||||
<div class="ping-pong__media">
|
||||
{% block media %}{% endblock %}
|
||||
</div>
|
||||
<div class="ping-pong__info">
|
||||
<div class="ping-pong__info-inner">
|
||||
<div class="ping-pong__info-headline">
|
||||
{% block headline %}{% endblock %}
|
||||
</div>
|
||||
<div class="ping-pong__info-text">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<div class="ping-pong__info-cta btn-primary">
|
||||
{% block cta %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
uuid: 62221ff8-bff9-4615-b8b1-b5387c5c5fb8
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies: { }
|
||||
id: ping_pong
|
||||
label: 'Ping Pong'
|
||||
revision: false
|
||||
description: 'A ping pong component.'
|
||||
@@ -1,66 +0,0 @@
|
||||
uuid: cec1a040-81f5-465e-93b0-7f8c1b329a3b
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.field.block_content.ping_pong.field_ping_pong_background_color
|
||||
- field.field.block_content.ping_pong.field_ping_pong_body
|
||||
- field.field.block_content.ping_pong.field_ping_pong_cta
|
||||
- field.field.block_content.ping_pong.field_ping_pong_layout
|
||||
- field.field.block_content.ping_pong.field_ping_pong_media_alignment
|
||||
- field.field.block_content.ping_pong.field_ping_pong_media_items
|
||||
module:
|
||||
- color_field
|
||||
- link
|
||||
- media_library
|
||||
- text
|
||||
id: block_content.ping_pong.default
|
||||
targetEntityType: block_content
|
||||
bundle: ping_pong
|
||||
mode: default
|
||||
content:
|
||||
field_ping_pong_background_color:
|
||||
type: color_field_widget_box
|
||||
weight: 1
|
||||
region: content
|
||||
settings:
|
||||
default_colors: '#ac725e,#d06b64,#f83a22,#fa573c,#ff7537,#ffad46,#42d692,#16a765,#7bd148,#b3dc6c,#fbe983'
|
||||
third_party_settings: { }
|
||||
field_ping_pong_body:
|
||||
type: text_textarea
|
||||
weight: 5
|
||||
region: content
|
||||
settings:
|
||||
rows: 5
|
||||
placeholder: ''
|
||||
third_party_settings: { }
|
||||
field_ping_pong_cta:
|
||||
type: link_default
|
||||
weight: 26
|
||||
region: content
|
||||
settings:
|
||||
placeholder_url: ''
|
||||
placeholder_title: ''
|
||||
third_party_settings: { }
|
||||
field_ping_pong_layout:
|
||||
type: options_select
|
||||
weight: 2
|
||||
region: content
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
field_ping_pong_media_alignment:
|
||||
type: options_select
|
||||
weight: 3
|
||||
region: content
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
field_ping_pong_media_items:
|
||||
type: media_library_widget
|
||||
weight: 4
|
||||
region: content
|
||||
settings:
|
||||
media_types: { }
|
||||
third_party_settings: { }
|
||||
hidden:
|
||||
info: true
|
||||
@@ -1,75 +0,0 @@
|
||||
uuid: ed5314c0-a437-46a6-8f0a-8a09370c01b2
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.field.block_content.ping_pong.field_ping_pong_background_color
|
||||
- field.field.block_content.ping_pong.field_ping_pong_body
|
||||
- field.field.block_content.ping_pong.field_ping_pong_cta
|
||||
- field.field.block_content.ping_pong.field_ping_pong_layout
|
||||
- field.field.block_content.ping_pong.field_ping_pong_media_alignment
|
||||
- field.field.block_content.ping_pong.field_ping_pong_media_items
|
||||
module:
|
||||
- color_field
|
||||
- link
|
||||
- options
|
||||
- text
|
||||
id: block_content.ping_pong.default
|
||||
targetEntityType: block_content
|
||||
bundle: ping_pong
|
||||
mode: default
|
||||
content:
|
||||
field_ping_pong_background_color:
|
||||
type: color_field_formatter_text
|
||||
label: hidden
|
||||
settings:
|
||||
format: hex
|
||||
opacity: true
|
||||
third_party_settings: { }
|
||||
weight: 5
|
||||
region: content
|
||||
field_ping_pong_body:
|
||||
type: text_default
|
||||
label: hidden
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
weight: 6
|
||||
region: content
|
||||
field_ping_pong_cta:
|
||||
type: link
|
||||
label: hidden
|
||||
settings:
|
||||
trim_length: 80
|
||||
url_only: false
|
||||
url_plain: false
|
||||
rel: ''
|
||||
target: ''
|
||||
third_party_settings: { }
|
||||
weight: 11
|
||||
region: content
|
||||
field_ping_pong_layout:
|
||||
type: list_default
|
||||
label: hidden
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
weight: 8
|
||||
region: content
|
||||
field_ping_pong_media_alignment:
|
||||
type: list_default
|
||||
label: hidden
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
weight: 9
|
||||
region: content
|
||||
field_ping_pong_media_items:
|
||||
type: entity_reference_entity_view
|
||||
label: hidden
|
||||
settings:
|
||||
view_mode: ping_pong
|
||||
link: false
|
||||
third_party_settings: { }
|
||||
weight: 10
|
||||
region: content
|
||||
hidden:
|
||||
search_api_excerpt: true
|
||||
@@ -1,40 +0,0 @@
|
||||
uuid: ad80e641-9853-4131-9802-0394aa966e30
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- core.entity_view_mode.media.ping_pong
|
||||
- field.field.media.image.field_media_image
|
||||
- image.style.large
|
||||
- media.type.image
|
||||
module:
|
||||
- image
|
||||
- layout_builder
|
||||
third_party_settings:
|
||||
layout_builder:
|
||||
enabled: false
|
||||
allow_custom: false
|
||||
_core:
|
||||
default_config_hash: 73xaTNkI5J6sfFcBmNYeuk070X3mQS_iwwWaPYyfG2M
|
||||
id: media.image.ping_pong
|
||||
targetEntityType: media
|
||||
bundle: image
|
||||
mode: ping_pong
|
||||
content:
|
||||
field_media_image:
|
||||
type: image
|
||||
label: visually_hidden
|
||||
settings:
|
||||
image_link: ''
|
||||
image_style: large
|
||||
image_loading:
|
||||
attribute: lazy
|
||||
third_party_settings: { }
|
||||
weight: 1
|
||||
region: content
|
||||
hidden:
|
||||
created: true
|
||||
name: true
|
||||
search_api_excerpt: true
|
||||
thumbnail: true
|
||||
uid: true
|
||||
@@ -1,42 +0,0 @@
|
||||
uuid: fd852e6e-b857-45f5-9ff9-125ab5611d51
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- core.entity_view_mode.media.ping_pong
|
||||
- field.field.media.video.field_media_video_file
|
||||
- media.type.video
|
||||
module:
|
||||
- file
|
||||
- layout_builder
|
||||
third_party_settings:
|
||||
layout_builder:
|
||||
enabled: false
|
||||
allow_custom: false
|
||||
_core:
|
||||
default_config_hash: SxvbuGh-6cQMxl9bBV27-hGI46u7ZvwlMm5ObaJMNnw
|
||||
id: media.video.ping_pong
|
||||
targetEntityType: media
|
||||
bundle: video
|
||||
mode: ping_pong
|
||||
content:
|
||||
field_media_video_file:
|
||||
type: file_video
|
||||
label: visually_hidden
|
||||
settings:
|
||||
controls: true
|
||||
autoplay: false
|
||||
loop: false
|
||||
multiple_file_display_type: tags
|
||||
muted: false
|
||||
width: 640
|
||||
height: 480
|
||||
third_party_settings: { }
|
||||
weight: 0
|
||||
region: content
|
||||
hidden:
|
||||
created: true
|
||||
name: true
|
||||
search_api_excerpt: true
|
||||
thumbnail: true
|
||||
uid: true
|
||||
@@ -1,11 +0,0 @@
|
||||
uuid: 3907b7a9-1d74-4907-bcd5-ec4cc1071ed2
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- media
|
||||
id: media.ping_pong
|
||||
label: 'Ping Pong'
|
||||
description: ''
|
||||
targetEntityType: media
|
||||
cache: true
|
||||
@@ -1,22 +0,0 @@
|
||||
uuid: 31cd8a2a-3bdf-43cd-9a64-43282c7e94be
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_background_color
|
||||
module:
|
||||
- color_field
|
||||
id: block_content.ping_pong.field_ping_pong_background_color
|
||||
field_name: field_ping_pong_background_color
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong Background Color'
|
||||
description: ''
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings:
|
||||
opacity: 0
|
||||
field_type: color_field_type
|
||||
@@ -1,22 +0,0 @@
|
||||
uuid: 943e8d34-238f-4de9-9196-87ed7785bf74
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_body
|
||||
module:
|
||||
- text
|
||||
id: block_content.ping_pong.field_ping_pong_body
|
||||
field_name: field_ping_pong_body
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong Body'
|
||||
description: 'The body text of the ping pong.'
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings:
|
||||
allowed_formats: { }
|
||||
field_type: text_long
|
||||
@@ -1,23 +0,0 @@
|
||||
uuid: 03279c7a-a355-4a6e-b9ad-b6c051d97963
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_cta
|
||||
module:
|
||||
- link
|
||||
id: block_content.ping_pong.field_ping_pong_cta
|
||||
field_name: field_ping_pong_cta
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong CTA'
|
||||
description: 'CTA Link for the ping pong item.'
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings:
|
||||
title: 1
|
||||
link_type: 17
|
||||
field_type: link
|
||||
@@ -1,21 +0,0 @@
|
||||
uuid: 71d04346-f3b6-4b11-ac4f-98cd5ad14b35
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_layout
|
||||
module:
|
||||
- options
|
||||
id: block_content.ping_pong.field_ping_pong_layout
|
||||
field_name: field_ping_pong_layout
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong Layout'
|
||||
description: ''
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings: { }
|
||||
field_type: list_string
|
||||
@@ -1,21 +0,0 @@
|
||||
uuid: 00c6c95a-5f80-45c8-ab83-deecd252ce32
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_media_alignment
|
||||
module:
|
||||
- options
|
||||
id: block_content.ping_pong.field_ping_pong_media_alignment
|
||||
field_name: field_ping_pong_media_alignment
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong Media Alignment'
|
||||
description: ''
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings: { }
|
||||
field_type: list_string
|
||||
@@ -1,31 +0,0 @@
|
||||
uuid: 207b28f1-37af-4c91-9cb1-d75d76ab2277
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- block_content.type.ping_pong
|
||||
- field.storage.block_content.field_ping_pong_media_items
|
||||
- media.type.image
|
||||
- media.type.video
|
||||
id: block_content.ping_pong.field_ping_pong_media_items
|
||||
field_name: field_ping_pong_media_items
|
||||
entity_type: block_content
|
||||
bundle: ping_pong
|
||||
label: 'Ping Pong Media Items'
|
||||
description: ''
|
||||
required: false
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings:
|
||||
handler: 'default:media'
|
||||
handler_settings:
|
||||
target_bundles:
|
||||
image: image
|
||||
video: video
|
||||
sort:
|
||||
field: _none
|
||||
direction: ASC
|
||||
auto_create: false
|
||||
auto_create_bundle: image
|
||||
field_type: entity_reference
|
||||
@@ -1,20 +0,0 @@
|
||||
uuid: 2c91aadc-de94-4014-80b0-0165cb294d7e
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- color_field
|
||||
id: block_content.field_ping_pong_background_color
|
||||
field_name: field_ping_pong_background_color
|
||||
entity_type: block_content
|
||||
type: color_field_type
|
||||
settings:
|
||||
format: '#HEXHEX'
|
||||
module: color_field
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,19 +0,0 @@
|
||||
uuid: 251a77bd-a105-4525-b528-0d1acdb5dea0
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- text
|
||||
id: block_content.field_ping_pong_body
|
||||
field_name: field_ping_pong_body
|
||||
entity_type: block_content
|
||||
type: text_long
|
||||
settings: { }
|
||||
module: text
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,19 +0,0 @@
|
||||
uuid: 5f9b0f7a-f3ed-4b92-9558-d02846914aff
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- link
|
||||
id: block_content.field_ping_pong_cta
|
||||
field_name: field_ping_pong_cta
|
||||
entity_type: block_content
|
||||
type: link
|
||||
settings: { }
|
||||
module: link
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,36 +0,0 @@
|
||||
uuid: cb0cf63f-b12d-42a4-9ad8-151a6b45e5c4
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- options
|
||||
id: block_content.field_ping_pong_layout
|
||||
field_name: field_ping_pong_layout
|
||||
entity_type: block_content
|
||||
type: list_string
|
||||
settings:
|
||||
allowed_values:
|
||||
-
|
||||
value: '50_50'
|
||||
label: 50-50
|
||||
-
|
||||
value: '67_33'
|
||||
label: 67-33
|
||||
-
|
||||
value: '33_67'
|
||||
label: 33-67
|
||||
-
|
||||
value: '25_75'
|
||||
label: 25-75
|
||||
-
|
||||
value: '75_25'
|
||||
label: 75-25
|
||||
allowed_values_function: ''
|
||||
module: options
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,27 +0,0 @@
|
||||
uuid: 5aad3453-4210-45e5-a891-949efed0792c
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- options
|
||||
id: block_content.field_ping_pong_media_alignment
|
||||
field_name: field_ping_pong_media_alignment
|
||||
entity_type: block_content
|
||||
type: list_string
|
||||
settings:
|
||||
allowed_values:
|
||||
-
|
||||
value: left
|
||||
label: Left
|
||||
-
|
||||
value: right
|
||||
label: Right
|
||||
allowed_values_function: ''
|
||||
module: options
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,20 +0,0 @@
|
||||
uuid: ced369f0-c81f-44c2-9715-c80f73ba58ae
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- block_content
|
||||
- media
|
||||
id: block_content.field_ping_pong_media_items
|
||||
field_name: field_ping_pong_media_items
|
||||
entity_type: block_content
|
||||
type: entity_reference
|
||||
settings:
|
||||
target_type: media
|
||||
module: core
|
||||
locked: false
|
||||
cardinality: -1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -1,5 +0,0 @@
|
||||
name: DC Component Library
|
||||
description: 'Components for use on a site.'
|
||||
type: module
|
||||
package: custom
|
||||
core_version_requirement: ^10.3 || ^11
|
||||
@@ -1,17 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Implements hook_theme().
|
||||
*/
|
||||
function dc_components_theme() {
|
||||
return [
|
||||
'block__inline_block__ping_pong' => [
|
||||
'render element' => 'elements',
|
||||
'base hook' => 'block',
|
||||
],
|
||||
'field__block_content__field_ping_pong_media_items__ping_pong' => [
|
||||
'render element' => 'elements',
|
||||
'base hook' => 'field'
|
||||
]
|
||||
];
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,45 +0,0 @@
|
||||
{#
|
||||
* Component variables
|
||||
*
|
||||
* props:
|
||||
* layout
|
||||
* mediaAlign
|
||||
* bgColor
|
||||
*
|
||||
* slots
|
||||
* headline
|
||||
* body
|
||||
* cta
|
||||
* media
|
||||
*
|
||||
#}
|
||||
{% set align = content.field_ping_pong_media_alignment.0['#markup'] %}
|
||||
{% set bgColor = content.field_ping_pong_background_color.0['#markup']|default('#fff') %}
|
||||
<div {{ attributes.addClass('ping-pong-wrapper') }}>
|
||||
{{ title_prefix }}
|
||||
{{ title_suffix }}
|
||||
|
||||
{% embed 'dc_components:ping-pong' with {
|
||||
mediaAlign: align,
|
||||
bgColor: bgColor,
|
||||
}%}
|
||||
|
||||
{% block headline %}
|
||||
<h2>{{ label }}</h2>
|
||||
{% endblock%}
|
||||
|
||||
{% block body %}
|
||||
{{ content.field_ping_pong_body }}
|
||||
{% endblock %}
|
||||
|
||||
{% block cta %}
|
||||
{{ content.field_ping_pong_cta }}
|
||||
{% endblock %}
|
||||
|
||||
{% block media %}
|
||||
{{ content.field_ping_pong_media_items }}
|
||||
{% endblock %}
|
||||
|
||||
{% endembed %}
|
||||
|
||||
</div>
|
||||
@@ -1,57 +0,0 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Theme override for a field.
|
||||
*
|
||||
* To override output, copy the "field.html.twig" from the templates directory
|
||||
* to your theme's directory and customize it, just like customizing other
|
||||
* Drupal templates such as page.html.twig or node.html.twig.
|
||||
*
|
||||
* Instead of overriding the theming for all fields, you can also just override
|
||||
* theming for a subset of fields using
|
||||
* @link themeable Theme hook suggestions. @endlink For example,
|
||||
* here are some theme hook suggestions that can be used for a field_foo field
|
||||
* on an article node type:
|
||||
* - field--node--field-foo--article.html.twig
|
||||
* - field--node--field-foo.html.twig
|
||||
* - field--node--article.html.twig
|
||||
* - field--field-foo.html.twig
|
||||
* - field--text-with-summary.html.twig
|
||||
* - field.html.twig
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* - label_hidden: Whether to show the field label or not.
|
||||
* - title_attributes: HTML attributes for the title.
|
||||
* - label: The label for the field.
|
||||
* - multiple: TRUE if a field can contain multiple items.
|
||||
* - items: List of all the field items. Each item contains:
|
||||
* - attributes: List of HTML attributes for each item.
|
||||
* - content: The field item's content.
|
||||
* - entity_type: The entity type to which the field belongs.
|
||||
* - field_name: The name of the field.
|
||||
* - field_type: The type of the field.
|
||||
* - label_display: The display settings for the label.
|
||||
*
|
||||
* @see template_preprocess_field()
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set title_classes = [
|
||||
label_display == 'visually_hidden' ? 'visually-hidden',
|
||||
]
|
||||
%}
|
||||
<div{{ attributes.addClass('swiper') }}>
|
||||
<div class="swiper-wrapper">
|
||||
{% for item in items %}
|
||||
<div {{ item.attributes.addClass('swiper-slide') }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<!-- If we need scrollbar -->
|
||||
<div class="swiper-scrollbar"></div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user