Commit 8b137f2b authored by Lukas Burgey's avatar Lukas Burgey

Split css files and optimize style

parent 2b5db5f7
/* ----- default styling is for mobile ----- */
.table>tbody>tr>td.nopad {
padding: 0;
margin: 0;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 3px;
font-size: 80%;
}
.navbar {
margin-bottom: 5px;
}
.well {
margin: 0px;
padding: 5px;
text-align: center;
}
div.limitgrowth {
height: 250px;
width: 250px;
margin: 0 auto;
}
[class*="col-"] {
/* never */
padding: 5px;
margin: 0px;
}
/* styles for tablet likes */
@media only screen and (min-width: 480px) and (max-width: 768px) {
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 5px;
font-size: 100%;
}
.navbar {
margin-bottom: 10px;
}
.well {
padding: 10px;
}
div.limitgrowth {
width: 300px;
height: 300px;
}
[class*="col-"] {
padding: 10px;
}
}
/* styles for desktop */
@media only screen and (min-width: 769px) {
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 8px;
font-size: 100%;
}
.navbar {
margin-bottom: 15px;
}
.well {
padding: 15px;
}
div.limitgrowth {
width: 400px;
height: 400px;
}
[class*="col-"] {
padding: 15px;
}
}
/* generic styles */
td, th {
text-align: center
/* single element styles */
#maincontainer * {
text-align: center;
}
/*
table {
border-radius:6px;
-moz-border-radius:6px;
#maincontainer a {
color: #000000;
text-decoration: underline;
}
*/
table.table.table-compressed>tbody>tr>td {
padding: 5px;
h4, h5, h6 {
font-weight: bold;
}
label {
text-align: left;
}
th {
border-top: none;
}
/* parent derived element styles */
form table * {
text-align: left;
padding-right: 3px;
......@@ -22,10 +30,10 @@ form table * {
#skat-form, #skat-form>* {
margin: auto;
text-align: center;
}
.dropdown-menu>li>form>input[type="submit"] {
/* inputs in the navbar look like an a */
background: none;
border: none;
display: block;
......@@ -37,52 +45,6 @@ form table * {
white-space: nowrap;
}
label {
text-align: left;
}
th {
border-top: none;
}
/*
.table-hidden>tbody>tr:first-child>td {
font-weight: bold;
}
*/
.well>.canvas {
padding: 15px;
}
.well .table {
margin: 0;
}
.row:first-child {
margin-bottom: 0px;
}
.chart-heading {
font-weight: bold;
margin-top: 0;
text-align: center;
}
#maincontainer a {
color: #000000;
text-decoration: underline;
}
.panel-heading {
font-weight: bold;
text-align: center;
}
.achievement {
text-align: center;
}
.dropdown:hover .dropdown-menu {
display: block;
}
......@@ -91,87 +53,7 @@ th {
font-weight: bold;
}
/* ----- default styling is for mobile ----- */
.table>tbody>tr>td.nopad {
padding: 0;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 3px;
font-size: 80%;
}
.navbar {
margin-bottom: 5px;
}
.well {
margin: 0px;
padding: 5px;
text-align: center;
}
div.limitgrowth {
height: 250px;
width: 250px;
margin: 0 auto;
}
[class*="col-"] {
/* never */
padding: 5px;
margin: 0px;
}
/* styles for tablet likes */
@media only screen and (min-width: 480px) and (max-width: 768px) {
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 5px;
font-size: 100%;
}
.navbar {
margin-bottom: 10px;
}
.well {
padding: 10px;
}
div.limitgrowth {
width: 300px;
height: 300px;
}
[class*="col-"] {
padding: 10px;
}
}
/* styles for desktop */
@media only screen and (min-width: 769px) {
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px 8px;
font-size: 100%;
}
.navbar {
margin-bottom: 15px;
}
.well {
padding: 15px;
}
div.limitgrowth {
width: 400px;
height: 400px;
}
[class*="col-"] {
padding: 15px;
}
.nopad>table {
margin-bottom: 0;
border: solid #ddd 1px;
}
......@@ -10,6 +10,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js" integrity="sha256-VNbX9NjQNRW+Bk02G/RO6WiTKuhncWI4Ey7LkSbE+5s=" crossorigin="anonymous"></script>
<!-- my own scripts / css -->
<link rel="stylesheet" href="{% static 'styles.css' %}">
<link rel="stylesheet" href="{% static 'responsive.css' %}">
<script src="{% static 'skat.js' %}"></script>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="120x120" href="{% static "apple-touch-icon.png" %}">
......
......@@ -61,15 +61,15 @@ new Chart($("#chartfrei{{ n }}")[0].getContext("2d"), {
<div class="row">
{% for n, _ in frei_liegen.items %}
<div class="col-md-3">
<div class="well">
<h5 class="chart-heading">n = {{ n }}</h5>
<canvas id="chartfrei{{ n }}"></canvas>
<div>
<h5>n = {{ n }}</h5>
<canvas id="chartfrei{{ n }}"></canvas>
</div>
</div>
{% endfor %}
<div class="col-md-3">
<div class="well">
<h5 class="chart-heading">Description</h5>
<h5>Description</h5>
<div class="text-justify">
Suppose you have the game and looked into the skat.
You know your opponents have n cards from a type.
p is the probability that a specific opponent has k cards.
......
......@@ -11,13 +11,13 @@
<div class="row">
<div class="col-md-4">
<div class="well achievement">
<h5 class="chart-heading">Scoring system</h5>
<h5>Scoring system</h5>
{{ it.scoring_system }}
</div>
</div>
<div class="col-md-4">
<div class="well achievement">
<h5 class="chart-heading">Players</h5>
<h5>Players</h5>
{% for player in info.participating_players %}
<a href="{% url 'playerPage' player=player.name %}">{{ player.name }}</a>
{% endfor %}
......@@ -25,14 +25,14 @@
</div>
<div class="col-md-4">
<div class="well achievement">
<h5 class="chart-heading">Rule Set</h5>
<h5>Rule Set</h5>
{{ it.rule_set }}
</div>
</div>
{% for addendum in info.addenda %}
<div class="col-md-4">
<div class="well achievement">
<h5 class="chart-heading">Rule Addendum</h5>
<h5>Rule Addendum</h5>
{{ addendum }}
</div>
</div>
......@@ -41,7 +41,7 @@
<div class="row">
<div class="col-md-4">
<div class="well achievement">
<h5 class="chart-heading">Status</h5>
<h5>Status</h5>
{{ info.status }}
</div>
</div>
......
......@@ -14,24 +14,24 @@
<div class="row">
<div class="col-md-12">
<div class="well">
<h5 class="chart-heading">Stats</h5>
<h5>Stats</h5>
<div class="table-responsive">
<table class="table">
<thead>
<table class="table">
<thead>
<tr>
{% for stat in player_info.stats_list %}
<td data-toggle="tooltip" title="{{ stat_descriptions|ldescr:stat }}">
{{ stat_descriptions|sdescr:stat }}
</td>
{% endfor %}
</tr>
</thead>
<tr>
{% for stat in player_info.stats_list %}
<td data-toggle="tooltip" title="{{ stat_descriptions|ldescr:stat }}">
{{ stat_descriptions|sdescr:stat }}
</td>
{% endfor %}
{% for key in player_info.stats_list %}
<td>{{ player_info.stats|keyvalue:key|formatstat }}</td>
{% endfor %}
</tr>
</thead>
<tr>
{% for key in player_info.stats_list %}
<td>{{ player_info.stats|keyvalue:key|formatstat }}</td>
{% endfor %}
</tr>
</table>
</table>
</div>
</div>
</div>
......
......@@ -6,19 +6,19 @@
{% block content %}
<div class="row">
<div class="col-md-12">
<h5 style="margin: 0px;" class="chart-heading">{{ title }}</h5>
<h5 style="margin: 0px;">{{ title }}</h5>
</div>
<div class="col-md-6">
<h5 class="chart-heading"> {{ stat_descriptions|ldescr:'point_history' }} </h5>
<h5>{{ stat_descriptions|ldescr:'point_history' }}</h5>
<canvas id="chartpoint_history" height="170"></canvas>
</div>
<div class="col-md-6">
<h5 class="chart-heading">{{ stat_descriptions|ldescr:'elo_history' }}</h5>
<h5>{{ stat_descriptions|ldescr:'elo_history' }}</h5>
<canvas id="chart_elo_history" height="170"></canvas>
</div>
<div class="col-md-12">
<div class="table-responsive">
<h5 class="chart-heading">Player ranking</h5>
<h5>Player ranking</h5>
<table class="table table-striped">
<thead>
<tr>
......@@ -38,25 +38,25 @@
</div>
</div>
<div class="col-md-6">
<h5 class="chart-heading">Game endings: {{ win_percentage|floatformat:-2 }}% won</h5>
<h5>Game endings: {{ win_percentage|floatformat:-2 }}% won</h5>
<div class="limitgrowth">
<canvas id="chart1"></canvas>
</div>
</div>
<div class="col-md-6">
<h5 class="chart-heading">Game count per type</h5>
<h5>Game count per type</h5>
<div class="limitgrowth">
<canvas id="chart0"></canvas>
</div>
</div>
<div class="col-md-12">
<h5 class="chart-heading">Win ratio per type</h5>
<h5>Win ratio per type</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
{% for row in best_player_per_type %}
<td><strong>{{ row.type }}</strong></td>
<td>{{ row.type }}</td>
{% endfor %}
</tr>
</thead>
......@@ -64,7 +64,7 @@
<tr>
{% for row in best_player_per_type %}
<td class="nopad">
<table class="table">
<table class="table table-striped">
{% for player in row.player_list %}
<tr>
<td>{{ player.win_ratio|floatformat:-2}}</td>
......@@ -81,11 +81,11 @@
</div>
</div>
<div class="col-md-6">
<h5 class="chart-heading">{{ stat_descriptions|ldescr:'game_values' }}</h5>
<h5>{{ stat_descriptions|ldescr:'game_values' }}</h5>
<canvas id="chartgame_value"></canvas>
</div>
<div class="col-md-6">
<h5 class="chart-heading">Average value by game ending</h5>
<h5>Average value by game ending</h5>
<canvas id="chart2"></canvas>
</div>
</div>
......
......@@ -6,35 +6,33 @@
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="well">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>#</td>
<td>Vorhand</td>
<td>Mittelhand</td>
<td>Hinterhand</td>
<td>Type</td>
<td>Value</td>
<td>Date</td>
</tr>
</thead>
<tbody>
{% for game in game_list reversed %}
<tr class="{% if game.won %}success{% else %}danger{% endif %}">
<td>{{ game_list|length|subtract:forloop.counter0 }}</td>
<td><a href="/player/{{ game.player0 }}">{{ game.player0 }}</a></td>
<td><a href="/player/{{ game.player1 }}">{{ game.player1 }}</a></td>
<td><a href="/player/{{ game.player2 }}">{{ game.player2 }}</a></td>
<td>{{ game.game_type }}</td>
<td>{{ game.value }}</td>
<td>{{ game.date|date }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td>#</td>
<td>Vorhand</td>
<td>Mittelhand</td>
<td>Hinterhand</td>
<td>Type</td>
<td>Value</td>
<td>Date</td>
</tr>
</thead>
<tbody>
{% for game in game_list reversed %}
<tr class="{% if game.won %}success{% else %}danger{% endif %}">
<td>{{ game_list|length|subtract:forloop.counter0 }}</td>
<td><a href="/player/{{ game.player0 }}">{{ game.player0 }}</a></td>
<td><a href="/player/{{ game.player1 }}">{{ game.player1 }}</a></td>
<td><a href="/player/{{ game.player2 }}">{{ game.player2 }}</a></td>
<td>{{ game.game_type }}</td>
<td>{{ game.value }}</td>
<td>{{ game.date|date }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment