Reworked whole layout with a modern dashboard look (not finished)

2 files changed, 8 insertions, 16 deletions

diff --git a/assets/js/heatmap.js b/assets/js/heatmap.js
index 34b0359..00dab42 100644
--- a/assets/js/heatmap.js
+++ b/assets/js/heatmap.js
@@ -1,10 +1,10 @@
 function calendarHeatmap() {
     // defaults
-    var width = 750;
-    var height = 110;
-    var legendWidth = 150;
+    var width = Number($(document).width()) - 72;
+    var height = 7.5 * (Number($(document).width()) / 70 + 2);
+    var legendWidth = 0;
     var selector = 'body';
-    var SQUARE_LENGTH = 11;
+    var SQUARE_LENGTH = Number($(document).width()) / 70;
     var SQUARE_PADDING = 2;
     var MONTH_LABEL_PADDING = 6;
     var now = moment().endOf('day').toDate();
@@ -152,7 +152,8 @@ function calendarHeatmap() {
                 .attr('width', width)
                 .attr('class', 'calendar-heatmap')
                 .attr('height', height)
-                .style('padding', '36px');
+                .style('padding', '36px')
+                .style('text-align', 'center');
 
             dayRects = svg.selectAll('.day-cell')
                 .data(dateRange); //  array of days for the last yr
diff --git a/assets/js/main.js b/assets/js/main.js
index 14bae8f..42ff881 100755
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -209,15 +209,6 @@ $(() => {
     RenderDayTimeChart(AverageWatchTimeOccurrence);
     RenderMostWatchedChart(SortedTitleOccurrenceCounter, TitleWatchTime);
     RenderHeatmap(HeatmapDates);
-
-    // create scroll events
-    new Waypoint({
-      element: $("canvas#MostWatchedChart"),
-      handler: direction => {
-        $("canvas#MostWatchedChart").fadeTo(1000, direction === "down" ? 1 : 0);
-      },
-      offset: $("canvas#MostWatchedChart").height()
-    });
   }
 
   /**
@@ -374,11 +365,11 @@ $(() => {
       type: "POST"
     }).done(result => {
       const TopInformation = JSON.parse(result);
-      $(".MostWatchedOverview .MostWatchedPoster").attr(
+      $(".MostWatchedOverview > .MostWatchedPoster").attr(
         "src",
         `https://image.tmdb.org/t/p/w300${TopInformation.poster_path}`
       );
-      $(".MostWatchedOverview .OverviewText .Description").text(
+      $(".MostWatchedOverview > .Description").text(
         TopInformation.overview
       );
       console.log(TopInformation);