more bootstrap integration, cleanup and some small bugfixes

* load local CSS after bootstrap * removed local CSS that was not needed anymore * added greyed out pagination for single page * added charset to html * only use +-3 pictures for thumbnails (so that transitions alwasy stay on 1 line) * fixed many layout issues * fixed transition
author: Arun Persaud <arun@nubati.net> 2012-10-16 23:32:09 -0700
committer: Arun Persaud <arun@nubati.net> 2012-10-16 23:32:09 -0700
commit: cb822f5550deb1f1a904f9b94ee6bbe569c3e056 (patch)
tree: 0997a3fd095c605234360ae81a0a4909f113b22c
parent: 801ba916b5b5680e10c3b63978034058f7fed840 (diff)
download: photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.tar.gz
photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.tar.bz2
photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.zip
4 files changed, 61 insertions, 74 deletions
diff --git a/css/style.css b/css/style.css
index f610c97..aa6ef56 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,20 +1,33 @@
+body {text-align: center;}
 
-h1 {
-    color:red;
-    margin: 1em 0;
-    text-align: center;
+footer {
+  border-top: 1px solid grey;
+  color: #333;
 }
-body {
-    background-color: black;
-    color: #eee;
+
+.copyright {
+    color: #555;
+    float:right;
 }
 
 .permalink {
-    float:right;
-    color: #eee;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    color: #333;
     padding-right: 1em;
 }
 
+.tagsearch {
+    text-align: left;
+    padding-left: 50px;
+}
+
+.tagsearch p { margin-top: 3px;}
+
+
+h1 { padding-top: 1em;}
+
 a[visited]{ color: #aaa;}
 
 nav {
@@ -27,33 +40,19 @@ nav {
 }
 
 .pics img {
-  border: 1px solid white;
   margin: 2px;
   height: 100px;
 }
 
 img.current {
     position:relative;
-    top:1px;
-    border: 1px solid white;
+    border: 2px solid black;
 }
 
 .pics img.large{
-  border: 1px solid white;
-  margin: 2px;
   height: 500px;
 }
 
-footer {
-  border-top: 1px solid grey;
-  color: #eee;
-}
-
-.copyright {
-    color: #999;
-    float:right;
-}
-
 
 .debug { position: absolute; top:0; left:0}
 
@@ -67,40 +66,27 @@ footer {
 .singlepic {
     position: relative;
     display: inline-block;
+    height: 500px;
+}
+
+.singlepic img.large, .singlepic .left, .singlepic .right  {
+    display: inline;
 }
 
 .singlepic:hover .left, .singlepic:hover .right {
-    display: inline-block;
     opacity: 0.6;
 }
 
-.singlepic .left img, .singlepic .right img {
-    position: absolute;
-    top: 50%;
-    width: 50px;
-    height: 50px;
-    margin-top: -25px;
-    border: 0px solid white;
+.singlepic .left:hover, .singlepic .right:hover {
+    opacity: 0.95;
 }
 
-.singlepic .left, .singlepic .right {
-    display: none;
-    height: 500px;
-    width: 50px;
-    z-index:2;
-    opacity: 0.0;
-}
-.singlepic .left {
-    position: absolute;
-    left: 3px;
-    top: 3px;
-}
-.singlepic .right {
+.singlepic img.left , .singlepic img.right  {
     position: relative;
-    left: -56px;
-    top: -3px;
+    top: 0%;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    border: 0px solid white;
 }
 
-.singlepic .left:hover, .singlepic .right:hover {
-    opacity: 0.95;
-}
diff --git a/getjson.php b/getjson.php
index 3e4cf4d..432b324 100644
--- a/getjson.php
+++ b/getjson.php
@@ -25,7 +25,7 @@ if (isset($_REQUEST["S"]))
   }
  else if (isset($_REQUEST["NP"]))
   {
-    /* get +- 5 pics from ordered list to show next to a large image */
+    /* get +- 3 pics from ordered list to show next to a large image */
 
     /* first create a temp table with all images and then use rowid to get +-5 images */
 
@@ -55,8 +55,8 @@ if (isset($_REQUEST["S"]))
       {
 	$ID=intval($_REQUEST["ID"]);
 	$result = $DB->query("SELECT * FROM NEXTPREV".
-			     " WHERE rowid > (select rowid from NEXTPREV where id=$ID) -5".
-			     "   AND rowid < (select rowid from NEXTPREV where id=$ID) +5");
+			     " WHERE rowid > (select rowid from NEXTPREV where id=$ID) -3".
+			     "   AND rowid < (select rowid from NEXTPREV where id=$ID) +3");
       }
     else
       {
diff --git a/index.php b/index.php
index 94f2b4a..bb56f89 100644
--- a/index.php
+++ b/index.php
@@ -45,10 +45,11 @@ function autoversion($file)
 <!DOCTYPE html>
 <html>
 <head>
+<meta charset="utf-8">
 <title><?php echo htmlspecialchars($title) ?></title>
 <script src = "<?php echo $webbase.autoversion("/js/d3.min.js")?>"></script>
-<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/style.css")?>" />
 <link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/bootstrap.min.css")?>" />
+<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/style.css")?>" />
 </head>
 
 <body>
@@ -70,13 +71,14 @@ function autoversion($file)
 
 <div class="tagsearch">
 <form class="form-search" method="get" action="">
- Search for tag: <input list="MyTags" id="MyTagsInput" type="text" value="" />
+ <label>Search for tag:</label> <input class="input-medium search-query" list="MyTags" id="MyTagsInput" type="text" value="" />
   <datalist id="MyTags">
   </datalist>
+ <p> Current tags:<span id="currenttags"></span>
+  <button class="next btn btn-small btn-info" onclick="tagcloud()">tag cloud</button>
+  <a class="btn btn-small btn-success" href='<?php echo $webbase?>'>all</a>
+ </p>
 </form>
-  Current tags:<span id="currenttags"></span>
-  <button class="next" type="button" onclick="tagcloud()">tag cloud</button>
-  <button class="all"  onclick="document.location.href='<?php echo $webbase?>'">all</button>
 </div>
 
 <div class="nextprev"> <ul></ul></div>
diff --git a/js/photo-tags.js b/js/photo-tags.js
index 71dadd4..ea6e4c5 100644
--- a/js/photo-tags.js
+++ b/js/photo-tags.js
@@ -15,19 +15,14 @@ function init()
       d3.select('form').attr("action",webbase+"/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
   });
 
+  d3.select("#currenttags").select("button").remove();
   if (T!="")
     {
       var mycurrenttags = T.split(",");
 
-      d3.select("#currenttags").select("button").remove();
       d3.select("#currenttags").selectAll("button")
         .data(mycurrenttags).enter()
-        .append("button").attr("type","button").text( function(d) {return d;} );
-    }
-   else
-    {
-      d3.select("#currenttags").select("button").remove();
-      d3.select("#currenttags").append("span").text( ' none');
+        .append("button").attr("class","btn btn-small").text( function(d) {return d;} );
     };
 }
 
@@ -51,7 +46,7 @@ function load_content() {
       if (ID>=0)
 	{
 	  var singlepicspace=pics.selectAll("li").data(picdata, function(d){return ID;}).enter().append("li").append("div").attr("class","singlepic");
-	  singlepicspace.append("div").attr("class","left").append("img").attr("src",webbase+"/icons/left.png");
+	  singlepicspace.append("img").attr("class","left").attr("src",webbase+"/icons/left.png");
 	  singlepicspace.append("img")
 	    .attr("class","large")
 	    .attr("src",function(d) {
@@ -59,7 +54,7 @@ function load_content() {
 		s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-small/');
 		return s;
 	      });
-	  singlepicspace.append("div").attr("class","right").append("img").attr("src",webbase+"/icons/right.png");
+	  singlepicspace.append("img").attr("class","right").attr("src",webbase+"/icons/right.png");
 
 	  update_thumbnails();
 	}
@@ -166,6 +161,8 @@ function update_thumbnails(){
 
       var thumbs= d3.select(".nextprev").select("ul").selectAll("li").data(json2, function(d) {return d.id;});
 
+      thumbs.exit().select("img").transition().duration(1000).style("height","0px").transition().duration(1050).remove();
+      thumbs.exit().transition().duration(1050).remove();
       thumbs.enter().append("li")
 	.append("a")
 	.on("click", function(d) {
@@ -177,16 +174,12 @@ function update_thumbnails(){
 	    s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-tiny/');
 	    return s;
 	  })
-	.style("height","0")
-	.transition().duration(1000)
+	.style("height","0px")
+	.transition().duration(500)
 	.style("height","100px");
 
-      thumbs.exit().select("img").transition().duration(1000).style("height","0");
-      thumbs.exit().transition().duration(1050).remove();
-
       /* resort elements */
       d3.select(".nextprev").select("ul").selectAll("li").sort(function(a,b){return a.id-b.id;});
-      d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",false);
       d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",function(d){return (d.id==IDcurr);});
 
 
@@ -259,7 +252,13 @@ function update_page_index()
 	      mydata.push('{ page:'+(n+1)+', name:"'+(n+1)+'"}');
 
 	  mydata.push('{ page:'+(n+2.1)+', name:"Next"}');
-      };
+      }
+      else
+      {
+	  mydata.push('{ page:0.1, name:"Prev"}');
+	  mydata.push('{ page:1.1, name:"Next"}');
+      }
+
       mydata = "["+mydata.join(",")+"]";
       mydata =  eval('(' + mydata + ')');
author	Arun Persaud <arun@nubati.net>	2012-10-16 23:32:09 -0700
committer	Arun Persaud <arun@nubati.net>	2012-10-16 23:32:09 -0700
commit	cb822f5550deb1f1a904f9b94ee6bbe569c3e056 (patch)
tree	0997a3fd095c605234360ae81a0a4909f113b22c
parent	801ba916b5b5680e10c3b63978034058f7fed840 (diff)
download	photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.tar.gz photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.tar.bz2 photo-tags-cb822f5550deb1f1a904f9b94ee6bbe569c3e056.zip