Address review feedback

Author: ericholscher

readthedocs/donate/static/donate/css/donate.css

@@ -3,4 +3,13 @@
     margin-right: auto;
     width: 900px;
     text-align: center
+
+.promo {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    width: 240px;
+}
+
+.filters dt {
+    font-weight: bold;
 }

readthedocs/donate/templates/donate/promo_detail.html

@@ -5,6 +5,10 @@
 
 {% block title %}{% trans "Promo Detail" %}{% endblock %}
 
+{% block extra_links %}
+  <link rel="stylesheet" href="{% static 'donate/css/donate.css' %}" />
+{% endblock %}
+
 {% block content %}
 
 <h1> Promo Results </h1>
@@ -24,43 +28,50 @@ <h3>
 Results for {{ promo.name }} ({{ promo.analytics_id }}) over last {{ days }} days.
 </h3>
 
-<div class="example" style="width: 30%;">
+<div class="example">
 
   <div class="filters">
     {% if promo.programming_language %}
-      <p> 
-        <strong>Filtered Language</strong>: {{ promo.programming_language }}
-      </p>
+      <dl>
+        <dt>Filtered Language</dt>
+        <dd>{{ promo.programming_language }}</dd>
+      </dl>
     {% endif %}
 
     {% if promo.geo_filters.count %}
-      <p> 
-      <strong>Filtered Geos</strong>: 
+      <dl>
+        <dt>Filtered Geos</dt>
         {% for geo in promo.geo_filters.all %}
-          {{ geo.countries.all|join:", " }}
+          <dd>
+          {{ geo.get_filter_type_display }}: {{ geo.countries.all|join:", " }}
+          </dd>
         {% endfor %}
-      </p>
+      </dl>
     {% endif %}
 
     {% if promo.sold_clicks %}
-      <p> 
-        <strong>Total Clicks Sold</strong>: {{ promo.sold_clicks }}
-      </p>
+      <dl>
+        <dt>Total Clicks Sold</dt>
+        <dd>
+        {{ promo.sold_clicks }}
+        </dd>
+      </dl>
     {% endif %}
   </div>
 
-  <a href="{{ promo.link }}">
-    <img width=120 height=90 src="{{ promo.image }}">
-  </a>
 
-  <br>
+  <div class="promo">
+    <div id="promo_image">
+      <a href="{{ promo.link }}">
+        <img width=120 height=90 src="{{ promo.image }}">
+      </a>
+    </div>
 
-  <div class="promo_text">
-    {{ promo.report_html_text|safe }}
+    <div id="promo_text">
+      {{ promo.report_html_text|safe }}
+    </div>
   </div>
 
-  <br>
-
 </div>
 
 <h5>Promo Data</h5>