retog · nleanba · Feb 19, 2022 · Feb 19, 2022
diff --git a/tricerascuttler/static/access/index.html b/tricerascuttler/static/access/index.html
@@ -11,11 +11,7 @@
         import ClientHostProvider from "./js/ClientHostProvider.js"
         window.scuttlebuttHost = new ClientHostProvider().getScuttlebuttHost();
     </script>
-    <style>
-        body {
-            margin: 0;
-        }
-    </style>
+    <link rel="stylesheet" href="/reset.css">
 </head>
 
 <body>

diff --git a/tricerascuttler/static/common/js/FeedAuthorLinkElement.js b/tricerascuttler/static/common/js/FeedAuthorLinkElement.js
@@ -9,29 +9,51 @@ export class FeedAuthorLinkElement extends HTMLElement {
     getDescription(feedUri).then(
       ({ name, description, image }) => {
         this.shadowRoot.innerHTML = `
+      <link rel="stylesheet" href="/reset.css">
       <style>
         :host {
-          justify-content: right;
         }
 
         a {
-          text-decoration: none;
-          color: inherit;
+          display: grid;
+          gap: 0.2rem;
+          grid-template-columns: ${showImage ? "2.4rem 1fr" : "1fr"};
+          grid-template-rows: 1.2rem 1rem;
+          padding: 0.2rem;
         }
 
-        img {
-          max-width: 40px;
-          max-height: 40px;
+        .name {
+          font-size: 1rem;
+          line-height: 1.2rem;
+        }
+
+        .uri {
+          color: gray;
+          font-size: 0.8rem;
+          line-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        img,
+        svg {
+          border-radius: 0.4rem;
+          grid-area: 1 / 1 / 3 / 2;
+          max-width: 100%;
+          max-height: 100%;
         }
       </style>
 
       <a href="/?uri=${feedUri}">
         ${
           showImage && image
             ? `<img src="${image.replace("ssb:blob/", "./blob/")}">`
-            : ""
+            : '<svg viewBox="0 0 24 24"><path fill="gray" d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></svg>'
         }
-        <div>${name ? name : feedUri.substring(0, 23) + "..."}</div></a>
+        <div class="name">${name || ""}</div>
+        <div class="uri">${feedUri}</div>
+      </a>
     `;
       },
     );

diff --git a/tricerascuttler/static/common/js/PostElement.js b/tricerascuttler/static/common/js/PostElement.js
@@ -37,73 +37,85 @@ export class PostElement extends HTMLElement {
       const text = bindings[0].text?.value;
       const timestamp = new Date(parseInt(bindings[0].timestamp?.value));
       this.shadowRoot.innerHTML = `
+        <link rel="stylesheet" href="./reset.css">
         <style>
+        :host {
+          border: 1px solid gray;
+          border-radius: 0.6rem;
+          display: block;
+        }
+
         img {
+          display: block;
           max-width: 100%;
         }
-        :host {
+
+        ssb-feed-author-link {
           display: block;
-          border-style: solid;
-          margin: 5pt;
-          padding: 5pt;
         }
-        #permalink {
-          text-decoration: none;
-          float: right;
-          height: 100%;
-          margin-top: 5px;
-          margin-right: 5px;
-          color: #232c3d;
-          font-size: 14px;
+
+        .content {
+          border-top: 1px solid #eeeeee;
+          font-size: 1.2rem;
+          line-height: 1.4rem;
+          padding: 0.4rem 0.4rem 0.4rem 2.8rem;
+        }
+
+        .content a {
+          color: darkblue;
         }
 
-        ssb-feed-author-link {
-          float: right;
-          background-color: white;
-          border-bottom-left-radius: 10px;
-          padding: 5px;
-          box-shadow: -9px 7px 8px rgba(139, 138, 138, 0.1);
+        .meta {
+          border-top: 1px solid #eeeeee;
+          color: darkgrey;
+          font-size: 0.8rem;
+          padding: 0.2rem 0.2rem 0.2rem 2.8rem;
+        }
+
+        .content:empty,
+        .meta:empty {
+          display: none;
         }
 
         #actions {
-          width: 100%;
-          margin-top: 8px;
-          background-color: #bccbe9;
+          border-top: 1px solid #eeeeee;
+          display: flex;
+          gap: 0.2rem;
+          padding-left: 2.8rem;
         }
 
-        #actions button {
-          letter-spacing: 3px;
-          border: none;
-          padding: 5px;
-          background-color: #bccbe9;
-          color: #232c3d;
-          font-size: 14px;
+        #actions > * {
           cursor: pointer;
-          transition: 0.5s;
-          box-shadow: 0px 5px 15px rgba(0, 0, 0, .2);
+          font-size: 0.8rem;
+          padding: 0.2rem;
+        }
+
+        #actions > *:hover {
+          background-color: #eeeeee;
         }
       </style>
       <ssb-feed-author-link feed="${
         bindings[0].author.value
       }" image ></ssb-feed-author-link>
-            ${mdToHtml(text ?? "")}<br>
-            <time datetime="${timestamp.toString()}">${timestamp.toLocaleString()}</time><br>
-
-        ${
+      <div class="content">${mdToHtml(text ?? "")}</div>
+      <div class="meta">
+        <time datetime="${timestamp.toString()}">${timestamp.toLocaleString()}</time>
+      </div>
+      <div class="meta">${
         bindings[0].root
-          ? `In reply to <ssb-post-link href="${
-            bindings[0].root.value
-          }"></ssb-post-link><br>`
-          : ""
-      }
-        ${
-        bindings[0].replies.value.split(",").filter((s) => s != "").map(
-          (reply) =>
-            `Reply: <ssb-post-link href="${reply}"></ssb-post-link><br>`,
-        ).join("")
-      }
+        ? `In reply to <ssb-post-link href="${
+          bindings[0].root.value
+        }"></ssb-post-link>`
+        : ""
+      }</div>
+      <div class="meta">${
+          bindings[0].replies.value.split(",").filter((s) => s != "").map(
+            (reply) =>
+              `Reply: <ssb-post-link href="${reply}"></ssb-post-link><br>`,
+          ).join("")
+        }</div>
         <div id="actions">
-          <a id="permalink" href="/?uri=${this.msgUri}">🔗</a>
+          <a id="permalink" href="/?uri=${this.msgUri}">Permalink</a>
         </div>`;
       const actionsArea = this.shadowRoot.getElementById("actions");
       actionsArea.append(await this.createLikeUnlikeButton());

diff --git a/tricerascuttler/static/common/js/PostListElement.js b/tricerascuttler/static/common/js/PostListElement.js
@@ -10,9 +10,11 @@ export class PostListElement extends HTMLElement {
     this.loadSize = parseInt(this.getAttribute("loadSize") ?? 20);
     this.styleElem = document.createElement("style");
     this.styleElem.innerHTML = `
-    .post {
-      display: block;
-      margin: 5px;
+    .posts {
+      display: grid;
+      gap: 0.4rem;
+      padding: 0.4rem;
+      max-width: 100vw;
     }
     .hideRead .read {
       display: none;

diff --git a/tricerascuttler/static/common/reset.css b/tricerascuttler/static/common/reset.css
@@ -0,0 +1,76 @@
+/***
+    The new CSS reset - version 1.4.9 (last updated 11.2.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+ *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  all: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+ display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly. */
+:where([contenteditable]) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}