HTML Validation - Grid Results View

themes/bootstrap5/scss/components/search.scss

@@ -492,44 +492,53 @@ header .container.navbar {
 }
 
 /* ------ GRID VIEW ------ */
-.search-grid::after {
-  display: table;
-  clear: both;
-  content: '';
+
+.search-grid-list {
+  display: grid;
+  gap: 1rem;
+  padding: 0;
+  list-style-type: none;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
-.grid-result {
-  display: flex;
-  float: left;
-  width: 50%;
 
-  .grid-body {
-    flex: 1;
-    h2 {
-      font-size: inherit;
-      line-height: $line-height-base;
-      margin: 0;
+.search-grid-item {
+  position: relative;
+  display: block;
 
-      .title {
-        display: inline-block;
-        font-weight: bold;
-      }
-    }
+  .checkbox-select {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0.5rem;
+    background-color: white;
+    border: 1px solid $btn-default-border;
   }
-  .grid-checkbox {
-    flex: 0 0 30px;
-    min-width: 0;
-  }
-  .label,
-  .format {
-    display: inline-block;
-    white-space: normal;
+
+  .checkbox-select-number {
+    min-width: auto;
+    text-align: start;
   }
 }
-.grid-large-break,
-.grid-small-break { clear: both; }
-@include media-breakpoint-up(md) {
-  .grid-result{ width: 25%; }
-  .grid-small-break { display: none; }
+
+.grid-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  * {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: inherit;
+    font-weight: bold;
+  }
+
+  .recordcover {
+    border: 1px solid $btn-default-border;
+  }
 }
 
 .searchtools {

themes/bootstrap5/templates/RecordDriver/DefaultRecord/result-grid.phtml

@@ -14,11 +14,6 @@ $showCheckboxes = $this->searchSettings($this->results->getParams())->checkboxes
 
 <div class="grid-result<?=$this->driver->supportsAjaxStatus() ? ' ajaxItem' : ''?>">
   <input type="hidden" value="<?=$this->escapeHtmlAttr($this->driver->getUniqueID())?>" class="hiddenId">
-  <?php if ($showCheckboxes): ?>
-    <label class="grid-checkbox">
-      <?=$this->record($this->driver)->getCheckbox('', 'search-cart-form') ?>
-    </label>
-  <?php endif; ?>
   <div class="grid-body">
     <?=$this->record($this->driver)->getCover('result-grid', 'small', $recordLinker->getUrl($this->driver)); ?>
     <?php if (!$openUrlActive && empty($urls)): ?>

themes/bootstrap5/templates/search/list-grid.phtml

@@ -1,12 +1,15 @@
-<div class="<?=$this->escapeHtmlAttr(trim('search-grid ' . ($this->resultsClass ?? '')))?>"<?=isset($this->resultsAttrs) ? ' ' . $this->resultsAttrs : ''?>>
+<?php
+  $showCheckboxes = $this->searchSettings($this->results->getParams())->checkboxesEnabled();
+?>
+<ol class="<?=$this->escapeHtmlAttr(trim('search-grid-list ' . ($this->resultsClass ?? '')))?>"<?=isset($this->resultsAttrs) ? ' ' . $this->resultsAttrs : ''?>>
   <?php $it = 0; ?>
   <?php foreach ($this->results->getResults() as $current): ?>
-    <?=$this->record($current)->getSearchResult('grid', $this->results)?>
     <?php $it++; ?>
-    <?php if ($it % 4 === 0): ?>
-      <br class="grid-large-break">
-    <?php elseif ($it % 2 === 0): ?>
-      <br class="grid-small-break">
-    <?php endif; ?>
+    <li class="search-grid-item">
+      <?php if ($showCheckboxes): ?>
+        <?=$this->record($current)->getCheckbox('', 'search-cart-form', $it) ?>
+      <?php endif; ?>
+      <?=$this->record($current)->getSearchResult('grid', $this->results)?>
+    </li>
   <?php endforeach; ?>
-</div>
+</ol>