From 851fd758d1d73c3a30c2ff8b142094cc937f94ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@daubenschuetz.de>
Date: Fri, 6 Dec 2024 14:55:38 +0100
Subject: [PATCH] Add tiles

---
 src/public/news.css            | 41 ++++++++++++++++++++++++++++++----
 src/views/components/row.mjs   | 29 +++++++++++++++---------
 src/web/src/ChatBubble.jsx     |  6 +++++
 src/web/src/CommentSection.jsx |  2 +-
 4 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/public/news.css b/src/public/news.css
index 899ab9f8..f67097c0 100644
--- a/src/public/news.css
+++ b/src/public/news.css
@@ -70,13 +70,16 @@
 .bottom-nav > a:active,
 .sidebar-toggle:active,
 .sidebar a:active,
-.comment-preview:active,
 .bell-button:active {
   touch-action: manipulation;
   transform: scale(0.95);
   transition: transform 0.1s ease;
   cursor: pointer;
 }
+.comment-preview:active {
+  touch-action: manipulation;
+  cursor: pointer;
+}
 button, a, .interaction-element {
   touch-action: manipulation;
   user-select: none;
@@ -443,8 +446,11 @@ body {
 }
 /* mobile device */
  @media only screen and (min-width : 300px) and (max-width : 640px) {
+    .mobile-row-image img {
+      border: 2px inset rgba(219, 105, 141,0.3);
+    }
     .content-row {
-      background-color: var(--header-beige);
+      background-color: var(--background-color0);
     }
     .content-row-elevated {
       background-color: var(--middle-beige);
@@ -455,8 +461,35 @@ body {
       position: relative;
       margin: -28px 7px 10px 7px;
       border-radius: 2px;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 4px;
+      border: var(--border);
+      border-top: none;
+      margin-bottom: 0;
+    }
+    .elevating-comment-preview .interaction-element{
+      padding-top: 2px !important;
+      border-top: none !important;
+      margin: 0 7px 5px 7px !important;
+      border-bottom: 4px solid rgba(219, 105, 141, 0.2) !important;
+    }
+    .comment-preview-no-mobile-image .interaction-element{
+      padding-top: 2px !important;
+      border: none !important;
+      margin: 0 !important;
+      border-bottom: none;
+    }
+    .with-comment-preview {
+      border-bottom: none;
+    }
+    .elevating-row.without-comment-preview {
+      border-bottom: 4px solid rgba(219, 105, 141, 0.2) !important;
+    }
+    .elevating-row.without-comment-preview.no-border {
+      border-bottom: none !important;
+    }
+    .content-row:not(.content-row-elevated) {
+      border: var(--border);
+      margin: 0 7px;
+      border-bottom: 4px solid rgba(219, 105, 141, 0.2) !important;
     }
     #hnmain {
       border: none;
diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
index 5cd066cb..24359eca 100644
--- a/src/views/components/row.mjs
+++ b/src/views/components/row.mjs
@@ -264,6 +264,14 @@ const row = (
       (path === "/" || path === "/stories") &&
       !blockedOGImageDomains.includes(extractedDomain) &&
       !knownBadOgImages.includes(story.metadata.image);
+    const displayCommentPreview =
+      story.lastComment &&
+      story.lastComment.identity.safeAvatar &&
+      differenceInHours(
+        new Date(),
+        new Date(story.lastComment.timestamp * 1000),
+      ) < 20 &&
+      !invert;
     return html`
       <tr style="${invert ? "background-color: black;" : ""}">
         <td>
@@ -290,14 +298,17 @@ const row = (
                   >
                     <img
                       loading="lazy"
-                      style="mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,1)); aspect-ratio: 2 / 1; object-fit:cover; width: 100%;"
+                      style="mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.8)); aspect-ratio: 2 / 1; object-fit:cover; margin: 0 7px; border-radius: 2px; width: calc(100% - 18px);"
                       src="${DOMPurify.sanitize(story.metadata.image)}"
                   /></a>`
                 : null
             }
             <div 
-              class="${displayMobileImage ? "elevating-row" : ""}"
-
+              class="${
+                displayCommentPreview
+                  ? "with-comment-preview"
+                  : `without-comment-preview without-comment-preview-0x${story.index}`
+              } ${displayMobileImage ? "elevating-row" : ""}"
               style="display: flex; align-items: center; padding: 3px 0;">
               <div
                 data-title="${DOMPurify.sanitize(story.title)}"
@@ -650,15 +661,11 @@ const row = (
               }
             </div>
             ${
-              story.lastComment &&
-              story.lastComment.identity.safeAvatar &&
-              differenceInHours(
-                new Date(),
-                new Date(story.lastComment.timestamp * 1000),
-              ) < 20 &&
-              !invert
+              displayCommentPreview
                 ? html` <div
-                    class="comment-preview comment-preview-0x${story.index}"
+                    class="comment-preview comment-preview-0x${story.index} ${displayMobileImage
+                      ? "elevating-comment-preview"
+                      : "comment-preview-no-mobile-image"}"
                     style="touch-action: manipulation; user-select: none; cursor: pointer; display: flex;"
                   >
                     <div
diff --git a/src/web/src/ChatBubble.jsx b/src/web/src/ChatBubble.jsx
index 4d514d3e..90af4ec0 100644
--- a/src/web/src/ChatBubble.jsx
+++ b/src/web/src/ChatBubble.jsx
@@ -49,6 +49,12 @@ const ChatBubble = ({ allowlist, delegations, storyIndex, commentCount }) => {
         if (commentPreview) {
           commentPreview.style.opacity = 1;
         }
+        const borderElem = document.querySelector(
+          `.without-comment-preview-${storyIndex}`,
+        );
+        if (borderElem) {
+          borderElem.classList.toggle("no-border");
+        }
       }}
       href={null}
       className={`chat-bubble${isDisabled ? "" : " interaction-element"}`}
diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
index 18541a20..378e6843 100644
--- a/src/web/src/CommentSection.jsx
+++ b/src/web/src/CommentSection.jsx
@@ -162,7 +162,7 @@ const CommentsSection = (props) => {
 
   if (!shown) return;
   return (
-    <div style={{ padding: "5px 5px 0 5px", fontSize: "1rem" }}>
+    <div style={{ padding: "0 7px 0 7px", fontSize: "1rem" }}>
       {comments.length > 0 &&
         comments.map((comment, index) => (
           <Comment