Style fixes

3 files changed, 49 insertions, 36 deletions

diff --git a/result/index.html b/result/index.html
index a6b057b..1d61ce7 100644
--- a/result/index.html
+++ b/result/index.html
@@ -45,40 +45,46 @@
         </div>
       </div>
 
-      <ul class="nav nav-tabs" id="tab-menu" role="tablist">
-        <li class="nav-item">
-          <a class="nav-link" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="false">
-            Rozkład stylów
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="abv-ratings-tab" data-toggle="tab" href="#abv-ratings" role="tab" aria-controls="abv-ratings" aria-selected="false">
-            ABV / l. ocen
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="abv-average-tab" data-toggle="tab" href="#abv-average" role="tab" aria-controls="abv-average" aria-selected="false">
-            ABV / ocena
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" id="ratings-average-tab" data-toggle="tab" href="#ratings-average" role="tab" aria-controls="ratings-average" aria-selected="false">
-            L. ocen / ocena
-          </a>
-        </li>
-      </ul>
-      <div class="tab-content" id="tab-content">
-        <div class="tab-pane fade" id="styles" role="tabpanel" aria-labelledby="styles-tab">
-          <canvas id="styles-chart" width="100%"></canvas>
-        </div>
-        <div class="tab-pane fade" id="abv-ratings" role="tabpanel" aria-labelledby="abv-ratings-tab">
-          <canvas id="abv-ratings-chart" width="100%"></canvas>
-        </div>
-        <div class="tab-pane fade" id="abv-average" role="tabpanel" aria-labelledby="abv-average-tab">
-          <canvas id="abv-average-chart" width="100%"></canvas>
+      <div class="card">
+        <div class="card-header">
+          <ul class="nav nav-tabs card-header-tabs" id="tab-menu" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="false">
+                Rozkład stylów
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" id="abv-ratings-tab" data-toggle="tab" href="#abv-ratings" role="tab" aria-controls="abv-ratings" aria-selected="false">
+                ABV / l. ocen
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" id="abv-average-tab" data-toggle="tab" href="#abv-average" role="tab" aria-controls="abv-average" aria-selected="false">
+                ABV / ocena
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" id="ratings-average-tab" data-toggle="tab" href="#ratings-average" role="tab" aria-controls="ratings-average" aria-selected="false">
+                L. ocen / ocena
+              </a>
+            </li>
+          </ul>
         </div>
-        <div class="tab-pane fade" id="ratings-average" role="tabpanel" aria-labelledby="ratings-average-tab">
-          <canvas id="ratings-average-chart" width="100%"></canvas>
+        <div class="card-content">
+          <div class="tab-content" id="tab-content">
+            <div class="tab-pane fade" id="styles" role="tabpanel" aria-labelledby="styles-tab">
+              <canvas id="styles-chart" width="100%"></canvas>
+            </div>
+            <div class="tab-pane fade" id="abv-ratings" role="tabpanel" aria-labelledby="abv-ratings-tab">
+              <canvas id="abv-ratings-chart" width="100%"></canvas>
+            </div>
+            <div class="tab-pane fade" id="abv-average" role="tabpanel" aria-labelledby="abv-average-tab">
+              <canvas id="abv-average-chart" width="100%"></canvas>
+            </div>
+            <div class="tab-pane fade" id="ratings-average" role="tabpanel" aria-labelledby="ratings-average-tab">
+              <canvas id="ratings-average-chart" width="100%"></canvas>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -86,6 +92,7 @@
         <div class="card-body">
           Browary o co najmniej 10.000 ocen. Piwa o co najmniej 15 ocenach, o określonym ABV i dodane w 2020 lub wcześniej.<br />
           Liczba ocen przeliczana per miesiąc od czasu dodania; dla piw nieprodukowanych: max. 12 miesięcy.<br />
+          Kooperacje liczone do jednego browaru, zgodnie z "głównym" oznaczeniem na Untappd.<br />
           Dane pobrane z Untappd <time id="compile-date" datetime="2021-01-10">19 stycznia 2021</time>.<br />
         </div>
       </div>
@@ -105,7 +112,6 @@
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js" integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA==" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
-
     <script src="krafcik.js" type="text/javascript"></script>
 
   </body>
diff --git a/result/krafcik.css b/result/krafcik.css
index af4f65b..be4274c 100644
--- a/result/krafcik.css
+++ b/result/krafcik.css
@@ -1,6 +1,10 @@
 html, body {
     max-width: 100%;
+}
+
+body {
     overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 #date-slider {
diff --git a/result/krafcik.js b/result/krafcik.js
index ba8ccf9..77fbda1 100644
--- a/result/krafcik.js
+++ b/result/krafcik.js
@@ -4,7 +4,6 @@ $(document).ready(function() {
         if (!tab) {
             tab = location.hash.replace('#', '') || 'styles';
         }
-        console.log(tab, push);
         $(`a#${tab}-tab`).tab('show');
         if (push) {
             history.pushState({}, '', '#' + tab);
@@ -149,8 +148,8 @@ $(document).ready(function() {
             var container = $('#chart-tooltip');
             if (!container.length) {
                 container = $('<div id="chart-tooltip"></div>');
-                $('body').append(container);
             }
+            $(chart.canvas).parent().append(container);
             if (tooltip.body) {
                 var positionY = chart.canvas.offsetTop;
 			    var positionX = chart.canvas.offsetLeft;
@@ -213,6 +212,7 @@ $(document).ready(function() {
                         }]
                     },
                     options: {
+                        maintainAspectRatio: false,
                         legend: {
                             display: false
                         },
@@ -292,6 +292,7 @@ $(document).ready(function() {
                 abvRatingsChart = new Chart.Scatter(ctx, {
                     data: scatterChartData[0],
                     options: {
+                        maintainAspectRatio: false,
                         scales: {
                             xAxes: [abvAxis],
 					        yAxes: [ratingAxis]
@@ -313,6 +314,7 @@ $(document).ready(function() {
                 abvAverageChart = new Chart.Scatter(ctx, {
                     data: scatterChartData[1],
                     options: {
+                        maintainAspectRatio: false,
                         scales: {
                             xAxis: [abvAxis],
                             yAxes: [averageAxis]
@@ -334,6 +336,7 @@ $(document).ready(function() {
                 ratingsAverageChart = new Chart.Scatter(ctx, {
                     data: scatterChartData[2],
                     options: {
+                        maintainAspectRatio: false,
                         scales: {
 					        xAxes: [ratingAxis],
                             yAxes: [averageAxis]