From bd4432094c862f563762cc7b244667f936027b29 Mon Sep 17 00:00:00 2001
From: Valentin Valchev <v.valchev@ocado.com>
Date: Wed, 7 Mar 2018 16:31:38 +0200
Subject: [PATCH] Changed the grid view, to be look-alike PropwertyWebBuilder.
 E.g. it includes bedrooms/bathrooms/size/parking icons below the main
 property view.

To make it work properly, font-awesome were upgraded to 4.7 version.
---
 .../views/default/layouts/default.blade.php   | 14 ++++++-
 .../views/default/listings/view.blade.php     | 42 +++++++++++--------
 .../default/widgets/recent-listings.blade.php | 14 ++++++-
 3 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/resources/views/default/layouts/default.blade.php b/resources/views/default/layouts/default.blade.php
index 4c641ec..cae6828 100644
--- a/resources/views/default/layouts/default.blade.php
+++ b/resources/views/default/layouts/default.blade.php
@@ -19,7 +19,7 @@
 		<!-- Optional theme -->
 		<?/*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">*/?>
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css">
-		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.min.css">
 		<style>
 			.container {
@@ -58,6 +58,16 @@
 			.property-types-tree li > span {
 				padding-left: 5px;
 			}
+			.property-features {
+				padding: 0;
+			}
+			.property-features li {
+				padding: 10px;
+				border-right: 1px solid rgb(221,221,221);
+			}
+			.property-features li:last-child {
+				border:0;
+			}
 
 			.panel-heading .accordion-toggle:after {
 				/* symbol for "opening" panels */
@@ -198,7 +208,7 @@ function base_url(path) {
       }
       var current_lang = '<?= $current_lang ?>';
   </script>
-	
+
 	<script src="{{{ theme_asset('eldarion-ajax.min.js') }}}"></script>
 	<script src="{{{ theme_asset('global.js') }}}"></script>
 
diff --git a/resources/views/default/listings/view.blade.php b/resources/views/default/listings/view.blade.php
index 0fa2081..deb6e8a 100644
--- a/resources/views/default/listings/view.blade.php
+++ b/resources/views/default/listings/view.blade.php
@@ -47,25 +47,31 @@
 	<div class="tab-pane <?= ($view_type == 'grid')?'active':'' ?>" id="grid-view">
 
 		<div class="row grid-row">
-
 		<? foreach($properties as $property) : ?>
-			<div class="col-xs-4 grid-box " id="grid-<?= $property->id ?>">
-				<div class="well">
-					<div class="row ">
-						<div class="col-xs-12">
-							<a href="<?= $property->url() ?>" class="thumbnail">
-								<img alt="" src="{{$property->thumbnail('listings')}}" width="176" height="120" style="min-height: 70px;"/>
-							</a>
-							<h2 style="margin-top: 0; margin-bottom: 0px; color: #007200;  font-size: 15px;"><a style="font-weight: bold;color: #007200;  font-size: 15px;"href="<?= $property->url() ?>"><?= $property->priceFormatted() ?></a></h2>
-						</div>
-
-						<div class="col-xs-12">
-							<a style="color: #004889; font-size: 15px" href="<?= $property->url() ?>">
-								<strong>{{ $property->title }}</strong>
-							</a>
-							<p>{{ $property->displayable_address }}{{ $property->has_parking }}</p>
-						</div>
+			<div class="col-xs-5 col-md-5">
+				<div class="panel panel-default">
+				<div class="panel-body">
+					<a href="<?= $property->url() ?>"><img alt="<?= $property->title ?>" style="width: 100%" src="{{$property->thumbnail('listings')}}" data-holder-rendered="true"></a>
+					<br />
+					<br />
+					<div class="caption">
+						<a href="<?= $property->url() ?>"><h5 style="margin:0; font-weight: normal; padding: 0; margin-bottom: 5px;"><?= $property->title ?></a></h5>
+						<strong><h4 style="margin:0; padding: 0;"><?= $property->priceFormatted ?></h4></strong>
 					</div>
+					<p>{{ $property->displayable_address }}</p>
+				</div>
+				<div class="panel-footer property-features">
+					<ul class="nav nav-pills nav-justified ">
+						<li><span class="fa fa-bed" aria-hidden="true"></span> <?= $property->num_bedrooms ?></li>
+						<li><span class="fa fa-shower" aria-hidden="true"></span> <?= $property->num_bathrooms ?></li>
+						<? if ($property->property_size): ?>
+							<li><span class="fa fa-arrows-alt" aria-hidden="true"></span> <?= $property->property_size ?></li>
+						<? endif; ?>
+						<? if ($property->has_parking): ?>
+							<li><span class="fa fa-car" aria-hidden="true"></span></li>
+						<? endif; ?>
+					</ul>
+				</div><!-- footer -->
 				</div>
 			</div>
 		<? endforeach; ?>
@@ -101,7 +107,7 @@
 		</div>
 	<? endforeach; ?>
 	</div>
-	
+
 </div>
 
 <?php echo $properties->render(); ?>
diff --git a/resources/views/default/widgets/recent-listings.blade.php b/resources/views/default/widgets/recent-listings.blade.php
index 76c349c..b2a8656 100644
--- a/resources/views/default/widgets/recent-listings.blade.php
+++ b/resources/views/default/widgets/recent-listings.blade.php
@@ -1,7 +1,7 @@
 <? foreach($properties as $property) : ?>
 	<div class="col-xs-4 col-md-4">
 		<div class="panel panel-default">
-  <div class="panel-body" style="height: 300px;">
+ 		<div class="panel-body" style="height: 300px;">
 			<a href="<?= $property->url() ?>"><img alt="<?= $property->title ?>" style="width: 100%" src="{{$property->thumbnail('listings')}}" data-holder-rendered="true"></a>
 			<br />
 			<br />
@@ -10,6 +10,18 @@
 				<strong><h4 style="margin:0; padding: 0;"><?= $property->priceFormatted ?></h4></strong>
 			</div>
 		</div>
+		<div class="panel-footer property-features">
+			<ul class="nav nav-pills nav-justified ">
+				<li><span class="fa fa-bed" aria-hidden="true"></span> <?= $property->num_bedrooms ?></li>
+				<li><span class="fa fa-shower" aria-hidden="true"></span> <?= $property->num_bathrooms ?></li>
+				<? if ($property->property_size): ?>
+					<li><span class="fa fa-arrows-alt" aria-hidden="true"></span> <?= $property->property_size ?></li>
+				<? endif; ?>
+				<? if ($property->has_parking): ?>
+					<li><span class="fa fa-car" aria-hidden="true"></span></li>
+				<? endif; ?>
+			</ul>
+		</div><!-- footer -->
 		</div>
 	</div>
 <? endforeach; ?>