Skip to content
This repository has been archived by the owner on Jul 25, 2018. It is now read-only.

Commit

Permalink
Improved project_detail.html layout and styling. Now more grid-like a…
Browse files Browse the repository at this point in the history 
…nd 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.
  • Loading branch information
@dcloud
dcloud committed Jan 20, 2012
1 parent 13578c0 commit a133cf3
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 52 deletions.
93 changes: 85 additions & 8 deletions site_static/css/style.css
View file
Expand Up @@ -148,6 +148,10 @@ h2 {
font-size: 150%;
}

h2 > a {
text-decoration: none;
}

h3 {
margin-bottom: 8px;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 > * {
Expand Down Expand Up @@ -575,10 +656,6 @@ p.metric {
width: auto;
}

.average-time-on-site-per-visit {
margin-left: 12px;
}

.balance {
white-space: nowrap;
}
Expand Down
4 changes: 2 additions & 2 deletions site_static/js/script.js
View file
Expand Up @@ -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));
104 changes: 65 additions & 39 deletions templates/dashboard/project_detail.html
View file
@@ -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 %}
Expand All @@ -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>
Expand All @@ -47,48 +65,56 @@ <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 %}
{{ annotation_form.as_p }}
<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 %}
Expand Down
6 changes: 3 additions & 3 deletions templates/dashboard/snippets/_render_observation_value.html
View file
@@ -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" %}
Expand All @@ -19,4 +19,4 @@
{{ datap.data|intcomma }}
{% endifequal %}
{% endifequal %}
{% endspaceless %}{% endwith %}
{% endwith %}{% endspaceless %}

0 comments on commit a133cf3

Please sign in to comment.