From a011e4c2eecc37cd09838f60ba7be921d50381b8 Mon Sep 17 00:00:00 2001
From: Heike Reinken <reinken@ub.uni-leipzig.de>
Date: Fri, 12 Jun 2020 15:36:39 +0200
Subject: [PATCH] refs #17599 [master] Some amendments * Hover for Search-Inout
and Search-Select in header * Hover contrast for language option fields *
Hover over search input field * Hover over language selection for MD and LG
** Active language is a disabled button now ** No rebuilt of the page for an
active language now * Mouse hover is identically now with keyboard hover for
the header logo * Some amendments for the header ** Add focus for search
input field and search selection ** Review the language button *** For only
two configured languages there will appear only a button for the other
language not beeing used currently *** For more than two languages there will
appear a dropdown menu ** Set the navbar height to 112px as suggested in the
ticket
---
themes/finc/scss/_customVariables.scss | 5 +-
themes/finc/scss/compiled.scss | 91 ++++++++++++++++++++++----
themes/finc/templates/header.phtml | 20 +++---
3 files changed, 94 insertions(+), 22 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 934dcb13290..9cd3d1cb241 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -136,6 +136,9 @@ $btn-transparent-border: $border-color !default;
$button-title-hover-bg: $brand-secondary !default;
+$btn-language-hover-bg: $brand-secondary !default;
+$btn-language-active-hover-bg: $steel !default;
+
// Padding for toolbar buttons in record view/detail view
$record-view-toolbar-button-padding: .5rem;
@@ -203,7 +206,7 @@ $grid-gutter-width: 30px !default;
//// For fixed navbars ('navbar-fixed-top' in 'header.phtml'), the body requires a padding-bottom of the same height as the navbar because of postition.fixed
//// When using 'affix' instead of 'navbar-fixed-top', set '$navbar-height', '$navbar-height-xs' and '$navbar-height-sm' to '=0'
//// or set the paddings-top under 'body' in compiled.scss to '=0'; see also the comment in header.phtml
-$navbar-height: 80px !default;
+$navbar-height: 112px !default; // = 7 x 1rem //80px !default;
$navbar-height-sm: $navbar-height !default;
//// Set navbar-height for small devices, USE px as rem will throw an error in conjunction _variables.scss
$navbar-height-xs: $navbar-height + 40px !default;
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index 3c69101d781..c1a2a5bfb8d 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -96,7 +96,16 @@ body {
// make xception for adv. search home
&.template-name-advanced {
- padding-top: 3.25rem;
+ @media (max-width: $screen-xs-max) {
+ padding-top: 3.25rem;
+ }
+ }
+
+ // make exception for adv. search results
+ &.template-name-advanced {
+ @media (max-width: $screen-xs-max) {
+ padding-top: 3.25rem;
+ }
}
// for tablet
@@ -466,6 +475,35 @@ select {
//// textarea {}
+// Mouse hover for input[type='text'] and select
+input[type='text'] {
+ &:hover {
+ outline: 1px $black solid;
+ }
+
+ header,
+ #searchForm &:focus,
+ #searchForm &:hover {
+ box-shadow: none;
+ outline: 1px $black solid;
+ outline-offset: -1px;
+ }
+}
+
+select {
+ &:hover {
+ outline: 1px $black solid;
+ }
+
+ header,
+ #searchForm &:focus,
+ #searchForm &:hover {
+ box-shadow: none;
+ outline: 1px $black solid;
+ outline-offset: -1px;
+ }
+}
+
// FORMS - END
// IMAGES
@@ -1187,8 +1225,8 @@ header,
}
}
- // Make language dropdown visible, style it and hide active but show selectable language(s)
- @media (max-width: $screen-sm-max) {
+ // Style language dropdown for XS
+ @media (max-width: $screen-xs-max) {
// avoid BG bleed on small
.navbar-nav {
margin-bottom: 0;
@@ -1197,9 +1235,7 @@ header,
.language .dropdown-menu {
background-color: $navbar-bg-color;
border: 0;
- display: block;
min-width: 4em;
- position: relative;
li {
@@ -1211,16 +1247,24 @@ header,
padding-left: 0;
padding-right: 0;
}
- }
-
- &.active {
- display: none;
+ &.btn:hover {
+ background-color: $white;
+ }
}
}
}
+ .language .dropdown-menu.oneLanguage {
+ display: block;
+ position: relative;
+ }
}
}
+.language .dropdown-menu.oneLanguage {
+ display: block;
+ position: relative;
+}
+
.navbar-header {
flex: 0 1 auto;
@@ -1283,10 +1327,9 @@ header,
float: left;
padding: ($grid-gutter-width / 4) ($grid-gutter-width / 2) ($grid-gutter-width / 4) 0;
- img {
- &:hover {
- @include outline(1px);
- }
+ &:hover {
+ @include outline(1px);
+ outline-offset: -2px;
}
@media (max-width: $screen-xs-max) {
@@ -2359,6 +2402,15 @@ footer ul {
// Bookbag - END
+// Accessibility
+.language .dropdown-menu {
+ .btn:hover {
+ background-color: $btn-language-hover-bg;
+ }
+}
+
+// Accessibility - END
+
// Translate feature
#set-translation-form {
margin-top: 2em;
@@ -2586,3 +2638,16 @@ input {
color: $btn-transparent-active-color;
}
}
+
+// Accessibility
+.language .dropdown-menu {
+ .btn:hover {
+ background-color: $btn-language-hover-bg;
+ }
+
+ .active .btn:hover {
+ background-color: $btn-language-active-hover-bg;
+ }
+}
+
+// Accessibility - END
diff --git a/themes/finc/templates/header.phtml b/themes/finc/templates/header.phtml
index 2d6436ece01..b0cc6784bba 100644
--- a/themes/finc/templates/header.phtml
+++ b/themes/finc/templates/header.phtml
@@ -103,17 +103,21 @@
<form method="post" name="langForm" id="langForm">
<input type="hidden" name="mylang"/>
</form>
- <a href="#" class="btn dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" aria-controls="langmenu" aria-expanded="false">
- <?=$this->transEsc("Language")?> <strong class="caret"></strong>
- </a>
- <ul id="langmenu" class="dropdown-menu">
+
+ <a href="#" class="btn dropdown-toggle <?=(count($this->layout()->allLangs) == 2) ? ' hidden-xs hidden-sm hidden-md hidden-lg' : ''?>" data-toggle="dropdown" aria-controls="langmenu" aria-expanded="false">
+ <?=$this->transEsc("Language")?> <strong class="caret"></strong>
+ </a>
+
+ <ul id="langmenu" class="dropdown-menu <?=(count($this->layout()->allLangs) == 2) ? ' oneLanguage' : ''?>">
<?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
- <li <?=$this->layout()->userLang == $langCode ? ' class="active"' : ''?>>
- <a class="btn" href="#" onClick="document.langForm.mylang.value='<?=$langCode?>';document.langForm.submit()"><?=$this->displayLanguageOption($langName)?></a>
- </li>
+ <?php if (!(strcmp($langCode, $this->layout()->userLang) == 0)) : ?>
+ <li>
+ <a class="btn <?=(count($this->layout()->allLangs) == 2) ? ' btn-secondary' : ''?>" href="#" onClick="document.langForm.mylang.value='<?=$langCode?>';document.langForm.submit()"><?=$this->displayLanguageOption($langName)?></a>
+ </li>
+ <?php endif; ?>
<?php endforeach; ?>
</ul>
- </li>
+ </li>
<?php endif; ?>
</ul>
</nav>
--
GitLab