commit: 5ec18ec65d4aa28d828e0673ffd03bc28ba55677
parent 76be59f971062b2d71919659d608afea6270c63d
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Sun, 16 Feb 2020 05:06:27 +0100
StaticFE: Change styling & formatting
Diffstat:
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;
+}