From 241d9c5f2cf8a103c9fa78f7e6332a3210af5760 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Tue, 9 Aug 2016 15:12:41 +0000
Subject: [PATCH]  Investigate why some reference images weren't displaying.
 Improve centering of hover content. Ensure grid doesn't overlap text on left
 at lower resolutions. #493 @2

---
 .../views/helpers/HomeReferences.php          |  3 +-
 less/215-home-references.less                 | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/framework/application/views/helpers/HomeReferences.php b/framework/application/views/helpers/HomeReferences.php
index f24d6d1..0cb81f0 100644
--- a/framework/application/views/helpers/HomeReferences.php
+++ b/framework/application/views/helpers/HomeReferences.php
@@ -15,7 +15,8 @@ class Fluidbook_View_Helper_HomeReferences extends Fluidbook_View_Helper_HomeLay
 
 	protected function _references() {
 		$fluidbooks = Fluidbook_Model_Reference::factory()->where('homeimage != ?', '')->order('date DESC')->limit(30)->find();
-		$num = floor(count($fluidbooks) / 3) * 3;
+        $count = count($fluidbooks);
+		$num = floor($count / 3) * 3; // Round down to the nearest number divisible by 3 so the grid is kept neat
 
 		$res = '';
 		$i = 0;
diff --git a/less/215-home-references.less b/less/215-home-references.less
index a49940a..7146768 100644
--- a/less/215-home-references.less
+++ b/less/215-home-references.less
@@ -2,6 +2,21 @@
 
 section.references {
 	position: relative;
+
+	.content-wrapper {
+		.dotclear {
+			width: 50%;
+			max-width: 530px; // Includes padding right
+			padding-right: 30px;
+
+			@media @m900 {
+				width: 100%;
+				max-width: none;
+				padding-right: 0;
+			}
+		}
+	}
+
 	.links {
 		position: absolute;
 		bottom: 0;
@@ -90,15 +105,6 @@ section.references {
 				}
 			}
 
-			&.big {
-				.hover {
-					padding-top: 50%;
-					.content {
-						top: -25%;
-					}
-				}
-			}
-
 			&.forinfinite {
 				@media @m900 {
 					display: none;
@@ -124,12 +130,13 @@ section.references {
 			opacity: 0;
 			display: none;
 			transition: opacity @transition-time-buttons;
-			padding-top: 25%;
 			text-align: center;
 
 			.content {
 				position: relative;
-				top: -50%;
+				top: 50%;
+				transform: translateY(-50%);
+				padding: 0 5%;
 			}
 
 			h3 {
-- 
2.39.5