HPR/hpr_generator
8
1
Fork 5
Code Issues 35 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Apply card formatting to hosts table

Browse Source
This commit is contained in:
Roan Horning
2025-09-03 23:03:20 -04:00
parent be17edd6ac
commit 7ae15005de
2 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public_html/css/hpr.css
View File

@@ -313,7 +313,8 @@ article > p,
#latest_lane.lane {
justify-content: flex-between;
}
.lane > article {
.lane > article,
#hosts tr {
/* Add shadows to create the "card" effect */
border-top: thin solid var(--shadow-cards);
border-left: thin solid var(--shadow-cards);
@@ -326,7 +327,8 @@ article > p,
overflow-x: scroll;
padding-bottom: 1rem;
}
.lane > article:hover {
.lane > article:hover,
#hosts tr:hover {
box-shadow:
4px 8px 8px var(--shadow-cards),
8px 16px 16px var(--shadow-cards);
@@ -552,6 +554,41 @@ fieldset > table td input[type="radio"] {
#comments > article > .show-meta {
font-size: smaller;
}
#hosts tr {
gap: 0;
justify-content: flex-start;
}
#hosts td {
display: inline-block;
}
#hosts td:nth-child(-n+2) {
background: var(--background-secondary);
color: var(--background-primary);
}
#hosts td:nth-child(-n+2) a {
color: var(--link-secondary);
}
#hosts td:nth-child(-n+2) a:hover {
color: var(--link-secondary-hover);
}
#hosts td:nth-child(2) {
padding: 0.25rem 0 0 8px;
width: calc(100% - 90px);
}
#hosts td:nth-last-child(-n+2) {
padding: 0.5rem 0 0 95px;
}
#hosts td:nth-last-child(2)::before {
content: ;
content: "License: ";
}
#hosts td:nth-last-child(1)::before {
content: "Last Show: ";
}
#hosts td > img {
border-radius: 0.25rem;
}
.series-description {
margin: 0;
padding: 0;
@@ -651,6 +688,15 @@ fieldset > table td input[type="radio"] {
#latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem;
}
#hosts tbody.lane.stack {
flex-direction: row;
justify-content: space-between;
gap: 1rem
}
#hosts tr {
flex: 1 1 45%;
max-width: 45%;
}
}
@media (min-width: 900px) {
#podcast_lane > .lane,
@@ -661,4 +707,8 @@ fieldset > table td input[type="radio"] {
#latest_lane.lane section {
flex: 1;
}
#hosts tr {
flex: 1 1 30%;
max-width: 30%;
}
}

18
templates/content-correspondents.tpl.html
View File

@@ -1,15 +1,17 @@
<!--% PROCESS 'shared-utils.tpl.html' %-->
<!--% PROCESS 'shared-avatar.tpl.html' %-->
<article>
<h2 class="title">Correspondents</h2>
<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
<!--% USE DBI(constants.driver) %-->
<!--% host_cnt = 0 %-->
<table class="hosts">
<th >Avatar</th>
<th >Name &amp; Host ID</th>
<th >License</th>
<th >Last Show</th>
<table id="hosts" class="hosts lane stack">
<tbody class="lane stack">
<tr class="no-css">
<th>Avatar</th>
<th>Name &amp; Host ID</th>
<th>License</th>
<th>Last Show</th>
</tr>
<!--% FOREACH host IN DBI.query(
'select h.hostid, h.host, h.license, e.date,
h.local_image
@@ -18,7 +20,7 @@
on h.hostid = e.hostid
order by h.host'
) %-->
<tr>
<tr class="lane">
<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
<td><strong><!--% host.host %--></strong><br>
@@ -28,6 +30,6 @@
<td><!--% host.date %--></td>
</tr><!--% host_cnt = host_cnt + 1 %-->
<!--% END %-->
</tbody>
</table>
<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
</article>