Permalink
Browse files

more styles

  • Loading branch information...
1 parent 8e830a4 commit d53bcdc6bf9bf6abda76675ba8a7ec3f3f8d26de @ashchan committed Mar 31, 2012
Showing with 43 additions and 14 deletions.
  1. +1 −0 .gitignore
  2. +1 −1 lib/helpers.rb
  3. +36 −9 public/stylesheets/style.css
  4. +5 −4 views/index.erb
View
1 .gitignore
@@ -2,3 +2,4 @@
bin/
vendor/ruby
db.db
+tags
View
2 lib/helpers.rb
@@ -1,7 +1,7 @@
module Helpers
def aqi_table_rows
Matter::EPA_TABLE.map do |r|
- %(<tr><td data-aqi="#{r[4]}">#{r[2]}~#{r[3]}: #{r[5]}</td></tr>)
+ %(<tr><td data-aqi="#{r[4]}"><span>#{r[2]}~#{r[3]}</span> #{r[5]}</td></tr>)
end
end
end
View
45 public/stylesheets/style.css
@@ -65,51 +65,78 @@ table#pm thead tr {
table th, table td {
text-align: center;
- vertical-align: middle;
height: 28px;
}
table th {
background: #b9c9f1;
color: #333;
font-weight: bold;
+ vertical-align: middle;
}
table td {
background: #e8edff;
}
+table.aqi-intro {
+ border: solid 1px #ccc;
+ margin: 20px 0;
+}
+
table.aqi-intro td {
- text-align: center;
+ text-align: left;
vertical-align: middle;
height: 28px;
+ padding: 0 5px;
+}
+
+table#pm td {
+ line-height: 28px;
}
-table td[data-aqi="Good"] {
+table td[data-aqi] span {
+ display: inline-block;
+ text-align: center;
+ width: 80px;
+ padding: 2px;
+ height: 20px;
+}
+
+table#pm td[data-aqi] span {
+ padding: 0px;
+ width: 20px;
+ height: 18px;
+ margin: 2px 10px 0 0;
+ border: solid 1px #333;
+}
+
+table td[data-aqi="Good"] span {
background: #00e400;
}
-table td[data-aqi="Moderate"] {
+table td[data-aqi="Moderate"] span {
background: #ff0;
}
-table td[data-aqi="Unhealthy for Sensitive Groups"] {
+table td[data-aqi="Unhealthy for Sensitive Groups"] span {
background: #ff7e00;
}
-table td[data-aqi="Unhealthy"] {
+table td[data-aqi="Unhealthy"] span {
background: #f00;
}
-table td[data-aqi="Very Unhealthy"] {
+table td[data-aqi="Very Unhealthy"] span {
background: #99004c;
+ color: white;
}
-table td[data-aqi="Hazardous"] {
+table td[data-aqi="Hazardous"] span {
background: #730023;
+ color: white;
}
-
footer {
display: block;
border-top: solid 1px #ccc;
View
9 views/index.erb
@@ -15,16 +15,17 @@
<% @matters.each do |m| %>
<tr>
<td><a href="/<%= m.city %>"><%= m.city %></a></td>
- <td><%= m.pm %> ug/m3</td>
- <td><%= m.aqi[0] %></td>
- <td data-aqi="<%= m.aqi[1] %>"><%= m.aqi[2] %></td>
+ <td><strong><%= m.pm %></strong> ug/m3</td>
+ <td><strong><%= m.aqi[0] %></strong></td>
+ <td data-aqi="<%= m.aqi[1] %>"><span></span><%= m.aqi[2] %></td>
</tr>
<% end %>
</tbody>
</table>
-<h2>AQI图示</h2>
<table class="aqi-intro">
+ <caption><h3>AQI 等级说明</h3></caption>
+
<% aqi_table_rows.each do |r| %>
<%= r %>
<% end %>

0 comments on commit d53bcdc

Please sign in to comment.