Simplify language menu: Use list-inline instead of custom styles

benjaminkott · Jan 7, 2024 · 8cb049a · 8cb049a
1 parent 6f3e3c2
commit 8cb049a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 20 deletions.
diff --git a/Resources/Private/Partials/Page/Navigation/Language.html b/Resources/Private/Partials/Page/Navigation/Language.html
@@ -1,16 +1,16 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:if condition="{languagenavigation}">
-    <ul id="language_menu" class="language-menu">
+    <ul class="list-inline">
         <f:for each="{languagenavigation}" as="item">
-            <li class="{f:if(condition: item.active, then: 'active')} {f:if(condition: item.available, else: 'inactive')}">
+            <li class="list-inline-item{f:if(condition: item.active, then: ' active')}{f:if(condition: item.available, else: ' text-muted')}">
                 <f:if condition="{item.available}">
                     <f:then>
                         <a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
-                            <span>{item.navigationTitle}</span>
+                            {item.navigationTitle}
                         </a>
                     </f:then>
                     <f:else>
-                        <span>{item.navigationTitle}</span>
+                        {item.navigationTitle}
                     </f:else>
                 </f:if>
             </li>

diff --git a/Resources/Public/Scss/components/_footer.scss b/Resources/Public/Scss/components/_footer.scss
@@ -161,25 +161,10 @@ $footer-sections: map-merge(
 // Footer Language
 // --------------------------------------------------
 .footer-language {
-    .language-menu {
-        margin: 0;
-        list-style: none;
-        padding-left: 0;
-        @include media-breakpoint-up('sm') {
-            margin-left: -.5em;
-            margin-right: -.5em;
-            > li {
-                display: inline-block;
-                padding-left: .5em;
-                padding-right: .5em;
-            }
-        }
+    ul {
         .active a {
             font-weight: bold;
         }
-        .inactive {
-            opacity: .5;
-        }
     }
 }