Tighten up album grid display. Vertically align thumbnail/metadata in gItem container. Brought back borders. Use a neutral bg color for albums. Link item titles, not just thumbnails.

3 files changed, 27 insertions, 7 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 69c9c3eb..6ff39fff 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -295,16 +295,20 @@ li.gError select {
 }
 
 #gAlbumGrid {
+  border-right: 1px solid #e8e8e8;
   margin-top: 20px;
 }
 
 #gAlbumGrid .gItem {
+  border: 1px solid #e8e8e8;
+  border-right-color: #ccc;
+  border-bottom-color: #ccc;
   float: left;
-  height: 270px;
-  margin-bottom: 10px;
-  padding: 0 0 5px 0;
+  height: 240px;
+  overflow: hidden;
+  padding: 14px 8px;
   text-align: center;
-  width: 33%;
+  width: 213px;
 }
 
 .gItem h2 {
@@ -312,7 +316,7 @@ li.gError select {
 }
 
 .gAlbum {
-  background-color: #d4daff;
+  background-color: #e8e8e8;
 }
 
 .gAlbum h2 {
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index fe650539..cb9fa07c 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -3,6 +3,12 @@
  */
 $("document").ready(function() {
 
+  // Vertical align thumbnails/metadata in album grid
+  if ($(".gItem").length) {
+    $(".gItem").wrapInner("<div></div>")
+    $('.gItem div').vAlign();
+  }
+  
   // Apply modal dialog class
   $(".gMenuLink").addClass("gDialogLink");
   $("#gLoginLink").addClass("gDialogLink");
@@ -75,6 +81,16 @@ $("document").ready(function() {
 
 });
 
+// Vertically align a block element's content
+$.fn.vAlign = function() {
+  return this.each(function(i){
+    var ah = $(this).height();
+    var ph = $(this).parent().height();
+    var mh = (ph - ah) / 2;
+    $(this).css('margin-top', mh);
+  });
+};
+
 /**
  * Fire openDialog() and prevent links from opening
  *
diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php
index fe974337..b5995602 100644
--- a/themes/default/views/album.html.php
+++ b/themes/default/views/album.html.php
@@ -11,7 +11,7 @@
   <? if ($child->is_album()): ?>
   <? $album_class = "gAlbum "; ?>
   <? endif ?>
-  <li class="gItem <?= $album_class ?>">
+  <li id="g<?= $child->id ?>" class="gItem <?= $album_class ?>">
     <?= $theme->thumb_top($child) ?>
     <a href="<?= url::site("{$child->type}s/{$child->id}") ?>">
       <img id="gPhotoID-<?= $child->id ?>" class="gThumbnail"
@@ -19,7 +19,7 @@
            width="<?= $child->thumb_width ?>"
            height="<?= $child->thumb_height ?>" />
     </a>
-    <h2><?= $child->title ?></h2>
+    <h2><a href="<?= url::site("{$child->type}s/{$child->id}") ?>"><?= $child->title ?></a></h2>
     <?= $theme->thumb_bottom($child) ?>
     <ul class="gMetadata">
       <?= $theme->thumb_info($child) ?>