better way of handling subgallery ul placement

diff --git a/ansel/js/mobile.js b/ansel/js/mobile.js
index 7594bab..6e55f5a 100644 (file)
--- a/ansel/js/mobile.js
+++ b/ansel/js/mobile.js
@@ -23,28 +23,27 @@ var AnselMobile = {
     /**
      * Build a gallery list
      *
+     * @param object l   The ul object to append to
      * @param object gs  A hash of the galleries
-     * @param string c   The CSS class to use for the ul
      *
      * @return a ul dom object
      */
-    buildGalleryList: function(gs, c)
+    buildGalleryList: function(l, gs)
     {
-        if (!c) {
-            c = 'anselgalleries';
-        }
-        var list = $('<ul>')
-            .addClass(c)
-            .attr({'data-role': 'listview'}), item;
         $.each(gs, function(k, g) {
             var item = $('<li>').attr({ 'ansel-gallery-id': g.id }).addClass('ansel-gallery');
             item.append($('<img>').attr({ src: g.ki }).addClass('ui-li-icon'));
             item.append($('<h3>').append($('<a>').attr({ href: '#' }).text(g.n)));
             item.append($('<p>').text(g.d));
-            list.append(item);
+            l.append(item);
         });
 
-        return list;
+        return l;
+    },
+
+    getSubGalleryUL: function()
+    {
+        return $('<ul>').addClass('anselgalleries').attr({ 'data-role': 'listview', 'data-inset': 'true' });
     },
 
     /**
@@ -74,8 +73,12 @@ var AnselMobile = {
 
         //AnselMobile.imgs = r.imgs;
         AnselMobile.currentGallery = r.id;
-
-        $('.anselgalleries').replaceWith(AnselMobile.buildGalleryList(r.sg).listview());
+        if (r.sg.length) {
+            var l = $('<ul>').addClass('anselgalleries').attr({ 'data-role': 'listview', 'data-inset': 'true' });
+            $('#thumbs').before(AnselMobile.buildGalleryList(l, r.sg).listview());
+        } else {
+            $('.anselgalleries').detach();
+        }
         $('#galleryview h1').text(r.n);
         if ($.mobile.activePage.attr('id') != 'galleryview') {
             $.mobile.changePage('galleryview', 'slide', false, true);
@@ -151,8 +154,8 @@ var AnselMobile = {
         $('body').bind('swipeleft', AnselMobile.handleSwipe);
         $('body').bind('swiperight', AnselMobile.handleSwipe);
 
-        // Todo, eventually move to mobile callback so page reloads work etc...
-        $('#anselgallerylist').append(AnselMobile.buildGalleryList(Ansel.conf.galleries, 'anselgallerylist'));
+        var list = $('<ul>').addClass('anselgallerylist').attr({ 'data-role': 'listview' });
+        $('#anselgallerylist').append(AnselMobile.buildGalleryList(list, Ansel.conf.galleries, 'anselgallerylist'));
 
         // We need to recenter the thumbnail grid, and (eventually) try to
         // resize the main image if it's  being shown.

diff --git a/ansel/templates/mobile/gallery.html.php b/ansel/templates/mobile/gallery.html.php
index 4e46fd9..9097e9a 100644 (file)
--- a/ansel/templates/mobile/gallery.html.php
+++ b/ansel/templates/mobile/gallery.html.php
@@ -3,7 +3,7 @@
     <h1></h1>
   </div>
   <div id="anselgalleryview">
-   <ul class="anselgalleries" data-role="listview"></ul>
+   <ul class="anselgalleries" data-role="listview" data-inset="true"></ul>
    <ul id="thumbs" class="thumbView"></ul>
   </div>
 </div>
\ No newline at end of file

diff --git a/ansel/themes/default/mobile.css b/ansel/themes/default/mobile.css
index f42218b..28947a9 100644 (file)
--- a/ansel/themes/default/mobile.css
+++ b/ansel/themes/default/mobile.css
@@ -58,3 +58,7 @@ li.ansel-gallery h3 {
 li.ansel-gallery p {
     margin-left: 25px;
 }
+
+#anselgalleryview ul.anselgalleries {
+    margin: 15px;
+}
\ No newline at end of file