Skip to content

Commit

Permalink
Add icons to product list categories
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilafian
dpilafian committed Jul 10, 2024
1 parent e210c19 commit 256da1a
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 30 deletions.
28 changes: 14 additions & 14 deletions src/templates/table-of-products-toc.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<li><a href=#tape-measures>Tape Measures</a></li>
<li><a href=#meter-sticks>Meter Sticks</a></li>
<li><a href=#rulers>Rulers</a></li>
<li><a href=#adhesive-rulers>Adhesive Rulers</a></li>
<li><a href=#calipers>Calipers</a></li>
<li><a href=#squares>Squares &amp; Blocks</a></li>
<li><a href=#architect-scales>Architect Scales</a></li>
<li><a href=#measuring-spoons-and-cups>Measuring Spoons &amp; Cups</a></li>
<li><a href=#scales>Scales</a></li>
<li><a href=#thermometers>Thermometers</a></li>
<li><a href=#kettles>Kettles</a></li>
<li><a href=#tool-sets>Tool Sets</a></li>
<li><a href=#office-supplies>Office Supplies</a></li>
<li><a href=#education-and-games>Education &amp; Games</a></li>
<li><a href=#tape-measures> <i data-icon=tape></i> Tape Measures</a></li>
<li><a href=#meter-sticks> <i data-icon=ruler-vertical></i> Meter Sticks</a></li>
<li><a href=#rulers> <i data-icon=ruler></i> Rulers</a></li>
<li><a href=#adhesive-rulers> <i data-icon=ticket></i> Adhesive Rulers</a></li>
<li><a href=#calipers> <i data-icon=arrows-left-right-to-line></i> Calipers</a></li>
<li><a href=#squares> <i data-icon=ruler-combined></i> Squares &amp; Blocks</a></li>
<li><a href=#architect-scales> <i data-icon=building></i> Architect Scales</a></li>
<li><a href=#measuring-spoons-and-cups> <i data-icon=kitchen-set></i> Measuring Spoons &amp; Cups</a></li>
<li><a href=#scales> <i data-icon=weight-scale></i> Scales</a></li>
<li><a href=#thermometers> <i data-icon=temperature-half></i> Thermometers</a></li>
<li><a href=#kettles> <i data-icon=mug-hot></i> Kettles</a></li>
<li><a href=#tool-sets> <i data-icon=screwdriver-wrench></i> Tool Sets</a></li>
<li><a href=#office-supplies> <i data-icon=stapler></i> Office Supplies</a></li>
<li><a href=#education-and-games> <i data-icon=graduation-cap></i> Education &amp; Games</a></li>
37 changes: 21 additions & 16 deletions src/templates/table-of-products.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<!--
**********
Use the HTML template below to add a new product.
Replace the variables as appropriate for the new product:
{{PRODUCT-ID}} ==> Amazon Standard Identification Number (ASIN)
{{PRODUCT-TITLE}} ==> A cleaned up version of the title
{{PRODUCT-NOTE}} ==> One or two words highlighting a key characteristic
If the product image does not render, you'll unfortunately have to laboriously search
through the page to find an appropriate product image URL.
**********
<tr>
<td><a href=https://www.amazon.com/dp/{{PRODUCT-ID}}>{{PRODUCT-TITLE}}</a></td>
<td>{{PRODUCT-SHORT-NOTE}}</td>
<td><a href=https://www.amazon.com/dp/{{PRODUCT-ID}}><img src=http://images.amazon.com/images/P/{{PRODUCT-ID}}.01._THUMBZZZ_.jpg alt=preview></a></td>
</tr>
-->

<!-- Tape Measures -->
<tr id=tape-measures>
<th colspan=3>Tape Measures</th>
<th colspan=3><i data-icon=tape></i> Tape Measures</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B0BJV484FK>🏆 Takamine Professional Tape Measure, 5.5m</a></td>
Expand Down Expand Up @@ -82,7 +82,7 @@

<!-- Meter Sticks -->
<tr id=meter-sticks>
<th colspan=3>Meter Sticks</th>
<th colspan=3><i data-icon=ruler-vertical></i> Meter Sticks</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B078RBWQVG>Shinwa 1,000 mm Rigid "Zero Glare" Metric Machinist Rule, 1m</a></td>
Expand All @@ -97,7 +97,7 @@

<!-- Rulers -->
<tr id=rulers>
<th colspan=3>Rulers</th>
<th colspan=3><i data-icon=ruler></i> Rulers</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B0016V5NQ8>🏆 Shinwa Sokutei Pickup Scale (Ruler), 10cm / 15cm / 30cm / 60cm</a></td>
Expand All @@ -119,10 +119,15 @@
<td>Fiberglass folding ruler</td>
<td><a href=https://www.amazon.com/dp/B002VA59QW><img src=http://images.amazon.com/images/P/B002VA59QW.01._THUMBZZZ_.jpg alt=preview></a></td>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B07RBR8HN6>5&times;30 cm Quilting/Sewing Ruler, Tailor Dressmaker Quilting Tool</a></td>
<td>Clear acrylic plastic</td>
<td><a href=https://www.amazon.com/dp/B07RBR8HN6><img src=https://images-na.ssl-images-amazon.com/images/I/61yVYo-NkgL._AC_UL348_SR348,348_.jpg alt=preview></a></td>
</tr>

<!-- Adhesive Rulers -->
<tr id=adhesive-rulers>
<th colspan=3>Adhesive Rulers</th>
<th colspan=3><i data-icon=ticket></i> Adhesive Rulers</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B0966YJPS1>uxcell Adhesive Backed Tape Measure, 10cm</a></td>
Expand All @@ -137,7 +142,7 @@

<!-- Calipers -->
<tr id=calipers>
<th colspan=3>Calipers</th>
<th colspan=3><i data-icon=arrows-left-right-to-line></i> Calipers</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B0832NMZCV>Utoolmart Vernier Caliper 80mm Measuring Tool, Outside Inside</a></td>
Expand All @@ -157,7 +162,7 @@

<!-- Squares & Blocks -->
<tr id=squares>
<th colspan=3>Squares &amp; Blocks</th>
<th colspan=3><i data-icon=ruler-combined></i> Squares &amp; Blocks</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B000IOCN8U>🏆 Swanson NA202 Metric Speed Square Layout Tool, 25 cm</a></td>
Expand Down Expand Up @@ -202,7 +207,7 @@

<!-- Architect Scales -->
<tr id=architect-scales>
<th colspan=3>Architect Scales</th>
<th colspan=3><i data-icon=building></i> Architect Scales</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B088P8DB5S>Alumicolor Metric Architect Hollow Scale, 30cm, 20/25/50/75/100/125</a></td>
Expand All @@ -217,7 +222,7 @@

<!-- Measuring Spoons & Cups -->
<tr id=measuring-spoons-and-cups>
<th colspan=3>Measuring Spoons &amp; Cups</th>
<th colspan=3><i data-icon=kitchen-set></i> Measuring Spoons &amp; Cups</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B07C2W2Z1W>Bezall 5 in 1 Colorful Plastic Measuring Spoons Set, Kitchen Cooking Baking Tools</a></td>
Expand Down Expand Up @@ -252,7 +257,7 @@

<!-- Scales -->
<tr id=scales>
<th colspan=3>Scales</th>
<th colspan=3><i data-icon=weight-scale></i> Scales</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B01LZA1UM3>🏆 Tanita KF-200 Kitchen Scale, 2 kg</a></td>
Expand All @@ -267,7 +272,7 @@

<!-- Thermometers -->
<tr id=thermometers>
<th colspan=3>Thermometers</th>
<th colspan=3><i data-icon=temperature-half></i> Thermometers</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B07DVMHLL2>Indoor/Outdoor Mini Temperature Humidity Meter</a></td>
Expand All @@ -287,7 +292,7 @@

<!-- Kettles -->
<tr id=kettles>
<th colspan=3>Kettles</th>
<th colspan=3><i data-icon=mug-hot></i> Kettles</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B089CVHW5K>Aigostar Electric Kettle Temperature Control 1.7L, LED Indicator Light Change</a></td>
Expand All @@ -307,7 +312,7 @@

<!-- Tool Sets -->
<tr id=tool-sets>
<th colspan=3>Tool Sets</th>
<th colspan=3><i data-icon=screwdriver-wrench></i> Tool Sets</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B006LPKXQ4>Makita Metric Bit and Hand Tool Set</a></td>
Expand All @@ -317,7 +322,7 @@

<!-- Office Supplies -->
<tr id=office-supplies>
<th colspan=3>Office Supplies</th>
<th colspan=3><i data-icon=stapler></i> Office Supplies</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B07BPKDHBH>A4 Size Premium Printer Paper by Double A, 100 Sheets</a></td>
Expand All @@ -327,7 +332,7 @@

<!-- Education & Games -->
<tr id=education-and-games>
<th colspan=3>Education &amp; Games</th>
<th colspan=3><i data-icon=graduation-cap></i> Education &amp; Games</th>
</tr>
<tr>
<td><a href=https://www.amazon.com/dp/B000QDTVFG>Learning Resources 1g Centimeter Cubes, Assorted Colors, Set of 500</a></td>
Expand Down
11 changes: 11 additions & 0 deletions src/website/css/layout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
ol {
li {
margin-bottom: 2px;
i.font-icon {
width: 1.4em;
font-size: 1.0em;
text-align: center;
}
}
}
}
Expand Down Expand Up @@ -51,6 +56,12 @@
.MobileMode({ font-size: 0.9rem; });
text-align: left;
}
tbody tr th {
i.font-icon {
font-size: 1.1em;
padding-right: 0.4em;
}
}
}
}

Expand Down

0 comments on commit 256da1a

Please sign in to comment.