commit: 9f82f67e896b11333280acb10b739347ad0828dd
parent: 58628fbd5c4c7866e91b4d47ef4945ee0b931736
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Sun, 16 Feb 2020 05:06:27 +0100
StaticFE: Change styling & formatting
Diffstat:
4 files changed, 27 insertions(+), 36 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
@@ -31,11 +30,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/_notice.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
@@ -1,6 +1,6 @@
<div class="activity" <%= if @selected do %> id="selected" <% end %>>
<p class="pull-right">
- <%= link format_date(@published), to: @link, class: "activity-link" %>
+ <%= link @published, to: @link, class: "activity-link" %>
</p>
<%= render("_user_card.html", %{user: @user}) %>
<div class="activity-content">
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
@@ -5,26 +5,24 @@ body {
}
main {
- margin: 50px auto;
- max-width: 960px;
- padding: 40px;
+ margin: 2ch auto;
+ max-width: 80em;
+ padding: 2ch 2em;
background-color: #313543;
- border-radius: 4px;
+ border-radius: 4pt;
}
header {
- margin: 50px auto;
- max-width: 960px;
- padding: 40px;
+ margin: 2ch auto;
+ max-width: 80em;
+ padding: 2ch 2em;
background-color: #313543;
- border-radius: 4px;
+ border-radius: 4pt;
}
.activity {
border-radius: 4px;
- padding: 1em;
- padding-bottom: 2em;
- margin-bottom: 1em;
+ padding: 1ch 1em;
}
.avatar {
@@ -37,10 +35,16 @@ header {
margin-right: 4px;
}
-.activity-content img, video, audio {
- padding: 1em;
- max-width: 800px;
- max-height: 800px;
+.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 {
@@ -52,20 +56,17 @@ header {
margin-left: 1em;
}
-a {
- color: white;
-}
-
.h-card {
min-height: 48px;
margin-bottom: 8px;
}
-header a, .h-card a {
+a {
text-decoration: none;
+ color: #d8a070;
}
-header a:hover, .h-card a:hover {
+a:hover {
text-decoration: underline;
}
@@ -107,8 +108,7 @@ h1 {
h2 {
color: #9baec8;
font-weight: normal;
- font-size: 20px;
- margin-bottom: 40px;
+ margin-bottom: 2ch;
}
form {
@@ -120,8 +120,6 @@ input {
width: 100%;
padding: 10px;
margin-top: 20px;
- background-color: rgba(0,0,0,.1);
- color: white;
border: 0;
border-bottom: 2px solid #9baec8;
font-size: 14px;
@@ -139,7 +137,7 @@ button {
box-sizing: border-box;
width: 100%;
color: white;
- background-color: #419bdd;
+ background-color: #d8a070;
border-radius: 4px;
border: none;
padding: 10px;