summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorArun Persaud <arun@nubati.net>2012-12-09 11:17:44 -0800
committerArun Persaud <arun@nubati.net>2012-12-09 11:17:44 -0800
commit9d2ee5fd928dc253e34ca6a0e0be92b1fa041240 (patch)
tree6ee5eb7f6f29b5a7cceb14ba9ac4ee2aea026211
parent293b20963f2bbf0cfca1a146506d65d615b01c2c (diff)
downloade-DoKo-9d2ee5fd928dc253e34ca6a0e0be92b1fa041240.tar.gz
e-DoKo-9d2ee5fd928dc253e34ca6a0e0be92b1fa041240.tar.bz2
e-DoKo-9d2ee5fd928dc253e34ca6a0e0be92b1fa041240.zip
bootstrap: fixed login/register, footer, and navbar
* made navbar smaller, added icons, icons only (for smaller screen) * fixed login screen
-rw-r--r--css/bootstrap/navbar.less3
-rw-r--r--css/bootstrap/variables.less7
-rw-r--r--css/standard.less105
-rw-r--r--include/output.php50
-rw-r--r--include/welcome.php48
-rw-r--r--js/game.js5
-rw-r--r--js/layout.js27
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."&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 "\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."&amp;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)
diff --git a/js/game.js b/js/game.js
index d1d8405..b0f5f5f 100644
--- a/js/game.js
+++ b/js/game.js
@@ -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">');