Commit dd6e9382 authored by m26lebla's avatar m26lebla

styling for the homapage multi list

parent 887098f9
......@@ -1865,7 +1865,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; } }
......@@ -2149,12 +2149,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;
......@@ -4413,26 +4407,48 @@ 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-tabs {
margin: 16px auto;
width: 100%; }
.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; }
display: flex; }
.uw-tablinks {
border-left: 0.5px solid #fff;
border-right: 0.5px solid #fff;
margin: 0;
max-width: inherit; }
.uw-tablinks:first-child {
border-left: 0.5px solid #eee; }
.uw-tablinks:hover, .uw-tablinks:focus {
border-left: 0.5px solid #fff;
border-right: 0.5px solid #fff; }
.uw-tablinks[aria-selected="true"] {
background: #eee;
color: #4e4e4e; }
.uw-tabcontent[role="tabpanel"] {
background: #eee;
display: flex;
flex-flow: row wrap;
padding-top: 1rem; }
.uw-tabcontent[role="tabpanel"][hidden] {
background: #cd5c5c;
display: none; }
.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%; } }
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title {
margin-top: 0; }
.page-title {
padding-top: 1rem; }
......
......@@ -115,55 +115,73 @@
(function ($, Drupal) {
Drupal.behaviors.multitypelist = {
attach: function (context, settings) {
window.addEventListener("DOMContentLoaded", () => {
const tabs = document.querySelectorAll('[role="tab"]');
const tabList = document.querySelector('[role="tablist"]');
$(document).ready(function() {
// Add a click event handler to each tab
tabs.forEach(tab => {
tab.addEventListener("click", changeTabs);
});
// If there are tabs, process them.
if ($('.uw-tab').length > 0) {
// Enable arrow navigation between tabs in the tab list
let tabFocus = 0;
// Set the first of the tabs to be displayted.
$('.uw-tabcontent')[0].style.display = 'block';
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;
}
}
// Step through each of the tab buttons and add the click.
$('.uw-tablinks').each(function(index, value) {
tabs[tabFocus].setAttribute("tabindex", 0);
tabs[tabFocus].focus();
}
});
});
// Add the click function to open the tab.
$(value).click(function() {
function changeTabs(e) {
const target = e.target;
const parent = target.parentNode;
const grandparent = parent.parentNode;
// The open tab function with the data attribute.
openTab(this.getAttribute('data-type'));
});
});
}
});
/**
* 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";
// 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 &
{
......
.uw-tabs{
margin:gesso-spacing(sm) auto;
width: 100%;
}
//buttons wrapper
.uw-tab {
background-color: #f1f1f1;
border: 1px solid #ccc;
overflow: hidden;
display:flex;
button {
background-color: inherit;
cursor: pointer;
float: left;
outline: none;
padding: 14px 16px;
transition: 0.3s;
}
//button
.uw-tablinks {
border-left: 0.5px solid #fff;
border-right: 0.5px solid #fff;
margin:0;
max-width: inherit;
&:first-child{
border-left: 0.5px solid $button-background-color-hover;
}
&:hover,
&:focus{
border-left: 0.5px solid #fff;
border-right: 0.5px solid #fff;
}
&[aria-selected="true"] {
background: $button-background-color-hover;
color: $button-text-color-hover;
}
}
.uw-tabcontent[role="tabpanel"] {
background: $button-background-color-hover;
display:flex;
flex-flow: row wrap;
padding-top:1rem;
&:hover {
background-color: #ddd;
}
&[hidden] {
background: #cd5c5c;
display:none;
}
&:active {
background-color: #ccc;
}
}
.uw-tabcontent[role="tabpanel"] .card{
width:100%;
@include small{
flex-grow: 1;
width: 45%;
}
@include large{
width: 32%;
}
}
.uw-tabcontent {
border: 1px solid #ccc;
display: none;
padding: 6px 12px;
// lineup the top of the date with the title in blog teaser
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
margin-top:0;
}
\ 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 button_modifier_classes -%}
button button--large {{ modifier_classes }}
{%- endset %}
<div class="uw-tabs">
<div class="uw-tab" role="tablist" aria-label="Multi-tab-list">
{% for type, list in lists %}
<button role="tab" class="uw-tablinks {{ button_modifier_classes }} " {% if loop.index == 1 %} aria-selected="true" {% else %} aria-selected="false" {% endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0">{{ type }}</button>
{% endfor %}
</div>
{% for type, list in lists %}
<div id="{{ type }}" class="uw-tabcontent">
<div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {% endif %} >
{% for content in list %}
......@@ -48,6 +53,7 @@
'content': content.content
} %}
{% endif %}
{% endfor %}
</div>
{% endfor %}
\ No newline at end of file
{% endfor %}
lists:
Blog:
-
title: 'Blog Teaser title'
title: 'Blog Teaser title 1'
url: '#'
date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
- url: '#'
title: 'Tag 1'
- url: '#'
title: 'Tag 2'
- url: '#'
title: 'Tag 3'
- url: '#'
title: 'Tag 4'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 2'
url: '#'
date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
- url: '#'
title: 'Tag 1'
- url: '#'
title: 'Tag 2'
- url: '#'
title: 'Tag 3'
- url: '#'
title: 'Tag 4'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 3'
url: '#'
date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
......@@ -37,7 +107,55 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
News:
-
title: 'News Teaser title'
title: 'News Teaser title 1'
url: '#'
date: 'Sep. 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 2'
url: '#'
date: 'Sep. 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 3'
url: '#'
date: 'Sep. 18, 2020'
sources:
......@@ -62,7 +180,55 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
Events:
-
title: 'Event Teaser title'
title: 'Event Teaser title 1'
url: '#'
date: 'Friday, September 18, 2020 - 4:20 PM'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'