more bootstrap integration, cleanup and some small bugfixes
authorArun Persaud <arun@nubati.net>
Wed, 17 Oct 2012 06:32:09 +0000 (23:32 -0700)
committerArun Persaud <arun@nubati.net>
Wed, 17 Oct 2012 06:32:09 +0000 (23:32 -0700)
* 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

css/style.css
getjson.php
index.php
js/photo-tags.js

index f610c97bd0054cad5f95afa50e69c76fb24cf063..aa6ef56c31fdaf352b95fdf3b2afcf2fd8eaf5f2 100644 (file)
@@ -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 {
 }
 
 .permalink {
-    float:right;
-    color: #eee;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    color: #333;
     padding-right: 1em;
 }
 
     padding-right: 1em;
 }
 
+.tagsearch {
+    text-align: left;
+    padding-left: 50px;
+}
+
+.tagsearch p { margin-top: 3px;}
+
+
+h1 { padding-top: 1em;}
+
 a[visited]{ color: #aaa;}
 
 nav {
 a[visited]{ color: #aaa;}
 
 nav {
@@ -27,33 +40,19 @@ nav {
 }
 
 .pics img {
 }
 
 .pics img {
-  border: 1px solid white;
   margin: 2px;
   height: 100px;
 }
 
 img.current {
     position:relative;
   margin: 2px;
   height: 100px;
 }
 
 img.current {
     position:relative;
-    top:1px;
-    border: 1px solid white;
+    border: 2px solid black;
 }
 
 .pics img.large{
 }
 
 .pics img.large{
-  border: 1px solid white;
-  margin: 2px;
   height: 500px;
 }
 
   height: 500px;
 }
 
-footer {
-  border-top: 1px solid grey;
-  color: #eee;
-}
-
-.copyright {
-    color: #999;
-    float:right;
-}
-
 
 .debug { position: absolute; top:0; left:0}
 
 
 .debug { position: absolute; top:0; left:0}
 
@@ -67,40 +66,27 @@ footer {
 .singlepic {
     position: relative;
     display: inline-block;
 .singlepic {
     position: relative;
     display: inline-block;
+    height: 500px;
+}
+
+.singlepic img.large, .singlepic .left, .singlepic .right  {
+    display: inline;
 }
 
 .singlepic:hover .left, .singlepic:hover .right {
 }
 
 .singlepic:hover .left, .singlepic:hover .right {
-    display: inline-block;
     opacity: 0.6;
 }
 
     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;
     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;
-}
index 3e4cf4d4e9470245a2997c030c200ca27e8e9eb8..432b32468fdd6f0a6d3c03cae71f2a4bd4830f1a 100644 (file)
@@ -25,7 +25,7 @@ if (isset($_REQUEST["S"]))
   }
  else if (isset($_REQUEST["NP"]))
   {
   }
  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 */
 
 
     /* 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".
       {
        $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
       {
       }
     else
       {
index 94f2b4a2bbe2d55024641fb9f73e534795504c40..bb56f89cf31ae1b94a7e57d508c6fd66d04bc8f8 100644 (file)
--- a/index.php
+++ b/index.php
@@ -45,10 +45,11 @@ function autoversion($file)
 <!DOCTYPE html>
 <html>
 <head>
 <!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>
 <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/bootstrap.min.css")?>" />
+<link rel="stylesheet" type="text/css" href="<?php echo $webbase.autoversion("/css/style.css")?>" />
 </head>
 
 <body>
 </head>
 
 <body>
@@ -70,13 +71,14 @@ function autoversion($file)
 
 <div class="tagsearch">
 <form class="form-search" method="get" action="">
 
 <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>
   <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>
 </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>
 </div>
 
 <div class="nextprev"> <ul></ul></div>
index 71dadd41c8150fdf4ca97f316651aebbac16180d..ea6e4c58c40bed3fde7f13a489670bdfa640b14e 100644 (file)
@@ -15,19 +15,14 @@ function init()
       d3.select('form').attr("action",webbase+"/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
   });
 
       d3.select('form').attr("action",webbase+"/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
   });
 
+  d3.select("#currenttags").select("button").remove();
   if (T!="")
     {
       var mycurrenttags = T.split(",");
 
   if (T!="")
     {
       var mycurrenttags = T.split(",");
 
-      d3.select("#currenttags").select("button").remove();
       d3.select("#currenttags").selectAll("button")
         .data(mycurrenttags).enter()
       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");
       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) {
          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;
              });
                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();
        }
 
          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;});
 
 
       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) {
       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;
          })
            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");
 
        .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;});
       /* 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);});
 
 
       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"}');
              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 + ')');
 
       mydata = "["+mydata.join(",")+"]";
       mydata =  eval('(' + mydata + ')');