Improve footer responsiveness

Change-Id: I600c7abb258c96d815ae7b7bef42996d235a854c
KorAP · Jun 10, 2024 · c84ec1a · c84ec1a
1 parent 06d4d1f
commit c84ec1a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 13 deletions.
diff --git a/Changes b/Changes
@@ -1,5 +1,6 @@
-0.54 2024-05-05
+0.54 2024-06-10
         - Remove deprecated 'matchInfo' API path. (diewald, margaretha)
+        - Improve footer responsiveness. (diewald)
 
         WARNING: This change requires at least Kustvakt v0.61.6.
 

diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
@@ -24,11 +24,33 @@ footer {
     padding: $item-padding;
     text-align: left;
     flex-grow: 2;
+    display: flex;
+    flex-direction: row;
     a {
       white-space: nowrap;
     }
   }
 
+  > nav > div {
+    display: inline;
+    margin: .2em;
+    &:after {
+      font-size: bold;
+      content: " | ";
+      white-space: nowrap;
+      color:   $dark-orange;
+    }
+    &:last-child {
+      margin-right: 0;
+      &:after {
+        content: none;
+      }
+    }
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
   div.logos {
     font-size: 0;
     flex-grow: 1;
@@ -52,14 +74,6 @@ footer {
       content: none
     }
   }
-
-  span.separator {
-    &:after {
-      font-size: bold;
-      content: " | ";
-      color:   $dark-orange;
-    }
-  }
 }
 
 /**

diff --git a/dev/scss/media.scss b/dev/scss/media.scss
@@ -209,9 +209,31 @@ $standard-margin: 4px;
 
   footer {
     padding-left: 0 !important;
+    nav {
+      margin-left: 1em;
+      height: auto;
+      flex-direction: column;
+      div {
+        margin-left: 0;
+        &:after {
+          content: "";
+        }
+      }
+    }
   }
 }
 
+@media all and (max-width: 32em) {
+  footer {
+    padding-top: 1em;
+    height: auto;
+    align-items: flex-start;
+    flex-direction: column;
+    div#logos {
+      margin: auto;
+    }
+  }
+}
 
 @media print {
   body, html, select, g > text {
@@ -239,4 +261,4 @@ $standard-margin: 4px;
     border-left-color: black;
     border-left-width: 1em;
   }
-}
+}
diff --git a/lib/Kalamar/Plugin/KalamarPages.pm b/lib/Kalamar/Plugin/KalamarPages.pm
@@ -36,7 +36,7 @@ sub register {
       my $url = $c->url_with($realm, page => $page, scope => $scope);
       my $p = $url->query;
 
-      # Remove oauth-specific psarameters
+      # Remove oauth-specific parameters
       # (Maybe only allowing specific parameters is better though)
       $p->remove('client_id')
         ->remove('client_secret')

diff --git a/t/intro.t b/t/intro.t
@@ -18,7 +18,7 @@ $t->get_ok('/')
   ->text_is('div.intro > p > strong', 'KorAP')
   ->content_unlike(qr!onload!)
   ->text_is('#link-guided-tour', 'guided tour')
-  ->text_is('nav > a[href=/doc/korap/kalamar]', 'V 0.47.999')
+  ->text_is('nav > div > a[href=/doc/korap/kalamar]', 'V 0.47.999')
   ->element_exists('select#ql-field option[value=poliqarp]')
   ->element_exists('select#ql-field option[value=cqp]')
   ->element_exists_not('select#ql-field option[value=noliqart]')

diff --git a/templates/partial/footer.html.ep b/templates/partial/footer.html.ep
@@ -1,6 +1,6 @@
 <footer>
   <nav>
-    %= content_block 'footer', separator => '<span class="separator"></span>'
+    <div><%= content_block 'footer', separator => '</div><div>' %></div>
   </nav>
   <div id="logos">
     <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Entwickelt am Leibniz-Institut für Deutsche Sprache (IDS)</span></p></a>