pleroma

commit: ad7a7cd24fa665784c122bc26183a0091b64bb73
parent 58436392ddedb71debf58ae413ba86e384f4612c
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sun, 16 Feb 2020 05:06:27 +0100

StaticFE: Change styling & formatting

Diffstat:
M
lib/pleroma/web/static_fe/static_fe_view.ex
6
------
M
lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
5
++---
A
priv/static/static/static-fe.css
181
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 183 insertions(+), 9 deletions(-)
diff --git a/lib/pleroma/web/static_fe/static_fe_view.ex b/lib/pleroma/web/static_fe/static_fe_view.ex
@@ -5,7 +5,6 @@
 defmodule Pleroma.Web.StaticFE.StaticFEView do
   use Pleroma.Web, :view
 
-  alias Calendar.Strftime
   alias Pleroma.Emoji.Formatter
   alias Pleroma.User
   alias Pleroma.Web.Endpoint
@@ -22,11 +21,6 @@ defmodule Pleroma.Web.StaticFE.StaticFEView do
     Utils.fetch_media_type(@media_types, mediaType)
   end
 
-  def format_date(date) do
-    {:ok, date, _} = DateTime.from_iso8601(date)
-    Strftime.strftime!(date, "%Y/%m/%d %l:%M:%S %p UTC")
-  end
-
   def instance_name, do: Pleroma.Config.get([:instance, :name], "Pleroma")
 
   def open_content? do
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex
@@ -20,11 +20,10 @@
     <% end %>
     <p id="pagination">
       <%= if @prev_page_id do %>
-        <%= link "«", to: "?min_id=" <> @prev_page_id %>
+        <%= link "Previous page", to: "?min_id=" <> @prev_page_id %>
       <% end %>
-      <%= if @prev_page_id && @next_page_id, do: " | " %>
       <%= if @next_page_id do %>
-        <%= link "»", to: "?max_id=" <> @next_page_id %>
+        <%= link "Next page", to: "?max_id=" <> @next_page_id %>
       <% end %>
     </p>
   </div>
diff --git a/priv/static/static/static-fe.css b/priv/static/static/static-fe.css
@@ -0,0 +1,181 @@
+body {
+    background-color: #282c37;
+    font-family: sans-serif;
+    color: white;
+}
+
+main {
+    margin: 2ch auto;
+    max-width: 80em;
+    padding: 2ch 2em;
+    background-color: #313543;
+    border-radius: 4pt;
+}
+
+header {
+    margin: 2ch auto;
+    max-width: 80em;
+    padding: 2ch 2em;
+    background-color: #313543;
+    border-radius: 4pt;
+}
+
+.activity {
+    border-radius: 4px;
+    padding: 1ch 1em;
+}
+
+.avatar {
+    cursor: pointer;
+}
+
+.avatar img {
+    float: left;
+    border-radius: 4px;
+    margin-right: 4px;
+}
+
+.activity-content img,
+.activity-content video,
+.activity-content audio {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    max-width: 90vw;
+    max-height: 90vh;
+    margin: 0 auto;
+    display: block;
+}
+
+#selected {
+    background-color: #1b2735;
+}
+
+.counts dt, .counts dd {
+    float: left;
+    margin-left: 1em;
+}
+
+.h-card {
+    min-height: 48px;
+    margin-bottom: 8px;
+}
+
+a {
+    text-decoration: none;
+    color: #d8a070;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.display-name {
+    padding-top: 4px;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: white;
+}
+
+/* keep emoji from being hilariously huge */
+.display-name img {
+    max-height: 1em;
+}
+
+.display-name .nickname {
+    padding-top: 4px;
+    display: block;
+}
+
+.nickname:hover {
+    text-decoration: none;
+}
+
+.pull-right {
+    float: right;
+}
+
+.collapse {
+    margin: 0;
+    width: auto;
+}
+
+h1 {
+    margin: 0;
+}
+
+h2 {
+    color: #9baec8;
+    font-weight: normal;
+    margin-bottom: 2ch;
+}
+
+form {
+    width: 100%;
+}
+
+input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
+    margin-top: 20px;
+    border: 0;
+    border-bottom: 2px solid #9baec8;
+    font-size: 14px;
+}
+
+input:focus {
+    border-bottom: 2px solid #4b8ed8;
+}
+
+input[type="checkbox"] {
+    width: auto;
+}
+
+button {
+    box-sizing: border-box;
+    width: 100%;
+    color: white;
+    background-color: #d8a070;
+    border-radius: 4px;
+    border: none;
+    padding: 10px;
+    margin-top: 30px;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.alert-danger {
+    box-sizing: border-box;
+    width: 100%;
+    color: #D8000C;
+    background-color: #FFD2D2;
+    border-radius: 4px;
+    border: none;
+    padding: 10px;
+    margin-top: 20px;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.alert-info {
+    box-sizing: border-box;
+    width: 100%;
+    color: #00529B;
+    background-color: #BDE5F8;
+    border-radius: 4px;
+    border: none;
+    padding: 10px;
+    margin-top: 20px;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+img.emoji {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  vertical-align: middle;
+}