diff options
| -rw-r--r-- | assets/css/grid.css | 852 | ||||
| -rw-r--r-- | assets/css/main.sass | 84 | ||||
| -rw-r--r-- | assets/js/heatmap.js | 11 | ||||
| -rwxr-xr-x | assets/js/main.js | 13 | ||||
| -rwxr-xr-x | index.html | 31 |
5 files changed, 894 insertions, 97 deletions
diff --git a/assets/css/grid.css b/assets/css/grid.css new file mode 100644 index 0000000..7e27ea9 --- /dev/null +++ b/assets/css/grid.css @@ -0,0 +1,852 @@ +.container, +.container-fluid { + margin-right: auto; + margin-left: auto +} + +.container-fluid { + padding-right: 2rem; + padding-left: 2rem +} + +.row { + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -.5rem; + margin-left: -.5rem +} + +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse +} + +.col.reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse +} + +.col-xs, +.col-xs-1, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem +} + +.col-xs { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% +} + +.col-xs-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% +} + +.col-xs-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% +} + +.col-xs-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% +} + +.col-xs-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% +} + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% +} + +.col-xs-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% +} + +.col-xs-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% +} + +.col-xs-offset-0 { + margin-left: 0 +} + +.col-xs-offset-1 { + margin-left: 8.33333333% +} + +.col-xs-offset-2 { + margin-left: 16.66666667% +} + +.col-xs-offset-3 { + margin-left: 25% +} + +.col-xs-offset-4 { + margin-left: 33.33333333% +} + +.col-xs-offset-5 { + margin-left: 41.66666667% +} + +.col-xs-offset-6 { + margin-left: 50% +} + +.col-xs-offset-7 { + margin-left: 58.33333333% +} + +.col-xs-offset-8 { + margin-left: 66.66666667% +} + +.col-xs-offset-9 { + margin-left: 75% +} + +.col-xs-offset-10 { + margin-left: 83.33333333% +} + +.col-xs-offset-11 { + margin-left: 91.66666667% +} + +.start-xs { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start +} + +.center-xs { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center +} + +.end-xs { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end +} + +.top-xs { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start +} + +.middle-xs { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center +} + +.bottom-xs { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end +} + +.around-xs { + -ms-flex-pack: distribute; + justify-content: space-around +} + +.between-xs { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between +} + +.first-xs { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 +} + +.last-xs { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 +} + +@media only screen and (min-width:48em) { + .container { + width: 49rem + } + .col-sm, + .col-sm-1, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-sm { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-sm-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-sm-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-sm-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-sm-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-sm-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-sm-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-sm-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-sm-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-sm-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-sm-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-sm-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-sm-offset-0 { + margin-left: 0 + } + .col-sm-offset-1 { + margin-left: 8.33333333% + } + .col-sm-offset-2 { + margin-left: 16.66666667% + } + .col-sm-offset-3 { + margin-left: 25% + } + .col-sm-offset-4 { + margin-left: 33.33333333% + } + .col-sm-offset-5 { + margin-left: 41.66666667% + } + .col-sm-offset-6 { + margin-left: 50% + } + .col-sm-offset-7 { + margin-left: 58.33333333% + } + .col-sm-offset-8 { + margin-left: 66.66666667% + } + .col-sm-offset-9 { + margin-left: 75% + } + .col-sm-offset-10 { + margin-left: 83.33333333% + } + .col-sm-offset-11 { + margin-left: 91.66666667% + } + .start-sm { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-sm { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-sm { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-sm { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-sm { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-sm { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-sm { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-sm { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-sm { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-sm { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +} + +@media only screen and (min-width:64em) { + .container { + width: 65rem + } + .col-md, + .col-md-1, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-md { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-md-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-md-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-md-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-md-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-md-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-md-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-md-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-md-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-md-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-md-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-md-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-md-offset-0 { + margin-left: 0 + } + .col-md-offset-1 { + margin-left: 8.33333333% + } + .col-md-offset-2 { + margin-left: 16.66666667% + } + .col-md-offset-3 { + margin-left: 25% + } + .col-md-offset-4 { + margin-left: 33.33333333% + } + .col-md-offset-5 { + margin-left: 41.66666667% + } + .col-md-offset-6 { + margin-left: 50% + } + .col-md-offset-7 { + margin-left: 58.33333333% + } + .col-md-offset-8 { + margin-left: 66.66666667% + } + .col-md-offset-9 { + margin-left: 75% + } + .col-md-offset-10 { + margin-left: 83.33333333% + } + .col-md-offset-11 { + margin-left: 91.66666667% + } + .start-md { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-md { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-md { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-md { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-md { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-md { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-md { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-md { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-md { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-md { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +} + +@media only screen and (min-width:75em) { + .container { + width: 76rem + } + .col-lg, + .col-lg-1, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: .5rem; + padding-left: .5rem + } + .col-lg { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-lg-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333% + } + .col-lg-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667% + } + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25% + } + .col-lg-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333% + } + .col-lg-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667% + } + .col-lg-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50% + } + .col-lg-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333% + } + .col-lg-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667% + } + .col-lg-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75% + } + .col-lg-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333% + } + .col-lg-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667% + } + .col-lg-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100% + } + .col-lg-offset-0 { + margin-left: 0 + } + .col-lg-offset-1 { + margin-left: 8.33333333% + } + .col-lg-offset-2 { + margin-left: 16.66666667% + } + .col-lg-offset-3 { + margin-left: 25% + } + .col-lg-offset-4 { + margin-left: 33.33333333% + } + .col-lg-offset-5 { + margin-left: 41.66666667% + } + .col-lg-offset-6 { + margin-left: 50% + } + .col-lg-offset-7 { + margin-left: 58.33333333% + } + .col-lg-offset-8 { + margin-left: 66.66666667% + } + .col-lg-offset-9 { + margin-left: 75% + } + .col-lg-offset-10 { + margin-left: 83.33333333% + } + .col-lg-offset-11 { + margin-left: 91.66666667% + } + .start-lg { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start + } + .center-lg { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center + } + .end-lg { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end + } + .top-lg { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start + } + .middle-lg { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center + } + .bottom-lg { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end + } + .around-lg { + -ms-flex-pack: distribute; + justify-content: space-around + } + .between-lg { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between + } + .first-lg { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1 + } + .last-lg { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1 + } +}
\ No newline at end of file diff --git a/assets/css/main.sass b/assets/css/main.sass index aa10dd8..65427d3 100644 --- a/assets/css/main.sass +++ b/assets/css/main.sass @@ -3,87 +3,41 @@ * @author Marvin Borner * @copyright Marvin Borner 2018 -// General +//// General $BlueColor: #1e3264 -body +html, body + width: 100vw !important + background-color: #141518 font-family: "Varela Round", sans-serif !important text-rendering: optimizeLegibility !important + color: #bbb box-sizing: border-box !important + overflow-x: hidden .Main // display: none min-height: 100vh -// General headers -.SectionHeader - display: flex - justify-content: center - align-items: center - align-content: space-between - width: 100% +.row:not(.MostWatchedOverview) div + border: .5px solid #25272a -.SectionHeader h1 - text-transform: capitalize +//// Charts +.MostWatchedOverview + .Description + margin: 20px + .MostWatchedPoster + height: 50% -// Gradients -.GradientBackground - %Gradient - position: fixed - top: 0 - left: 0 - z-index: -1 - transition: opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s - width: 100% - height: 100vh - .Color:not(.Active) - display: none +/// Heatmap +.HeatmapWrap + max-width: 100vw !important - .GreenBlue - background: linear-gradient(145deg, #c3f0c8, #509bf5) - - @extend %Gradient - - .OrangePink - background: linear-gradient(145deg, #ffc867, #f037a6) - - @extend %Gradient - - .GreenBlue - background: linear-gradient(145deg, #c3f0c8, #509bf5) - - @extend %Gradient - -// Favorites -.FavoritesSection - .SectionHeader - height: 40vh - color: $BlueColor - - .MostWatchedOverview - padding: 10vw - - .OverviewText - position: relative - float: left - max-width: 50% - - .MostWatchedPoster - position: relative - float: right - max-width: 50% - margin-bottom: 20px - -// Charts -canvas#MostWatchedChart - opacity: 0 - - -// Heatmap text.month-name, text.calendar-heatmap-legend-text, -text.day-initial +text.day-initial + fill: #bbb font-size: 10px font-family: Helvetica, arial, 'Open Sans', sans-serif 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); @@ -12,6 +12,7 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Varela+Round"> <link rel="stylesheet" href="assets/css/normalize.css"> + <link rel="stylesheet" href="assets/css/grid.css"> <link rel="stylesheet" href="assets/css/main.css"> <title>Netflix Personal Stats Generator</title> </head> @@ -21,28 +22,26 @@ <input class="CookieInput" type="text" placeholder="Type your cookie..."> <div class="Main"> - <div class="GradientBackground"> - <div class="Color GreenBlue Active"></div> - <div class="Color OrangePink"></div> - <div class="Color GreenBlue"></div> + <div class="row around-xs middle-xs MostWatchedOverview"> + <div class="col-xs Description"></div> + <img class="col-xs-4 MostWatchedPoster" src="" alt=""> </div> - <div class="FavoritesSection"> - <div class="SectionHeader"> - <h1>Let's check out your most watched series</h1> + <div class="row"> + <div class="col-xs"> + <canvas id="WatchTimeChart"></canvas> </div> - <div class="MostWatchedOverview"> - <div class="OverviewText"> - <div class="Description"> - - </div> + <div class="col-xs"> + <canvas class="MostWatchedChart" id="MostWatchedChart"></canvas> + </div> + </div> + <div class="row"> + <div class="col-xs"> + <div class="HeatmapWrap"> + <div class="Heatmap" id="Heatmap"></div> </div> - <img class="MostWatchedPoster" src="" alt=""> </div> </div> - <canvas id="WatchTimeChart"></canvas> - <div id="Heatmap"></div> - <canvas id="MostWatchedChart"></canvas> </div> <script src="assets/js/jQuery.js"></script> |