Skip to content

Commit

Permalink
adjust z index
Browse files Browse the repository at this point in the history
  • Loading branch information
@webjsavella
webjsavella committed Feb 7, 2025
1 parent ef18afb commit ac8add1
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 20 deletions.
8 changes: 6 additions & 2 deletions eds/blocks/hero/hero.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,10 @@
aspect-ratio: 16 / 9;
}

body[aria-hidden="true"]{
overflow: hidden;
}

.co3-modal {
background: var(--esri-ui-opacity80-inverse);
block-size: 100%;
Expand All @@ -111,7 +115,7 @@
inset-inline-start: 50%;
position: fixed;
transform: translate(-50%, -50%);
z-index: 1;
z-index: 3001;
}

.co3-modal-container {
Expand All @@ -135,7 +139,7 @@
inline-size: 50px;
inset-block-start: 0;
inset-inline-start: 100%;
z-index: 2;
z-index: 3002;
}

.co3-modal-container calcite-icon:is(:hover, :focus-within, :active) {
Expand Down
38 changes: 20 additions & 18 deletions eds/blocks/hero/hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,25 +128,27 @@ export default function decorate(block) {
}

const videoLink = block.querySelector('.video-link');
const btnContainer = videoLink.closest('.button-container');
if ((videoLink) && (btnContainer)) {
btnContainer.replaceWith(calciteButton({
'icon-end': 'play-f',
appearance: 'solid',
href: videoLink.href,
label: videoLink.textContent,
}, videoLink.textContent));
}
if (videoLink) {
const btnContainer = videoLink.closest('.button-container');
if ((videoLink) && (btnContainer)) {
btnContainer.replaceWith(calciteButton({
'icon-end': 'play-f',
appearance: 'solid',
href: videoLink.href,
label: videoLink.textContent,
}, videoLink.textContent));
}

const calciteBtn = block.querySelector('calcite-button');
if (calciteBtn) {
calciteBtn.addEventListener('click', (evt) => {
evt.preventDefault();
calciteBtn.setAttribute('tabindex', '0');
lastfocusBtn = calciteBtn;
const calciteBtn = block.querySelector('calcite-button');
if (calciteBtn) {
calciteBtn.addEventListener('click', (evt) => {
evt.preventDefault();
calciteBtn.setAttribute('tabindex', '0');
lastfocusBtn = calciteBtn;

toggleLoader();
decorateModal(videoLink.href);
});
toggleLoader();
decorateModal(videoLink.href);
});
}
}
}
253 changes: 253 additions & 0 deletions eds/blocks/hero/test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
<div id="success-stories-tab" class="cmp-tabs" data-placeholder-text="false">
<div class="cmp-tabs__tablist-wrapper jawsinspect-wiid-N1242"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
wiid="N1242"><button class="cmp-tabs__left no-hide" style="display: none;" aria-label="previous">
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1288"
class="jawsinspect-wiid-N1288"></calcite-icon>
</button>
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false"
style="margin-left: calc(-429px + 50vw); margin-right: calc(-429px + 50vw); justify-content: center;">
<li role="tab" id="success-stories-tab-item-d74bc125aa-tab" class="cmp-tabs__tab"
aria-controls="success-stories-tab-item-d74bc125aa-tabpanel" tabindex="0" data-cmp-hook-tabs="tab"
aria-selected="true">City of Prague</li>
<li role="tab" id="success-stories-tab-item-e6315acfbf-tab" class="cmp-tabs__tab cmp-tabs__tab--active"
aria-controls="success-stories-tab-item-e6315acfbf-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab"
aria-selected="false">ProRail</li>
<li role="tab" id="success-stories-tab-item-1f5f07e3f7-tab" class="cmp-tabs__tab"
aria-controls="success-stories-tab-item-1f5f07e3f7-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab"
aria-selected="false">Marriott International</li>
</ol><button class="cmp-tabs__right no-hide" style="display: none;" aria-label="next">
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1289"
class="jawsinspect-wiid-N1289"></calcite-icon>
</button>
</div>
<div class="cmp-tabs__tablist-wrapper jawsinspect-wiid-N1241"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
wiid="N1241"><button class="cmp-tabs__left no-hide" style="display: none;" aria-label="previous">
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1290"
class="jawsinspect-wiid-N1290"></calcite-icon>
</button><button class="cmp-tabs__right no-hide" style="display: none;" aria-label="next">
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1291"
class="jawsinspect-wiid-N1291"></calcite-icon>
</button></div>
<div class="cmp-tabs__tablist-wrapper"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<button class="cmp-tabs__left no-hide" style="display: none;" aria-label="previous">
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated=""></calcite-icon>
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1292"
class="jawsinspect-wiid-N1292"></calcite-icon>
</button><button class="cmp-tabs__right no-hide" style="display: none;" aria-label="next">
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated=""></calcite-icon>
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1293"
class="jawsinspect-wiid-N1293"></calcite-icon>
</button></div>
<div class="cmp-tabs__tablist-wrapper"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<button class="cmp-tabs__left no-hide" style="display: none;" aria-label="previous">
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated=""></calcite-icon>
<calcite-icon icon="chevronLeft" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1294"
class="jawsinspect-wiid-N1294"></calcite-icon>
</button><button class="cmp-tabs__right no-hide" style="display: none;" aria-label="next">
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated=""></calcite-icon>
<calcite-icon icon="chevronRight" scale="m" aria-hidden="true" calcite-hydrated="" wiid="N1295"
class="jawsinspect-wiid-N1295"></calcite-icon>
</button></div>
<div id="success-stories-tab-item-d74bc125aa-tabpanel" role="tabpanel"
aria-labelledby="success-stories-tab-item-d74bc125aa-tab" tabindex="0" class="cmp-tabs__tabpanel"
data-cmp-hook-tabs="tabpanel"
data-cmp-data-layer="{&quot;success-stories-tab-item-d74bc125aa&quot;:{&quot;@type&quot;:&quot;esri-sites/components/core/tabs/item&quot;,&quot;dc:title&quot;:&quot;City of Prague&quot;}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">

<div class="experiencefragment aem-GridColumn aem-GridColumn--default--12">
<div class="xf-content-height">
<div class="root responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<article
class="media-split media-split__small calcite-theme-light calcite-mode-light aem-GridColumn aem-GridColumn--default--12">
<link rel="stylesheet"
href="/etc.clientlibs/esri-sites/components/content/media-split/clientlibs.css"
type="text/css">
<div class="split calcite-animate split--swap calcite-animate__in-up"
data-animation="calcite-animate__in-up">

<div class="split__copy">
<div class="split__copy--esritext">
<div class="esriText esri-text">
<div class="esri-text-container">
<p class="esri-text__category"
id="7320763569ce51b28085b58e5d88ac7a25c9f8ce2bea3c3c674dfb120023b1c7">
Urban planning and development
</p>
<h3 class="esri-text__title"
aria-describedby="7320763569ce51b28085b58e5d88ac7a25c9f8ce2bea3c3c674dfb120023b1c7">
City of Prague fights extreme heat with geospatial
technology</h3>
<p class="esri-text__description ">In Prague, planners use
modern mapping tools to assess vulnerability to climate
change and mitigate against extreme heat events. A 3D
geospatial digital twin of development projects and
microclimates helps them understand where to act. For
example, they use ArcGIS to identify areas where adding
green spaces can help offset higher temperatures.</p>
</div>
</div>
</div>
<div class="split__copy--esritext">
</div>
<div class="split__copy--ctabuttons">
<div class="calcite-button-wrapper padding-bottom--3"
data-event="track-component" data-component-name="cta-buttons"
data-link-type="internal" data-component-link-type="button"
data-component-link="Read the story">
<calcite-button
href="https://www.esri.com/about/newsroom/blog/prague-extreme-heat-spurs-climate-action/"
color="blue" kind="brand" icon-end="arrowRight"
appearance="solid" alignment="center" scale="m" type="button"
width="auto" calcite-hydrated="">Read the story
</calcite-button>
</div>
</div>
</div>
<div class="split__image">
<div id="embed-3cfdb47bda" class="cmp-embed">
<link rel="stylesheet"
href="/etc.clientlibs/esri-sites/components/core/embed/embeddable/video/clientlibs.css"
type="text/css">
<iframe title="video player" loading="lazy" style="max-width: px"
class="esri-video"
src="https://mediaspace.esri.com/embed/secure/iframe/entryId/1_on122iij/uiConfId/55531032/st/0"
sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation"
allow="autoplay *; fullscreen *; encrypted-media *"
frameborder="0"></iframe>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="success-stories-tab-item-e6315acfbf-tabpanel" role="tabpanel"
aria-labelledby="success-stories-tab-item-e6315acfbf-tab" tabindex="0"
class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel"
data-cmp-data-layer="{&quot;success-stories-tab-item-e6315acfbf&quot;:{&quot;@type&quot;:&quot;esri-sites/components/core/tabs/item&quot;,&quot;dc:title&quot;:&quot;ProRail&quot;}}"
aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<article
class="media-split media-split__small calcite-theme-light calcite-mode-light aem-GridColumn aem-GridColumn--default--12">
<div class="split calcite-animate split--swap calcite-animate__in-up"
data-animation="calcite-animate__in-up">
<div class="split__copy">
<div class="split__copy--esritext">
<div class="esriText esri-text">
<div class="esri-text-container">
<p class="esri-text__category"
id="79f75d9f1ddbb000549956d89128e3907aa14cee09ca315d9ac3a38866585853">
Transportation and logistics
</p>
<h3 class="esri-text__title"
aria-describedby="79f75d9f1ddbb000549956d89128e3907aa14cee09ca315d9ac3a38866585853">
ProRail plans for the next generation of rail infrastructure</h3>
<p class="esri-text__description ">Rail passengers in the Netherlands are
expected to increase 30 percent by 2030, but there’s no open space to build
new lines. To prepare for the next generation of riders, ProRail, the Dutch
government organization that manages the nation’s rail infrastructure, used
Esri software to accommodate millions of new passengers without adding a
single track.</p>
</div>
</div>
<div class="split__copy--esritext">
</div>
<div class="split__copy--ctabuttons">
<div class="calcite-button-wrapper padding-bottom--3" data-event="track-component"
data-component-name="cta-buttons" data-link-type="internal"
data-component-link-type="button" data-component-link="Read the story">
<calcite-button
href="https://www.esri.com/en-us/about/about-esri/europe/case-studies/netherlands-prorail"
color="blue" kind="brand" icon-end="arrowRight" appearance="solid"
alignment="center" scale="m" type="button" width="auto" calcite-hydrated="">Read
the story
</calcite-button>
</div>
</div>
</div>
<div class="split__image">
<div id="embed-265de8897a" class="cmp-embed">
<iframe title="video player" loading="lazy" style="max-width: px" class="esri-video"
src="https://mediaspace.esri.com/embed/secure/iframe/entryId/1_6eanln5x/uiConfId/55531032/st/0"
sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation"
allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0"></iframe>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div id="success-stories-tab-item-1f5f07e3f7-tabpanel" role="tabpanel"
aria-labelledby="success-stories-tab-item-1f5f07e3f7-tab" tabindex="0" class="cmp-tabs__tabpanel"
data-cmp-hook-tabs="tabpanel"
data-cmp-data-layer="{&quot;success-stories-tab-item-1f5f07e3f7&quot;:{&quot;@type&quot;:&quot;esri-sites/components/core/tabs/item&quot;,&quot;dc:title&quot;:&quot;Marriott International&quot;}}"
aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<article class="media-split media-split__small aem-GridColumn aem-GridColumn--default--12">
<div class="split calcite-animate split--swap calcite-animate__in-up"
data-animation="calcite-animate__in-up">
<div class="split__copy">
<div class="split__copy--esritext">
<div class="esriText esri-text">
<div class="esri-text-container">
<p class="esri-text__category"
id="11db78d1c4ee18b2a810e81c05b268728d75598a8b735a700a49de3304bcf4eb">Risk
analytics and mitigation
</p>
<h3 class="esri-text__title"
aria-describedby="11db78d1c4ee18b2a810e81c05b268728d75598a8b735a700a49de3304bcf4eb">
Marriott International maps risk to inform operations</h3>
<p class="esri-text__description ">Executives at Marriott International are
monitoring risk with real-time maps of company assets worldwide. They can
assess climate risks, public health threats, crime trends, and geopolitical
events to inform global operations, investments, and site selection.</p>
</div>
</div>
</div>
<div class="split__copy--esritext">
</div>
<div class="split__copy--ctabuttons">
<div class="calcite-button-wrapper padding-bottom--3" data-event="track-component"
data-component-name="cta-buttons" data-link-type="internal"
data-component-link-type="button" data-component-link="Read the story">
<calcite-button
href="https://www.esri.com/about/newsroom/publications/wherenext/marriott-risk-atlas/"
color="blue" kind="brand" icon-end="arrowRight" appearance="solid"
alignment="center" scale="m" type="button" width="auto" calcite-hydrated="">Read
the story
</calcite-button>
</div>
</div>
</div>
<div class="split__image">
<div class="media-split-img">
<div data-cmp-src="/content/experience-fragments/esri-sites/en-us/home/tabs/personalization/city-of-prague-merged-with-other-tabbed-sections/_jcr_content/root/grid_container_copy_/gc-par/tabs/item_1612559139538/media_split_copy_cop/esricoreimage.coreimg{.width}.jpeg/1726767301700/homepage-marriot-v2.jpeg"
data-asset-id="8fe18ba0-a477-4efa-bb38-8ab42f0bd515"
data-cmp-filereference="/content/dam/esrisites/en-us/home/homepage-marriot-v2.jpg"
id="mediasplit-image-v3-c756a84cfd" data-cmp-hook-image="imageV3" class="cmp-image"
itemscope="" itemtype="http://schema.org/ImageObject">
<img loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2131"
height="1200" alt="A high-rise hotel building"
src="/content/experience-fragments/esri-sites/en-us/home/tabs/personalization/city-of-prague-merged-with-other-tabbed-sections/_jcr_content/root/grid_container_copy_/gc-par/tabs/item_1612559139538/media_split_copy_cop/esricoreimage.coreimg.jpeg/1726767301700/homepage-marriot-v2.jpeg">
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>

0 comments on commit ac8add1

Please sign in to comment.