hr-design-system-handlebars 1.124.10 → 1.125.1

package/src/stories/views/components/external-service/dataWrapperContentRefresher.subfeature.js

@@ -1,88 +1,95 @@
-        
-const DataWrapperContentRefresher = function (context, id, refreshIntervall, webcomponent, datapolicy) {
-    const { element: rootElement } = context
+const DataWrapperContentRefresher = function ({
+    rootElement,
+    id,
+    refreshIntervall,
+    isWebcomponent,
+    datapolicy,
+}) {
     let remainingTime
     let timer
-    let uniqueID = id
     let intervall = refreshIntervall
     let container
-    let script 
+    let script
     let iframeRefresh
-    
-    if (webcomponent) {
-    container = document.getElementById('datawrapper-chart-' + uniqueID)
-    script = document.getElementById('datawrapper-component-js')
-    }
-    else{
-    iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+
+    if (isWebcomponent) {
+        container = document.getElementById(`datawrapper-chart-${id}`)
+        script = document.getElementById('datawrapper-component-js')
+    } else {
+        iframeRefresh = document.getElementById(`datawrapper-chart-${id}`)
     }
-    
+
     const createRefresher = function () {
-        console.log("Refresher bauen")
-        let divCounter = document.createElement('div')
+        console.log('Refresher bauen')
+        const divCounter = document.createElement('div')
+        divCounter.id = 'counter' + id
+        Object.assign(divCounter.style, {
+            backgroundColor: '#006dc1',
+            color: '#fff',
+            fontSize: '12px',
+            padding: '8px',
+            borderRadius: '0 0 4px 4px',
+        })
+
         let divOverlay = document.createElement('div')
+        divOverlay.id = 'overlay' + id
+        Object.assign(divOverlay.style, {
+            position: 'absolute',
+            top: '0',
+            display: 'none',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#d8e9f6',
+            width: '100%',
+            height: 'calc(100% - 36px)',
+        })
+
         let divTextOverlay = document.createElement('div')
-        divOverlay.id = 'overlay' + uniqueID
-        divOverlay.style.position = 'absolute'
-        divOverlay.style.top = '0'
-        divOverlay.style.display = 'none'
-        divOverlay.style.alignItems = 'center'
-        divOverlay.style.justifyContent = 'center'
-        divOverlay.style.backgroundColor = '#fff'
-        divOverlay.style.width = '100%'
-        divOverlay.style.height = 'calc(100% - 36px)'
-        divOverlay.style.backgroundColor = '#d8e9f6'
         divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-        divTextOverlay.style.backgroundColor = '#005293'
-        divTextOverlay.style.padding = '8px'
-        divTextOverlay.style.color = '#fff'
-        divTextOverlay.style.fontWeight = '800'
-        divTextOverlay.style.fontFamily = 'RobotoSlab'
-        divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
+        Object.assign(divTextOverlay.style, {
+            backgroundColor: '#005293',
+            padding: '8px',
+            color: '#fff',
+            fontWeight: '800',
+            fontFamily: 'RobotoSlab',
+            borderRadius: '6px',
+        })
+
         divOverlay.appendChild(divTextOverlay)
-        divCounter.id = 'counter' + uniqueID
-        divCounter.style.backgroundColor = '#006dc1'
-        divCounter.style.color = '#fff'
-        divCounter.style.fontSize = '12px'
-        divCounter.style.padding = '8px'
-        divCounter.style.borderRadius = '0 0 4px 4px'
-        
+
         rootElement.style.position = 'relative'
-        if(!datapolicy) {
-        rootElement.appendChild(divCounter)
-        rootElement.appendChild(divOverlay)
-        startCountdown()
-        } 
-        else {
-        rootElement.removeChild(divCounter)
-        rootElement.removeChild(divOverlay)
-        stopCountdown()
+
+        if (!datapolicy) {
+            rootElement.appendChild(divCounter)
+            rootElement.appendChild(divOverlay)
+            startCountdown()
+        } else {
+            rootElement.removeChild(divCounter)
+            rootElement.removeChild(divOverlay)
+            stopCountdown()
         }
     }
 
     const refreshIframe = function () {
         console.log('Reload')
-        if(webcomponent) {
+        if (isWebcomponent) {
             container.style.opacity = '0'
             script.src = script.src.split('?')[0] + '?_=' + new Date().getTime()
-        }
-        else{
+        } else {
             iframeRefresh.style.opacity = '0'
-            iframeRefresh.src =
-                iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+            iframeRefresh.src = iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
         }
         clearInterval(timer)
     }
     const startCountdown = function () {
         remainingTime = Number(intervall)
         setTimeout(function () {
-            if(webcomponent) {
-                container.style.opacity = '1'    
-            }
-            else{
+            if (isWebcomponent) {
+                container.style.opacity = '1'
+            } else {
                 iframeRefresh.style.opacity = '1'
             }
-            document.getElementById('overlay' + uniqueID).style.display = 'none'
+            document.getElementById('overlay' + id).style.display = 'none'
         }, 1000)
         timer = setInterval(function () {
             checkTimer()
@@ -92,33 +99,34 @@ const DataWrapperContentRefresher = function (context, id, refreshIntervall, web
         clearInterval(timer)
     }
     const checkTimer = function () {
-        if(document.getElementById('counter' + uniqueID) !== null) {
+        if (document.getElementById('counter' + id) !== null) {
             if (remainingTime >= 0) {
-                document.getElementById('counter' + uniqueID).innerHTML =
+                document.getElementById('counter' + id).innerHTML =
                     'Dieser Inhalt wird automatisch aktualisiert in ' +
                     secondsToTimeString(remainingTime) +
                     ' Min.'
                 remainingTime -= 1
                 if (remainingTime == -1) {
-                    document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                    document.getElementById('counter' + uniqueID).innerHTML =
+                    document.getElementById('overlay' + id).style.display = 'flex'
+                    document.getElementById('counter' + id).innerHTML =
                         'Zeitintervall wird neu gestartet...'
                 }
             } else {
                 refreshIframe()
                 startCountdown()
             }
-        }else{
-            console.log("Element wurde entfernt")
+        } else {
+            console.log('Element wurde entfernt')
             clearInterval(timer)
         }
     }
+
     const secondsToTimeString = function (seconds) {
         return new Date(seconds * 1000).toISOString().substr(14, 5)
     }
     return {
-        createRefresher: createRefresher
+        createRefresher: createRefresher,
     }
 }
 
-export default DataWrapperContentRefresher            
+export default DataWrapperContentRefresher

package/src/stories/views/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,83 +1,61 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, lazyLoad) {
-    
-    const { element: rootElement } = context
-    let aspectRatio = configAR
-    let fixedHeight = configFixedHeight
-    let uniqueId = id
-
+const DataWrapperNoResponsiveIframe = function ({
+    rootElement,
+    aspectRatio,
+    fixedHeight,
+    id,
+    embedCode,
+    lazyLoad,
+}) {
     const createNoResponsiveIframe = function () {
-
-   
-    var parentDiv = document.createElement('div')
-    //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
-    parentDiv.className = '!h-full'
-    var div = document.createElement('div')
-    //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
-    
-    console.log(aspectRatio)
-    console.log(configAR)
-    if (aspectRatio === undefined) {
+        const parentDiv = document.createElement('div')
+        //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
+        parentDiv.className = '!h-full'
+        const div = document.createElement('div')
+        //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
+        if (aspectRatio === undefined) {
             //Auflösen nach Tailwind-Klassen //noaspect_datawrapper_cdn
             div.className = 'relative overflow-hidden w-0 border-0 !min-w-full'
             div.style.height = fixedHeight + 'px'
             div.style.width = '100%'
-    } 
-    // Aspect-Ratio ausgewählt
-    else {
-        //ar-- in Tailwind-Klassen
-        let tailwindCSS
-        switch(aspectRatio){
-            case '100':
-                tailwindCSS = "ar-1-1" 
-            break;
-            case '16x9':
-                tailwindCSS = "ar-16-9" 
-            break;
-            case '9x16':
-                tailwindCSS = "ar-9-16"
-            break;
-            case '16x7':
-                tailwindCSS = "ar-16-7"
-            break;
-            case '7x16':
-                tailwindCSS = "ar-7-16"
-            break;
-            case '4x3':
-                tailwindCSS = "ar-4-3"
-            break;
-            case '100x27':
-                tailwindCSS = "ar-100-27"
-            break;
-            default:
-                tailwindCSS = "ar-16-9"
-          }
-          
-            div.className = tailwindCSS + " w-full sm480:h-full h-[560px]"
-    }
-    var iframe = document.createElement('iframe')
+        }
+        // Aspect-Ratio ausgewählt
+        else {
+            //ar-- in Tailwind-Klassen
+            const aspectRatiosToCssClasses = {
+                '100': 'ar-1-1',
+                '16x9': 'ar-16-9',
+                '9x16': 'ar-9-16',
+                '16x7': 'ar-16-7',
+                '7x16': 'ar-7-16',
+                '4x3': 'ar-4-3',
+                '100x27': 'ar-100-27',
+            }
+            const tailwindCSS = aspectRatiosToCssClasses[aspectRatio] || 'ar-16-9'
+            div.className = `${tailwindCSS} w-full sm480:h-full h-[560px]`
+        }
+        var iframe = document.createElement('iframe')
 
-    //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
-    iframe.setAttribute('class', 'border-0 top-0 left-0 w-full h-full overflow-y-hidden')
-    iframe.setAttribute('id', 'i_frame')
-    iframe.setAttribute('data-isloaded', '0')
-    iframe.setAttribute('webkitallowfullscreen', '')
-    iframe.setAttribute('mozallowfullscreen', '')
-    iframe.setAttribute('allowfullscreen', '')
-    iframe.setAttribute('scrolling', 'no')
-    iframe.setAttribute('frameborder', '0')
-    iframe.src = embedCode
-    iframe.id = 'datawrapper-chart-' + uniqueId
-    if (lazyLoad) {
-        iframe.loading = "lazy";
-    }
-    
-    div.appendChild(iframe)
-    parentDiv.appendChild(div)
-    rootElement.appendChild(parentDiv)
+        //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
+        iframe.className = 'border-0 top-0 left-0 w-full h-full overflow-y-hidden'
+        iframe.id = 'datawrapper-chart-' + id
+        iframe.setAttribute('data-isloaded', '0')
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+
+        div.appendChild(iframe)
+        parentDiv.appendChild(div)
+        rootElement.appendChild(parentDiv)
     }
     return {
-        createNoResponsiveIframe: createNoResponsiveIframe
+        createNoResponsiveIframe: createNoResponsiveIframe,
     }
 }
 
-export default DataWrapperNoResponsiveIframe      
+export default DataWrapperNoResponsiveIframe

package/src/stories/views/components/external-service/externalServiceDs.feature.js

@@ -29,10 +29,7 @@ const ExternalService = function (context) {
     let embedCode = options.embedCode,
         iframe,
         settingsCookie = new SettingsCookie(),
-        noResponsiveIframe,
-        contentRefresher,
         gemeindewahlergebnis,
-        uniqueId,
         isExternalServiceLoaded = false,
         tiktokOnPage = []
 
@@ -74,61 +71,34 @@ const ExternalService = function (context) {
     }
 
     const insertExternalService = function () {
-        switch (embedType) {
-            case 'js':
-                switch (id) {
-                    case '23degrees':
-                        createTwentyThreeDegreesEmbed()
-                        break
-                    case 'facebook-post':
-                        createFacebookEmbed()
-                        break
-                    case 'instagram':
-                        createInstagramEmbed()
-                        break
-                    case 'tiktok':
-                        createTikTokEmbed()
-                        break
-                    case 'twitter':
-                        createTwitterEmbed()
-                        break
-                    case 'twitter-post':
-                        createTwitterPostEmbed()
-                        break
-                    case 'datawrapper_cdn':
-                        createDataWrapperEmbed()
-                        break
-                    case 'wahlmonitor':
-                        createWahlEmbed()
-                        break
-                    case 'wahlmonitor_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte':
-                        createWahlEmbed()
-                        break
-                    case 'wahlkreiskarte_v2':
-                        createWahlEmbed()
-                        break
-                    case 'wahlomat-euwa':
-                        createWahlOMatEuwaEmbed()
-                        break
-                    case 'wahlomat-butawa':
-                        createWahlOMatButawaEmbed()
-                        break
-                    case 'wahl-gemeinde-ergebnis':
-                        createWahlGemeindeErgebnisEmbed()
-                        break
-                    case 'wer-waehlte-wen':
-                        werWaehlteWenEmbed()
-                        break
-                    default:
-                        console.error('No JS Config for external service ' + id)
-                        break
-                }
-                break
-            default:
-                loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
+        if (embedType !== 'js') {
+            loadIframe() // Für alle Dienste, die nicht der DSGVO Datapolicy unterliegen
+            return
+        }
+
+        const externalServiceMap = {
+            '23degrees': createTwentyThreeDegreesEmbed,
+            'facebook-post': createFacebookEmbed,
+            'instagram': createInstagramEmbed,
+            'tiktok': createTikTokEmbed,
+            'twitter': createTwitterEmbed,
+            'twitter-post': createTwitterPostEmbed,
+            'datawrapper_cdn': createDataWrapperEmbed,
+            'wahlmonitor': createWahlEmbed,
+            'wahlmonitor_v2': createWahlEmbed,
+            'wahlkreiskarte': createWahlEmbed,
+            'wahlkreiskarte_v2': createWahlEmbed,
+            'wahlomat-euwa': createWahlOMatEuwaEmbed,
+            'wahlomat-butawa': createWahlOMatButawaEmbed,
+            'wahl-gemeinde-ergebnis': createWahlGemeindeErgebnisEmbed,
+            'wer-waehlte-wen': werWaehlteWenEmbed,
+        }
+
+        const service = externalServiceMap[id]
+        if (service) {
+            service()
+        } else {
+            console.error(`No JS Config for external service ${id}`)
         }
     }
 
@@ -206,14 +176,6 @@ const ExternalService = function (context) {
         })
     }
 
-    const createUniqueID = function () {
-        console.log('Erzeuge einzigartige ID')
-        uniqueId = Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substring(2, 10)
-    }
-
     const getAspectRatioClass = function () {
         switch (iFrameConfig.aspectRatio) {
             case '16x9':
@@ -237,96 +199,104 @@ const ExternalService = function (context) {
 
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        createUniqueID()
-        console.log('UniqueID' + uniqueId)
-        if (iFrameConfig.noResponsiveIframe == 'true') {
+        const uniqueId = createUniqueID()
+        const {
+            isNoResponsiveIframe,
+            isWebcomponent,
+            refreshContent,
+            aspectRatio,
+            fixedHeight,
+            refreshIntervall,
+        } = iFrameConfig
+
+        const addContentRefresher = (isWebcomponent) => {
+            new DataWrapperContentRefresher({
+                rootElement,
+                id: uniqueId,
+                refreshIntervall,
+                isWebcomponent,
+            }).createRefresher()
+        }
+
+        if (isNoResponsiveIframe == 'true') {
             //Klassisches Iframe mit AR-Wrapper oder fester Höhe
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(
-                context,
-                iFrameConfig.aspectRatio,
-                iFrameConfig.fixedHeight,
-                uniqueId,
-                embedCode,
-                lazyLoad
-            )
-            noResponsiveIframe.createNoResponsiveIframe()
-
-            if (iFrameConfig.refreshContent == 'true') {
-                console.log('contentRefresher anfügen')
-                contentRefresher = new DataWrapperContentRefresher(
-                    context,
-                    uniqueId,
-                    iFrameConfig.refreshIntervall,
-                    false
-                )
-                contentRefresher.createRefresher()
+            new DataWrapperNoResponsiveIframe({
+                rootElement: rootElement,
+                aspectRatio: aspectRatio,
+                fixedHeight: fixedHeight,
+                id: uniqueId,
+                embedCode: embedCode,
+                lazyLoad: lazyLoad,
+            }).createNoResponsiveIframe()
+
+            if (refreshContent == 'true') {
+                addContentRefresher(false)
             }
-        } else {
-            if (iFrameConfig.webcomponent == 'true') {
-                // Webcomponent
-                const divTag = document.createElement('div')
-                divTag.id = 'datawrapper-chart-' + uniqueId
-                rootElement.insertBefore(divTag, null)
-                const scriptTag = document.createElement('script')
-                scriptTag.setAttribute('id', 'datawrapper-component-js')
-                scriptTag.setAttribute('type', 'text/javascript')
-                scriptTag.setAttribute('defer', 'defer')
-                scriptTag.setAttribute('src', embedCode + 'embed.js?v=1')
-                scriptTag.setAttribute('charset', 'utf-8')
-                const noScriptTag = document.createElement('noscript')
-                const imageTag = document.createElement('img')
-                imageTag.src = embedCode + 'full.png'
-                imageTag.alt = ''
-                noScriptTag.appendChild(imageTag)
-                divTag.appendChild(scriptTag)
-                divTag.appendChild(noScriptTag)
-
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        true
-                    )
-                    contentRefresher.createRefresher()
-                }
-            } else {
-                //Responsives Iframe
-                var iframe = document.createElement('iframe')
-                //Auflösen nach Tailwind-Klassen //dataWrapper-embed
-                iframe.className = 'w-0 !min-w-full border-0'
-                iframe.setAttribute('webkitallowfullscreen', '')
-                iframe.setAttribute('mozallowfullscreen', '')
-                iframe.setAttribute('allowfullscreen', '')
-                iframe.setAttribute('scrolling', 'no')
-                iframe.setAttribute('frameborder', '0')
-                iframe.src = embedCode
-                iframe.id = 'datawrapper-chart-' + uniqueId
-                if (lazyLoad) {
-                    iframe.loading = 'lazy'
-                }
-                rootElement.insertBefore(iframe, null)
+            return
+        }
 
-                loadScript(
-                    'datawrapper-js',
-                    'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
-                    true
-                )
-                if (iFrameConfig.refreshContent == 'true') {
-                    console.log('contentRefresher anfügen')
-                    contentRefresher = new DataWrapperContentRefresher(
-                        context,
-                        uniqueId,
-                        iFrameConfig.refreshIntervall,
-                        false
-                    )
-                    contentRefresher.createRefresher()
-                }
+        if (isWebcomponent == 'true') {
+            // Webcomponent
+            const divTag = document.createElement('div')
+            divTag.id = `datawrapper-chart-${uniqueId}`
+            rootElement.appendChild(divTag)
+
+            const scriptTag = document.createElement('script')
+            Object.assign(scriptTag, {
+                id: 'datawrapper-component-js',
+                type: 'text/javascript',
+                defer: true,
+                src: `${embedCode}embed.js?v=1`,
+                charset: 'utf-8',
+            })
+
+            const noScriptTag = document.createElement('noscript')
+            const imageTag = document.createElement('img')
+            imageTag.src = `${embedCode}full.png`
+            imageTag.alt = ''
+            noScriptTag.appendChild(imageTag)
+
+            divTag.append(scriptTag, noScriptTag)
+
+            if (refreshContent == 'true') {
+                addContentRefresher(true)
             }
+            return
+        }
+        //Responsives Iframe
+        const iframe = document.createElement('iframe')
+        //Auflösen nach Tailwind-Klassen //dataWrapper-embed
+        iframe.className = 'w-0 !min-w-full border-0'
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        iframe.id = `datawrapper-chart-${uniqueId}`
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+        rootElement.appendChild(iframe)
+
+        loadScript(
+            'datawrapper-js',
+            'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
+            true
+        )
+        if (refreshContent == 'true') {
+            addContentRefresher(false)
         }
     }
 
+    const createUniqueID = function () {
+        console.log('Erzeuge einzigartige ID')
+        return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
+    }
+
     const createTwentyThreeDegreesEmbed = function () {
         removeDatapolicyBox()
 

package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs

@@ -3,7 +3,7 @@
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
              data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","lazyLoad":{{defaultIfEmpty _lazyLoad false}},"dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
-                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
+                "fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"isNoResponsiveIframe":"{{{this.setResponsiveIframe}}}","isWebcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
             {{~> components/external-service/components/external_service_data_policy ~}}
         </div>
         {{~> components/external-service/components/external_service_caption ~}}

package/src/stories/views/components/page/index/page.hbs

@@ -18,6 +18,7 @@
     </head>
 
     <body itemscope itemtype="http://schema.org/WebPage">
+     {{~> components/appBanner/appBanner ~}}
         <div class="js-pageSwap">
                       
             {{> components/site_header/header }}          

package/src/stories/views/components/top_button/top_button.hbs

@@ -1,7 +1,7 @@
 <div class="h-8" x-data="{ isVisible: false }">
     <div class="grid grid-page z-100" :class="{ 'fixed bottom-feature-box-height left-0 w-full': !$store.footerIsVisible }">       
         <div class="flex justify-between h-0 col-full sm:col-main"
-        :class="{ 'bg-white h-8': $store.footerIsVisible }"
+        :class="{ 'bg-white h-8': $store.footerIsVisible, 'h-22': $store.appBannerIsVisible && !$store.footerIsVisible}"
         x-show="!$store.sharingIsVisible && isVisible"
         x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-500 transform order-first"
         x-transition:enter-start="opacity-0 translate-y-8"