More styling and some other new things

flinn · Nov 10, 2013 · 464fc5c · 464fc5c
1 parent a68302f
commit 464fc5c
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 69 deletions.
diff --git a/public/css/base.css b/public/css/base.css
@@ -2,6 +2,7 @@
 	margin-left: -20px;
 	font-family: 'Roboto', sans-serif;
 	font-size: 40px !important;
+	color: #f1c40f !important;
 }
 
 .nav-logo {
@@ -12,9 +13,16 @@
 	width: 50px;
 }
 
+.breadcrumb-nav {
+	color: white; 
+	display: inline-block; 
+	float: right;
+	margin-left: -20px;
+	font-size: 32px;
+}
+
 .navbar {
 	border-radius: 0px !important;
-	padding-bottom: 7px;
 }
 
 .navbar.navbar-inverse .navbar-form .form-control:focus {

diff --git a/public/js/chart.js b/public/js/chart.js
@@ -3,6 +3,11 @@ var chartCursor;
 
 AmCharts.ready(function () {
 
+    //Color Key:
+    var color_blue = '#3498DB';
+    var color_red = '#E74C3C';
+    var color_green = '#2ECC71';
+
     chart = new AmCharts.AmSerialChart();
     chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
     chart.dataProvider = chartData;
@@ -43,7 +48,7 @@ AmCharts.ready(function () {
     graph1.bulletBorderThickness = 2;
     graph1.bulletBorderAlpha = 1;
     graph1.lineThickness = 2;
-    graph1.lineColor = "#2ECC71";
+    graph1.lineColor = color_green;
     graph1.negativeLineColor = "#efcc26";
     graph1.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
     chart.addGraph(graph1);
@@ -57,7 +62,7 @@ AmCharts.ready(function () {
     graph2.bulletBorderThickness = 2;
     graph2.bulletBorderAlpha = 1;
     graph2.lineThickness = 2;
-    graph2.lineColor = "#E74C3C";
+    graph2.lineColor = color_red;
     graph2.negativeLineColor = "#efcc26";
     graph2.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
     chart.addGraph(graph2);
@@ -71,7 +76,7 @@ AmCharts.ready(function () {
     graph3.bulletBorderThickness = 2;
     graph3.bulletBorderAlpha = 1;
     graph3.lineThickness = 2;
-    graph3.lineColor = "#2C3E50";
+    graph3.lineColor = color_blue;
     graph3.negativeLineColor = "#efcc26";
     graph3.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
     chart.addGraph(graph3);

diff --git a/routes/index.js b/routes/index.js
@@ -23,9 +23,3 @@ exports.index = function(req, res){
   	data: model
   });
 };
-
-exports.stocks = function(req, res){
-	var stocksList = {};
-  res.json(stocksList);
-
-};
diff --git a/views/index.html b/views/index.html
@@ -1,11 +1,15 @@
 {% extends 'layout.html' %}
 
+{% block area %}
+Dashboard
+{% endblock %}
+
 {% block head %}
 {% endblock %}
 
 
 {% block content %}
-<h3 style="margin-top: -10px;">Leader Board</h3>
+<h3 style="margin-top: -10px;">Leaders</h3>
 
 <div class="demo-content-wide">
   <div class="table-responsive">
@@ -14,6 +18,8 @@ <h3 style="margin-top: -10px;">Leader Board</h3>
         <tr>
           <th class="headrow strong">Rank</th>
           <th class="headrow strong">Symbol</th>
+          <th class="headrow strong">Senti-Metric&reg;</th>
+          <th class="headrow strong">Price</th>
           <th class="headrow strong">Bullish</th>
           <th class="headrow strong">Bearish</th>
           <th class="headrow strong">CAPS Rating</th>
@@ -26,6 +32,8 @@ <h3 style="margin-top: -10px;">Leader Board</h3>
           <tr>
             <td><strong>{{ stock.rank }}</strong></td>
             <td>{{ stock.symbol }}</td>
+            <td>{{ stock.sentimetric }}</td>
+            <td>{{ stock.price }}</td>
             <td>{{ stock.bullish }}</td>
             <td>{{ stock.bearish }}</td>
             <td>

diff --git a/views/layout.html b/views/layout.html
@@ -13,26 +13,28 @@
     <title>Sentimizer</title>
 
 
-    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
-    <link href="css/flat-ui.css" rel="stylesheet">
-    <link href="css/base.css" rel="stylesheet">
+    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href="../css/flat-ui.css" rel="stylesheet">
+    <link href="../css/base.css" rel="stylesheet">
     <script src="../js/jquery-1.8.3.min.js"></script>
     {% block head %}
     {% endblock %}
-</head>
-
-<body>
     <script type="text/javascript">
     console.log("Header loaded ... Whoop whoop!");
     function snapshot() {
         var symbol = document.getElementById('search_symbol').value;
         window.location.href = "/snapshot/" + symbol;
     };
     </script>
+</head>
+
+<body>
     <div class="navbar navbar-inverse">
         <div class="navbar-header">
             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-02"></button>
-            <img src="images/icons/map.svg" class="nav-logo"><a href="#" class="navbar-brand nav-title">Sent¡m!ze</a>
+            <img src="../images/icons/map.svg" class="nav-logo">
+            <a href="/" class="navbar-brand nav-title">Sent¡m!ze</a>
+            <span class="breadcrumb-nav"><span class="fui-arrow-right"></span>{% block area %}{% endblock %}</span>
         </div>
         <div class="navbar-collapse collapse navbar-collapse-02">
           <form class="navbar-form navbar-right" action="javascript:snapshot()">

diff --git a/views/snapshot.html b/views/snapshot.html
@@ -1,14 +1,11 @@
 {% extends 'layout.html' %}
 
-{% block head %}
-    {% parent %}
-    <title>Snap shot</title>
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+{% block area %}
+Snapshot <span class="fui-arrow-right"></span> <strong>{{ data.symbol }}</strong>
 {% endblock %}
 
-
-{% block content %}
-
+{% block head %}
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script>
 
         var json_data1 = {{JSON.stringify(data.sentiments.bullish)}};
@@ -32,50 +29,16 @@
       var symbol = "{{data.symbol}}";
       var chartData = json_data_compiled;
     </script>
+{% endblock %}
 
-    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-      <div class="container">
-      </div>
-    </div>
 
+{% block content %}
     <div class="container">
-
-        <div id="chartdiv" style="width: 100%; height: 335px; border: 1px solid black;"></div>
+        <div id="chartdiv" style="width: 100%; height: 335px;"></div>
         <div style="float:right;margin-right:20px;">
         </div>
 
-    </div><!-- /.container -->
-
-    <!--<table>
-        <tr>
-            <th>
-                <h1>{{ pagename|title }}</h1>
-            </th>
-            <td>
-                <ul>
-                {% for content in data.foolcontents %}
-                  <li{% if loop.first %} class="first"{% endif %}>
-                      <a href="{{ content.Url }}">{{content.Title}}<a>
-                  </li>
-                {% endfor %}
-                </ul>
-            </td>
-        </tr>
-        <tr>
-            <th>
-                <h1>{{ pagename|title }}</h1>
-            </th>
-            <td>
-                <ul>
-                {% for content in data.foolcontents %}
-                  <li{% if loop.first %} class="first"{% endif %}>
-                      <a href="{{ content.Url }}">{{content.Title}}<a>
-                  </li>
-                {% endfor %}
-                </ul>
-            </td>
-        </tr>
-    </table>-->
+    </div>
 
     <table class="table table-striped table-hover">
       <thead>
@@ -107,12 +70,6 @@ <h1>{{ pagename|title }}</h1>
           </tr>
       </tbody>
     </table>
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-
-    <script src="../js/bootstrap.min.js"></script>
-
     <script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
     <script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
     <script src="../js/chart.js"></script>