From 174c0f8bd975263ef00b325cfd9067d7b2ae4f7b Mon Sep 17 00:00:00 2001
From: Adam Hinz <hinz.adam@gmail.com>
Date: Thu, 20 Jun 2013 10:12:38 -0400
Subject: [PATCH] Provide a horizontal scroll bar if there are too many DBH
 Classes

---
 static/css/polygons.css      |  3 ++-
 templates/polygons/edit.html | 41 +++++++++++++++++++-----------------
 templates/polygons/view.html | 30 ++++++++++++++------------
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/static/css/polygons.css b/static/css/polygons.css
index 4ae0a96c..646f6df8 100644
--- a/static/css/polygons.css
+++ b/static/css/polygons.css
@@ -6,8 +6,9 @@ input {
     width: 100%;
 }
 
-#polygontable {
+.table-container {
     overflow: auto;
+    width: 95%;
 }
 
 /** CSS for OTM is screwy... we're just going to give
diff --git a/templates/polygons/edit.html b/templates/polygons/edit.html
index b142c139..53ccb5e5 100644
--- a/templates/polygons/edit.html
+++ b/templates/polygons/edit.html
@@ -5,27 +5,30 @@
 <h1>Polygon #{{ polygonobj.pk }}</h1>
 
 <form method="POST" action="{{ SITE_ROOT}}polygons/{{ polygonobj.pk }}/update">
-  <table class="polygon-table table" data-id="{{ polygonobj.pk }}" width="100%">
-    <tr>
-      <th>Species</th>
-      {% for cl in classes %}
-      <th data-dbh-id={{ cl.pk }}>{{ cl.label }}</th>
+  <div class="table-container">
+    <table class="polygon-table table" data-id="{{ polygonobj.pk }}" width="100%">
+      <tr>
+        <th>Species</th>
+        {% for cl in classes %}
+        <th data-dbh-id={{ cl.pk }}>{{ cl.label }}</th>
+        {% endfor %}
+        <th></th>
+      </tr>
+      {% for row in polygon %}
+      <tr>
+        {% for item in row %}
+        {% if forloop.first %}
+        <td data-species-id="{{ item.0 }}">{{ item.1 }}</td>
+        {% else %}
+        <td><input name="pval_{{ polygonobj.pk }}_{{ row.0.0 }}_{{ item.0 }}" value="{% if item.1 %}{{ item.1 }}{% else %}0{% endif %}"></td>
+        {% endif %}
+        {% endfor %}
+        <td><a href="#" class="removespecies">Remove</a></td>
+      </tr>
       {% endfor %}
-      <th></th>
-    </tr>
-    {% for row in polygon %}
-    <tr>
-      {% for item in row %}
-      {% if forloop.first %}
-      <td data-species-id="{{ item.0 }}">{{ item.1 }}</td>
-      {% else %}
-      <td><input name="pval_{{ polygonobj.pk }}_{{ row.0.0 }}_{{ item.0 }}" value="{% if item.1 %}{{ item.1 }}{% else %}0{% endif %}"></td>
-      {% endif %}
-      {% endfor %}
-      <td><a href="#" class="removespecies">Remove</a></td>
-    </tr>
-    {% endfor %}
   </table>
+</div>
+
 <input type="submit" name="submit" value="Update" />
 <a href="{{ SITE_ROOT}}polygons/{{ polygonobj.pk }}">Cancel</a>
 </form>
diff --git a/templates/polygons/view.html b/templates/polygons/view.html
index f315aa29..34d2247a 100644
--- a/templates/polygons/view.html
+++ b/templates/polygons/view.html
@@ -7,20 +7,22 @@ <h1>Polygon #{{ polygonobj.pk }}</h1>
 <a href="{{ SITE_ROOT }}polygons/{{ polygonobj.pk }}/edit"><button>Edit</button></a>
 {% endif %}
 
-<table id="polygontable" class="table" width="100%">
-  <tr>
-    <th>Species</th>
-    {% for cl in classes %}
-    <th>{{ cl.label }}</th>
+<div class="table-container">
+  <table id="polygontable" class="table" width="100%">
+    <tr>
+      <th>Species</th>
+      {% for cl in classes %}
+      <th>{{ cl.label }}</th>
+      {% endfor %}
+    </tr>
+    {% for row in polygon %}
+    <tr>
+      {% for item in row %}
+      <td>{{ item.1 }}</td>
+      {% endfor %}
+    </tr>
     {% endfor %}
-  </tr>
-  {% for row in polygon %}
-  <tr>
-    {% for item in row %}
-    <td>{{ item.1 }}</td>
-    {% endfor %}
-  </tr>
-  {% endfor %}
-</table>
+  </table>
+</div>
 
 {% endblock %}