From 453414705019ddc62ba2dd649197e759fea25b4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 22 Oct 2024 11:27:58 +0200
Subject: [PATCH] Improve open-with dropdown

---
 assets/css/layout.css               | 49 ++++++++++++++++++++++++-----
 assets/css/themes/default-light.css |  5 +++
 html.ts                             | 15 ++++-----
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/assets/css/layout.css b/assets/css/layout.css
index 5a278be..b5d032c 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -1,7 +1,11 @@
 @import url("/assets/css/fonts/merriweather.css");
 
+html {
+  font-size: 16px;
+}
+
 body {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-family: "Merriweather", serif;
 }
 
@@ -10,14 +14,14 @@ img {
 }
 
 img.avatar {
-  height: 48px;
-  width: 48px;
+  height: 3rem;
+  width: 3rem;
   border-radius: 50%;
 }
 
 .profile-page img.avatar {
-  height: 128px;
-  width: 128px;
+  height: 8rem;
+  width: 8rem;
 }
 
 h1 {
@@ -51,7 +55,7 @@ pre code {
 
 main {
   display: block;
-  max-width: 728px;
+  max-width: 44rem;
   margin: 12rem auto 24rem auto;
 }
 
@@ -111,10 +115,11 @@ main article footer {
 .dropdown-content {
   display: none;
   position: absolute;
-  min-width: 160px;
+  min-width: 12rem;
   border-radius: 5px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
+  font-size: 1rem;
 }
 
 .dropdown-content a {
@@ -123,6 +128,36 @@ main article footer {
   display: block;
 }
 
+.dropdown-content h4.title {
+  font-size: 0.875rem;
+  margin: 0;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid;
+}
+
 .dropdown:hover .dropdown-content {
   display: block;
 }
+
+@media (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+
+  main {
+    max-width: 100%;
+    margin: 4rem 1rem 8rem 1rem;
+  }
+
+  .dropdown-content {
+    bottom: 100%;
+  }
+
+  .dropdown-content a {
+    padding: 0.8rem 1.2rem;
+  }
+
+  .dropdown-content h4.title {
+    padding: 0.8rem 1.2rem;
+  }
+}
diff --git a/assets/css/themes/default-light.css b/assets/css/themes/default-light.css
index 7cbb4ba..de7f22d 100644
--- a/assets/css/themes/default-light.css
+++ b/assets/css/themes/default-light.css
@@ -53,6 +53,11 @@ main header .meta .name a {
   background-color: #f1f1f1;
 }
 
+.dropdown-content h4.title {
+  color: #888;
+  border-color: #f1f1f1;
+}
+
 .dropdown:hover .dropdown-button {
   background-color: #fff;
   border-color: #fff;
diff --git a/html.ts b/html.ts
index 000348d..30791d0 100644
--- a/html.ts
+++ b/html.ts
@@ -98,26 +98,27 @@ export function profilePageHtml(profile: Profile, articles: Article[]): string {
 }
 
 function openWithNostrAppHtml(bech32Id): string {
-  let linksHtml = "";
-  const links = [
-    { title: "Nostr Link", href: `nostr:${bech32Id}` },
+  let appLinksHtml = "";
+  const appLinks = [
     { title: "Habla", href: `https://habla.news/a/${bech32Id}` },
     {
       title: "noStrudel",
       href: `https://nostrudel.ninja/#/articles/${bech32Id}`,
     },
-    { title: "Coracle", href: `https://coracle.social/${bech32Id}` }
+    { title: "Coracle", href: `https://coracle.social/${bech32Id}` },
   ];
 
-  for (const link of links) {
-    linksHtml += `<a href="${link.href}" target="_blank">${link.title}</a>`;
+  for (const link of appLinks) {
+    appLinksHtml += `<a href="${link.href}" target="_blank">${link.title}</a>`;
   }
 
   return `
     <div class="open-with dropdown">
       <button class="dropdown-button">Open with Nostr app</button>
       <div class="dropdown-content">
-        ${linksHtml}
+        <a href="nostr:${bech32Id}" target="_blank">🔗&nbsp; Nostr Link</a>
+        <h4 class="title">Apps</h4>
+        ${appLinksHtml}
       </div>
     </div>
   `;