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

@@ -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 {

themes/finc/templates/search/controls/limit.phtml

 <!-- 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 -->

themes/finc/templates/search/controls/sort.phtml

 <!-- 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 -->