build up the gallery mobile view

Add initial mobile.css, and gallery template, load it with
thumbnails.

diff --git a/ansel/js/mobile.js b/ansel/js/mobile.js
index 9268c40..b1e5fc8 100644 (file)
--- a/ansel/js/mobile.js
+++ b/ansel/js/mobile.js
@@ -46,7 +46,13 @@ var AnselMobile = {
      */
     galleryLoaded: function(r)
     {
-        console.log(r);
+        $('#galleryview h1').text(r.n);
+        // TODO: error checks, build any subgallery lists etc...
+        $.mobile.changePage('galleryview', 'slide', false, true);
+        $.each(r.imgs, function(k, i) {
+            var img = $('<li>').append($('<img>').attr({ src: i.url }));
+            $('#thumbs').append(img);
+        });
     },
     
     /**

diff --git a/ansel/mobile.php b/ansel/mobile.php
index 8ff8f6f..2f90609 100644 (file)
--- a/ansel/mobile.php
+++ b/ansel/mobile.php
@@ -26,6 +26,7 @@ require $registry->get('templates', 'horde') . '/common-header-mobile.inc';
 
 echo $view->render('head');
 echo $view->render('galleries');
+echo $view->render('gallery');
 //echo $view->render('gallery');
 //echo $view->render('photo');
 echo $view->render('notice');

diff --git a/ansel/templates/mobile/gallery.html.php b/ansel/templates/mobile/gallery.html.php
new file mode 100644 (file)
index 0000000..45f31a4
--- /dev/null
+++ b/ansel/templates/mobile/gallery.html.php
@@ -0,0 +1,8 @@
+<div data-role="page" data-theme="b" id="galleryview">
+  <div data-role="header">
+    <h1></h1>
+  </div>
+  <div id="anselgalleryview" data-role="content" class="ui-body">
+   <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
new file mode 100644 (file)
index 0000000..480488c
--- /dev/null
+++ b/ansel/themes/default/mobile.css
@@ -0,0 +1,32 @@
+ul.thumbView{
+    list-style:none;
+    margin:0px;
+    border:none;
+}
+ul.thumbView li {
+    float:left;
+    position:relative;
+    width:80px;
+    height:80px;
+    border:none;
+    margin:0px;
+    padding:0px;
+    background:transparent;
+    line-height:80px;
+    overflow:visible;
+}
+ul.thumbView li a {
+    height:80px;
+    margin:0;
+    padding:0;
+    width:80px;
+    text-align:center;
+    vertical-align:middle;
+    display:table-cell;
+    overflow:visible;
+}
+ul.thumbView li a img{
+    border:none;
+    vertical-align:middle;
+    -webkit-box-shadow:2px 2px 8px #000;
+}