Frontend UI improvements

assets/css/app.css

@@ -1,3 +0,0 @@
-/* This file is for your main application css. */
-
-@import "./phoenix.css";

assets/css/app.scss

@@ -0,0 +1,5 @@
+/* This file is for your main application css. */
+
+/* @import "./phoenix.css"; */
+@import "./normalize.css";
+@import "./clacks.scss";

assets/css/clacks.scss

@@ -0,0 +1,139 @@
+$sans-serif: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+$serif: "Times New Roman", serif;
+$tint-color: #4b43e0;
+// $link-color: blue;
+$link-color: $tint-color;
+$hr-color: darkgray;
+
+body {
+	font-family: $sans-serif;
+	// always show scrollbar so effective page width doesn't change
+	overflow-y: scroll;
+}
+
+.container {
+	max-width: 720px;
+	margin: 0 auto;
+}
+
+a,
+button.btn-link {
+	background: none;
+	border: none;
+	color: $link-color;
+	text-decoration: none;
+
+	&:hover {
+		cursor: pointer;
+		text-decoration: underline;
+	}
+}
+
+button[type=submit]:not(.btn-link) {
+	font-family: $sans-serif;
+	padding: 0.25rem 2rem;
+	background-color: $tint-color;
+	border: 1px solid darken($tint-color, 20%);
+	color: white;
+
+	&:hover {
+		cursor: pointer;
+		background-color: darken($tint-color, 10%);
+	}
+}
+
+hr {
+	border: 1px solid $hr-color;
+	margin: 0.75rem 0;
+}
+
+input:focus, textarea:focus {
+	outline: none;
+	border: 2px solid $tint-color;
+}
+
+h1, h2, h3 {
+	margin: 0.5rem 0;
+}
+
+header {
+	nav {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		
+		ul {
+			display: flex;
+			padding: 0;
+
+			li {
+				display: inline;
+				list-style: none;
+			}
+		}
+	}
+}
+
+ul.status-list {
+	padding: 0;
+	margin: 0;
+	
+	li {
+		list-style: none;
+		margin-bottom: 1rem;
+	}
+}
+
+.status {
+	padding: 0.5rem;
+	border: 1px solid #ddd;
+	background-color: #f2f2f2;
+
+	.status-meta {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		
+		.status-author-nickname,
+		.status-author-username,
+		.status-meta-right {
+			display: inline;
+			margin: 0;
+			margin-right: 1rem;
+			font-size: 1rem;
+		}
+
+		.status-author-username {
+			font-weight: normal;
+		}
+
+		.status-meta-right {
+			flex-grow: 1;
+			text-align: right;
+		}
+	}
+
+	.status-content {
+		font-family: $serif;
+		font-size: 1.2rem;
+		margin: 1rem 0;
+
+		a {
+			text-decoration: underline;
+		}
+	}
+}
+
+.compose-status {
+	textarea {
+		display: block;
+		min-width: 100%;
+		max-width: 100%;
+		min-height: 4rem;
+		margin-bottom: 0.75rem;
+		padding: 0.5rem;
+
+		// we want 100% width to include the border
+		box-sizing: border-box;
+	}
+}

assets/css/normalize.css

@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import css from "../css/app.css"
+import css from "../css/app.scss"
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured

assets/package-lock.json

@@ -2779,6 +2779,17 @@
       "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "clone-response": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
@@ -9332,6 +9343,36 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.3.tgz",
+      "integrity": "sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
+      "integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.0.1",
+        "neo-async": "^2.5.0",
+        "pify": "^4.0.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9412,6 +9453,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

assets/package.json

@@ -19,6 +19,8 @@
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "webpack": "4.4.0",
-    "webpack-cli": "^2.0.10"
+    "webpack-cli": "^2.0.10",
+    "sass": "^1.26.3",
+    "sass-loader": "^7.3.1"
   }
 }

assets/webpack.config.js

@@ -29,8 +29,8 @@ module.exports = (env, options) => ({
         }
       },
       {
-        test: /\.css$/,
+        test: /\.scss$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
       }
     ]
   },

lib/clacks_web/controllers/frontend_controller.ex

@@ -55,7 +55,7 @@ defmodule ClacksWeb.FrontendController do
                "type" => "Create",
                "object" => %{"type" => "Note", "attributedTo" => author_id} = note
              } = data
-         } <- Activity.get(id),
+         } = activity <- Activity.get(id),
          %Actor{} = author <- Actor.get_by_ap_id(author_id) do
       case conn.assigns[:format] do
         "activity+json" ->
@@ -64,7 +64,7 @@ defmodule ClacksWeb.FrontendController do
         "html" ->
           render(conn, "status.html", %{
             current_user: current_user,
-            note: note,
+            status: activity,
             author: author
           })
       end
@@ -99,13 +99,13 @@ defmodule ClacksWeb.FrontendController do
     with %Activity{
            data: %{
              "type" => "Create",
-             "object" => %{"type" => "Note", "attributedTo" => author_id} = note
+             "object" => %{"type" => "Note", "attributedTo" => author_id}
            }
-         } <- Activity.get(id),
+         } = activity <- Activity.get(id),
          %Actor{} = author <- Actor.get_by_ap_id(author_id) do
-      render(conn, "reply.html", %{
+      render(conn, "status.html", %{
         current_user: current_user,
-        note: note,
+        status: activity,
         author: author
       })
     else

lib/clacks_web/router.ex

@@ -58,6 +58,8 @@ defmodule ClacksWeb.Router do
     pipe_through :browser_authenticated
 
     post "/post", FrontendController, :post_status
+
+    get "/status/:id/reply", FrontendController, :reply
   end
 
   scope "/", ClacksWeb do

lib/clacks_web/templates/frontend/_status.html.eex

@@ -1,16 +1,24 @@
 <div class="status">
-  <h2>
+  <div class="status-meta">
-    <a href="<%= @author.ap_id %>">
+    <h2 class="status-author-nickname">
-      <%= @author.data["preferredUsername"] %>
+      <a href="<%= @author.ap_id %>">
-    </a>
+        <%= @author.data["preferredUsername"] %>
-  </h2>
+      </a>
-  <h3>
+    </h2>
-    <a href="<%= @author.ap_id %>">
+    <h3 class="status-author-username">
-      <%= @author.data["name"] %>
+      <a href="<%= @author.ap_id %>">
-    </a>
+        <%= display_username(@author) %>
-  </h3>
+      </a>
-  <a href="<%= @note["url"] %>">Permalink</a>
+    </h3>
+    <p class="status-meta-right">
+      <span><%= display_timestamp(@note["published"]) %></span>
+      <a href="<%= @note["url"] %>" class="status-permalink">Permalink</a>
+    </p>
+  </div>
   <div class="status-content">
     <%= @note["content"] %>
   </div>
+  <div class="status-actions">
+    <a href="<%= Routes.frontend_path(@conn, :reply, @status.id) %>">Reply</a>
+  </div>
 </div>

lib/clacks_web/templates/frontend/_timeline.html.eex

@@ -1,7 +1,7 @@
-<ul>
+<ul class="status-list">
   <%= for {status, author} <- @statuses_with_authors do %>
     <li>
-      <%= render "_status.html", author: author, note: status.data["object"] %>
+      <%= render "_status.html", conn: @conn, author: author, status: status, note: status.data["object"] %>
     </li>
   <% end %>
 </ul>

lib/clacks_web/templates/frontend/home.html.eex

@@ -1,11 +1,9 @@
 <h1>Home</h1>
-<p>
-Logged in as <a href="<%= Routes.actor_path(@conn, :get, @user.username) %>"><%= @user.username %></a>
-</p>
 
-<%= form_tag Routes.frontend_path(@conn, :post_status), method: :post do %>
+<%= form_tag Routes.frontend_path(@conn, :post_status), method: :post, class: "compose-status" do %>
-  <textarea id="content" name="content" cols="30" rows="10"></textarea>
+  <textarea id="content" name="content" rows="5" placeholder="What's up?" required></textarea>
   <%= submit "Post" %>
+  <hr>
 <% end %>
 
-<%= render "_timeline.html", statuses_with_authors: @statuses_with_authors %>
+<%= render "_timeline.html", conn: @conn, statuses_with_authors: @statuses_with_authors %>

lib/clacks_web/templates/frontend/profile.html.eex

@@ -2,4 +2,4 @@
 <h2>@<%= @actor.data["name"] %></h2>
 <p><%= @actor.data["summary"] %></p>
 
-<%= render "_timeline.html", statuses_with_authors: Enum.map(@statuses, &({&1, @actor})) %>
+<%= render "_timeline.html", conn: @conn, statuses_with_authors: Enum.map(@statuses, &({&1, @actor})) %>

lib/clacks_web/templates/frontend/status.html.eex

@@ -1,9 +1,10 @@
-<%= render "_status.html", author: @author, note: @note %>
+<%= render "_status.html", conn: @conn, author: @author, status: @status, note: @status.data["object"] %>
 
 <hr>
 
-<%= form_tag Routes.frontend_path(@conn, :post_status), method: :post do %>
+<%= form_tag Routes.frontend_path(@conn, :post_status), method: :post, class: "compose-status" do %>
-  <input type="hidden" name="in_reply_to" value="<%= @note["id"] %>">
+  <input type="hidden" name="in_reply_to" value="<%= @status.data["object"]["id"] %>">
-  <textarea id="content" name="content" cols="30" rows="10" placeholder="Reply"></textarea>
+  <textarea id="content" name="content" rows="5" placeholder="Reply" required></textarea>
   <%= submit "Post" %>
+  <hr>
 <% end %>

lib/clacks_web/templates/layout/app.html.eex

@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title><%= assigns[:page_title] || "Clacks" %></title>
+    <title><%= assigns[:page_title] || instance_name() %></title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
   </head>
   <body>
@@ -15,15 +15,20 @@
             <li><a href="/"><%= instance_name() %></a></li>
           </ul>
           <ul>
-            <li>
+            <%= if @conn.assigns[:user] do %>
-              <%= if @conn.assigns[:user] do %>
+              <li>
+                Logged in as <a href="<%= Routes.actor_path(@conn, :get, @conn.assigns[:user].username) %>"><%= @conn.assigns[:user].username %></a>.
+              </li>
+              <li>
                 <%= form_for @conn, Routes.login_path(@conn, :logout), [method: :post], fn f -> %>
                   <%= submit "Log Out", class: "btn-link" %>
                 <% end %>
-              <% else %>
+              </li>
+            <% else %>
+              <li>
                 <a href="<%= login_path(@conn) %>">Log In</a>
-              <% end %>
+              </li>
-            </li>
+            <% end %>
           </ul>
         </nav>
       </section>

lib/clacks_web/views/frontend_view.ex

@@ -1,3 +1,46 @@
 defmodule ClacksWeb.FrontendView do
   use ClacksWeb, :view
+  alias Clacks.Actor
+
+  @spec display_username(actor :: Actor.t()) :: String.t()
+
+  def display_username(%Actor{local: true, data: %{"name" => name}}) do
+    "@" <> name
+  end
+
+  def display_username(%Actor{local: false, ap_id: ap_id, data: %{"name" => name}}) do
+    %URI{host: host} = URI.parse(ap_id)
+    "@" <> name <> "@" <> host
+  end
+
+  @absolute_timestamp_threshold 24 * 60 * 60
+
+  def display_timestamp(str) when is_binary(str) do
+    display_timestamp(Timex.parse!(str, "{ISO:Extended}"))
+  end
+
+  def display_timestamp(datetime) do
+    diff = Timex.diff(Timex.now(), datetime, :seconds)
+
+    cond do
+      diff < 60 ->
+        # less than a minute, seconds
+        "#{diff}sec"
+
+      diff < 60 * 60 ->
+        # less than an hour, minutes
+        "#{Integer.floor_div(diff, 60)}min"
+
+      diff < 60 * 60 * 24 ->
+        # less than a day, hours
+        "#{Integer.floor_div(diff, 60 * 60)}hr"
+
+      diff < 60 * 60 * 24 * 7 ->
+        # less than a week, days
+        "#{Integer.floor_div(diff, 60 * 60 * 24)}d"
+
+      true ->
+        Timex.format!(datetime, "%FT%T%:z", :strftime)
+    end
+  end
 end