Mobile dashboard styling. bug 574032.

apps/dashboard/templates/dashboard/mobile/dashboard.html

@@ -0,0 +1,40 @@
+{% extends "search_base_mobile.html" %}
+
+{% block body_id %}dashboard{% endblock %}
+
+{% block content %}
+<div id="search_box" class="clearfix">
+  {% include "search/search_form.html" %}
+</div>
+
+<noscript>
+  <div class="container">
+    <h2>{{ _('Please enable JavaScript to view this page.') }}</h2>
+  </div>
+</noscript>
+
+<div id="messages" class="container">
+  <a href="{{ search_url() }}" class="more">
+    {# L10n: Link on the dashboard to show more messages. #}
+    {{ _('Show more') }}
+  </a>
+  <h2>{{ _('Last {count} Messages')|f(count=messages_count) }}</h2>
+  <div class="ajaxy"></div>
+</div>
+
+<div id="overview" class="container">
+  <div id="sentiment" class="clearfix">
+    <div id="period">{{ period.period|safe }}</div>
+    <h2><a href="#">{{ _('Overview') }}</a></h2>
+    <div class="ajaxy accordion clearfix"></div>
+  </div>
+  <div id="trends">
+    <h2><a href="#">{{ _('Trends') }}</a></h2>
+    <div class="ajaxy accordion terms hidden"></div>
+  </div>
+  <div id="demo">
+    <h2><a href="#">{{ _('Demographics') }}</a></h2>
+    <div class="ajaxy accordion hidden"></div>
+  </div>
+</div>
+{% endblock %}

apps/dashboard/templates/dashboard/sentiments.html

@@ -1,6 +1,5 @@
 {% macro bar(name, desc, cnt, total, link=None): %}
-  {% with perc = cnt / total * 100 if total > 0 else 0,
-          width = perc * 0.55 %}
+  {% with perc = cnt / total * 100 if total > 0 else 0 %}
     <div class="response {{ name }}">
       <div class="lbl">
         {% if link %}
@@ -9,10 +8,12 @@
           {{ name }}
         {% endif %}
       </div>
-      <div class="bar" style="width: {{ width }}%">
-        {% if width > 5 %}{{ cnt|numberfmt }}{% endif %}&nbsp;
+      <div class="barwrapper">
+        <div class="bar" style="width: {{ perc }}%">
+          {% if perc > 5 %}{{ cnt|numberfmt }}{% endif %}&nbsp;
+        </div>
+      {% if perc <= 5 %}<div class="out-cnt">{{ cnt|numberfmt }}</div>{% endif %}
       </div>
-      {% if width <= 5 %}<div class="out-cnt">{{ cnt|numberfmt }}</div>{% endif %}
 
       <div class="perc">{{ perc|int }}%</div>
     </div>

apps/dashboard/views.py

@@ -26,7 +26,9 @@ def dashboard(request):
 
     data = {'search_form': search_form, 'period': period,
             'messages_count': settings.MESSAGES_COUNT}
-    return jingo.render(request, 'dashboard/dashboard.html', data)
+    template = 'dashboard/%sdashboard.html' % (
+        'mobile/' if request.mobile_site else '')
+    return jingo.render(request, template, data)
 
 
 def period_to_date(f):

media/css/mobile.css

@@ -12,9 +12,34 @@ body.mobile {
 }
 .mobile #main-content {
     margin: 2em 0 0;
+    padding: 0;
     width: auto;
 }
 
+/* Header */
+.mobile header {
+    padding-top: 8px;
+}
+.mobile header h1 {
+    color: #0089b7;
+    display: inline;
+    font-size: 160%;
+    background-color: #1e4262;
+    border-radius: 0 0 16px 16px;
+    -moz-border-radius: 0 0 16px 16px;
+    -webkit-border-bottom-left-radius: 16px;
+    -webkit-border-bottom-right-radius: 16px;
+    margin: 0;
+    padding: 8px 16px;
+}
+.mobile header img.fxlogo {
+    margin-right: .2em;
+}
+.mobile header a:hover,
+.mobile header a:active {
+    text-decoration: none;
+}
+
 /** Footer */
 .mobile #footer-contents {
     width: 480px;
@@ -77,3 +102,43 @@ body.mobile {
 .mobile#thanks #next-steps nav div a {
     font-size: 100%;
 }
+
+/** Dashboard */
+.mobile#dashboard #overview, .mobile#dashboard #messages {
+    float: none;
+    width: 460px;
+}
+.mobile#dashboard h2 {
+    font-size: 150%;
+}
+.mobile#dashboard #overview h2 {
+    border-bottom: 1px solid #ccc;
+}
+.mobile#dashboard #overview .accordion {
+    margin-bottom: 1em;
+}
+.mobile#dashboard #overview .accordion.hidden {
+    position: absolute;
+    left: -10000px;
+}
+.mobile #sentiment .response .barwrapper {
+    width: 45%;
+}
+
+/** Search */
+.mobile#dashboard #main-content {
+    margin: 1em 0;
+}
+.mobile#dashboard #search_form .wrap_q {
+    margin-right: 1.5em;
+    width: 45%;
+}
+.mobile #search_form #show_search_adv.active {
+    padding-bottom: 180px;
+}
+.mobile #search_form .wrap_product {
+    clear: left;
+}
+.mobile#dashboard #search_form .wrap_date_end {
+    margin-right: 0;
+}

media/css/reporter.css

@@ -728,7 +728,7 @@ input.placeholder {
 }
 
 #sentiment .response {
-    height: 30px;
+    height: 36px;
     margin: 0 0 5px 21%;
 }
 #sentiment .response .lbl {
@@ -739,6 +739,9 @@ input.placeholder {
 #sentiment .response .lbl a {
     display: block;
 }
+#sentiment .response .barwrapper {
+    width: 55%;
+}
 #sentiment .response .bar {
     border: 1px solid;
     border-radius: 5px;

media/js/reporter.js

@@ -122,7 +122,19 @@ $(document).ready(function() {
     setInterval(messages.init, 5 * 60 * 1000);
 });
 
-/* search forms */
+/* Mobile Dashboard */
+$(document).ready(function() {
+    if ($('.mobile#dashboard').length == 0) return;
+
+    $('#overview h2 a').click(function(e) {
+        e.preventDefault();
+        $('#overview .accordion').addClass('hidden');
+        $(this).parent().siblings('.accordion').removeClass('hidden');
+        $(this).blur();
+    });
+});
+
+/* Search Forms */
 $(document).ready(function() {
     if ($('#search_form').length == 0) return;
 

templates/base_mobile.html

@@ -21,7 +21,12 @@
     <div id="wrapper">
       {% block global_header %}
       <header>
-        <h1>{{ _('Firefox Input Dashboard') }}</h1>
+        <h1>
+          <a href="{{ url('dashboard') }}">
+            <img src="{{ MEDIA_URL }}img/fx-white.png" alt="Firefox" class="fxlogo"/>
+            {{ _('Input Dashboard') }}
+          </a>
+        </h1>
       </header>
       {% endblock %}
 

templates/search_base_mobile.html

@@ -0,0 +1,9 @@
+{% extends "base_mobile.html" %}
+
+{% block extra_headers %}
+<link type="text/css" href="{{ MEDIA_URL }}css/jq-ui-smoothness/jquery-ui.css" rel="stylesheet" />
+{% endblock %}
+
+{% block js %}
+<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui.min.js"></script>
+{% endblock %}