Formatting Changes

src/static/css/custom.css

@@ -19,6 +19,11 @@ body{
     background-repeat: repeat;
 }
 
+#middle-image{
+    background-image: url("/static/middle.png");
+    background-repeat: repeat;
+}
+
 #bottom-image{
     background-image: url("/static/bottom.png");
     background-repeat: repeat;
@@ -73,6 +78,7 @@ body{
     font-size:16px;
 }
 .kpi-value {
+    text-align:center;
     /* color: #B80000; */
     font-weight:8;
     font-size:18px;
@@ -82,13 +88,14 @@ body{
 }
 
 .kpi-row{
+    text-align:center;
         float: none;
     margin: 0 auto;
 }
 
 #score{
     color: var(--score-color);
-    color: var(--light-blue);
+    /*color: var(--light-blue);*/
 }
 
 #gross{
@@ -129,7 +136,8 @@ body{
 }
 
 .centered{
-    float: none;
+    text-align:center;
+    float: center;
     margin: 0 auto;
 }
 
@@ -140,6 +148,9 @@ body{
 }
 
 .note{
+    text-align:center;
+    float: center;
+    margin: auto;
     color:var(--dark-blue);
     
 }

src/static/js/enthusiast.js

@@ -135,6 +135,10 @@ var sentiment_data = {
 
 }
 
+
+function update_word_cloud_settings(){
+
+console.log('update')
 if (window.innerWidth > 1000){
     wc_width = 500
     wc_height = 350    
@@ -161,6 +165,9 @@ word_coud_settings =     {
         }
     }
   
+  return word_coud_settings;
+}
+
 
 
 var _top = $('#top')
@@ -183,7 +190,7 @@ jQuery(document).ready(function(){
   jQuery(".chosen").chosen();
   score_timeseries = c3.generate(data);
   sentiment_chart = c3.generate(sentiment_data)
-  $('#word_cloud').jQCloud([{'text':'pyDataVizDay', 'weight':1}], word_coud_settings)
+  $('#word_cloud').jQCloud([{'text':'pyDataVizDay', 'weight':1}], update_word_cloud_settings())
   update_all()
 
 
@@ -311,7 +318,7 @@ function update_words_year(year)
   words.done(function(data)
   {
     // $('#word_cloud').html('')
-    $('#word_cloud').jQCloud('update', words.responseJSON);
+    $('#word_cloud').jQCloud('update', words.responseJSON, update_word_cloud_settings());
     
   })
 }
@@ -334,28 +341,49 @@ function update_sentiment_year(year)
 }
 
 $(document).ready(function() {
-var movementStrength = 30;
+var top_movementStrength = 50;
-var top_height = movementStrength / $(window).height();
+var top_width = top_movementStrength / $(window).width();
-var top_width = movementStrength / $(window).width();
+var top_height = top_movementStrength / $(window).height();
 $("#top-image").mousemove(function(e){
           var pageX = e.pageX - ($(window).width() / 2);
           var pageY = e.pageY - ($(window).height() / 2);
-          var newvalueX = top_width * pageX * -1 - 25;
+          var topX = top_width * pageX * -1 - 25;
-          var newvalueY = top_height * pageY * -1 - 50;
+          var topY = top_height * pageY * -1 - 50;
-          $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
+          $('#top-image').css("background-position", topX+"px     "+topY+"px");
 });
 
-var movementStrength = 10;
+var middle_movementStrength = 15;
-var height = movementStrength / $(window).height();
+var middle_width = middle_movementStrength / $(window).width();
+var middle_height = middle_movementStrength / $(window).height();
+$("#middle-image").mousemove(function(e){
+          var pageX = e.pageX - ($(window).width() / 2);
+          var pageY = e.pageY - ($(window).height() / 2);
+          var middle_X = middle_width * pageX * -1 - 25;
+          var middle_Y = middle_height * pageY * -1 - 50;
+          $('#middle-image').css("background-position", middle_X+"px     "+middle_Y+"px");
+});
+
+var movementStrength = 5;
 var width = movementStrength / $(window).width();
+var height = movementStrength / $(window).height();
 $("#bottom-image").mousemove(function(e){
           var pageX = e.pageX - ($(window).width() / 2);
           var pageY = e.pageY - ($(window).height() / 2);
-          var newvalueX = width * pageX * -1 - 25;
+          var bottom_X = width * pageX * -1 - 25;
-          var newvalueY = height * pageY * -1 - 50;
+          var bottom_Y = height * pageY * -1 - 50;
-          $('#bottom-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
+          $('#bottom-image').css("background-position", bottom_X+"px     "+bottom_Y+"px");
 });
 
 
 
 });
+
+
+$(window).resize(function(){
+  var settings = update_word_cloud_settings()
+  console.log(settings)
+  $('#word_cloud').empty();
+  $('#word_cloud').jQCloud('destroy')
+  $('#word_cloud').jQCloud([{'text':'pyDataVizDay', 'weight':1}], settings)
+  update_words()
+})

src/templates/data_form.html

@@ -26,7 +26,7 @@
     </div>
     {% endfor %}
         <div class="col-sm-1"> 
-        <button id='download' class="glyphicon glyphicon-download-alt"></button>
+        <button id='download' class="glyphicon glyphicon-download-alt" style='color:var(--score-color)'></button>
 
     </div>
     </div>

src/templates/enthusiast.html

@@ -19,6 +19,7 @@
 
 {% block body %}
     <div id="bottom-image">
+    <div id="middle-image">
     <div id="top-image">
     {{ super ()}}
     {{ body | safe }}
@@ -34,7 +35,7 @@
     {{ form | safe }}
     </div>
     <hr>
-        <div class='row kpi-row' style='margin-top:50px auto; float:center; background-color:#0C243B;'>
+        <div class='row kpi-row' style='margin-top:50px auto; float:center; background-color:rgba(12, 36, 59, 0.3)'>
             <div class='col-sm-4'></div>
             <div class='col-sm-1 kpi'>
                 Year: <div class='kpi-value' id='year'>
@@ -68,15 +69,15 @@
                 <h2>Sentiment</h2>
                 The following chart shows polarity/subjectivity of the plot keywords scaled to match the dataset.  Polarity defines how positive or negative the plot is, while subjectivity shows how objective or subjective the plot is.  Action movies tend to contain more negativity with words like Murder, Terrorist, and assassin, while romance movies tend to show more positivity with words like Love, Wedding, and Friend.
                 </div>
-                <div id='sentiment-chart' class='sentiment-chart'></div>
+                <div id='sentiment-chart' class='sentiment-chart centered'></div>
             </div>
 
             <div class='col-sm-6'>
                 <div id='word-cloud-title'>
-                <h2>Common Keywords</h2>
+                <h2>Plot Keywords</h2>
                 This word cloud shows the most common plot keywords by their frequency.  The size of the font dictates how each word ranks to other words.  Word clouds typically do not convey data very well since longer words tend to carry more weight, and their position is random.  It is fitting to use here for a fun way to see the keywords.
                 </div>
-                <div id='word_cloud'></div>
+                <div id='word_cloud' class='centered'></div>
             </div>
         </div> 
 
@@ -113,5 +114,6 @@
     </div>
     </div>
     </div>
+    </div>
     <script src='static/js/enthusiast.js?v=2'></script>
 {% endblock %}