From a133cf3f56ba185e325e5798a3755b73fd2be323 Mon Sep 17 00:00:00 2001
From: Daniel Cloud <dcloud@sunlightfoundation.com>
Date: Fri, 20 Jan 2012 14:25:13 -0500
Subject: [PATCH] Improved project_detail.html layout and styling. Now more
 grid-like and dashboardy! Added extra observations, which should have been
 there from the get-go. Could use some more template snippets to make it more
 DRY, but whatevs.

---
 site_static/css/style.css                     |  93 ++++++++++++++--
 site_static/js/script.js                      |   4 +-
 templates/dashboard/project_detail.html       | 104 +++++++++++-------
 .../snippets/_render_observation_value.html   |   6 +-
 4 files changed, 155 insertions(+), 52 deletions(-)

diff --git a/site_static/css/style.css b/site_static/css/style.css
index b3e09af..499d999 100644
--- a/site_static/css/style.css
+++ b/site_static/css/style.css
@@ -148,6 +148,10 @@ h2 {
     font-size: 150%;
 }
 
+h2 > a {
+    text-decoration: none;
+}
+
 h3 {
     margin-bottom: 8px;
 }
@@ -355,7 +359,9 @@ p.observation {
     font-size: 180%;
 }
 
+ol.observation { margin-bottom: 10px;}
 ol.observation > li {
+    list-style-type: decimal;
     padding-bottom: 3px;
     margin-bottom: 2px;
     border-bottom: 1px dashed #E9E9E9;
@@ -485,10 +491,81 @@ li {
     background-image: url('/static/img/blue_arrow_down.png');
 }
 
+/*
+.project section.unit-observations {
+    width: 470px;
+    float: left;
+    margin-right: 5px;
+}
+*/
+
+a.internal {
+    text-decoration: none;
+}
+
+.analytics-items a.internal {
+    position: absolute;
+    bottom: 10px;
+}
+
+.analytics-items p.observation {
+    font-size: 276.5%;
+}
+
+div.analytics-items  h2 {
+    margin-bottom: 20px;
+}
+
+div.analytics-items {
+    position: relative;
+}
+
+div.analytics-items > ul {
+    margin-left: 0px;
+}
+
+div.analytics-items li > div {
+    padding: 15px 40px;
+}
+
+div.analytics-items > ul > li {
+    position: relative;
+    width: 300px;
+    min-height: 182px;
+    margin: 0 7px 10px;
+    border: 1px solid #E1DFDA;
+    background-color: #F8F7F2;
+    vertical-align: top;
+    display: inline-block;
+    zoom: 1;
+    *display: inline;
+    _height: 140px;
+}
+
 #annotation_dialog {
     display: none;
 }
 
+#home-floater {
+    display: block;
+    padding: 8px 12px;
+    text-align: center;
+    background-color: #E1DFDA;
+    border: 1px solid #CAC8C2;
+    position: fixed;
+    left: 15px;
+    bottom: 10px;
+}
+
+#home-floater p {
+    margin: 0;
+}
+
+#home-floater a {
+    text-decoration: none;
+    font-weight: bold;
+}
+
 tr.primary > th {
     border-right: 1px dashed #DCDBD6;
 }
@@ -520,20 +597,24 @@ td.top-traffic-referrers {
     background-repeat: no-repeat;
 }
 
-.increased {
+.increased { color: #9CC71B;}
+.increased .observation {
     color: #9CC71B;
     background-image: url('/static/img/arrow_green.png');
     background-repeat: no-repeat;
-    background-position: 95% 45%;
+    background-position: 95% 50%;
     padding-right: 22px;
+    display: inline;
 }
 
-.decreased {
+.decreased { color: #F74D0F; }
+.decreased .observation {
     color: #F74D0F;
     background-image: url('/static/img/arrow_red.png');
     background-repeat: no-repeat;
-    background-position: 95% 45%;
+    background-position: 95% 50%;
     padding-right: 22px;
+    display: inline;
 }
 
 td.increased > * {
@@ -575,10 +656,6 @@ p.metric {
     width: auto;
 }
 
-.average-time-on-site-per-visit {
-    margin-left: 12px;
-}
-
 .balance {
     white-space: nowrap;
 }
diff --git a/site_static/js/script.js b/site_static/js/script.js
index dc2b091..371b985 100644
--- a/site_static/js/script.js
+++ b/site_static/js/script.js
@@ -25,8 +25,8 @@
         if (fromDate > toDate) dfFrom.datepicker("setDate", toDate);
     });
     
-    $('th').on('click', 'a[href^="#"]', function(event) {
-        event.preventDefault();
+    $('a[href^="#"].internal, #home-floater a').on('click', function(event) {
+        // event.preventDefault();
        $('html, body').animate({scrollTop: $( $(this).attr('href') ).offset().top}, 800);
     });
 }(jQuery));
diff --git a/templates/dashboard/project_detail.html b/templates/dashboard/project_detail.html
index c66cf07..8ba0018 100644
--- a/templates/dashboard/project_detail.html
+++ b/templates/dashboard/project_detail.html
@@ -1,18 +1,13 @@
 {% extends "dashboard/project_list.html" %}{% load dashboard_filters humanize %}
 
 {% block body_class %}project{% endblock body_class %}
-{% block content %}{% with object_list.0 as object %}
+{% block content %}{% with object=object_list.0 numcols=ordered_units|length|add:"1" %}
 <h1>{{ object.project.name }}</h1>
-<table id="analytics">
-    <thead>
-        <tr>
-            {% for datap in object.observations %}
-            <th><span>{% if "observations" in datap %}<a href="#{{ datap.metric.unit.slug }}">{{ datap.metric.unit.name }}</a>{% else %}{{ datap.metric.unit.name }}{% endif %}</span></th>{% endfor %}
-        </tr>
-    </thead>
-    <tbody>
-        <tr class='primary'>{% for datap in object.observations %}
-            <td class='{{ datap.metric.unit.slug }} {{ datap.observation_model }}{% if datap.past %} {% spaceless %}
+<div class='analytics-items clearfix'>
+    <ul>{% for datap in object.observations %}
+        <li><div>
+            <h2>{{ datap.metric.unit.name }}</h2>
+            <div class='{{ datap.metric.unit.slug }} {{ datap.observation_model }}{% if datap.past %} {% spaceless %}
             {% if datap.past.data > datap.data %}
             decreased
             {% else %}{% if datap.past.data < datap.data %}
@@ -28,12 +23,35 @@ <h1>{{ object.project.name }}</h1>
             Unchanged
             {% endif %}{% endif %}
             {% endspaceless %} from {% include 'dashboard/snippets/_render_observation_value.html' with datap=datap.past %} in the previous date range"{% endif %}>
-                {% if datap %}{% spaceless %}{% include "dashboard/snippets/_render_observation.html" %}{% endspaceless %}{% else %}&nbsp;{% endif %}
-            </td>{% endfor %}
-            <td>&nbsp;</td>
-        </tr>
-    </tbody>
-</table>
+                {% include 'dashboard/snippets/_render_observation.html' %}                
+            </div>
+            {% if "observations" in datap %}<a class='internal' href="#{{ datap.metric.unit.slug }}">View details&hellip;</a>{% endif %}
+        </div></li>{% endfor %}
+        {% for datap in object.extra_observations %}{% if datap %}
+            <li><div>
+                <h2>{{ datap.metric.unit.name }}</h2>
+                <div class='{{ datap.metric.unit.slug }} {{ datap.observation_model }}{% if datap.past %} {% spaceless %}
+                {% if datap.past.data > datap.data %}
+                decreased
+                {% else %}{% if datap.past.data < datap.data %}
+                increased
+                {% else %}
+                unchanged
+                {% endif %}{% endif %}
+                {% endspaceless %}{% endif %}' {% if datap.past %}data-past-value="{{ datap.past.data }}" title="{% spaceless %}{% if datap.past.data > datap.data %}
+                Decreased
+                {% else %}{% if datap.past.data < datap.data %}
+                Increased
+                {% else %}
+                Unchanged
+                {% endif %}{% endif %}
+                {% endspaceless %} from {% include 'dashboard/snippets/_render_observation_value.html' with datap=datap.past %} in the previous date range"{% endif %}>
+                    {% include 'dashboard/snippets/_render_observation.html' %}                
+                </div>
+                {% if "observations" in datap %}<a class='internal' href="#{{ datap.metric.unit.slug }}">View details&hellip;</a>{% endif %}
+            </div></li>{% endif %}{% endfor %}
+    </ul>
+</div>
 {% if object.annotations %}
 <section id="annotations">
     <h2>Annotations</h2>
@@ -47,41 +65,44 @@ <h2>Annotations</h2>
     <h2>{{ datap.metric.unit.name|title }}</h2>
     {% ifnotequal datap.observation_model "objectobservation"  %}
     <div class="aggregate-value">
-        {% ifequal datap.observation_model "ratioobservation" %}
-        <p class="observation" data-value="{{ datap.data }}">{% spaceless %}{% ifequal datap.data.antecedent.metric.unit.observation_unit "seconds" %}
-            {{ datap.data|secondstoduration }}
-            {% else %}
-                {% ifequal datap.metric.unit.observation_unit "percentage"  %}
-                {{ datap.data|percentage:2}}
-                {% else %}
-                {{ datap.data|floatformat:1}}
-                {% endifequal %}
-            {% endifequal %}
-            {% endspaceless %}</p>
-        {% endifequal %}
-        {% ifequal datap.observation_model "countobservation" %}
-        <p class="observation" data-value="{{ datap.data }}">{% spaceless %}{% ifequal datap.metric.unit.observation_unit "seconds" %}
-            {{ datap.data|secondstoduration }}
-            {% else %}
-            {{ datap.data|intcomma }}
-            {% endifequal %}
-        {% endspaceless %}</p>
-        {% endifequal %}
+        <p class="observation" data-value="{{ datap.data }}">{% include "dashboard/snippets/_render_observation_value.html" with datap=datap %}</p>
     </div>
     <div class="chart"></div>
-    <h3 class="table-toggle"><a href="#data-{{ datap.metric.unit.slug }}">View Data Table</a></h3>
+    <h3 class="table-toggle"><a href="#data-{{ datap.metric.unit.slug }}">Data Table</a></h3>
     {% endifnotequal %}
     <div id="data-{{ datap.metric.unit.slug }}" class="table-wrapper">
         <table class="data-table">{% for sub_datap in datap.observations reversed %}
             <tr class="datapoint">
                 <td><time data-milliseconds="{{ sub_datap.to_datetime|datetime_to_ms }}" datetime="{{ sub_datap.to_datetime|date:'c' }}">{{ sub_datap.to_datetime|date:'M d, Y' }}</time></td>
                 <td>
-                    {% spaceless %}{% include "dashboard/snippets/_render_observation.html" with datap=sub_datap list_slice=":20" %}{% endspaceless %}
+                    {% spaceless %}{% include "dashboard/snippets/_render_observation.html" with datap=sub_datap list_slice=":10" %}{% endspaceless %}
                 </td>
             </tr>{% endfor %}
         </table>        
     </div>
 </section>{% endif %}{% endfor %}
+{% for datap in object.extra_observations %}{% if "observations" in datap %}
+<section id="{{ datap.metric.unit.slug }}" class="unit-observations">
+    <h2>{{ datap.metric.unit.name|title }}</h2>
+    {% ifnotequal datap.observation_model "objectobservation"  %}
+    <div class="aggregate-value">
+        <p class="observation" data-value="{{ datap.data }}">{% include "dashboard/snippets/_render_observation_value.html" with datap=datap %}</p>
+    </div>
+    <div class="chart"></div>
+    <h3 class="table-toggle"><a href="#data-{{ datap.metric.unit.slug }}">Data Table</a></h3>
+    {% endifnotequal %}
+    <div id="data-{{ datap.metric.unit.slug }}" class="table-wrapper">
+        <table class="data-table">{% for sub_datap in datap.observations reversed %}
+            <tr class="datapoint">
+                <td><time data-milliseconds="{{ sub_datap.to_datetime|datetime_to_ms }}" datetime="{{ sub_datap.to_datetime|date:'c' }}">{{ sub_datap.to_datetime|date:'M d, Y' }}</time></td>
+                <td>
+                    {% spaceless %}{% include "dashboard/snippets/_render_observation.html" with datap=sub_datap list_slice=":10" %}{% endspaceless %}
+                </td>
+            </tr>{% endfor %}
+        </table>        
+    </div>
+</section>{% endif %}{% endfor %}
+
 <div id="annotation_dialog">
     <h3>Add an Annotation</h3>
     <form action="{% url add-annotation %}" method="post" accept-charset="utf-8">{% csrf_token %}
@@ -89,6 +110,11 @@ <h3>Add an Annotation</h3>
         <p><input type="submit" value="submit"></p>
     </form>
 </div>
+<div id="home-floater" class="">
+    <p>
+        <a href="#">Top &uarr;</a>
+    </p>
+</div>
 {% endwith %}{% endblock content %}
 
 {% block js %}
diff --git a/templates/dashboard/snippets/_render_observation_value.html b/templates/dashboard/snippets/_render_observation_value.html
index d421936..7706f1c 100644
--- a/templates/dashboard/snippets/_render_observation_value.html
+++ b/templates/dashboard/snippets/_render_observation_value.html
@@ -1,5 +1,5 @@
-{% load dashboard_filters humanize %}
-{% with slice_val=list_slice|default:":5" %}{% spaceless %}
+{% load dashboard_filters humanize %}{% spaceless %}
+{% with slice_val=list_slice|default:":5" %}
 {% ifequal datap.observation_model "objectobservation" %}{{ datap.data }}{% endifequal %}
 {% ifequal datap.observation_model "ratioobservation" %}
     {% ifequal datap.antecedent.metric.unit.observation_unit "seconds" %}
@@ -19,4 +19,4 @@
     {{ datap.data|intcomma }}
     {% endifequal %}
 {% endifequal %}
-{% endspaceless %}{% endwith %}
+{% endwith %}{% endspaceless %}
\ No newline at end of file