Skip to content

Commit 8efe060

Browse files
committed
Make ECG table responsive
1 parent 9938753 commit 8efe060

File tree

4 files changed

+64
-19
lines changed

4 files changed

+64
-19
lines changed

_layouts/default.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
<title>{{ site.name }} - {{ site.description }}</title>
1111
{% endif %}
1212
<link rel="stylesheet" href="/css/main.css">
13-
<link rel="stylesheet" href="/css/pygment_trac.css">
13+
<link rel="stylesheet" href="/css/pygment-trac.css">
14+
<!--[if !IE]><!-->
15+
<link rel="stylesheet" href="/css/responsive-table.css">
16+
<!--<![endif]-->
1417
<!--[if lt IE 9]>
1518
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1619
<![endif]-->

css/main.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,6 @@ th {
9191
color:#444;
9292
}
9393

94-
img {
95-
max-width:100%;
96-
}
97-
9894
header {
9995
width:270px;
10096
float:left;

css/responsive-table.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@media only screen and (max-width: 760px),
2+
(min-device-width: 768px) and (max-device-width: 1024px) {
3+
/* Force table to not be like tables anymore */
4+
table, thead, tbody, th, td, tr {
5+
display: block;
6+
}
7+
8+
thead tr {
9+
position: absolute;
10+
top: -9999px;
11+
left: -9999px;
12+
}
13+
14+
td {
15+
/* Behave like a "row" */
16+
border: none;
17+
border-bottom: 1px solid #eee;
18+
position: relative;
19+
padding-left: 70%;
20+
}
21+
22+
td:before {
23+
/* Now like a table header */
24+
position: absolute;
25+
/* Top/left values mimic padding */
26+
top: 6px;
27+
left: 6px;
28+
width: 25%;
29+
padding-right: 10px;
30+
white-space: nowrap;
31+
}
32+
33+
/* Label the data */
34+
td:nth-of-type(1):before { content: "Geocoder"; }
35+
td:nth-of-type(2):before { content: "GeocoderBundle (Symfony2)"; }
36+
td:nth-of-type(3):before { content: "GeocoderModule (ZF2)"; }
37+
td:nth-of-type(4):before { content: "GeocodableBehavior (Propel)"; }
38+
39+
.ecg td {
40+
text-align: left;
41+
}
42+
}

index.markdown

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,18 +74,22 @@ Geocoder ECG (Build Status)
7474
automatically build our projects, and here are the statuses:
7575

7676
<table width="100%" class="ecg">
77-
<tr>
78-
{% for project in page.projects %}
79-
<th><a href="{{ site.github_base_url }}{{ project.name }}">{{ project.description }}</a></th>
80-
{% endfor %}
81-
</tr>
82-
<tr>
83-
{% for project in page.projects %}
84-
<td>
85-
<a href="{{ site.travis_base_url }}{{ project.name }}">
86-
<img src="{{ site.travis_base_url }}{{ project.name }}.png" />
87-
</a>
88-
</td>
89-
{% endfor %}
90-
</tr>
77+
<thead>
78+
<tr>
79+
{% for project in page.projects %}
80+
<th><a href="{{ site.github_base_url }}{{ project.name }}">{{ project.description }}</a></th>
81+
{% endfor %}
82+
</tr>
83+
</thead>
84+
<tbody>
85+
<tr>
86+
{% for project in page.projects %}
87+
<td>
88+
<a href="{{ site.travis_base_url }}{{ project.name }}">
89+
<img src="{{ site.travis_base_url }}{{ project.name }}.png" class="travis-ci" />
90+
</a>
91+
</td>
92+
{% endfor %}
93+
</tr>
94+
</tbody>
9195
</table>

0 commit comments

Comments
 (0)