Merge pull request #5 from m3brown/bootstrap

Bootstrap!

README.md

@@ -14,7 +14,7 @@ A simple website built using a full suite of open source technologies
 ##Notable tools:
 * [Puppet](http://puppetlabs.com/) - provision applications and configurations
 * [Django](http://www.djangoproject.com/) - Python application framwork
-* [Jenkins](http://jenkins-ci.org/) - Continuous Integration Server
+* [Jenkins](http://jenkins-ci.org/) - Continuous integration server
 
 ##Other contributing tools:
 * [Vagrant](http://www.vagrantup.com/) - create virtualbox servers

healthy_salad_chooser/static/css/dashboard.css

@@ -0,0 +1,96 @@
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+}
+
+
+/*
+ * Global add-ons
+ */
+
+.sub-header {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+  display: none;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 51px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #f5f5f5;
+    border-right: 1px solid #eee;
+  }
+}
+
+/* Sidebar navigation */
+.nav-sidebar {
+  margin-right: -21px; /* 20px padding + 1px border */
+  margin-bottom: 20px;
+  margin-left: -20px;
+}
+.nav-sidebar > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+.nav-sidebar > .active > a {
+  color: #fff;
+  background-color: #428bca;
+}
+
+
+/*
+ * Main content
+ */
+
+.main {
+  padding: 20px;
+}
+@media (min-width: 768px) {
+  .main {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+
+/*
+ * Placeholder dashboard ideas
+ */
+
+.placeholders {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.placeholders h4 {
+  margin-bottom: 0;
+}
+.placeholder {
+  margin-bottom: 20px;
+}
+.placeholder img {
+  display: inline-block;
+  border-radius: 50%;
+}

healthy_salad_chooser/static/css/style.css

@@ -1,91 +0,0 @@
-body {
-  background-color: #70777F;
-  margin: 0 30px 30px 30px;
-}
-
-#container {
-  background-color: #fff;
-  border: solid 1px #30537F;
-  border-top: 0;
-}
-
-#content {
-  margin: 50px 50px;
-}
-
-.topping {
-  width: 132px;
-  background-color: white;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px; /* future proofing */
-  margin: 4px;
-  text-align: center;
-}
-
-.toppingsList {
-  display: inline-block;
-  height: 200px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px; /* future proofing */
-  width: 140px;
-  padding: 4px 4px;
-  vertical-align: top;
-}
-
-#toppingsChoices {
-  background-color: #505050;
-}
-
-#toppingsSelected {
-  background-color: #a0a0a0;
-}
-
-.toppingSelector {
-  display: inline-block;
-}
-
-.ingredientInfo {
-  display: inline-block;
-  border: solid 1px #000;
-  margin-left: 100px;
-  height: 186px;
-  width: 250px;
-  padding: 10px;
-  vertical-align: top;
-}
-
-#charts {
-  display: inline-block;
-  border: solid 1px #000;
-  margin-left: 100px;
-  height: 200px;
-  width: 350px;
-  padding: 10px;
-  vertical-align: top;
-}
-
-footer {
-  margin: auto;
-  text-align: right;
-  padding: 15px 10px;
-  background-color: #EAF3FF;
-  border-top: solid 1px #30537F;
-}
-footer a {
-  text-decoration: none;
-}
-footer p {
-  font-size: 12px;
-  line-height: 20px;
-  color: #000;
-  display: inline;
-  margin-right: 5px;
-}
-footer ul, footer li {
-  list-style: none;
-  display: inline;
-  margin: 0 0 0 2px;
-  padding: 0;
-}

healthy_salad_chooser/static/js/charts.js

@@ -23,21 +23,23 @@ function initializeCharts(){
   ]);
 
   options_cost = {
-    width: 100,
+    width: 200,
+    height: 400,
     legend: {position: "none"},
-    bar: {groupWidth: "25%"},
     vAxis: {minValue: 0.00, maxValue: 10.00, format: "$##.00"},
-    chartArea: {left: "50"},
-    animation: {duration: 500, easing: 'out'}
+    animation: {duration: 500, easing: 'out'},
+    fontSize: 18,
+    chartArea: {left:60}
   };
 
   options_calories = {
-    width: 100,
+    width: 200,
+    height: 400,
     legend: {position: "none"},
-    bar: {groupWidth: "25%"},
     vAxis: {minValue: 0.00, maxValue: 1000},
-    chartArea: {left: "50"},
     animation: {duration: 500, easing: 'out'},
+    fontSize: 18,
+    chartArea: {left:60}
   };
 
 

healthy_salad_chooser/static/js/toppings.js

@@ -6,7 +6,7 @@ function refreshCounter() {
 
 function addToSelected() {
     $(this).off('click').on('click', removeFromSelected);
-    $('#toppingsSelected').append($(this));
+    $('#toppingsSelected .panel-body').append($(this));
     var calories = ingredient_list[$(this).attr("id")]["calories"];
     var weight = ingredient_list[$(this).attr("id")]["weight"];
     calorie_data.setValue(0, 1, parseInt(calorie_data.getValue(0, 1)) + parseInt(calories));
@@ -23,7 +23,7 @@ function calculatePrice(weight_in_oz){
 
 function removeFromSelected() {
     $(this).off('click').on('click', addToSelected);
-    $('#toppingsChoices').append($(this));
+    $('#toppingsChoices .panel-body').append($(this));
     var oldValue = calorie_data.getValue(0, 1);
     var calories = ingredient_list[$(this).attr("id")]["calories"];
     var weight = ingredient_list[$(this).attr("id")]["weight"];
@@ -35,11 +35,11 @@ function removeFromSelected() {
 }
 
 function hoverInfo() {
-    $(".ingredientInfo").load('/'+$(this).attr("id")+'/');
+    $("#ingredientInfo").load('/'+$(this).attr("id")+'/');
 }
 
 function noHoverInfo() {
-    $(".ingredientInfo").html('');
+    $("#ingredientInfo").html('');
 }
 
 $(document).ready(function() {

healthy_salad_chooser/templates/healthy_salad_chooser/about.html

@@ -31,6 +31,8 @@ <h2>Notable tools:</h2>
 <a href="http://puppetlabs.com/">Puppet</a> - provision applications and configurations</li>
 <li>
 <a href="http://www.djangoproject.com/">Django</a> - Python application framwork</li>
+<li>
+<a href="http://jenkins-ci.org/">Jenkins</a> - Continuous integration server</li>
 </ul>
 
 <h2>Other contributing tools:</h2>