Add configurable link/icon for english subpages

web/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.txt

@@ -47,6 +47,8 @@ plugin.tx_eptheme {
 		watchlistPageUid =
 		# cat=eptheme/200/270; type=string; label=Skipass info page UID
 		skipassPageUid =
+		# cat=eptheme/200/280; type=string; label=English page UID
+		englishPageUid =
 
 		# cat=eptheme/400/100; type=string; label=Phone number general
 		phoneNumber = 0221 - 272 276 0

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -84,6 +84,7 @@ plugin.tx_eptheme {
         ratingPageUid = {$plugin.tx_eptheme.settings.ratingPageUid}
         watchlistPageUid = {$plugin.tx_eptheme.settings.watchlistPageUid}
         skipassPageUid = {$plugin.tx_eptheme.settings.skipassPageUid}
+        englishPageUid = {$plugin.tx_eptheme.settings.englishPageUid}
     }
     view {
         templateRootPaths.0 = EXT:ep_theme/Resources/Private/Templates

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_images.js

@@ -8,7 +8,9 @@ require('../images/at.png');
 require('../images/ch.png');
 require('../images/de.png');
 require('../images/fr.png');
+require('../images/gb.png');
 require('../images/badge_skipass.png');
+require('../images/polygon.jpg');
 
 require('../images/icons/tx_eptheme_gridelements_half_and_two_quarters.png');
 require('../images/icons/tx_eptheme_gridelements_halves.png');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_area-nav.scss

@@ -1,7 +1,7 @@
 .area-nav {
   width: 100%;
   height: $area-nav-height;
-  background: #006db6 url(../images/polygon.jpg) no-repeat top center;
+  background: #006db6 url(../../images/polygon.jpg) no-repeat top center;
   background-size: cover;
   @include mq($from: desktop) {
     position: fixed;

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_contactnav.scss

@@ -55,10 +55,15 @@
 
     span{
       font-size: 22px;
+      display: inline-block;
       @include mq($from: mobile-landscape) {
         width: 37px;
+        height: 100%;
         float: left;
         padding: 7px 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
 
@@ -79,8 +84,11 @@
     }
 
     @include mq($from: mobile-landscape) {
-      &.phone {
+      &.english {
         top: 0;
+      }
+      &.phone {
+        top: 44px;
         width: 190px;
         right: -150px;
         div {
@@ -89,7 +97,7 @@
       }
 
       &.whatsapp{
-        top: 44px;
+        top: 88px;
         width: 350px;
         right: -310px;
         div{
@@ -98,18 +106,18 @@
       }
 
       &.facebook {
-        top: 88px;
+        top: 132px;
       }
 
       &.instagram {
-        top: 132px
+        top: 176px
       }
 
       &.youtube {
-        top: 176px;
+        top: 220px;
       }
       &.watchlist {
-        top: 220px;
+        top: 264px;
       }
       &:hover{
         right: 0;
@@ -126,5 +134,18 @@
   .bg-yellow{
     background-color: #FECB00;
   }
+  .bg-blue{
+    background-color: #006db6;
+  }
 }
 
+.ep-contactnav__icon {
+  display: block;
+  height: 22px;
+  width: auto;
+
+  @include mq($from: mobile-landscape) {
+    width: 22px;
+    height: auto;
+  }
+}

web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html

@@ -24,4 +24,10 @@
         <span class="fa fa-youtube-play" aria-hidden="true"></span>
         <div>Youtube</div>
     </a>
+    <f:if condition="{settings.englishPageUid}">
+        <f:link.typolink parameter="{settings.englishPageUid}" title="English" class="bg-yellow english">
+            <span><f:image src="EXT:ep_theme/Resources/Public/images/gb.png" alt="English" class="ep-contactnav__icon"/></span>
+            <div>English</div>
+        </f:link.typolink>
+    </f:if>
 </div>