diff options
| -rw-r--r-- | css/bootstrap/navbar.less | 3 | ||||
| -rw-r--r-- | css/bootstrap/variables.less | 7 | ||||
| -rw-r--r-- | css/standard.less | 105 | ||||
| -rw-r--r-- | include/output.php | 50 | ||||
| -rw-r--r-- | include/welcome.php | 48 | ||||
| -rw-r--r-- | js/game.js | 5 | ||||
| -rw-r--r-- | js/layout.js | 27 |
7 files changed, 93 insertions, 152 deletions
diff --git a/css/bootstrap/navbar.less b/css/bootstrap/navbar.less index 3514c40..c261132 100644 --- a/css/bootstrap/navbar.less +++ b/css/bootstrap/navbar.less @@ -238,7 +238,8 @@ .navbar .nav > li > a { float: none; // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); +// padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); + padding: ((@navbarHeight - @baseLineHeight) / 2) 5px ((@navbarHeight - @baseLineHeight) / 2); color: @navbarLinkColor; text-decoration: none; text-shadow: 0 1px 0 @navbarBackgroundHighlight; diff --git a/css/bootstrap/variables.less b/css/bootstrap/variables.less index 7d6efe0..3089093 100644 --- a/css/bootstrap/variables.less +++ b/css/bootstrap/variables.less @@ -130,8 +130,8 @@ // Sprite icons path // ------------------------- -@iconSpritePath: "../img/glyphicons-halflings.png"; -@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; +@iconSpritePath: "../../pics/glyphicons-halflings.png"; +@iconWhiteSpritePath: "../../pics/glyphicons-halflings-white.png"; // Input placeholder text color @@ -158,7 +158,8 @@ // ------------------------- @navbarCollapseWidth: 979px; -@navbarHeight: 40px; +//@navbarHeight: 40px; +@navbarHeight: 25px; @navbarBackgroundHighlight: #ffffff; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%); diff --git a/css/standard.less b/css/standard.less index 5383d30..a5c79c3 100644 --- a/css/standard.less +++ b/css/standard.less @@ -17,14 +17,14 @@ * */ -body { background-color: #ddd; padding-top:40px} +@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc +body { background-color: #ddd; padding-top: @navbarHeight} /* the header, footer, etc */ header { background-color: #fff; text-align: center; padding-top: 1.5em; - margin: 0em 3em; border-bottom: 3px solid gray; } @@ -38,18 +38,16 @@ header { .main { background-color: #fff; padding: 1px 0em; - margin: 0em 3em; padding-bottom: 1em; } footer { background-color: #fff; - margin: 0em 3em; padding:0em 0.2em; border-top: 2px solid gray; } -footer .right { text-align:right; font-size:smaller;} -footer .left { float:left; font-size:smaller;} +footer .right { float:right; font-size:smaller;} +footer .left { text-aling:left; font-size:smaller;} .WIP { background-color: #efaaaa; @@ -574,9 +572,6 @@ div.user ul li:first-child { background-color: #8ae234; } -.bigger{ font-size:larger;} - - /* statistics using jquery*/ caption { text-align: center; @@ -629,80 +624,7 @@ table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { /* the login window */ -.login { - text-align:center; - padding-top: 1em; -} - -.login p { - padding: 0.1em 0.1em 0.15em; -} -.login h4 { - padding: 0.3em 0.3em 0.45em; -} - /* the login/register form */ -ul.loginregister { - width: 24em; - margin: 0.25em auto; - margin-top: 1.0em; - padding: 0.0em; - padding-top:0.5em; - text-align: right; - z-index: 1; - } - -ul.loginregister li { - display:inline; - border: 0px; - border-top: 2px solid #000; - border-left: 2px solid #000; - padding: 0.5em 0.75em; - padding-bottom: 0.25em; - background-color: #eee; -} - -ul.loginregister li:last-child { border-right: 2px solid #000;} -ul.loginregister li:hover {background-color: #aaa; } - -.doregister {display: none;} -.dologin label,.doregister label {float:left; width: 6em; } - - -.login fieldset{ - width: 24em; - margin: 0.0em auto; - margin-bottom: 0.5em; - padding: 0.5em 0.5em 1.5em; - text-align: center; -} - -fieldset { - border: 2px solid #000; - padding: 0.5em 0.5em 0.75em; - background-color: #eee; -} - -fieldset p { - font-size:smaller; -} - -.login label, .login input{ margin: 0.5em 0.5em 0.75em;} - -.login label{ - float:left; - width:7em; - text-align: left; -} - -.login input #email, .login input #password{ - width:9em; - float:right; -} - -.login .submitbutton { background-color: #fff;} -.login .submitbutton:hover { background-color: #aaa;} - #openid_url { background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%; padding-left: 18px; @@ -759,17 +681,9 @@ table.openid td, table.openid th{ /* special layout for mobile devices */ -@media only screen and (max-width: 900px) { -.main { - background-color: #fff; - margin-left: 0em; - margin-right: 0em; -} +@media only screen and (max-width: 600px) { -header, footer { - margin-left: 0em; - margin-right: 0em; -} +.nav > li > a .navhide{ display:none; } .lastlogin { position: relative; @@ -824,6 +738,7 @@ header, footer { font-size: smaller; } } -.pagination { - text-align:center; -}
\ No newline at end of file + +// bootstrap stuff +.pagination { text-align:center;} +.nav > li > img { height: (@navbarHeight/2); } diff --git a/include/output.php b/include/output.php index fa61c87..c267b0c 100644 --- a/include/output.php +++ b/include/output.php @@ -443,16 +443,16 @@ function output_footer() echo "</div>\n\n"; echo "<footer>\n"; - echo " <p class=\"left\"> copyright 2006-2012 <a href=\"$INDEX?action=about\">Arun Persaud, et al.</a> <br />\n". - " Verwendung der [deutschen] Kartenbilder mit Genehmigung <br />der Spielkartenfabrik Altenburg GmbH,(c) ASS Altenburger <br />\n". - " - ASS Altenburger Spielkarten - Spielkartenfabrik Altenburg GmbH <br />\n". - " a Carta Mundi Company Email: info@spielkarten.com Internet: www.spielkarten.com</p>\n"; echo " <p class=\"right\"> See the latest changes <a href=\"http://nubati.net/cgi-bin/gitweb.cgi?p=e-DoKo.git;a=summary\">\n". " via git </a> <br />or download the source via <br />\n'git clone http://nubati.net/git/e-DoKo.git' <br />\n". " <a href=\"http://www.dreamhost.com/green.cgi\">\n". " <img alt=\"Green Web Hosting! This site hosted by DreamHost.\"". " src=\"pics/green1.gif\" height=\"32\" width=\"100\" /></a>\n". " </p> \n"; + echo " <p class=\"left\"> copyright 2006-2012 <a href=\"$INDEX?action=about\">Arun Persaud, et al.</a> <br />\n". + " Verwendung der [deutschen] Kartenbilder mit Genehmigung <br />der Spielkartenfabrik Altenburg GmbH,(c) ASS Altenburger <br />\n". + " - ASS Altenburger Spielkarten - Spielkartenfabrik Altenburg GmbH <br />\n". + " a Carta Mundi Company Email: info@spielkarten.com Internet: www.spielkarten.com</p>\n"; echo "</footer>\n\n"; echo '<script src="'.autoversion('js/jquery.min.js'). '"></script>'; @@ -474,7 +474,8 @@ function output_navbar() if(isset($_SESSION['name'])) { - $name = $_SESSION['name']; + $name = $_SESSION['name']; + $email = DB_get_email('name',$name); /* last logon time */ $myid = DB_get_userid('name',$name); @@ -489,28 +490,23 @@ function output_navbar() $token = get_user_token($myid); /* logout info */ - 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."&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 "\n<div class=\"navigation\">\n"; + echo " <span class=\"brand\" href=\"#\">E-DoKo</span>\n"; + echo " <ul class=\"nav\">"; + echo " <li>\n"; + echo " <img title=\"$name\" "; + echo "src=\"http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=identicon\" />\n"; + echo " </li>\n"; + echo " <li> <a href=\"".$INDEX."\"><i class=\"icon-home\"></i><span class=\"navhide\">"._('Home')."</span></a></li>\n"; + echo " <li> <a href=\"".$INDEX."?action=prefs\"><i class=\"icon-cog\"></i><span class=\"navhide\">". + _('settings')."</span></a></li>\n"; + echo " <li> <a href=\"".$INDEX."?action=new\">"._('new game')."</a></li>\n"; + echo " <li> <a href=\"".$INDEX."?action=stats\">"._('statistics')."</a></li>\n"; + echo " <li> <a href=\"".$WIKI."\">"._('wiki/bugs')."</a></li>\n"; + echo " <li> <a href=\"".$RSS."?uid=".$myid."&token=".$token."\">"._('atom')."</a></li>\n"; + echo " <li> <a href=\"".$INDEX."?action=logout\"><i class=\"icon-off\"></i><span class=\"navhide\">"._('logout')."</span></a></li>\n"; + echo " </ul>\n"; + echo "</div>\n"; echo "<div class=\"lastlogin\"><span>"._('last login').": ".date("r",$unixtime)."</span></div>\n\n"; } diff --git a/include/welcome.php b/include/welcome.php index 62087a3..5ba7b38 100644 --- a/include/welcome.php +++ b/include/welcome.php @@ -51,33 +51,40 @@ $avgage = $avgage[0]; echo "\n\n<div class=\"login\">\n"; -echo " <p> Play Doppelkopf online.</p>\n". -" <p> For more information please visit our <a href=\"$WIKI\">wiki</a>. </p>\n"; ?> - <ul class="loginregister"> - <li> Login </li> - <li> Register </li> + <div class="hero-unit"> + <h1>E-DoKo</h1> + <p>Play Doppelkopf online</p> + <p> For more information please visit our <a href="<?php $WIKI ?>">wiki</a> or just log in. </p> + </div> + + + <ul class="loginregister nav nav-tabs"> + <li class="active"><a href="#login" data-toggle="tab"> Login </a></li> + <li><a href="#register" data-toggle="tab"> Register</a> </li> </ul> - <form class="dologin" action="index.php?action=login" method="post"> + <div class="tab-content"> + <div class="tab-pane active" id="login"> + <form class="loginregister form-inline" action="index.php?action=login" method="post"> <fieldset> - <label for="email">Email:</label> - <input type="email" id="email" name="email" size="20" maxlength="30" autofocus /> <br /> - <label for="password">Password:</label> - <input type="password" id="password" name="password" size="20" maxlength="30" /> <br /> - <input type="submit" class="submitbutton" name="login" value="login" /> - <input type="submit" class="submitbutton" name="forgot" value="Forgot your password?" /> + <input type="email" id="email" name="email" size="20" maxlength="30" placeholder="email" autofocus /> + <input type="password" id="password" name="password" size="20" maxlength="30" placeholder="password"/> <?php if($OPENIDPATH) {?> + <br /> or use openid <br /> + <input type="text" id="openid_url" name="openid_url" size="20" maxlength="50" placeholder="http://username.openid.net"/> + <span class="help-bloc">See <a href="http://openid.net">openid.net</a> for more information</span>. <hr /> - <label for="openid_url">Openid:</label> - <input type="text" id="openid_url" name="openid_url" size="20" maxlength="50" placeholder="http://username.openid.net"/> <br /> - <p>See <a href="http://openid.net">openid.net</a> for more information.</p> - <input type="submit" class="submitbutton" name="login" value="Sign in" /><br /> + <input type="submit" class="submitbutton" name="login" value="login" /> + <input type="submit" class="button" name="forgot" value="Forgot your password?" /> <?php }?> </fieldset> </form> + </div> + + <div class="tab-pane" id="register"> <?php /* check for openid information */ @@ -91,7 +98,7 @@ echo " <p> Play Doppelkopf online.</p>\n". if(myisset('openidemail')) $email = $_REQUEST['openidemail']; - echo ' <form class="doregister" action="index.php?action=register" method="post">'; echo "\n"; + echo ' <form class="loginregister form-horizontal doregister" action="index.php?action=register" method="post">'; echo "\n"; echo ' <fieldset>'; echo "\n"; echo ' <label for="Rfullname">Full name:</label>'; echo "\n"; echo " <input type=\"text\" id=\"Rfullname\" name=\"Rfullname\" size=\"20\" maxlength=\"30\" value=\"$name\" /> <br />\n"; @@ -114,12 +121,12 @@ echo " <p> Play Doppelkopf online.</p>\n". $rand_number = mt_rand(0,3); /* to get numbers between 0 and 4 */ $Robotproof = "Robotproof".$rand_number; ?> - <p style="float: left">Please answer this anti-spam question:</p> + Please answer this anti-spam question:<br /> <label for="Robotproof"> <?php echo output_robotproof($rand_number); ?></label> <?php echo " <input type=\"text\" id=\"Robotproof\" name=\"$Robotproof\" size=\"20\" maxlength=\"30\" /> <br />\n"; ?> - <input type="submit" value="register" /> + <input type="submit" class="submitbutton" value="register" /> <?php if($openid_url=='') @@ -130,8 +137,11 @@ echo " <p> Play Doppelkopf online.</p>\n". ?> </fieldset> </form> + </div> + </div> <?php + echo "<hr />"; echo "<h4>Some statistics:</h4>\n"; if($pre == 0) @@ -88,11 +88,6 @@ $(document).ready( $(".gameshidesession").hide(); }); - $("ul.loginregister").click(function () { - $(".dologin").slideToggle(); - $(".doregister").slideToggle(); - }); - $(".message div div").parent().click ( function() { $(this).hide(); }); }); diff --git a/js/layout.js b/js/layout.js index b98db8e..e0fb512 100644 --- a/js/layout.js +++ b/js/layout.js @@ -1,3 +1,26 @@ -$(".navbar .nav").addClass("pull-right"); $("table").addClass("table table-striped"); -$("ul.tricks").wrap('<div class="pagination">');
\ No newline at end of file +$("ul.tricks").wrap('<div class="pagination">'); + +$(".navigation").addClass("navbar-inner"); +$(".navbar-inner").wrap('<div class="navbar navbar-fixed-top">'); +$(".navbar .nav").addClass("pull-right"); +$(".navbar p").addClass("navbar-text"); + + +// enable tabs on login page +$('a[data-toggle="tab"]').on('shown', function (e) { + e.target // activated tab + e.relatedTarget // previous tab +}) + +$('div.login').addClass("row-fluid"); +$('div.login ul').addClass("offset3 span6"); +$('div.login .tab-content').addClass("offset3 span6"); + +$('.login input.submitbutton').addClass('btn btn-primary'); +$('.login input[type="submit"]').addClass('btn'); + +$(".doregister div").addClass('control-group'); +$(".doregister label").wrap('<div class="control-label">'); +$(".doregister input").wrap('<div class="controls">'); +$(".doregister select").wrap('<div class="controls">'); |