Make ECG table responsive

Author: willdurand

_layouts/default.html

@@ -10,7 +10,10 @@
         <title>{{ site.name }} - {{ site.description }}</title>
         {% endif %}
         <link rel="stylesheet" href="/css/main.css">
-        <link rel="stylesheet" href="/css/pygment_trac.css">
+        <link rel="stylesheet" href="/css/pygment-trac.css">
+        <!--[if !IE]><!-->
+        <link rel="stylesheet" href="/css/responsive-table.css">
+        <!--<![endif]-->
         <!--[if lt IE 9]>
         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->

css/main.css

@@ -91,10 +91,6 @@ th {
   color:#444;
 }
 
-img {
-  max-width:100%;
-}
-
 header {
   width:270px;
   float:left;

css/responsive-table.css

@@ -0,0 +1,42 @@
+@media only screen and (max-width: 760px),
+       (min-device-width: 768px) and (max-device-width: 1024px) {
+  /* Force table to not be like tables anymore */
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  td {
+    /* Behave  like a "row" */
+    border: none;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    padding-left: 70%;
+  }
+
+  td:before {
+    /* Now like a table header */
+    position: absolute;
+    /* Top/left values mimic padding */
+    top: 6px;
+    left: 6px;
+    width: 25%;
+    padding-right: 10px;
+    white-space: nowrap;
+  }
+
+  /* Label the data */
+  td:nth-of-type(1):before { content: "Geocoder"; }
+  td:nth-of-type(2):before { content: "GeocoderBundle (Symfony2)"; }
+  td:nth-of-type(3):before { content: "GeocoderModule (ZF2)"; }
+  td:nth-of-type(4):before { content: "GeocodableBehavior (Propel)"; }
+
+  .ecg td {
+    text-align: left;
+  }
+}

index.markdown

@@ -74,18 +74,22 @@ Geocoder ECG (Build Status)
 automatically build our projects, and here are the statuses:
 
 <table width="100%" class="ecg">
-    <tr>
-    {% for project in page.projects %}
-        <th><a href="{{ site.github_base_url }}{{ project.name }}">{{ project.description }}</a></th>
-    {% endfor %}
-    </tr>
-    <tr>
-    {% for project in page.projects %}
-        <td>
-            <a href="{{ site.travis_base_url }}{{ project.name }}">
-                <img src="{{ site.travis_base_url }}{{ project.name }}.png" />
-            </a>
-        </td>
-    {% endfor %}
-    </tr>
+    <thead>
+        <tr>
+        {% for project in page.projects %}
+            <th><a href="{{ site.github_base_url }}{{ project.name }}">{{ project.description }}</a></th>
+        {% endfor %}
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+        {% for project in page.projects %}
+            <td>
+                <a href="{{ site.travis_base_url }}{{ project.name }}">
+                    <img src="{{ site.travis_base_url }}{{ project.name }}.png" class="travis-ci" />
+                </a>
+            </td>
+        {% endfor %}
+        </tr>
+    </tbody>
 </table>