Commit d7c19f09 authored by m26lebla's avatar m26lebla

Merge branch 'ISTWCMS-3958' into 8.x-3.x

parents f4e11e5f fea0a208
......@@ -1943,7 +1943,7 @@ svg:not(:root) {
grid-template-columns: 60% 40%; } }
@media (min-width: 63.1875rem) {
.uw-site-footer__wrapper {
grid-template-columns: 70% 29%; } }
grid-template-columns: 70% 30%; } }
@media (min-width: 80rem) {
.uw-site-footer__wrapper {
padding: 16px 0; } }
......@@ -2227,12 +2227,6 @@ ul.toolbar-menu {
color: #A2A2A2;
cursor: default;
pointer-events: none; }
@media (min-width: 48.06rem) {
.button + .button {
margin-left: 0.5rem; }
[dir='rtl'] .button + .button {
margin-left: 0;
margin-right: 0.5rem; } }
.layout-builder-form .button,
.form-actions .button {
font-size: 0.79rem;
......@@ -4491,27 +4485,6 @@ fieldset,
.mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
color: #000; }
.uw-tab {
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow: hidden; }
.uw-tab button {
background-color: inherit;
cursor: pointer;
float: left;
outline: none;
padding: 14px 16px;
transition: 0.3s; }
.uw-tab button:hover {
background-color: #ddd; }
.uw-tab button:active {
background-color: #ccc; }
.uw-tabcontent {
border: 1px solid #ccc;
display: none;
padding: 6px 12px; }
.page-title {
padding-top: 1rem; }
......@@ -4757,102 +4730,57 @@ picture {
speak: none;
text-transform: none; }
.tabs::after {
clear: both;
content: "";
display: table; }
.uw-tabs {
margin: 16px auto;
width: 100%; }
.uw-tabs .hide-js {
display: none; }
html:not(.js) .uw-tabs .hide-js {
border-bottom: 2px solid #eee;
display: block;
margin-bottom: 8px;
padding-bottom: 8px; }
.tabs__items {
list-style-type: none;
margin: 0;
padding: 0;
.uw-tab {
display: flex; }
html:not(.js) .uw-tab {
display: none; }
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
margin: 0 0 0 0.15rem;
max-width: inherit; }
.uw-tablinks[aria-selected="true"] {
background: #eee;
border-bottom: 0.4rem solid #4e4e4e;
color: #4e4e4e; }
.uw-tablinks[aria-selected="true"]:hover {
border-bottom: 0.4rem solid #ddd; }
.uw-tablinks:hover {
border-bottom: 0.4rem solid #fff; }
.uw-tabcontent[role="tabpanel"] {
display: flex;
flex-direction: column; }
.tabs__items li {
padding-left: 0; }
.tabs__items li::before {
display: none; }
@media (min-width: 40.0625em) {
.tabs__items {
flex-direction: row; } }
@media print {
.tabs__items {
display: none; } }
flex-flow: row wrap;
padding-top: 24px; }
.uw-tabcontent[role="tabpanel"][hidden] {
display: none; }
.tabs__item:first-child .tabs__link {
border-bottom-left-radius: 0;
border-left: 0;
border-top-left-radius: 0; }
html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
display: flex; }
.tabs__item:last-child .tabs__link {
border-bottom-right-radius: 0;
border-top-right-radius: 0; }
.uw-tabcontent[role="tabpanel"] .card {
width: 100%; }
@media (min-width: 40.06rem) {
.uw-tabcontent[role="tabpanel"] .card {
flex-grow: 1;
width: 45%; } }
@media (min-width: 63.1875rem) {
.uw-tabcontent[role="tabpanel"] .card {
width: 32%; } }
.tabs__link {
background-color: #eee;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none;
color: #000;
cursor: pointer;
display: inline-block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 18px;
font-weight: 600;
height: auto;
letter-spacing: 0.055rem;
line-height: 1.45;
max-width: 18.125rem;
padding: 1rem 1.5rem;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 100%;
border-left: 1px solid #A2A2A2;
display: block;
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 1.125rem;
line-height: 0.8888888889;
margin: 0;
padding: 0.5rem 1rem; }
.tabs__link:visited {
color: #000; }
.tabs__link:hover, .tabs__link:focus {
background-color: #A2A2A2;
background-image: none;
border: 0;
box-shadow: none !important;
color: #000;
outline: none !important;
text-decoration: none; }
.tabs__link:active {
background-color: #4e4e4e;
background-image: none;
color: #fff;
outline: none !important; }
.tabs__link[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
.tabs__link:focus {
background-color: #A2A2A2; }
.tabs__link:visited, .tabs__link:hover {
color: #000; }
.tabs__link:active {
background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active {
background-color: #4e4e4e;
color: #fff; }
.tabs__link.is-active:hover {
color: #fff; }
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title {
margin-top: 0; }
.block-local-tasks-block nav nav ul li a {
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
......
......@@ -116,54 +116,73 @@
Drupal.behaviors.multitypelist = {
attach: function (context, settings) {
$(document).ready(function() {
window.addEventListener("DOMContentLoaded", () => {
const tabs = document.querySelectorAll('[role="tab"]');
const tabList = document.querySelector('[role="tablist"]');
// If there are tabs, process them.
if ($('.uw-tab').length > 0) {
// Add a click event handler to each tab
tabs.forEach(tab => {
tab.addEventListener("click", changeTabs);
});
// Set the first of the tabs to be displayted.
$('.uw-tabcontent')[0].style.display = 'block';
// Enable arrow navigation between tabs in the tab list
let tabFocus = 0;
// Step through each of the tab buttons and add the click.
$('.uw-tablinks').each(function(index, value) {
tabList.addEventListener("keydown", e => {
// Move right
if (e.keyCode === 39 || e.keyCode === 37) {
tabs[tabFocus].setAttribute("tabindex", -1);
if (e.keyCode === 39) {
tabFocus++;
// If we're at the end, go to the start
if (tabFocus >= tabs.length) {
tabFocus = 0;
}
// Move left
} else if (e.keyCode === 37) {
tabFocus--;
// If we're at the start, move to the end
if (tabFocus < 0) {
tabFocus = tabs.length - 1;
}
}
// Add the click function to open the tab.
$(value).click(function() {
// The open tab function with the data attribute.
openTab(this.getAttribute('data-type'));
});
});
}
tabs[tabFocus].setAttribute("tabindex", 0);
tabs[tabFocus].focus();
}
});
});
/**
* Function to open a tab.
*
* @param contentType
* The type of tab to open.
*/
function openTab(contentType) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("uw-tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("uw-tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(contentType).style.display = "block";
evt.currentTarget.className += " active";
function changeTabs(e) {
const target = e.target;
const parent = target.parentNode;
const grandparent = parent.parentNode;
// Remove all current selected tabs
parent
.querySelectorAll('[aria-selected="true"]')
.forEach(t => t.setAttribute("aria-selected", false));
// Set this tab as selected
target.setAttribute("aria-selected", true);
// Hide all tab panels
grandparent
.querySelectorAll('[role="tabpanel"]')
.forEach(p => p.setAttribute("hidden", true));
// Show the selected panel
grandparent.parentNode
.querySelector(`#${target.getAttribute("aria-controls")}`)
.removeAttribute("hidden");
}
}
};
})(jQuery, Drupal);
\ No newline at end of file
})(jQuery, Drupal);
......@@ -11,7 +11,7 @@
grid-template-columns: 60% 40%;
}
@include large {
grid-template-columns: 70% 29%;
grid-template-columns: 70% 30%;
}
@include xl{
padding:gesso-spacing(sm) 0;
......
......@@ -5,18 +5,6 @@
@include button();
margin: 0 0 rem(gesso-spacing(xs));
@include medium {
& + & {
margin-left: rem(gesso-spacing(xs)); // LTR
@if $support-for-rtl {
[dir='rtl'] & {
margin-left: 0;
margin-right: rem(gesso-spacing(xs));
}
}
}
}
.layout-builder-form &,
.form-actions &
{
......
{% for info in lists[type] %}
{% if type == 'Blog' %}
{% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
'title': info.title,
'url': info.url,
'date': info.date,
'author_name': info.author_name,
'author_link': info.author_link,
'sources': info.sources,
'img_element': info.img_element,
'alt': info.alt,
'tags': info.tags,
'content': info.content
} %}
{% endif%}
{% if type == 'News' %}
{% include '@components/teaser/teaser--news/teaser--news.twig' with {
'title': info.title,
'url': info.url,
'date': info.date,
'sources': info.sources,
'img_element': info.img_element,
'alt': info.alt,
'content': info.content
} %}
{% endif %}
{% if type == 'Events' %}
{% include '@components/teaser/teaser--event/teaser--event.twig' with {
'title': info.title,
'url': info.url,
'date': info.date,
'sources': info.sources,
'img_element': info.img_element,
'alt': info.alt,
'tags': info.tags,
'content': info.content
} %}
{% endif %}
{% endfor %}
\ No newline at end of file
.uw-tab {
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow: hidden;
button {
background-color: inherit;
cursor: pointer;
float: left;
outline: none;
padding: 14px 16px;
transition: 0.3s;
&:hover {
background-color: #ddd;
}
&:active {
background-color: #ccc;
}
}
}
.uw-tabcontent {
border: 1px solid #ccc;
display: none;
padding: 6px 12px;
}
\ No newline at end of file
......@@ -2,54 +2,73 @@
Drupal.behaviors.multitypelist = {
attach: function (context, settings) {
$(document).ready(function() {
window.addEventListener("DOMContentLoaded", () => {
const tabs = document.querySelectorAll('[role="tab"]');
const tabList = document.querySelector('[role="tablist"]');
// If there are tabs, process them.
if ($('.uw-tab').length > 0) {
// Add a click event handler to each tab
tabs.forEach(tab => {
tab.addEventListener("click", changeTabs);
});
// Set the first of the tabs to be displayted.
$('.uw-tabcontent')[0].style.display = 'block';
// Enable arrow navigation between tabs in the tab list
let tabFocus = 0;
// Step through each of the tab buttons and add the click.
$('.uw-tablinks').each(function(index, value) {
tabList.addEventListener("keydown", e => {
// Move right
if (e.keyCode === 39 || e.keyCode === 37) {
tabs[tabFocus].setAttribute("tabindex", -1);
if (e.keyCode === 39) {
tabFocus++;
// If we're at the end, go to the start
if (tabFocus >= tabs.length) {
tabFocus = 0;
}
// Move left
} else if (e.keyCode === 37) {
tabFocus--;
// If we're at the start, move to the end
if (tabFocus < 0) {
tabFocus = tabs.length - 1;
}
}
// Add the click function to open the tab.
$(value).click(function() {
// The open tab function with the data attribute.
openTab(this.getAttribute('data-type'));
});
});
}
tabs[tabFocus].setAttribute("tabindex", 0);
tabs[tabFocus].focus();
}
});
});
/**
* Function to open a tab.
*
* @param contentType
* The type of tab to open.
*/
function openTab(contentType) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("uw-tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("uw-tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(contentType).style.display = "block";
evt.currentTarget.className += " active";
function changeTabs(e) {
const target = e.target;
const parent = target.parentNode;
const grandparent = parent.parentNode;
// Remove all current selected tabs
parent
.querySelectorAll('[aria-selected="true"]')
.forEach(t => t.setAttribute("aria-selected", false));
// Set this tab as selected
target.setAttribute("aria-selected", true);
// Hide all tab panels
grandparent
.querySelectorAll('[role="tabpanel"]')
.forEach(p => p.setAttribute("hidden", true));
// Show the selected panel
grandparent.parentNode
.querySelector(`#${target.getAttribute("aria-controls")}`)
.removeAttribute("hidden");
}
}
};
})(jQuery, Drupal);
\ No newline at end of file
})(jQuery, Drupal);
<div class="uw-tab">
{% for type, list in lists %}
<button class="uw-tablinks" data-type="{{ type }}">{{ type }}</button>
{% endfor %}
</div>
{% set content_list = [] %}
{% for type, list in lists %}
<div id="{{ type }}" class="uw-tabcontent">
{% set content_list = content_list|merge([type]) %}
{% endfor %}
{% for content in list %}
{% embed '@components/tabs/tabs.twig' with {
'content_list': content_list
} %}
{% if type == 'Blog' %}
{% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
'title': content.title,
'url': content.url,
'date': content.date,
'author_name': content.author_name,
'author_link': content.author_link,
'sources': content.sources,
'img_element': content.img_element,
'alt': content.alt,
'tags': content.tags,
'content': content.content
} %}
{% endif %}
{% for type, list in lists %}
{% for info in list %}
{% if type == 'News' %}
{% include '@components/teaser/teaser--news/teaser--news.twig' with {
'title': content.title,
'url': content.url,
'date': content.date,
'sources': content.sources,
'img_element': content.img_element,
'alt': content.alt,
'content': content.content
} %}
{% if loop.parent.loop.index == 1 %}
{% block content_area_1 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists
} %}
{% endblock %}
{% elseif loop.parent.loop.index == 2 %}
{% block content_area_2 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists
} %}
{% endblock %}
{% elseif loop.parent.loop.index == 3 %}
{% block content_area_3 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists
} %}
{% endblock %}
{% endif %}
{% if type == 'Events' %}
{% include '@components/teaser/teaser--event/teaser--event.twig' with {
'title': content.title,
'url': content.url,
'date': content.date,
'sources': content.sources,
'img_element': content.img_element,
'alt': content.alt,
'tags': content.tags,
'content': content.content
} %}
{% endif %}
{% endfor %}
</div>
{% endfor %}
\ No newline at end of file