various styling

index.html

···
 
     <table class="scan-result given-likes">
       <thead>
-        <tr><th colspan="2">Given likes:</th></tr>
+        <tr><th colspan="3">❤️ Likes from you:</th></tr>
       </thead>
       <tbody></tbody>
     </table>
 
     <table class="scan-result received-likes">
       <thead>
-        <tr><th colspan="2">Received likes:</th></tr>
+        <tr><th colspan="3">💛 Likes on your posts:</th></tr>
       </thead>
       <tbody></tbody>
     </table>

like_stats_page.js

···
     return Object.entries(counts).sort(this.sortResults).map(x => x[1]).slice(0, 20);
   }
 
-  /** @param {LikeStat[]} topEntries, @param {HTMLTableElement} table, @returns {Promise<void>} */
+  /** @param {LikeStat[]} topUsers, @param {HTMLTableElement} table, @returns {Promise<void>} */
 
-  async renderResults(topEntries, table) {
+  async renderResults(topUsers, table) {
     let tableBody = $(table.querySelector('tbody'));
     tableBody.innerHTML = '';
 
-    for (let user of topEntries) {
+    for (let [i, user] of topUsers.entries()) {
       let tr = $tag('tr');
       tr.append(
-        $tag('td', {
+        $tag('td.no', { text: i + 1 }),
+        $tag('td.handle', {
           html: `<img class="avatar" src="${user.avatar}"> ` + 
                 `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>`
         }),
-        $tag('td', { text: user.count })
+        $tag('td.count', { text: user.count })
       );
 
       tableBody.append(tr);

style.css

···
 
 #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
   border: 1px solid #333;
-  padding: 5px 8px;
 }
 
 #posting_stats_page .scan-result td {
   text-align: right;
+  padding: 5px 8px;
 }
 
 #posting_stats_page .scan-result th {
···
   vertical-align: middle;
 }
 
+#like_stats_page input[type="submit"] {
+  font-size: 12pt;
+  margin: 5px 0px;
+  padding: 5px 10px;
+}
+
 #like_stats_page progress {
   width: 300px;
   margin-left: 10px;
···
   border-collapse: collapse;
   display: none;
   float: left;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+#like_stats_page .given-likes {
   margin-right: 100px;
 }
 
 #like_stats_page .scan-result td, #like_stats_page .scan-result th {
   border: 1px solid #333;
-  padding: 5px 8px;
+  padding: 5px 10px;
 }
 
 #like_stats_page .scan-result th {
   text-align: center;
   background-color: hsl(207, 100%, 86%);
-  padding: 7px 10px;
+  padding: 12px 10px;
+}
+
+#like_stats_page .scan-result td.no {
+  font-weight: bold;
+  text-align: right;
+}
+
+#like_stats_page .scan-result td.handle {
+  width: 280px;
+}
+
+#like_stats_page .scan-result td.count {
+  padding: 5px 15px;
 }
 
 #like_stats_page .scan-result .avatar {
···
 
   #posting_stats_page .scan-result tr.total td {
     background-color: hsla(207, 90%, 25%, 0.4);
+  }
+
+  #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
+    border-color: #888;
+  }
+
+  #like_stats_page .scan-result th {
+    background-color: hsl(207, 90%, 25%);
   }
 }