refs #15231

* fixes position of shards checkboxes

themes/fid_bbi/scss/compiled.scss

@@ -117,23 +117,50 @@ body {
 .searchbox-home {
   // truly justify content
   .searchForm {
-    display: flex;
+    display: inline-flex;
     justify-content: center;
+    min-width: 310px;
+  }
+
+  // Search button
+  .list-unstyled {
+    display: flex;
+  }
+
+  // Shard box
+  .checkbox {
+    transform: translate(-250%, 200%);
   }
 }
 
 // Search Box on all other pages
-.searchbox {
-  .searchForm {
+.searchbox .searchbox-wrapper {
     display: inline-flex;
     position: absolute;
     right: 10px;
     top: 45px;
+}
 
-    input {
+.searchForm {
+  input:not(.shards-checkbox) {
       min-width: 250px;
     }
   }
+
+// Shards checkbox elements
+.searchbox .searchForm .checkbox {
+  border: 1px solid $white;
+  color: $white;
+  padding: 7px 5px 5px;
+  position: absolute;
+  top: 45px;
+}
+
+.search.container .searchForm .checkbox {
+  @media only screen and (max-width: $screen-sm-max) {
+    margin-left: 1.5rem;
+    top: 100px;
+  }
 }
 
 // Content

themes/fid_bbi/templates/search/searchbox.phtml

@@ -46,13 +46,14 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
   </div>
 <?php else: ?>
   <form id="searchForm" class="searchForm navbar-form flip" method="get" action="<?=$this->url($basicSearch)?>" name="searchForm" autocomplete="off">
-    <?= $this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs']]); ?>
-    <?php $placeholder = $this->searchbox()->getPlaceholderText($tabConfig['selected']['id'] ?? null); ?>
-    <?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 /* finc: We use a list here, CK */ ?>
-    <ul class="list-unstyled">
-      <?php /* if ($handlerCount > 1): ?>
+    <div class="searchbox-wrapper">
+      <?=$this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs']]);?>
+      <?php $placeholder = $this->searchbox()->getPlaceholderText($tabConfig['selected']['id'] ?? null); ?>
+      <?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 /* finc: We use a list here, CK */ ?>
+      <ul class="list-unstyled">
+        <?php /* if ($handlerCount > 1): ?>
         <li class="hidden-xs">
           <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): ?>
@@ -64,21 +65,21 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
       <?php elseif ($handlerCount == 1): ?>
         <input type="hidden" name="type" value="<?=$this->escapeHtmlAttr($handlers[0]['value'])?>"/>
       <?php endif; */ ?>
-      <li>
-        <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> <span class="find-label sr-only"><?=$this->transEsc("Find")?></span></button>
-      </li>
-      <?php /* if ($advSearch): ?>
+        <li>
+          <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> <span class="find-label sr-only"><?=$this->transEsc("Find")?></span></button>
+        </li>
+        <?php /* if ($advSearch): ?>
         <li class="hidden-xs">
           <a href="<?=$this->url($advSearch) . ((isset($this->searchId) && $this->searchId) ? '?edit=' . $this->escapeHtmlAttr($this->searchId) : $hiddenFilterParams)?>" class="btn btn-transparent" role="button" rel="nofollow"><i class="fa fa-cog"></i> <span class="hidden-xs hidden-sm hidden-md"><?=$this->transEsc("Advanced")?></span></a>
         </li>
       <?php endif; */ ?>
-      <li>
-        <?php if ($geoUrl = $this->geocoords()->getSearchUrl($options)) : ?>
-          <a href="<?=$geoUrl?>" class="btn btn-link"><?=$this->transEsc('Geographic Search')?></a>
-        <?php endif; ?>
-      </li>
-    </ul>
-
+        <li>
+          <?php if ($geoUrl = $this->geocoords()->getSearchUrl($options)) : ?>
+            <a href="<?=$geoUrl?>" class="btn btn-link"><?=$this->transEsc('Geographic Search')?></a>
+          <?php endif; ?>
+        </li>
+      </ul>
+    </div>
     <?php /* finc: We hide this for small and keep the solution using labels, same below - CK */ ?>
     <div class="checkbox hidden-xs">
       <?php $shards = $options->getShards();
@@ -90,7 +91,8 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
         <?php foreach ($shards as $shard => $val): ?>
           <?php $isSelected = empty($selectedShards) || in_array($shard, $selectedShards); ?>
           <label for="checkbox_<?=$this->escapeHtmlAttr($shard)?>"><?=$this->transEsc($shard)?>
-          <input type="checkbox" <?=$isSelected ? 'checked="checked" ' : ''?>name="shard[]" value='<?=$this->escapeHtmlAttr($shard)?>' id='checkbox_<?=$this->escapeHtmlAttr($shard)?>'/>
+            <input type="checkbox" <?=$isSelected ? 'checked="checked" ' : ''?>name="shard[]" value='<?=$this->escapeHtmlAttr($shard)?>' id='checkbox_<?=$this->escapeHtmlAttr($shard)?>'
+                   class="shards-checkbox"/>
           </label>
         <?php endforeach; ?>
       <?php endif; ?>