Improve grid view responsive CSS

SimplyRETS · Feb 28, 2024 · b8eefa1 · b8eefa1
1 parent 0e6ecad
commit b8eefa1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/src/assets/css/simply-rets-client.css b/src/assets/css/simply-rets-client.css
@@ -41,13 +41,25 @@ sizes with this class.
     display: block;
 }
 
+#sr-listings-results-list {
+    clear: both;
+}
+
 .sr-listing-grid-item {
-    width: 32%;
-    display: inline-block;
-    margin: auto;
     margin-top: 25px;
-    padding: 10px 0 10px 0;
-    vertical-align: top;
+}
+
+.sr-listings-grid-view {
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 15px;
+}
+
+.sr-pagination-wrapper {
+    clear: both;
+    padding-top: 15px;
+    padding-bottom: 15px;
 }
 
 
@@ -251,7 +263,10 @@ styling:
 
 .sr-listing-grid-item .result-compliance-markup {
     display: block;
-    font-size: 12px;
+}
+
+.result-compliance-markup {
+    font-size: 90%;
 }
 
 
@@ -565,6 +580,7 @@ Most of these elements also have id's for you to use specifically.
     padding: 0px;
     padding-top: 0px;
     padding-bottom: 15px;
+    margin-bottom: 25px;
 }
 
 #sr-search-wrapper form {
@@ -847,8 +863,22 @@ elsewhere, this should be a breeze.
 /*
  * Responsive CSS
 */
+
+@media screen and (max-width: 768px) {
+
+    .sr-listings-grid-view {
+        grid-template-columns: repeat(2, 1fr);
+        column-gap: 10px;
+    }
+}
+
 @media screen and (max-width: 576px) {
 
+    /* Grid view results */
+    .sr-listings-grid-view {
+        grid-template-columns: 100%;
+    }
+
     /*
      * Search results
      */

diff --git a/src/simply-rets-api-helper.php b/src/simply-rets-api-helper.php
@@ -1399,7 +1399,7 @@ public static function srResidentialResultsGenerator($request_response, $setting
         $grid_view = $settings['grid_view'] == TRUE;
 
         /** Allow override of "map_position" admin setting on a per short-code basis */
-        $map_setting = isset($settings['show_map']) ? $settings['show_map'] : '';
+        $map_setting = isset($settings['show_map']) ? $settings['show_map'] : true;
         $map_position = isset($settings['map_position'])
                       ? $settings['map_position']
                       : get_option('sr_search_map_position', 'map_above');
@@ -1700,10 +1700,13 @@ public static function srResidentialResultsGenerator($request_response, $setting
 
         }
 
-        $resultsMarkup = "<div id=\"sr-listings-results-list\">{$resultsMarkup}</div>";
+        $markupGridViewClass = $grid_view == true ? "sr-listings-grid-view" : "";
+        $resultsMarkup = "<div id='sr-listings-results-list' class='{$markupGridViewClass}'>"
+                       . "{$resultsMarkup}"
+                       . "</div>";
         $markerCount > 0 ? $mapMarkup = $mapHelper->render($map) : $mapMarkup = '';
 
-        if( $map_setting == 'false' ) {
+        if( $map_setting === "false" ) {
             $mapMarkup = '';
         }
 
@@ -1733,8 +1736,10 @@ public static function srResidentialResultsGenerator($request_response, $setting
 
         $disclaimer_text = SrUtils::mkDisclaimerText($lastUpdate);
 
-        $cont .= "<hr><p class='sr-pagination'>$prev_link $next_link</p>";
-        $cont .= "<br>{$disclaimer_text}";
+        $cont .= "<div class='sr-pagination-wrapper'>"
+               . "  <p class='sr-pagination'>$prev_link $next_link</p>"
+               . "  <div class='sr-disclaimer-text'>{$disclaimer_text}</div>"
+               . "</div>";
 
         return $cont;
 

diff --git a/src/simply-rets-shortcode.php b/src/simply-rets-shortcode.php
@@ -274,7 +274,6 @@ public static function sr_openhouses_shortcode($atts = array()) {
     public static function sr_residential_shortcode($atts = array ()) {
         $setting_atts = array(
             "map_position" => get_option('sr_search_map_position', 'map_above'),
-            "show_map" => "true",
             "grid_view" => false,
             "vendor" => "",
             "limit" => 20
@@ -344,7 +343,7 @@ public static function sr_search_form_shortcode( $atts ) {
 
         /** Settings */
         $grid_view = isset($atts["grid_view"]) ? $atts["grid_view"] : FALSE;
-        $show_map = isset($atts["show_map"]) ? $atts["show_map"] : TRUE;
+        $show_map = isset($atts["show_map"]) ? $atts["show_map"] : "true";
 
         /** User Facing Parameters */
         $minbeds    = array_key_exists('minbeds',  $atts) ? $atts['minbeds']  : '';