From 4ff1bc67442f80baf983da1fdb8bbad8ecd9d840 Mon Sep 17 00:00:00 2001 From: Kevin Mok Date: Sun, 18 Nov 2018 02:48:24 -0500 Subject: [PATCH] Setup Sass for Bootstrap and Darkly theme Genre graph stopped showing up for whatever reason. --- api/views.py | 8 +- .../static/graphs/scripts/audio_feat_graph.js | 11 +- graphs/templates/graphs/artist_graph.html | 2 + graphs/templates/graphs/features_graphs.html | 9 +- graphs/templates/graphs/genre_graph.html | 20 +- graphs/templates/graphs/logged_in.html | 4 +- graphs/templates/graphs/user_history.html | 4 +- login/templates/login/index.html | 4 +- login/templates/login/scan.html | 4 +- requirements.txt | 3 + spotifyvis/settings.py | 15 +- spotifyvis/static/scss/custom.css | 6463 +++++++++++++++++ spotifyvis/static/scss/custom.css.map | 92 + static/css/dark_bg.css | 15 - static/scss/bootstrap/_alert.scss | 51 + static/scss/bootstrap/_badge.scss | 47 + static/scss/bootstrap/_breadcrumb.scss | 41 + static/scss/bootstrap/_button-group.scss | 172 + static/scss/bootstrap/_buttons.scss | 143 + static/scss/bootstrap/_card.scss | 301 + static/scss/bootstrap/_carousel.scss | 236 + static/scss/bootstrap/_close.scss | 35 + static/scss/bootstrap/_code.scss | 48 + static/scss/bootstrap/_custom-forms.scss | 433 ++ static/scss/bootstrap/_dropdown.scss | 166 + static/scss/bootstrap/_forms.scss | 333 + static/scss/bootstrap/_functions.scss | 86 + static/scss/bootstrap/_grid.scss | 52 + static/scss/bootstrap/_images.scss | 42 + static/scss/bootstrap/_input-group.scss | 173 + static/scss/bootstrap/_jumbotron.scss | 16 + static/scss/bootstrap/_list-group.scss | 115 + static/scss/bootstrap/_media.scss | 8 + static/scss/bootstrap/_mixins.scss | 41 + static/scss/bootstrap/_modal.scss | 180 + static/scss/bootstrap/_nav.scss | 118 + static/scss/bootstrap/_navbar.scss | 299 + static/scss/bootstrap/_pagination.scss | 78 + static/scss/bootstrap/_popover.scss | 183 + static/scss/bootstrap/_print.scss | 141 + static/scss/bootstrap/_progress.scss | 34 + static/scss/bootstrap/_reboot.scss | 483 ++ static/scss/bootstrap/_root.scss | 19 + static/scss/bootstrap/_tables.scss | 187 + static/scss/bootstrap/_tooltip.scss | 115 + static/scss/bootstrap/_transitions.scss | 22 + static/scss/bootstrap/_type.scss | 125 + static/scss/bootstrap/_utilities.scss | 15 + static/scss/bootstrap/_variables.scss | 952 +++ static/scss/bootstrap/bootstrap-grid.scss | 32 + static/scss/bootstrap/bootstrap-reboot.scss | 12 + static/scss/bootstrap/bootstrap.scss | 42 + static/scss/bootstrap/mixins/_alert.scss | 13 + .../bootstrap/mixins/_background-variant.scss | 21 + static/scss/bootstrap/mixins/_badge.scss | 12 + .../scss/bootstrap/mixins/_border-radius.scss | 35 + static/scss/bootstrap/mixins/_box-shadow.scss | 5 + .../scss/bootstrap/mixins/_breakpoints.scss | 123 + static/scss/bootstrap/mixins/_buttons.scss | 109 + static/scss/bootstrap/mixins/_caret.scss | 66 + static/scss/bootstrap/mixins/_clearfix.scss | 7 + static/scss/bootstrap/mixins/_float.scss | 11 + static/scss/bootstrap/mixins/_forms.scss | 147 + static/scss/bootstrap/mixins/_gradients.scss | 45 + .../bootstrap/mixins/_grid-framework.scss | 67 + static/scss/bootstrap/mixins/_grid.scss | 52 + static/scss/bootstrap/mixins/_hover.scss | 37 + static/scss/bootstrap/mixins/_image.scss | 36 + static/scss/bootstrap/mixins/_list-group.scss | 21 + static/scss/bootstrap/mixins/_lists.scss | 7 + .../scss/bootstrap/mixins/_nav-divider.scss | 10 + static/scss/bootstrap/mixins/_pagination.scss | 22 + static/scss/bootstrap/mixins/_reset-text.scss | 17 + static/scss/bootstrap/mixins/_resize.scss | 6 + .../scss/bootstrap/mixins/_screen-reader.scss | 33 + static/scss/bootstrap/mixins/_size.scss | 6 + static/scss/bootstrap/mixins/_table-row.scss | 30 + .../scss/bootstrap/mixins/_text-emphasis.scss | 14 + static/scss/bootstrap/mixins/_text-hide.scss | 13 + .../scss/bootstrap/mixins/_text-truncate.scss | 8 + static/scss/bootstrap/mixins/_transition.scss | 13 + static/scss/bootstrap/mixins/_visibility.scss | 7 + static/scss/bootstrap/utilities/_align.scss | 8 + .../scss/bootstrap/utilities/_background.scss | 19 + static/scss/bootstrap/utilities/_borders.scss | 59 + .../scss/bootstrap/utilities/_clearfix.scss | 3 + static/scss/bootstrap/utilities/_display.scss | 38 + static/scss/bootstrap/utilities/_embed.scss | 52 + static/scss/bootstrap/utilities/_flex.scss | 51 + static/scss/bootstrap/utilities/_float.scss | 9 + .../scss/bootstrap/utilities/_position.scss | 37 + .../bootstrap/utilities/_screenreaders.scss | 11 + static/scss/bootstrap/utilities/_shadows.scss | 6 + static/scss/bootstrap/utilities/_sizing.scss | 12 + static/scss/bootstrap/utilities/_spacing.scss | 51 + static/scss/bootstrap/utilities/_text.scss | 58 + .../scss/bootstrap/utilities/_visibility.scss | 11 + static/scss/custom.scss | 3 + static/scss/darkly/_bootswatch.scss | 237 + static/scss/darkly/_variables-custom.scss | 0 static/scss/darkly/_variables.scss | 179 + 101 files changed, 14022 insertions(+), 45 deletions(-) create mode 100644 spotifyvis/static/scss/custom.css create mode 100644 spotifyvis/static/scss/custom.css.map delete mode 100644 static/css/dark_bg.css create mode 100644 static/scss/bootstrap/_alert.scss create mode 100644 static/scss/bootstrap/_badge.scss create mode 100644 static/scss/bootstrap/_breadcrumb.scss create mode 100644 static/scss/bootstrap/_button-group.scss create mode 100644 static/scss/bootstrap/_buttons.scss create mode 100644 static/scss/bootstrap/_card.scss create mode 100644 static/scss/bootstrap/_carousel.scss create mode 100644 static/scss/bootstrap/_close.scss create mode 100644 static/scss/bootstrap/_code.scss create mode 100644 static/scss/bootstrap/_custom-forms.scss create mode 100644 static/scss/bootstrap/_dropdown.scss create mode 100644 static/scss/bootstrap/_forms.scss create mode 100644 static/scss/bootstrap/_functions.scss create mode 100644 static/scss/bootstrap/_grid.scss create mode 100644 static/scss/bootstrap/_images.scss create mode 100644 static/scss/bootstrap/_input-group.scss create mode 100644 static/scss/bootstrap/_jumbotron.scss create mode 100644 static/scss/bootstrap/_list-group.scss create mode 100644 static/scss/bootstrap/_media.scss create mode 100644 static/scss/bootstrap/_mixins.scss create mode 100644 static/scss/bootstrap/_modal.scss create mode 100644 static/scss/bootstrap/_nav.scss create mode 100644 static/scss/bootstrap/_navbar.scss create mode 100644 static/scss/bootstrap/_pagination.scss create mode 100644 static/scss/bootstrap/_popover.scss create mode 100644 static/scss/bootstrap/_print.scss create mode 100644 static/scss/bootstrap/_progress.scss create mode 100644 static/scss/bootstrap/_reboot.scss create mode 100644 static/scss/bootstrap/_root.scss create mode 100644 static/scss/bootstrap/_tables.scss create mode 100644 static/scss/bootstrap/_tooltip.scss create mode 100644 static/scss/bootstrap/_transitions.scss create mode 100644 static/scss/bootstrap/_type.scss create mode 100644 static/scss/bootstrap/_utilities.scss create mode 100644 static/scss/bootstrap/_variables.scss create mode 100644 static/scss/bootstrap/bootstrap-grid.scss create mode 100644 static/scss/bootstrap/bootstrap-reboot.scss create mode 100644 static/scss/bootstrap/bootstrap.scss create mode 100644 static/scss/bootstrap/mixins/_alert.scss create mode 100644 static/scss/bootstrap/mixins/_background-variant.scss create mode 100644 static/scss/bootstrap/mixins/_badge.scss create mode 100644 static/scss/bootstrap/mixins/_border-radius.scss create mode 100644 static/scss/bootstrap/mixins/_box-shadow.scss create mode 100644 static/scss/bootstrap/mixins/_breakpoints.scss create mode 100644 static/scss/bootstrap/mixins/_buttons.scss create mode 100644 static/scss/bootstrap/mixins/_caret.scss create mode 100644 static/scss/bootstrap/mixins/_clearfix.scss create mode 100644 static/scss/bootstrap/mixins/_float.scss create mode 100644 static/scss/bootstrap/mixins/_forms.scss create mode 100644 static/scss/bootstrap/mixins/_gradients.scss create mode 100644 static/scss/bootstrap/mixins/_grid-framework.scss create mode 100644 static/scss/bootstrap/mixins/_grid.scss create mode 100644 static/scss/bootstrap/mixins/_hover.scss create mode 100644 static/scss/bootstrap/mixins/_image.scss create mode 100644 static/scss/bootstrap/mixins/_list-group.scss create mode 100644 static/scss/bootstrap/mixins/_lists.scss create mode 100644 static/scss/bootstrap/mixins/_nav-divider.scss create mode 100644 static/scss/bootstrap/mixins/_pagination.scss create mode 100644 static/scss/bootstrap/mixins/_reset-text.scss create mode 100644 static/scss/bootstrap/mixins/_resize.scss create mode 100644 static/scss/bootstrap/mixins/_screen-reader.scss create mode 100644 static/scss/bootstrap/mixins/_size.scss create mode 100644 static/scss/bootstrap/mixins/_table-row.scss create mode 100644 static/scss/bootstrap/mixins/_text-emphasis.scss create mode 100644 static/scss/bootstrap/mixins/_text-hide.scss create mode 100644 static/scss/bootstrap/mixins/_text-truncate.scss create mode 100644 static/scss/bootstrap/mixins/_transition.scss create mode 100644 static/scss/bootstrap/mixins/_visibility.scss create mode 100644 static/scss/bootstrap/utilities/_align.scss create mode 100644 static/scss/bootstrap/utilities/_background.scss create mode 100644 static/scss/bootstrap/utilities/_borders.scss create mode 100644 static/scss/bootstrap/utilities/_clearfix.scss create mode 100644 static/scss/bootstrap/utilities/_display.scss create mode 100644 static/scss/bootstrap/utilities/_embed.scss create mode 100644 static/scss/bootstrap/utilities/_flex.scss create mode 100644 static/scss/bootstrap/utilities/_float.scss create mode 100644 static/scss/bootstrap/utilities/_position.scss create mode 100644 static/scss/bootstrap/utilities/_screenreaders.scss create mode 100644 static/scss/bootstrap/utilities/_shadows.scss create mode 100644 static/scss/bootstrap/utilities/_sizing.scss create mode 100644 static/scss/bootstrap/utilities/_spacing.scss create mode 100644 static/scss/bootstrap/utilities/_text.scss create mode 100644 static/scss/bootstrap/utilities/_visibility.scss create mode 100644 static/scss/custom.scss create mode 100644 static/scss/darkly/_bootswatch.scss create mode 100644 static/scss/darkly/_variables-custom.scss create mode 100644 static/scss/darkly/_variables.scss diff --git a/api/views.py b/api/views.py index b51cce1..4a326ac 100644 --- a/api/views.py +++ b/api/views.py @@ -142,7 +142,8 @@ def get_artist_data(request, user_secret): filter=Q(track__users=user))) processed_artist_counts = [{'name': artist.name, 'num_songs': artist.num_songs} for artist in artist_counts] - pprint(processed_artist_counts) + if CONSOLE_LOGGING: + pprint(processed_artist_counts) return JsonResponse(data=processed_artist_counts, safe=False) # }}} get_artist_data # @@ -207,8 +208,9 @@ def get_genre_data(request, user_secret): },... ] ''' - print("*** Genre Breakdown ***") - pprint(list(genre_counts)) + if CONSOLE_LOGGING: + print("*** Genre Breakdown ***") + pprint(list(genre_counts)) return JsonResponse(data=list(genre_counts), safe=False) # }}} get_genre_data # diff --git a/graphs/static/graphs/scripts/audio_feat_graph.js b/graphs/static/graphs/scripts/audio_feat_graph.js index f3bda24..45b9270 100644 --- a/graphs/static/graphs/scripts/audio_feat_graph.js +++ b/graphs/static/graphs/scripts/audio_feat_graph.js @@ -33,9 +33,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) // featureData[key] = 0; // } // define the vertical scaling function - // let vScale = d3.scaleLinear().range([height, 0]); + let vScale = d3.scaleLinear().range([height, 0]); let padding = 0.5; - let vScale = d3.scaleLinear().range([100 - 2*padding, padding]); + // let vScale = d3.scaleLinear().range([100 - 2*padding, padding]); d3.json(`/api/audio_features/${audioFeature}/${userSecret}`) .then(function(response) { @@ -68,8 +68,8 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) let hScale = d3.scaleBand() .domain(dataRanges) - // .rangeRound([0, width]) - .rangeRound([padding, 100 - 2*padding]) + .rangeRound([0, width]) + // .rangeRound([padding, 100 - 2*padding]) .padding(0.5); let xAxis = d3.axisBottom().scale(hScale); @@ -81,7 +81,7 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) let featureGraph = featureSVG.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) - .attr("fill", "teal"); + .attr("fill", "#0099CC"); featureGraph.selectAll(".bar") .data(dataArr) @@ -106,6 +106,7 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) featureSVG.append("text") .attr('x', (width / 2)) .attr('y', (margin.top / 2)) + .attr('fill', "white") .attr('text-anchor', 'middle') .style('font-size', '14px') .text(`${capFeatureStr(audioFeature)}`); diff --git a/graphs/templates/graphs/artist_graph.html b/graphs/templates/graphs/artist_graph.html index 78a682c..e081639 100644 --- a/graphs/templates/graphs/artist_graph.html +++ b/graphs/templates/graphs/artist_graph.html @@ -1,9 +1,11 @@ {% load static %} +{% load sass_tags %} Artist Graphs + diff --git a/graphs/templates/graphs/features_graphs.html b/graphs/templates/graphs/features_graphs.html index 9eb30ee..477145d 100644 --- a/graphs/templates/graphs/features_graphs.html +++ b/graphs/templates/graphs/features_graphs.html @@ -1,4 +1,5 @@ {% load static %} +{% load sass_tags %} @@ -7,11 +8,10 @@ - User Spotify Data + Features Graphs - - +