Improve footer responsiveness
Change-Id: I600c7abb258c96d815ae7b7bef42996d235a854c
diff --git a/Changes b/Changes
index ab0f37e..ac459ff 100644
--- 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
index 97cfce8..e2ec64e 100644
--- a/dev/scss/footer/footer.scss
+++ b/dev/scss/footer/footer.scss
@@ -24,11 +24,33 @@
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 @@
content: none
}
}
-
- span.separator {
- &:after {
- font-size: bold;
- content: " | ";
- color: $dark-orange;
- }
- }
}
/**
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index bb2975d..88738a9 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -209,9 +209,31 @@
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 @@
border-left-color: black;
border-left-width: 1em;
}
-}
\ No newline at end of file
+}
diff --git a/lib/Kalamar/Plugin/KalamarPages.pm b/lib/Kalamar/Plugin/KalamarPages.pm
index 9596ad0..5e6a19f 100644
--- a/lib/Kalamar/Plugin/KalamarPages.pm
+++ b/lib/Kalamar/Plugin/KalamarPages.pm
@@ -36,7 +36,7 @@
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
index fe56167..ef8bec5 100644
--- a/t/intro.t
+++ b/t/intro.t
@@ -18,7 +18,7 @@
->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
index 6393628..97454a0 100644
--- 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>