try to improve tracker on smaller screens

This commit is contained in:
Fabian Dill 2020-06-28 10:51:48 +02:00
parent dacecc4637
commit 93199152c7
2 changed files with 21 additions and 7 deletions

View File

@ -14,3 +14,18 @@ th {
table {
width: 100% !important;
}
img.alttp-sprite {
height: 32px;
width: 32px;
object-fit: contain;
}
/* this is specific to the tracker right now */
@media all and (max-width: 1750px) {
img.alttp-sprite {
height: 16px;
width: 16px;
object-fit: contain;
}
}

View File

@ -51,7 +51,7 @@
<th>Name</th>
{% for name in tracking_names %}
{% if name in icons %}
<th style="text-align: center"><img height="32" width="32" style="object-fit: contain"
<th style="text-align: center"><img class="alttp-sprite"
src="{{ icons[name] }}"
alt="{{ name|e }}"></th>
{% else %}
@ -96,8 +96,7 @@
{% for area in ordered_areas %}
{% set colspan = (3 if area in key_locations else 1) %}
{% if area in icons %}
<th colspan="{{ colspan }}" style="text-align: center"><img height="32" width="32"
style="object-fit: contain"
<th colspan="{{ colspan }}" style="text-align: center"><img class="alttp-sprite"
src="{{ icons[area] }}"
alt="{{ area }}"></th>
{% else %}
@ -108,12 +107,12 @@
</tr>
<tr>
{% for area in ordered_areas %}
<th style="text-align: center"><img height="32" width="32" style="object-fit: contain"
src="{{ icons["Chest"] }}" alt="Checks"></th>
<th style="text-align: center"><img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks">
</th>
{% if area in key_locations %}
<th style="text-align: center"><img height="32" width="32" style="object-fit: contain"
<th style="text-align: center"><img class="alttp-sprite"
src="{{ icons["Small Key"] }}" alt="Small Key"></th>
<th style="text-align: center"><img height="32" width="32" style="object-fit: contain"
<th style="text-align: center"><img class="alttp-sprite"
src="{{ icons["Big Key"] }}" alt="Big Key"></th>
{% endif %}
{% endfor %}