From cfa82aa8e6ce192573754e31ef8dbe862c4313a9 Mon Sep 17 00:00:00 2001
From: Heike Reinken <reinken@ub.uni-leipzig.de>
Date: Mon, 30 Nov 2020 15:57:52 +0100
Subject: [PATCH] refs #18016[master] Review sort and limit on result page
* Change display property
* Handle width XS
* Review the widths SM, MD and LG
* Complete the width XS
* Surround the select box and the refresh button with a div-tag
* Review the styling for the width XS
* Review the new div-tag for all widths
---
themes/finc/scss/compiled.scss | 61 +++++++++++++++++--
.../templates/search/controls/limit.phtml | 21 ++++---
.../finc/templates/search/controls/sort.phtml | 21 ++++---
3 files changed, 81 insertions(+), 22 deletions(-)
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index 5e7e39fd4fb..91c61145434 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -1846,12 +1846,28 @@ footer {
.limit {
margin-right: ($grid-gutter-width / 2);
+}
- @media only screen and (max-width: $screen-xs-max) {
- float: right;
- margin-bottom: 7px;
- margin-right: 0;
+.limit,
+.sort {
+ margin-bottom: 5px;
+
+ label {
+ line-height: normal;
+ margin-bottom: 0;
}
+
+ select {
+ margin-bottom: 5px;
+ }
+}
+
+.search-controls-div {
+ display: inline-block;
+}
+
+.search-sort {
+ display: block;
}
// limit the width of the select field if necessary - for more select details, see FORMS section above
@@ -1859,6 +1875,43 @@ footer {
max-width: 12em;
}
+@media only screen and (max-width: $screen-xs-max) {
+ .limit,
+ .sort {
+ float: left;
+
+ button,
+ label,
+ select {
+ display: block;
+ }
+
+ select {
+ margin-bottom: 0;
+ margin-right: .2rem;
+ }
+ }
+
+ .limit {
+ margin-right: 1rem;
+ }
+
+ // Place the refresh button near to the select box
+ .search-controls-div {
+ display: flex;
+ }
+
+ // Force the label for floating the text left
+ .search-sort.text-right {
+ text-align: left;
+ }
+
+ // Force the search-sort content to being floated left. Otherwise the refresh button is not visible during user zoom 200%.
+ .sort.right {
+ float: left !important;
+ }
+}
+
//// Off-Canvas
@media only screen and (max-width: $screen-sm-max) {
.close-offcanvas {
diff --git a/themes/finc/templates/search/controls/limit.phtml b/themes/finc/templates/search/controls/limit.phtml
index dd5d27f2d95..8c34fc5bc7c 100644
--- a/themes/finc/templates/search/controls/limit.phtml
+++ b/themes/finc/templates/search/controls/limit.phtml
@@ -1,18 +1,21 @@
<!-- finc: search - controls - limit -->
+<?php /* Add div #18016 - HR */ ?>
<?php $limitList = $this->params->getLimitList(); ?>
<?php if (count($limitList) > 1): ?>
<?php /* finc: DO NOT use class 'form-inline' as it messes up the select box */ ?>
<form class="limit" action="<?=$this->currentPath() . $this->results->getUrlQuery()->setLimit(null)?>" method="post">
<label for="limit"><?=$this->transEsc('Results per page')?></label>
- <?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?>
- <select id="limit" name="limit">
- <?php foreach ($limitList as $limitVal => $limitData): ?>
- <option value="<?=$this->escapeHtmlAttr($limitVal)?>" <?=$limitData['selected']? ' selected="selected" ':'' ?>><?=$this->escapeHtml($limitData['desc'])?></option>
- <?php endforeach; ?>
- </select>
- <button type="submit" class="btn btn-primary" aria-label="<?=$this->transEsc("Set")?>">
- <i class="fa fa-refresh" aria-hidden="true"></i>
- </button>
+ <div class="search-controls-div">
+ <?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?>
+ <select id="limit" name="limit">
+ <?php foreach ($limitList as $limitVal => $limitData): ?>
+ <option value="<?=$this->escapeHtmlAttr($limitVal)?>" <?=$limitData['selected']? ' selected="selected" ':'' ?>><?=$this->escapeHtml($limitData['desc'])?></option>
+ <?php endforeach; ?>
+ </select>
+ <button type="submit" class="btn btn-primary" aria-label="<?=$this->transEsc("Set")?>">
+ <i class="fa fa-refresh" aria-hidden="true"></i>
+ </button>
+ </div>
</form>
<?php endif; ?>
<!-- finc: search - controls - limit - END -->
diff --git a/themes/finc/templates/search/controls/sort.phtml b/themes/finc/templates/search/controls/sort.phtml
index 26689a993f6..557a995a4dc 100644
--- a/themes/finc/templates/search/controls/sort.phtml
+++ b/themes/finc/templates/search/controls/sort.phtml
@@ -1,18 +1,21 @@
<!-- finc: search - controls - sort -->
+<?php /* Add div #18016 - HR */ ?>
<?php $list = $this->params->getSortList(); if (!empty($list)): ?>
<?php /* finc: we use class 'text-right' */ ?>
<form class="search-sort text-right" action="<?=$this->currentPath()?>" method="get" name="sort">
<?=$this->results->getUrlQuery()->asHiddenFields(['sort' => '/.*/']);?>
<label for="sort_options_1"><?=$this->transEsc('Sort')?></label>
- <?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?>
- <select id="sort_options_1" name="sort">
- <?php foreach ($list as $sortType => $sortData): ?>
- <option value="<?=$this->escapeHtmlAttr($sortType)?>" <?=$sortData['selected']?' selected="selected"':''?>><?=$this->transEsc($sortData['desc'])?></option>
- <?php endforeach; ?>
- </select>
- <button type="submit" class="btn btn-primary" aria-label="<?=$this->transEsc("Set")?>">
- <i class="fa fa-refresh" aria-hidden="true"></i>
- </button>
+ <div class="search-controls-div">
+ <?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?>
+ <select id="sort_options_1" name="sort">
+ <?php foreach ($list as $sortType => $sortData): ?>
+ <option value="<?=$this->escapeHtmlAttr($sortType)?>" <?=$sortData['selected']?' selected="selected"':''?>><?=$this->transEsc($sortData['desc'])?></option>
+ <?php endforeach; ?>
+ </select>
+ <button type="submit" class="btn btn-primary" aria-label="<?=$this->transEsc("Set")?>">
+ <i class="fa fa-refresh" aria-hidden="true"></i>
+ </button>
+ </div>
</form>
<?php endif; ?>
<!-- finc: search - controls - sort - END -->
--
GitLab