Fixes spacing issues in text-based browsers

Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-23 20:49:03 -04:00 · 2020-03-23 20:49:03 -04:00 · fa874e8f4f
parent 519fc499ac
commit fa874e8f4f
3 changed files with 124 additions and 94 deletions
--- a/src/assets/style.css
+++ b/src/assets/style.css
@ -109,6 +109,7 @@ h6 {
 ul,
 ol {
  padding-left: var(--whole);
+  margin-left: var(--nano);
 }

 a {
@ -124,13 +125,22 @@ button {
  border-radius: var(--common-radius);
 }

-section > footer > a,
-section > footer > form > button {
+section header a {
+  display: flex;
+  color: var(--fg-status);
+  text-decoration: none;
+  font-weight: bold;
+  margin-right: var(--micro);
+  margin-left: var(--micro);
+}
+
+section > footer > div > a,
+section > footer > div > form > button {
  color: var(--fg-status);
  font-weight: bold;
 }

-section > footer > form > button {
+section > footer > div > form > button {
  display: inline-block;
  border: 0;
  background: transparent;
@ -240,6 +250,11 @@ section video {
  box-sizing: border-box;
 }

+section > h1 {
+  margin-top: 0;
+  padding-top: 0;
+}
+
 .profile > img,
 .profile > h1 {
  display: inline-block;
@ -278,11 +293,6 @@ section audio {
  width: 100%;
 }

-section > :first-child {
-  margin-top: 0;
-  padding-top: 0;
-}
-
 .content > :last-child {
  margin-bottom: 0;
 }
@ -305,15 +315,6 @@ nav {
  margin: var(--whole) 0;
 }

-section header a {
-  display: flex;
-  color: var(--fg-status);
-  text-decoration: none;
-  font-weight: bold;
-  margin-right: var(--micro);
-  margin-left: var(--micro);
-}
-
 nav > ul > li > a {
  color: var(--fg);
  text-decoration: none;
@ -336,10 +337,16 @@ section {

 section > header {
  height: var(--line);
-  display: flex;
-  margin-bottom: var(--whole);
-  justify-content: space-between;
+  background: var(--bg);
+  padding-bottom: 10px;
  color: var(--fg-status);
+  margin-top: -10px;
+  padding-top: 10px;
+}
+
+section > header > div {
+  display: flex;
+  justify-content: space-between;
 }

 section header a > .avatar {
@ -349,10 +356,9 @@ section header a > .avatar {
  margin-right: var(--micro);
 }

-section header span {
-  display: flex;
+section header .author {
+  display: inline-flex;
 }
-
 section header .author > a:first-child {
  margin-left: 0;
  color: var(--fg-light);
@ -384,17 +390,24 @@ section > .centered-footer {
 }

 section > footer {
-  display: flex;
-  justify-content: space-between;
  margin-top: var(--whole);
  color: var(--fg-status);
 }

-section > footer > * {
+section > footer br {
+  display: none;
+}
+
+section > footer > div {
+  display: flex;
+  justify-content: space-between;
+}
+
+section > footer > div > * {
  text-decoration: none;
 }

-section > footer > form > button.liked {
+section > footer > div > form > button.liked {
  color: var(--red);
 }

@ -417,7 +430,6 @@ nav > ul > li {
 }

 .profile {
-  margin-top: var(--whole);
  display: flex;
  margin-bottom: var(--whole);
 }
@ -437,7 +449,7 @@ progress {
 /* content warning! */
 summary {
  padding: var(--milli);
-  margin: 0;
+  margin-top: var(--whole);
  cursor: pointer;
  border: var(--pico) solid var(--bg-selection);
 }
--- a/src/views/i18n.js
+++ b/src/views/i18n.js
@ -151,11 +151,11 @@ module.exports = {
    searchLabel: "Add word(s) to look for in downloaded messages.",
    // posts and comments
    commentDescription: ({ parentUrl }) => [
-      "commented on ",
+      " commented on ",
      a({ href: parentUrl }, " thread")
    ],
    replyDescription: ({ parentUrl }) => [
-      "replied to ",
+      " replied to ",
      a({ href: parentUrl }, " message")
    ],
    mysteryDescription: "posted a mysterious message",
@ -322,11 +322,11 @@ module.exports = {
      "Buscá las siguientes palabras por los mensajes que tenés descargados.",
    // posts and comments
    commentDescription: ({ parentUrl }) => [
-      "comentado en el hilo ",
+      " comentado en el hilo ",
      a({ href: parentUrl }, "")
    ],
    replyDescription: ({ parentUrl }) => [
-      "respondido al mensaje ",
+      " respondido al mensaje ",
      a({ href: parentUrl }, "")
    ],
    mysteryDescription: "publicó un mensaje misterioso",
@ -490,11 +490,11 @@ module.exports = {
      "Füge Wörte hinzu nach denen in heruntergeladenen Nachrichten gesucht werden soll.",
    // posts and comments
    commentDescription: ({ parentUrl }) => [
-      "kommentierte auf ",
+      " kommentierte auf ",
      a({ href: parentUrl }, " Thread")
    ],
    replyDescription: ({ parentUrl }) => [
-      "antwortete auf ",
+      " antwortete auf ",
      a({ href: parentUrl }, " Nachricht")
    ],
    mysteryDescription: "veröffentlichte eine mysteriöse Nachricht",
--- a/src/views/index.js
+++ b/src/views/index.js
@ -8,6 +8,7 @@ const MarkdownIt = require("markdown-it");
 const {
  a,
  article,
+  br,
  body,
  button,
  details,
@ -220,38 +221,45 @@ const postInAside = msg => {
      class: messageClasses.join(" ")
    },
    header(
-      span(
-        { class: "author" },
-        a(
-          { href: url.author },
-          img({ class: "avatar", src: url.avatar, alt: "" }),
-          msg.value.meta.author.name
+      div(
+        span(
+          { class: "author" },
+          a(
+            { href: url.author },
+            img({ class: "avatar", src: url.avatar, alt: "" }),
+            msg.value.meta.author.name
+          ),
+          postOptions[msg.value.meta.postType]
        ),
-        postOptions[msg.value.meta.postType]
-      ),
-      span(
-        { class: "time" },
-        isPrivate ? "🔒" : null,
-        a({ href: url.link }, timeAgo)
+        span(
+          { class: "time" },
+          isPrivate ? "🔒" : null,
+          a({ href: url.link }, nbsp, timeAgo)
+        )
      )
    ),
    articleContent,
    footer(
-      form(
-        { action: url.likeForm, method: "post" },
-        button(
-          {
-            name: "voteValue",
-            type: "submit",
-            value: likeButton.value,
-            class: likeButton.class
-          },
-          `❤ ${likeCount}`
-        )
+      div(
+        form(
+          { action: url.likeForm, method: "post" },
+          button(
+            {
+              name: "voteValue",
+              type: "submit",
+              value: likeButton.value,
+              class: likeButton.class
+            },
+            `❤ ${likeCount}`
+          )
+        ),
+        a({ href: url.comment }, i18n.comment),
+        isPrivate || isRoot || isFork
+          ? null
+          : a({ href: url.reply }, nbsp, i18n.reply),
+        a({ href: url.json }, nbsp, i18n.json)
      ),
-      a({ href: url.comment }, i18n.comment),
-      isPrivate || isRoot || isFork ? null : a({ href: url.reply }, i18n.reply),
-      a({ href: url.json }, i18n.json)
+      br()
    )
  );
 };
@ -418,19 +426,21 @@ const post = ({ msg, aside = false }) => {
      style: `margin-left: ${depth}rem;`
    },
    header(
-      span(
-        { class: "author" },
-        a(
-          { href: url.author },
-          img({ class: "avatar", src: url.avatar, alt: "" }),
-          name
+      div(
+        span(
+          { class: "author" },
+          a(
+            { href: url.author },
+            img({ class: "avatar", src: url.avatar, alt: "" }),
+            name
+          ),
+          postOptions[msg.value.meta.postType]
        ),
-        postOptions[msg.value.meta.postType]
-      ),
-      span(
-        { class: "time" },
-        isPrivate ? "🔒" : null,
-        a({ href: url.link }, timeAgo)
+        span(
+          { class: "time" },
+          isPrivate ? "🔒" : null,
+          a({ href: url.link }, nbsp, timeAgo)
+        )
      )
    ),
    articleContent,
@ -447,21 +457,26 @@ const post = ({ msg, aside = false }) => {
    div({ id: `centered-footer-${encoded.key}`, class: "centered-footer" }),

    footer(
-      form(
-        { action: url.likeForm, method: "post" },
-        button(
-          {
-            name: "voteValue",
-            type: "submit",
-            value: likeButton.value,
-            class: likeButton.class
-          },
-          `❤ ${likeCount}`
-        )
+      div(
+        form(
+          { action: url.likeForm, method: "post" },
+          button(
+            {
+              name: "voteValue",
+              type: "submit",
+              value: likeButton.value,
+              class: likeButton.class
+            },
+            `❤ ${likeCount}`
+          )
+        ),
+        a({ href: url.comment }, i18n.comment),
+        isPrivate || isRoot || isFork
+          ? null
+          : a({ href: url.reply }, nbsp, i18n.reply),
+        a({ href: url.json }, nbsp, i18n.json)
      ),
-      a({ href: url.comment }, i18n.comment),
-      isPrivate || isRoot || isFork ? null : a({ href: url.reply }, i18n.reply),
-      a({ href: url.json }, i18n.json)
+      br()
    )
  );

@ -572,7 +587,7 @@ exports.authorView = ({

  const prefix = section(
    { class: "message" },
-    header(
+    div(
      { class: "profile" },
      img({ class: "avatar", src: avatarUrl }),
      h1(name)
@ -583,12 +598,15 @@ exports.authorView = ({
    }),
    description !== "" ? article({ innerHTML: markdown(description) }) : null,
    footer(
-      a({ href: `/likes/${encodeURIComponent(feedId)}` }, i18n.viewLikes),
-      span(relationshipText),
-      contactForm,
-      relationship === null
-        ? a({ href: `/profile/edit` }, i18n.editProfile)
-        : null
+      div(
+        a({ href: `/likes/${encodeURIComponent(feedId)}` }, i18n.viewLikes),
+        span(nbsp, relationshipText),
+        contactForm,
+        relationship === null
+          ? a({ href: `/profile/edit` }, nbsp, i18n.editProfile)
+          : null
+      ),
+      br()
    )
  );