Add margins to footers & fix recent time (#16)

* Add margins to footers

* Fix "recent" to mean "in the last 8 hours"
This commit is contained in:
Carter McBride 2024-07-17 16:27:40 -06:00 committed by GitHub
parent 64650c31cd
commit d0a0e8dfea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 12 deletions

View file

@ -104,10 +104,10 @@
</header> </header>
<main class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] mt-2"> <main class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] mt-2">
{% for group, feeds in data %} {% for group, feeds in data %}
<section class=""> <section>
<h2 class="text-xl">{{ group }}</h2> <h2 class="text-xl">{{ group }}</h2>
{% for feed in feeds %} {% for feed in feeds %}
<details class="group"> <details class="group max-h-64">
<summary class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 group-has-[.has-recent]:border-arc-title hover:bg-arc-hover flex flex-row items-center"> <summary class="cursor-pointer p-2 rounded-xl mt-1 transition-colors group-has-[.has-recent]:border-2 group-has-[.has-recent]:border-arc-title hover:bg-arc-hover flex flex-row items-center">
{% if feed.hasRecent %} {% if feed.hasRecent %}
<div class="text-xl mr-2" aria-label="Feed has recent items">✳︎</div> <div class="text-xl mr-2" aria-label="Feed has recent items">✳︎</div>
@ -117,7 +117,7 @@
<div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden text-arc-subtitle" title="{{feed.feed}}">({{ feed.feed }})</div> <div class="text-sm whitespace-nowrap text-ellipsis w-11/12 overflow-hidden text-arc-subtitle" title="{{feed.feed}}">({{ feed.feed }})</div>
</div> </div>
</summary> </summary>
<ul class="max-h-64 overflow-y-auto list-none ml-6"> <ul class=" overflow-y-auto list-none ml-6">
{% for item in feed.items %} {% for item in feed.items %}
<li class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors hover:bg-arc-hover"> <li class="{% if item.isRecent %}has-recent {% endif %} flex flex-row items-center p-2 rounded-xl mt-1 transition-colors hover:bg-arc-hover">
{% if item.isRecent %} {% if item.isRecent %}
@ -146,16 +146,18 @@
{% endfor %} {% endfor %}
</main> </main>
{% if errors | length > 0 %} {% if errors | length > 0 %}
<h2 class="text-xl">Errors</h2> <section class="mt-4">
<p>There were errors trying to parse these feeds:</p> <h2 class="text-xl">Errors</h2>
<ul class="errors"> <p>There were errors trying to parse these feeds:</p>
{% for error in errors %} <ul class="errors">
<li class="break-all">{{ error }}</li> {% for error in errors %}
{% endfor %} <li class="break-all">{{ error }}</li>
</ul> {% endfor %}
</ul>
</section>
{% endif %} {% endif %}
<footer> <footer>
<hr> <hr class="my-4">
<p>Last updated <relative-time data-time="{{ now }}">{{ now | formatDateTime}}</relative-time>.</p> <p>Last updated <relative-time data-time="{{ now }}">{{ now | formatDateTime}}</relative-time>.</p>
<p> <p>
<a href="https://github.com/carterworks/rss-reader">View on GitHub</a> <a href="https://github.com/carterworks/rss-reader">View on GitHub</a>

View file

@ -153,7 +153,7 @@ const processFeed =
item.link = getLink(item); item.link = getLink(item);
const timestamp = new Date(Number.parseInt(item.timestamp)); const timestamp = new Date(Number.parseInt(item.timestamp));
const eightHoursAgo = new Date(); const eightHoursAgo = new Date();
eightHoursAgo.setHours(eightHoursAgo.getHours() - 24); eightHoursAgo.setHours(eightHoursAgo.getHours() - 8);
item.isRecent = timestamp > eightHoursAgo; item.isRecent = timestamp > eightHoursAgo;
} }