Make the property type more visible in property list

* Display a ribbon over the thumbnail in property lists See: #759
mirsal · Jul 15, 2010 · 3f8c0b0 · 3f8c0b0
1 parent 65091bf
commit 3f8c0b0
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 0 deletions.
diff --git a/apps/frontend/modules/home/templates/indexSuccess.php b/apps/frontend/modules/home/templates/indexSuccess.php
@@ -24,6 +24,7 @@
                             <div class="mask">
                                 <?php $img = $p->getRandomFileAttachment(); ?>
                                 <img src="<?php if(!is_null($img)) echo url_for('render_attachment', array('sf_subject' => $img, 'thumbnail' => FileAttachmentPeer::SIZE_SMALL))?>" />
+                                <div class="overlay"></div>
                             </div>
                         </a>
                     </figure>

diff --git a/apps/frontend/modules/property/templates/indexSuccess.php b/apps/frontend/modules/property/templates/indexSuccess.php
@@ -67,6 +67,7 @@
                     <div class="mask">
                         <?php $img = $property->getRandomFileAttachment() ?>
                         <img src="<?php if(!is_null($img)) echo url_for('render_attachment', array('sf_subject' => $img, 'thumbnail' => FileAttachmentPeer::SIZE_MEDIUM))?>" />
+                        <div class="overlay"></div>
                     </div>
                 </a>
             </figure>

diff --git a/web/css/common.css b/web/css/common.css
@@ -39,6 +39,7 @@ div.property-list
 		div.property-list article figure.thumbnail
 		{
 			float: left;
+			position: relative;
 			width: 69px;
 			height: 69px;
 			background: url('/images/background_thumb.png') no-repeat;
@@ -53,6 +54,26 @@ div.property-list
 		        margin: 2px;
             }
 
+        div.property-list article figure.thumbnail .overlay
+        {
+            position: absolute;
+            background: top left no-repeat;
+            width: 69px;
+            height: 69px;
+            top: 0;
+            left: 0;
+        }
+
+        div.property-list article.rental figure.thumbnail .overlay
+        {
+            background-image: url('../images/rental.png');
+        }
+
+        div.property-list article.sale figure.thumbnail .overlay
+        {
+            background-image: url('../images/sale.png');
+        }
+
 		div.property-list article h3
 		{
 			margin: 0;

diff --git a/web/images/forsale.png b/web/images/forsale.png
diff --git a/web/images/rental.png b/web/images/rental.png
diff --git a/web/images/rented.png b/web/images/rented.png
diff --git a/web/images/sale.png b/web/images/sale.png