Merge pull request #178 from rootcoma/styling_web

Changing nav-bar, word-wrapping, other small screen changes
This commit is contained in:
tannn 2013-11-26 18:49:16 -08:00
commit 149da2fdd0
7 changed files with 156 additions and 195 deletions

View File

@ -10,7 +10,6 @@ include('config.php');
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -18,43 +17,41 @@ include('config.php');
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li class="active"><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1>About Us</h1>
<p>TriviaTime is a trivia word game meant for irc. The source code is on <a target="_blank" href="https://github.com/tannn/TriviaTime">Github</a>, be sure to check it out.</p>
<p>We are <a href="irc://irc.freenode.net/#trivialand">#trivialand</a> on Freenode. Come join us!</p>
</div>
<div class="footer">
<p>&copy; Trivialand 2013 - <a target="_blank" href="https://github.com/tannn/TriviaTime">Github</a></p>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -1,5 +1,6 @@
body {
padding-top: 20px;
padding-top: 40px;
padding-bottom: 60px;
}
@ -9,31 +10,9 @@ body {
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
min-width: 408px;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
.breakable {
word-wrap: break-word;
overflow-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all
}

View File

@ -10,7 +10,6 @@ include('config.php');
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -18,28 +17,30 @@ include('config.php');
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1>TriviaTime</h1>
<h1>Home</h1>
<p>Get the latest stats for players and updates.</p>
</div>
<div class="row">
@ -51,6 +52,7 @@ include('config.php');
<th>Round #</th>
<th>Channel</th>
<th>Question</th>
<th>Question #</th>
</tr>
</thead>
<tbody>
@ -65,7 +67,8 @@ include('config.php');
echo '<tr>';
echo '<td>' . $res['round_num'] . '</td>';
echo '<td>' . $res['channel'] . '</td>';
echo '<td>' . $res['question'] . '</td>';
echo '<td class="breakable">' . $res['question'] . '</td>';
echo '<td>' . $res['line_num'] . '</td>';
echo '</tr>';
}
}
@ -83,11 +86,8 @@ include('config.php');
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -65,7 +65,6 @@ if ($db && $username != '') {
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -73,26 +72,28 @@ if ($db && $username != '') {
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1><?php echo $result['usrname']; ?></h1>
<p>Profile and user summary.</p>
@ -100,7 +101,6 @@ if ($db && $username != '') {
</p>
</div>
<div class="row">
<div class="span6">
<h2>Averages</h2>
@ -155,11 +155,9 @@ if ($db && $username != '') {
<table class="table">
<thead>
<tr>
<th>Number Edited</th>
<th>Edits Accepted</th>
<th>Questions Added</th>
<th>Questions Accepted</th>
<th>Reports Made</th>
<th>Edits (Made/Accepted)</th>
<th>Questions (Made/Accepted)</th>
</tr>
</thead>
<tbody>
@ -167,11 +165,9 @@ if ($db && $username != '') {
if(isset($result)) {
if(!is_null($result['usrname']) && $result['usrname'] != 'Not found') {
echo '<tr>';
echo '<td>' . number_format($result['num_e'],0) . '</td>';
echo '<td>' . number_format($result['num_e_accepted'],0) . '</td>';
echo '<td>' . number_format($result['num_q'],0) . '</td>';
echo '<td>' . number_format($result['num_q_accepted'],0) . '</td>';
echo '<td>' . number_format($result['num_r'],0) . '</td>';
echo '<td>' . number_format($result['num_e'],0) . '/' . number_format($result['num_e_accepted'],0) . '</td>';
echo '<td>' . number_format($result['num_q'],0) . '/' . number_format($result['num_q_accepted'],0) . '</td>';
echo '</tr>';
}
}
@ -192,11 +188,8 @@ if ($db && $username != '') {
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -43,7 +43,6 @@ $maxResults = 5;
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -51,26 +50,28 @@ $maxResults = 5;
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li class="active"><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1>Reports</h1>
<p>The reports and edits that are currently pending.</p>
@ -85,7 +86,7 @@ $maxResults = 5;
<thead>
<tr>
<th>Report #</th>
<th>Username</th>
<th class="hidden-phone">Username</th>
<th>Question #</th>
<th>Question</th>
<th>Report Text</th>
@ -110,10 +111,10 @@ $maxResults = 5;
foreach($result as $res) {
echo '<tr>';
echo '<td>' . $res['id'] . '</td>';
echo '<td>' . $res['username'] . '</td>';
echo '<td class="hidden-phone">' . $res['username'] . '</td>';
echo '<td>' . $res['question_num'] . '</td>';
echo '<td>' . $res['original'] . '</td>';
echo '<td>' . $res['report_text'] . '</td>';
echo '<td class="breakable">' . $res['original'] . '</td>';
echo '<td class="breakable">' . $res['report_text'] . '</td>';
echo '</tr>';
}
}
@ -138,7 +139,7 @@ $maxResults = 5;
<thead>
<tr>
<th>Edit #</th>
<th>Username</th>
<th class="hidden-phone">Username</th>
<th>New Question</th>
<th>Old Question</th>
<th>Question #</th>
@ -204,9 +205,9 @@ $maxResults = 5;
echo '<tr>';
echo '<td>' . $res['id'] . '</td>';
echo '<td>' . $res['username'] . '</td>';
echo '<td>' . $differenceString . '</td>';
echo '<td>' . $res['original'] . '</td>';
echo '<td class="hidden-phone">' . $res['username'] . '</td>';
echo '<td class="breakable">' . $differenceString . '</td>';
echo '<td class="breakable">' . $res['original'] . '</td>';
echo '<td>' . $res['question_id'] . '</td>';
echo '</tr>';
}
@ -252,7 +253,7 @@ $maxResults = 5;
echo '<tr>';
echo '<td>' . $res['id'] . '</td>';
echo '<td>' . $res['username'] . '</td>';
echo '<td>' . $res['question'] . '</td>';
echo '<td class="breakable">' . $res['question'] . '</td>';
echo '</tr>';
}
}
@ -275,11 +276,8 @@ $maxResults = 5;
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -10,7 +10,6 @@ include('config.php');
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -18,26 +17,28 @@ include('config.php');
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li class="active"><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1>Stats</h1>
<p>Stats are updated continuously and instantly.</p>
@ -45,7 +46,6 @@ include('config.php');
</p>
</div>
<div class="row">
<div class="span6">
<h2>Todays Top Scores</h2>
@ -225,11 +225,8 @@ include('config.php');
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -33,7 +33,6 @@ $maxResults = 10;
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/triviatime.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
@ -41,26 +40,28 @@ $maxResults = 10;
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">TriviaTime</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li class="active"><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="brand">TriviaTime</span>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="user.php">Players</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div><!-- /.navbar -->
</div>
</div>
</div><!-- /.navbar -->
<div class="container">
<div class="hero-unit">
<h1>Players</h1>
<p>Show stats for users.</p>
@ -164,11 +165,7 @@ $maxResults = 10;
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>