starting to bootstrap the layout: navbar and tricks

- changing the tricks-selector to a paginator and fixing the js for highlighting
- adding a navbar using bootstrap, probably should use .wrap more instead of adding divs to the code

diff --git a/css/standard.less b/css/standard.less
index 3c5a9bc845c640fb2f7a10c7957b63a262027521..5383d30316e8e27a3ee9e55c8d1397b136ffe4ff 100644 (file)
--- a/css/standard.less
+++ b/css/standard.less
@@ -17,7 +17,7 @@
  *
  */
 
-body { background-color: #ddd; }
+body { background-color: #ddd; padding-top:40px}
 
 /* the header, footer, etc */
 header {
@@ -51,13 +51,6 @@ footer {
 footer .right { text-align:right;   font-size:smaller;}
 footer .left  { float:left;         font-size:smaller;}
 
-.status {
-  position:absolute;
-  right:4em;
-  top:0.1em;
-  font-size: smaller;
-}
-
 .WIP {
   background-color: #efaaaa;
   text-size: larger;
@@ -263,25 +256,6 @@ div span.numberoftricks {
 
 /* display the card tricks */
 
-ul.tricks {
-  text-align:center;
-  list-style:none;
-  margin:0px;
-  padding:3px;
-  padding-bottom:3px;
-  border-bottom:1px solid #444;
-}
-ul.tricks a { text-decoration:none; color:#000;}
-ul.tricks li {
-  /*background-color:blue;*/
-  padding:0.1em;
-  margin:0.2em 0.5em;
-  display:inline;
-}
-ul.tricks li.old {  background-color:#fff; }
-ul.tricks li a:hover {  background-color: #bbb;}
-ul.tricks li.nohighlight a:hover {  background-color: #fff;}
-
 div.tricks {
   position: absolute;
   top: 0;
@@ -806,7 +780,7 @@ header, footer {
   border-top: 1px solid gray;
 }
 
-.session div.sessionscore div, .status {
+.session div.sessionscore div {
   right:0em;
 }
 
@@ -849,4 +823,7 @@ header, footer {
     text-align: right;
     font-size: smaller;
 }
+}
+.pagination {
+  text-align:center;
 }
\ No newline at end of file

diff --git a/include/cancelgame.php b/include/cancelgame.php
index da6ffcc18e637bc7f820e6e14c7d93e710cbb5cb..df6e98da4309a2e4d0730e14bff044902d6e9c03 100644 (file)
--- a/include/cancelgame.php
+++ b/include/cancelgame.php
@@ -24,9 +24,6 @@
 if(!isset($HOST))
   exit;
 
-/* display the menu */
-output_status();
-
 /* you should only get here from a game page, so $me should be set */
 if(!myisset("me"))
   {

diff --git a/include/game.php b/include/game.php
index d43699b246cbb16e3fe55f83003e777de4237205..d07ff5b5aad33edb2c59ee7ae43cce6328d9834f 100644 (file)
--- a/include/game.php
+++ b/include/game.php
@@ -367,7 +367,7 @@ switch($mystatus)
   case 'check':
     /* output sickness of other playes, in case they already selected and are sitting in front of the current player */
     echo "\n<ul class=\"tricks\">\n";
-    echo "  <li onclick=\"hl('0');\" class=\"current\"><a href=\"#\">Pre</a>\n";
+    echo "  <li onclick=\"hl('0');\" class=\"active\" id=\"tricks0\"><a href=\"#\">Pre</a>\n";
 
     echo "    </li>\n</ul>\n";  /* end div trick, end li trick , end tricks*/
     /* end displaying sickness */
@@ -381,7 +381,7 @@ switch($mystatus)
 
        $mygametype =  DB_get_gametype_by_gameid($gameid);
 
-       echo "  <li onclick=\"hl('0');\" class=\"current\"><a href=\"#\">Pre</a>\n";
+       echo "  <li onclick=\"hl('0');\" class=\"active\"><a href=\"#\">Pre</a>\n";
        echo "  </li>\n</ul>\n\n";  /* end div trick, end li trick , end ul tricks */
       }
     /* end output pre-game trick */
@@ -411,19 +411,19 @@ switch($mystatus)
       {
        $trick=$r[0];
        if($trick!=$lasttrick)
-         echo "  <li onclick=\"hl('$trickNR');\" class=\"old\"><a href=\"#\">"._('Trick')." $trickNR</a></li>\n";
+         echo "  <li onclick=\"hl('$trickNR');\" id=\"tricks$trickNR\"><a href=\"#\">"._('Trick')." $trickNR</a></li>\n";
        else if($trick==$lasttrick)
-         echo "  <li onclick=\"hl('$trickNR');\" class=\"current\"><a href=\"#\">"._('Trick')." $trickNR</a></li>\n";
+         echo "  <li onclick=\"hl('$trickNR');\" id=\"tricks$trickNR\" class=\"active\"><a href=\"#\">"._('Trick')." $trickNR</a></li>\n";
        $trickNR++;
       }
 
     /* if game is over, also output link to Score tab */
     if($mystatus=='gameover' && DB_get_game_status_by_gameid($gameid)=='gameover' )
-      echo "  <li onclick=\"hl('13');\" class=\"current\"><a href=\"#\">"._('Score')."</a></li>\n";
+      echo "  <li onclick=\"hl('13');\" id=\"tricks13\" class=\"active\"><a href=\"#\">"._('Score')."</a></li>\n";
 
     /* output previous/next buttons */
-    echo '  <li onclick="hl_prev();" ><button>'._('prev')."</button></li>\n";
-    echo '  <li onclick="hl_next();" ><button>'._('next')."</button></li>\n";
+    echo '  <li onclick="hl_prev();" id=\"prevtr\"><a href="#">'._('prev')."</a></li>\n";
+    echo '  <li onclick="hl_next();" id=\"nexttr\"><a href="#">'._('next')."</a></li>\n";
 
     echo "</ul>\n\n";
 

diff --git a/include/output.php b/include/output.php
index 9094171ea8ce78dd731c7379a6505fe8c21fa683..fa61c87caa69d315ad9423e48854b9242f2a2c4c 100644 (file)
--- a/include/output.php
+++ b/include/output.php
@@ -431,11 +431,6 @@ function output_header()
      <script src="js/less.min.js" type="text/javascript"></script>
   </head>
 <body onload="high_last();">
-<header>
-<?php
-  echo '<h1> '._('Welcome to E-Doko').' </h1>';
-?>
-</header>
 <?php
 
   echo "<div class=\"main\">";
@@ -464,6 +459,7 @@ function output_footer()
   echo '<script src="'.autoversion('js/jquery.tablesorter.min.js'). '"></script>';
   echo '<script src="'.autoversion('js/jquery.tools.min.js').       '"></script>';
   echo '<script src="'.autoversion('js/bootstrap.min.js').          '"></script>';
+  echo '<script src="'.autoversion('js/layout.js').                 '"></script>';
   echo '<script src="'.autoversion('js/game.js').                   '"></script>';
 
   echo "</body>\n";
@@ -472,7 +468,7 @@ function output_footer()
   return;
 }
 
-function output_status()
+function output_navbar()
 {
   global $defaulttimezone, $INDEX, $WIKI, $RSS;
 
@@ -493,15 +489,27 @@ function output_status()
       $token = get_user_token($myid);
 
       /* logout info */
-      echo "\n<div class=\"status\">\n";
-      echo $name,"\n";
-      echo " | <a href=\"".$INDEX."\">"._('mypage')."</a>\n";
-      echo " | <a href=\"".$INDEX."?action=prefs\">"._('settings')."</a>\n";
-      echo " | <a href=\"".$INDEX."?action=new\">"._('new game')."</a>\n";
-      echo " | <a href=\"".$INDEX."?action=stats\">"._('statistics')."</a>\n";
-      echo " | <a href=\"".$WIKI."\">"._('wiki/bugs')."</a>\n";
-      echo " | <a href=\"".$RSS."?uid=".$myid."&amp;token=".$token."\">"._('atom')."</a>\n";
-      echo " |&nbsp;&nbsp;&nbsp; <a href=\"".$INDEX."?action=logout\">"._('logout')."</a>\n";
+      echo "\n<div class=\"navbar navbar-fixed-top\">\n";
+      echo "  <div class=\"navbar-inner\">\n";
+      echo "    <span class=\"brand\" href=\"#\">E-DoKo</span>\n";
+      echo "    <ul class=\"nav\">";
+      echo "       <li><a href=\"#\">$name</a> </li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$INDEX."\">"._('mypage')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$INDEX."?action=prefs\">"._('settings')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$INDEX."?action=new\">"._('new game')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$INDEX."?action=stats\">"._('statistics')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$WIKI."\">"._('wiki/bugs')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$RSS."?uid=".$myid."&amp;token=".$token."\">"._('atom')."</a></li>\n";
+      echo "       <li class=\"divider-vertical\"></li>\n";
+      echo " <li> <a href=\"".$INDEX."?action=logout\">"._('logout')."</a></li>\n";
+      echo "    </ul>\n";
+      echo "  </div>\n";
       echo "</div>\n\n";
 
       echo "<div class=\"lastlogin\"><span>"._('last login').": ".date("r",$unixtime)."</span></div>\n\n";

diff --git a/index.php b/index.php
index 00014088760a01c0fdd4ace5ca7c80e642631d52..bbdfeb2654e8c09df856b60cbb00084fefafe876 100644 (file)
--- a/index.php
+++ b/index.php
@@ -138,7 +138,7 @@ switch($action)
 /* ask for login or display login info, needs to go at the end, so that we have the
  * session-variable already set.
  */
-output_status();
+output_navbar();
 
 output_footer();
 

diff --git a/js/game.js b/js/game.js
index 3a1a0803257fa61bd5899f5687c6dd14441595a3..d1d8405c549d059e7f5930a0377a0651868067b6 100644 (file)
--- a/js/game.js
+++ b/js/game.js
@@ -5,9 +5,30 @@ var current=0;
 /* do the higlighting */
 function hl(num) {
     var i;
-    for(i=0;i<14;i++){ $("#trick"+i).hide(); }
+    for(i=0;i<14;i++){ $("#trick"+i).hide(); $("#tricks"+i).removeClass('active'); }
     $("#trick"+num).css('display', 'block');
+    $("#tricks"+num).addClass('active');
     current=num;
+
+    if(document.getElementById("tricks0"))
+       min=0;
+    else
+       min=1;
+
+    if(document.getElementById("tricks13"))
+       max=13;
+    else
+       min=12;
+
+    if(current==min)
+       $("#prevtr").addClass('disabled');
+    else
+       $("#prevtr").removeClass('disabled');
+    if(current==max)
+       $("#nexttr").addClass('disabled');
+    else
+       $("#nexttr").removeClass('disabled');
+
 }
 
 /* highlight the last trick, useful when a page is called the first time*/

diff --git a/js/layout.js b/js/layout.js
new file mode 100644 (file)
index 0000000..b98db8e
--- /dev/null
+++ b/js/layout.js
@@ -0,0 +1,3 @@
+$(".navbar .nav").addClass("pull-right");
+$("table").addClass("table table-striped");
+$("ul.tricks").wrap('<div class="pagination">');
\ No newline at end of file