From 5693178f93be8d71f023fee138a8a65913bc6b04 Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Thu, 16 Dec 2021 12:20:32 +0100
Subject: [PATCH] refs #19552 [finc] BARF: show and zoom controls for xs and xm
* removes hidden-xs classes where useful
* fixes SCSS for removed hidden-xs elements
* fixes dropdown-arrow padding
* adds partial to make bulk action buttons visible in XS
---
themes/finc/scss/_bulkaction-visible-xs.scss | 23 ++++++++++++++
themes/finc/scss/compiled.scss | 30 +++++++++++++------
.../DefaultRecord/collection-info.phtml | 2 --
.../RecordDriver/DefaultRecord/core.phtml | 2 --
.../DefaultRecord/result-list.phtml | 2 --
.../templates/RecordDriver/SolrAI/core.phtml | 2 --
.../RecordDriver/SolrAI/result-list.phtml | 2 --
.../RecordDriver/SolrLido/core.phtml | 2 --
.../RecordDriver/SolrMarc/core.phtml | 2 --
themes/finc/templates/layout/layout.phtml | 6 ++--
themes/finc/templates/search/results.phtml | 2 +-
themes/finc/templates/search/searchbox.phtml | 2 +-
12 files changed, 49 insertions(+), 28 deletions(-)
create mode 100644 themes/finc/scss/_bulkaction-visible-xs.scss
diff --git a/themes/finc/scss/_bulkaction-visible-xs.scss b/themes/finc/scss/_bulkaction-visible-xs.scss
new file mode 100644
index 00000000000..6a5e51b4d1e
--- /dev/null
+++ b/themes/finc/scss/_bulkaction-visible-xs.scss
@@ -0,0 +1,23 @@
+// Bulk Action Buttons and result list checkboxes
+// get hidden on mobile in Bootstrap Theme -- show them again
+// in finc-based themes via this importable SCSS Partial
+@media (max-width: 767px) {
+ .bulkActionButtons,
+ .result .checkbox,
+ .result .record-checkbox,
+ .result .record-number {
+ display: table;
+ }
+
+ .result .checkbox,
+ .result .record-checkbox,
+ .result .record-number {
+ margin-right: .5em;
+ }
+
+ .result,
+ .bulk-action-buttons,
+ .bulkActionButtons {
+ padding-left: 0;
+ }
+}
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index bf39d582150..45b882ee032 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -340,6 +340,7 @@ textarea {
}
.form-control {
+ box-shadow: none;
height: $navigation-element-default-height;
@media (max-width: $screen-xs-max) {
@@ -393,6 +394,7 @@ fieldset {
float: none;
padding: 0;
}
+
legend {
font-size: $font-size-base;
margin-left: -14px;
@@ -435,6 +437,7 @@ label {
display: block;
}
}
+
//// label
.text-success,
.text-danger {
@@ -532,10 +535,6 @@ input[type='text'] {
}
}
-.form-control {
- box-shadow: none;
-}
-
//// Select - for limit and sort-select widths see below
////// remove browser styles on select boxes and add custom styles (below)
select,
@@ -551,7 +550,7 @@ select.form-control {
border-radius: 0;
height: $navigation-element-default-height;
min-width: 5em;
- padding: .25em .75em .25em .5em;
+ padding: .25em 1.2em .25em .5em;
&.form-control {
background-color: $select-bg-color;
@@ -1757,16 +1756,28 @@ header,
display: block;
}
- // Searchform input field
- input:not([type='checkbox']) {
+ // Searchform input field + search for media type field
+ input:not([type='checkbox']),
+ select.searchForm_type {
@media (max-width: $screen-sm-max) {
display: flex;
- flex-basis: 50%;
flex-grow: 2;
flex-shrink: 2;
}
}
+ input:not([type='checkbox']) {
+ @media (max-width: $screen-sm-max) {
+ flex-basis: 50%;
+ }
+ }
+
+ select.searchForm_type {
+ @media (max-width: $screen-sm-max) {
+ flex-basis: 20%;
+ }
+ }
+
// Fixme: Is there a navbar inside searchForm anywhere?
.navbar {
@media (max-width: $screen-sm-max) {
@@ -2211,7 +2222,7 @@ footer {
//// Harmonize behaviour to the edit button
.result-links .dropdown-toggle {
&:focus {
- outline: 1px dotted $black; // FIXME: REPLACE with variable, consider using '$input-border-focus'
+ outline: 1px dotted $black; // FIXME: REPLACE with variable, consider using '$input-border-focus'
}
}
@@ -3318,6 +3329,7 @@ input {
outline: 2px $black dotted;
}
}
+
// CHANNELS - END
// ZEND-FORMS
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
index 2b96c5e0466..92ecdad6b01 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
@@ -14,9 +14,7 @@
<?php /* Display qrcode if appropriate: */ ?>
<?php if ($QRCode): ?>
- <span class="hidden-xs">
<br/><img alt="<?=$this->transEsc('QR Code')?>" class="qrcode" src="<?=$this->escapeHtmlAttr($QRCode);?>"/>
- </span>
<?php endif; ?>
<?php if ($preview): ?><?=$preview?><?php endif; ?>
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
index 2836a86ebbc..9abc699ae86 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
@@ -17,9 +17,7 @@
<?php /* Display qrcode if appropriate: */ ?>
<?php if ($QRCode): ?>
- <span class="hidden-xs">
<br/><img alt="<?= $this->transEsc('QR Code') ?>" class="qrcode" src="<?= $this->escapeHtmlAttr($QRCode); ?>"/>
- </span>
<?php endif; ?>
<?php // if you have a preview tab but want to move or remove the preview link
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
index b6284f06c35..5003f3a16be 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
@@ -170,7 +170,6 @@ if ($cover):
// Add JS Variables for QrCode
$this->jsTranslations()->addStrings(['qrcode_hide' => 'qrcode_hide', 'qrcode_show' => 'qrcode_show']);
?>
- <span class="hidden-xs">
<i class="fa fa-fw fa-qrcode" aria-hidden="true"></i> <a href="<?=$this->escapeHtmlAttr($QRCode);?>" class="qrcodeLink"><?=$this->transEsc('qrcode_show')?></a>
<div class="qrcode hidden">
<script type="text/template" class="qrCodeImgTag">
@@ -178,7 +177,6 @@ if ($cover):
</script>
</div>
<br/>
- </span>
<?php endif; ?>
<?php if ($this->cart()->isActiveInSearch() && $this->params->getOptions()->supportsCart() && $this->cart()->isActive()): ?>
diff --git a/themes/finc/templates/RecordDriver/SolrAI/core.phtml b/themes/finc/templates/RecordDriver/SolrAI/core.phtml
index e6f20eacbfa..359a61233d0 100644
--- a/themes/finc/templates/RecordDriver/SolrAI/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrAI/core.phtml
@@ -18,9 +18,7 @@
<?php /* Display qrcode if appropriate: */ ?>
<?php if ($QRCode): ?>
- <span class="hidden-xs">
<br/><img alt="<?= $this->transEsc('QR Code') ?>" class="qrcode" src="<?= $this->escapeHtmlAttr($QRCode); ?>"/>
- </span>
<?php endif; ?>
<?php // if you have a preview tab but want to move or remove the preview link
diff --git a/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml b/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
index 5ca3d5c4e02..6b0dbed4c44 100644
--- a/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
+++ b/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
@@ -181,7 +181,6 @@ if ($cover):
// Add JS Variables for QrCode
$this->jsTranslations()->addStrings(['qrcode_hide' => 'qrcode_hide', 'qrcode_show' => 'qrcode_show']);
?>
- <span class="hidden-xs">
<i class="fa fa-fw fa-qrcode" aria-hidden="true"></i> <a href="<?=$this->escapeHtmlAttr($QRCode);?>" class="qrcodeLink"><?=$this->transEsc('qrcode_show')?></a>
<span class="qrcode hidden">
<script type="text/template" class="qrCodeImgTag">
@@ -189,7 +188,6 @@ if ($cover):
</script>
</span>
<br/>
- </span>
<?php endif; ?>
<?php if ($this->cart()->isActiveInSearch() && $this->params->getOptions()->supportsCart() && $this->cart()->isActive()): ?>
diff --git a/themes/finc/templates/RecordDriver/SolrLido/core.phtml b/themes/finc/templates/RecordDriver/SolrLido/core.phtml
index 9a8cdb17928..c9be4f471cf 100644
--- a/themes/finc/templates/RecordDriver/SolrLido/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrLido/core.phtml
@@ -42,9 +42,7 @@
<?php /* Display qrcode if appropriate: */ ?>
<?php if ($QRCode): ?>
- <span class="hidden-xs">
<br/><img alt="<?=$this->transEsc('QR Code')?>" class="qrcode" src="<?=$this->escapeHtmlAttr($QRCode);?>"/>
- </span>
<?php endif; ?>
<?php // if you have a preview tab but want to move or remove the preview link
diff --git a/themes/finc/templates/RecordDriver/SolrMarc/core.phtml b/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
index 37fd560fc06..84d81c2f223 100644
--- a/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
@@ -18,9 +18,7 @@
<?php /* Display qrcode if appropriate: */ ?>
<?php if ($QRCode): ?>
- <span class="hidden-xs">
<br/><img alt="<?= $this->transEsc('QR Code') ?>" class="qrcode" src="<?= $this->escapeHtmlAttr($QRCode); ?>"/>
- </span>
<?php endif; ?>
<?php // if you have a preview tab but want to move or remove the preview link
diff --git a/themes/finc/templates/layout/layout.phtml b/themes/finc/templates/layout/layout.phtml
index 8f4a34ab4c7..3c84bfdf682 100644
--- a/themes/finc/templates/layout/layout.phtml
+++ b/themes/finc/templates/layout/layout.phtml
@@ -205,13 +205,13 @@ if (!isset($this->layout()->searchbox)) {
<?php foreach ($applied as $appliedId => $appliedText): ?>
<?php if ($appliedId && $appliedText): ?>
<?php /* use css class 'skip-to' to jump to landmark - RL */?>
- <a class="sr-only hidden-xs skip-to" href="#<?=$appliedId?>"><?=$appliedText?></a>
+ <a class="sr-only skip-to" href="#<?=$appliedId?>"><?=$appliedText?></a>
<?php endif; ?>
<?php endforeach; ?>
<?php elseif (strcmp($this->layout()->userLang, 'de') == 0): ?>
- <a class="sr-only hidden-xs skip-to" href="#myresearch-sidebar"><?=$this->transEsc(isset($this->overrideSideFacetCaption) ? $this->overrideSideFacetCaption : 'Narrow Search')?></a>
+ <a class="sr-only skip-to" href="#myresearch-sidebar"><?=$this->transEsc(isset($this->overrideSideFacetCaption) ? $this->overrideSideFacetCaption : 'Narrow Search')?></a>
<?php else: ?>
- <a class="sr-only hidden-xs skip-to" href="#myresearch-sidebar"><?=$this->transEsc('skip-to')?><?=strtolower($this->transEsc(isset($this->overrideSideFacetCaption) ? $this->overrideSideFacetCaption : 'Narrow Search'))?></a>
+ <a class="sr-only skip-to" href="#myresearch-sidebar"><?=$this->transEsc('skip-to')?><?=strtolower($this->transEsc(isset($this->overrideSideFacetCaption) ? $this->overrideSideFacetCaption : 'Narrow Search'))?></a>
<?php endif; ?>
<?php endif; ?>
</div>
diff --git a/themes/finc/templates/search/results.phtml b/themes/finc/templates/search/results.phtml
index 8bac2e91e99..ac1463ded86 100644
--- a/themes/finc/templates/search/results.phtml
+++ b/themes/finc/templates/search/results.phtml
@@ -69,7 +69,7 @@ $this->headScript()->appendFile("check_save_statuses.js");
<div class="search-stats">
<?php /* finc: use spans for easier to show/hide choices - CK */ ?>
<?php if ($recordTotal > 0): ?>
- <span class="hit-stats hidden-xs hidden-sm">
+ <span class="hit-stats">
<?=$this->context()->renderInContext('search/controls/showing.phtml', ['lookfor' => $lookfor, 'recordTotal' => $recordTotal]) ?>
</span>
<span class="offcanvas-toggler">
diff --git a/themes/finc/templates/search/searchbox.phtml b/themes/finc/templates/search/searchbox.phtml
index 7821f78003d..cdb76e9a279 100644
--- a/themes/finc/templates/search/searchbox.phtml
+++ b/themes/finc/templates/search/searchbox.phtml
@@ -51,7 +51,7 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
<?php /* finc: keep "required" */ ?>
<input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if($this->searchbox()->autocompleteEnabled($this->searchClassId)):?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId) ?><?=$this->searchbox()->autocompleteAutoSubmit($this->searchClassId) ? ' ac-auto-submit' : '' ?><?php endif ?>" type="text" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEsc($placeholder) ?>"<?php endif ?> aria-label="<?=$this->transEsc("search_terms")?>" required="required" />
<?php if ($handlerCount > 1): ?>
- <select id="searchForm_type" class="searchForm_type form-control hidden-xs" name="type" data-native-menu="false" aria-label="<?=$this->transEsc("Search type")?>">
+ <select id="searchForm_type" class="searchForm_type form-control" name="type" data-native-menu="false" aria-label="<?=$this->transEsc("Search type")?>">
<?php foreach ($handlers as $handler): ?>
<option value="<?=$this->escapeHtmlAttr($handler['value'])?>"<?=$handler['selected'] ? ' selected="selected"' : ''?>><?=$handler['indent'] ? '-- ' : ''?><?=$this->transEsc($handler['label'])?></option>
<?php endforeach; ?>
--
GitLab