Upgrading to bootstrap

This commit is contained in:
Denis-Cosmin Nutiu 2017-04-13 22:38:22 +03:00
parent c47ba2a2fa
commit 8312d92a63
3 changed files with 90 additions and 50 deletions

View file

@ -16,27 +16,39 @@
along with scoreboard-benchmark . If not, see <http://www.gnu.org/licenses/>. along with scoreboard-benchmark . If not, see <http://www.gnu.org/licenses/>.
*/ */
header { /* Sticky footer styles
text-align: center; -------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
} }
footer { /* Custom page CSS
text-align: center; -------------------------------------------------- */
body > .container {
padding: 60px 15px 0;
} }
main table { .footer > .container {
font-family: arial, sans-serif; padding-right: 15px;
border-collapse: collapse; padding-left: 15px;
width: 100%;
} }
main td, main th { code {
border: 1px solid #dddddd; font-size: 80%;
text-align: left;
padding: 8px;
}
main tr:nth-child(even) {
background-color: #dddddd;
} }

View file

@ -1,35 +1,34 @@
<!DOCTYPE html> {% extends "mybase.html" %}
<html lang="en">
<head> {% block main %}
<meta charset="UTF-8"> {{ super() }}
<meta name="author" content="Metonymy"> <div class="panel panel-default">
<meta name="description" content="The scoreboard for the benchmarks!"> <!-- Default panel contents -->
<meta name="keywords" content="flask python metonymyqt benchmark scoreboard"> <div class="panel-heading">Scoreboard</div>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}"> <div class="panel-body">
<title>Scoreboard!</title> <p>The results are send here via JSON from the java app.</p>
</head> </div>
<body>
<header> <!-- Table -->
<h1>The Scoreboard!</h1> <table class="table">
</header> <thead>
<main>
<table>
<tr> <tr>
<th>Text</th> <th>GPU</th>
<th>CPU</th>
<th>Score</th> <th>Score</th>
<th>Information</th> <th>Details</th>
</tr> </tr>
</thead>
<tbody>
{% for item in results %} {% for item in results %}
<tr> <tr>
<td>{{ item.text }}</td> <td>{{ item.gpu }}</td>
<td>{{ item.score }}</td> <td>{{ item.cpu }}</td>
<td><a href="{{ url_for('scoreboard.entry', id=item.id) }}">See more</a></td> <td>{{ item.score }}</td>
</tr> <td><a href="{{ url_for('scoreboard.entry', id=item.id) }}">See more</a></td>
</tr>
{% endfor %} {% endfor %}
</table> </tbody>
</main> </table>
<footer> </div>
Copyright 2017 Fellowship of the Bits {% endblock %}
</footer>
</body>
</html>

View file

@ -7,16 +7,45 @@
<meta name="keywords" content="flask python metonymyqt benchmark scoreboard"> <meta name="keywords" content="flask python metonymyqt benchmark scoreboard">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %} {% endblock %}
{% block styles %}
{{super()}}
<link rel="stylesheet"
href="{{url_for('static', filename='style.css')}}">
{% endblock %}
{% block content %}
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">FOTB</a> </div>
<div class="navbar-collapse collapse"> <ul class="nav navbar-nav">
<li><a href="/">Home</a></li> </ul>
</div>
</div>
</div>
<header> <header>
{% block header %} {% block header %}
{% endblock %} {% endblock %}
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This application is not complete! If you find any bugs please report them to:
<a href="mailto:metonymy@fedoraproject.com">Metonymy</a>
</div>
</header> </header>
<main> <div class="container" role="main">
{% block main %} {% block main %}
{% endblock %} {% endblock %}
</main> </div>
<footer> <footer class="footer">
Copyright 2017 Fellowship of the Bits <div class="container">
<span class="text-muted">Copyright © 2017 Fellowship of the Bits</span>
</div>
</footer> </footer>
{% endblock %}