commit 46e2f0614d23d847ef21d3e8a654df3154430c3d
parent 47b5037c547712d370a6134c7e204a4bed9b8414
Author: kyle <kyle@getaddrinfo.net>
Date: Wed, 11 Nov 2015 16:06:20 -0700
html: switch to 2 column responsive design for charts
- the only way I can see the charts looking good is to limit the width
- phone screens are taller than wide, so what I did is
- 2 column layout for computers, which have wider than tall screens
- single column layout for anything < 640px wide
- also fix various margins and headers, use a column container for sections that
should only be a fixed size wide (index.html and about.html currently)
Diffstat:
5 files changed, 60 insertions(+), 37 deletions(-)
diff --git a/etc/pricesloth.css b/etc/pricesloth.css
@@ -11,30 +11,22 @@ li {
}
body {
- /* margin-top: 1em; */
font-family: sans-serif;
-
- /* i don't want to read anything wider than that */
- max-width: 80em;
- margin: auto;
-
- border-left: 1px dashed gray;
- border-right: 1px dashed gray;
+ margin: 0;
}
.menu_bar {
/* space at the top for round sloth face to poke out */
- margin-top: 1.25em;
- background-color: green;
+ margin-top: 1.0em;
+ background-color: forestgreen;
}
.menu_bar_title {
font-size: 2em;
- /* width of the sloth face... ish */
+ font-weight: bold;
+ color: white;
display: inline-block;
- color: white;
- font-weight: bold;
}
.search_box {
@@ -42,6 +34,11 @@ body {
height: 2em;
}
+.column_container {
+ max-width: 80em;
+ margin: auto;
+}
+
.column {
display: inline-block;
vertical-align: top;
@@ -51,13 +48,25 @@ body {
padding: 0 2% 0 2%;
}
+.product_column {
+ display: inline-block;
+ vertical-align: top;
+
+ width: 49.8%;
+}
+
.product {
- padding: 0.5em;
- margin: 0.3em 0.3em 0.3em 0.3em;
+ padding: 6px;
border: 1px solid gray;
border-radius: 3px;
}
+.product_title {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.sloth {
width: 5em;
height: 5em;
@@ -69,15 +78,19 @@ body {
margin-top: -1.25em;
margin-bottom: -2em;
- margin-left: 0.5em;
display: inline-block;
}
@media (max-width: 640px) {
/* anything smaller than this go into single column mode */
.column {
- width: 90%;
- padding: 0 5% 0 5%;
+ width: 95%;
+ padding: 0 2% 0 2%;
+ }
+
+ .product_column {
+ width: 100%;
+ padding: 0 0 0 0;
}
.logo {
@@ -97,13 +110,6 @@ body {
width: 15em;
}
-.product_index {
- width: 14%;
- padding: 0 1% 0 1%;
- display: inline-block;
- vertical-align: top;
-}
-
.list_item {
}
diff --git a/tt/about.tt b/tt/about.tt
@@ -1,4 +1,5 @@
[% WRAPPER wrapper.tt %]
+ <div class="column_container">
<div class="column">
<h2>About</h2>
@@ -39,4 +40,5 @@
<object data="/svg/history_summary.svg" type="image/svg+xml">
</object>
</div>
+ </div>[%# end .column_container %]
[% END %]
diff --git a/tt/fine_list.tt b/tt/fine_list.tt
@@ -4,8 +4,19 @@
src="[% logo_hash.item(name_link) %]"/>
[% name %] [% type %] ([% products.size %] total)</h1>
+ <div class="product_column">
+
+ [% column_size = products.size / 2.0 %]
+ [% i = 0 %]
[% FOREACH product IN products %]
+ [% i = i + 1 %]
+ [% IF (i % 20) == 0 %]
+ </div>
+ <div class="product_column">
+ [% END %]
+
<div class="product">
+ <div class="product_title">
[% manuf_html = product.0.lower.replace('[ #\/]', '_') %]
[% part_link = product.1.lower.replace('[ #\/]', '_') %]
<a name="[% part_link %]"></a>
@@ -14,15 +25,20 @@
<img alt="[% product.0 %]" class="logo_small"
src="[% logo_hash.item(manuf_html) %]"/></a>
+ [%# inline link to the products page %]
+ <a href="/products/[% manuf_html %]/[% part_link %].html">[% product.1 %]</a>
+
[%# display the description %]
[% product.2 %]
-
- [%# inline link to the products page, in parenthesis %]
- (<a href="/products/[% manuf_html %]/[% part_link %].html">[% product.1 %]</a>)<br>
+ </div>
[%# show the chart %]
<object data="/svg/[% manuf_html %]/[% part_link %].svg" type="image/svg+xml">
</object>
+ <!--img src="/svg/[% manuf_html %]/[% part_link %].svg" /-->
</div>
+
[% END %]
+
+ </div>
[% END %]
diff --git a/tt/index.tt b/tt/index.tt
@@ -1,4 +1,5 @@
[% WRAPPER wrapper.tt %]
+ <div class="column_container">
<div class="column">
<h2>Manufacturers ([% manufacturer_list.keys.size %] total)</h2>
@@ -8,8 +9,7 @@
<div class="list_item">
<a href="/manufacturers/[% item_link %].html">
<img class="logo" alt="[% manuf %]"
- src="[% logo_hash.item(item_link) %]" />
- </a><br>
+ src="[% logo_hash.item(item_link) %]" /></a><br>
Types:
[% FOREACH pair IN manufacturer_list.$manuf.pairs %]
@@ -31,9 +31,7 @@
[% item_link = item.lower.replace('[ #\/]', '_') %]
<a href="/retailers/[% item_link %].html">
<img class="retailer_logo" alt="[% item %]"
- src="[% logo_hash.item(item_link) %]" />
- </a>
- <br />
+ src="[% logo_hash.item(item_link) %]" /></a><br />
Manufacturers sold here:
[% FOREACH pair IN retailer_list.$item.pairs %]
@@ -50,8 +48,7 @@
<div class="list_item">
<a href="/types/[% item_link %].html">
<img class="product_type" alt="[% item %]"
- src="[% logo_hash.item(item_link) %]" />
- </a><br />
+ src="[% logo_hash.item(item_link) %]" /></a><br />
[% item %] manufacturers:
[% FOREACH pair IN types_list.$item.pairs %]
@@ -65,4 +62,5 @@
[% END %]
</div>
+ </div>[%# end .column_conatiner %]
[% END %]
diff --git a/tt/wrapper.tt b/tt/wrapper.tt
@@ -9,9 +9,9 @@
</head>
<body>
<div class="menu_bar">
+ <div class="column_container">
<a href="/about.html">
- <img class="sloth" src="/logo/pricesloth.jpg">
- </a>
+ <img class="sloth" src="/logo/pricesloth.jpg"></a>
<div class="menu_bar_title">PriceSloth</div>
<form class="search_box" method="get" action="/search.html">
@@ -20,6 +20,7 @@
<input type="submit" value="Search">
</fieldset>
</form>
+ </div>
</div>
[% content %]
