From dedb302933fb186517ae996f165a690e9a8516f9 Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sun, 23 Oct 2022 02:52:32 +0300 Subject: [PATCH 01/24] Add navbar, sidebar and background to static-fe --- .gitattributes | 5 +- lib/pleroma/web/static_fe/static_fe_view.ex | 2 +- .../web/templates/layout/static_fe.html.eex | 26 ++ lib/pleroma/web/views/layout_view.ex | 7 + priv/static/static-fe/static-fe.css | 354 ++++++++++-------- 5 files changed, 233 insertions(+), 161 deletions(-) diff --git a/.gitattributes b/.gitattributes index eb0c94757..7273afe43 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,10 +1,11 @@ *.ex diff=elixir *.exs diff=elixir -priv/static/instance/static.css diff=css - # Most of js/css files included in the repo are minified bundles, # and we don't want to search/diff those as text files. *.js binary *.js.map binary *.css binary + +priv/static/instance/static.css diff=css +priv/static/static-fe/static-fe.css diff=css diff --git a/lib/pleroma/web/static_fe/static_fe_view.ex b/lib/pleroma/web/static_fe/static_fe_view.ex index c04715337..7fa857a3b 100644 --- a/lib/pleroma/web/static_fe/static_fe_view.ex +++ b/lib/pleroma/web/static_fe/static_fe_view.ex @@ -27,7 +27,7 @@ defmodule Pleroma.Web.StaticFE.StaticFEView do Strftime.strftime!(date, "%Y/%m/%d %l:%M:%S %p UTC") end - def instance_name, do: Pleroma.Config.get([:instance, :name], "Pleroma") + def instance_name, do: Pleroma.Config.get([:instance, :name], "Akkoma") def open_content? do Pleroma.Config.get( diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex index e6adb526b..837476838 100644 --- a/lib/pleroma/web/templates/layout/static_fe.html.eex +++ b/lib/pleroma/web/templates/layout/static_fe.html.eex @@ -6,10 +6,36 @@ <%= Pleroma.Config.get([:instance, :name]) %> <%= Phoenix.HTML.raw(assigns[:meta] || "") %> + +
+
<%= @inner_content %> +
+
+
+ <%= gettext("About %{instance}", instance: Pleroma.Config.get([:instance, :name])) %> +
+
+ <%= raw render_html("/static/terms-of-service.html") %> +
+
+
+ + diff --git a/lib/pleroma/web/views/layout_view.ex b/lib/pleroma/web/views/layout_view.ex index c2da10f04..ac13cf962 100644 --- a/lib/pleroma/web/views/layout_view.ex +++ b/lib/pleroma/web/views/layout_view.ex @@ -4,4 +4,11 @@ defmodule Pleroma.Web.LayoutView do use Pleroma.Web, :view + import Phoenix.HTML + + def render_html(file) do + case :httpc.request(Pleroma.Web.Endpoint.url() <> file) do + {:ok, {{_, 200, _}, _headers, body}} -> body + end + end end diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css index 89e9f4877..522eb4ab0 100644 --- a/priv/static/static-fe/static-fe.css +++ b/priv/static/static-fe/static-fe.css @@ -1,59 +1,178 @@ +/* pleroma-light and pleroma-dark themes from pleroma-fe */ +:root { + --panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5) , 0px 4px 6px 3px rgba(0, 0, 0, 0.3); + --panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + --topBar: rgba(21, 30, 43, 1); + --topBarText: rgba(159, 159, 161, 1); + --topBarShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4) , 0px 2px 7px 0px rgba(0, 0, 0, 0.3); + --underlay: rgba(9, 14, 20, 0.6); + --background: rgba(15, 22, 30, 1); + --selectedFaint: rgba(185, 185, 186, 1); + --faint: rgba(185, 185, 186, 0.5); + --selectedPost: rgba(23, 34, 46, 1); + --link: rgba(226, 177, 136, 1); + --text: rgba(185, 185, 186, 1); + --border: rgba(26, 37, 53, 1); + @media (prefers-color-scheme: light) { + + } +} + +html { + height: 100% +} + body { - background-color: #282c37; + margin: 0; + height: 100%; + background-image: var(--background-image); font-family: sans-serif; - color: white; -} - -main { - margin: 50px auto; - max-width: 960px; - padding: 40px; - background-color: #313543; - border-radius: 4px; -} - -header { - margin: 50px auto; - max-width: 960px; - padding: 40px; - background-color: #313543; - border-radius: 4px; -} - -.activity { - border-radius: 4px; - padding: 1em; - padding-bottom: 2em; - margin-bottom: 1em; -} - -.avatar { - cursor: pointer; -} - -.avatar img { - float: left; - border-radius: 4px; - margin-right: 4px; -} - -.activity-content img, video, audio { - padding: 1em; - max-width: 800px; - max-height: 800px; -} - -#selected { - background-color: #1b2735; -} - -.counts dt, .counts dd { - float: left; - margin-left: 1em; + color: var(--text); } a { - color: white; + text-decoration: none; + color: var(--link); +} + +nav { + width: 100%; + height: 3.5em; + background-color: var(--topBar); + box-shadow: var(--topBarShadow); +} + +.inner-nav { + width: 100%; + padding: 0 1.2em; + margin: auto; + max-width: 1110px; +} + +.inner-nav a { + line-height: 3.5em; + color: var(--topBarText); +} + +.inner-nav img { + height: 28px; + vertical-align: middle; + padding-right: 5px +} + +.container { + display: grid; + grid-template-columns: minmax(25em, 45em) 25em; + grid-template-areas: "content sidebar"; + height: calc(100vh - 3.5em); + justify-content: center; +} + +.underlay { + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: 1; + background-color: var(--underlay); + z-index: -1000; +} + +.column { + padding: 1em; + margin: -0.5em; +} + +.panel { + background-color: var(--background); + border-radius: 3px; + box-shadow: var(--panelShadow); +} + +.panel-heading { + background-color: var(--topBar); + font-size: 1.3em; + padding: 0.6em; + border-radius: 3px 3px 0 0; + box-shadow: var(--panelHeaderShadow); +} + +.about-content { + padding: 0.6em; +} + +.main { + grid-area: content; + position: relative; +} + +.sidebar { + grid-area: sidebar; + padding-left: 0.5em; +} + +.status-container { + display: flex; + padding: 0.75em; +} + +.left-side { + margin-right: 0.75em; +} + +.right-side { + flex: 1; +} + +.status-heading { + display: flex; + margin-bottom: 0.5em; + justify-content: space-between; + line-height: 1.3; +} + +.status-heading a { + display: inline-block; + word-break: break-all; +} + +.heading-left { + display: flex; +} + +.account-name { + min-width: 1.6em; + margin-right: 0.4em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 1 0; +} + +.username { + white-space: nowrap; + overflow: hidden; + max-width: 85%; + font-weight: bold; + flex-shrink: 1; + margin: 0; + margin-right: 0.4em; + text-overflow: ellipsis; +} + +#selected { + background-color: var(--selectedPost); +} + +.timeago { + color: var(--faint); +} + +#selected .timeago { + color: var(--selectedFaint); +} + +.timeago :hover { + text-decoration: underline; } .h-card { @@ -69,116 +188,35 @@ header a:hover, .h-card a:hover { text-decoration: underline; } -.display-name { - padding-top: 4px; +.status-actions { + position: relative; + width: 100%; + display: flex; + margin-top: 0.75em; +} +.status-actions > * { + max-width: 4em; + flex: 1 +} + +.status-summary { display: block; - text-overflow: ellipsis; - overflow: hidden; - color: white; + font-style: italic; + padding-bottom: 0.5em; + margin-bottom: 0.5em; + border-style: solid; + border-width: 0 0 1px 0; + border-color: var(--border, #222); } -/* keep emoji from being hilariously huge */ -.display-name img { - max-height: 1em; - max-width: 1em; +summary { + text-align: center; + color: var(--link); + cursor: pointer; } -.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; - font-size: 20px; - margin-bottom: 40px; -} - -form { - width: 100%; -} - -input { - box-sizing: border-box; - 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; -} - -input:focus { - border-bottom: 2px solid #4b8ed8; -} - -input[type="checkbox"] { - width: auto; -} - -button { - box-sizing: border-box; - width: 100%; - color: white; - background-color: #419bdd; - 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; +status-body { + word-wrap: break-word; + word-break: break-word; + line-height: 1.4; } -- 2.34.1 From 8d88fd8b8dd0c6e19e210335551a72f4f3c4977e Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sun, 23 Oct 2022 18:41:27 +0300 Subject: [PATCH 02/24] Overhaul profile page todo: posts/with replies/attachments switch --- .../web/templates/layout/static_fe.html.eex | 4 +- .../static_fe/static_fe/profile.html.eex | 83 +++++++--- priv/static/static-fe/static-fe.css | 153 +++++++++++++++++- 3 files changed, 219 insertions(+), 21 deletions(-) diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex index 837476838..23c8af22f 100644 --- a/lib/pleroma/web/templates/layout/static_fe.html.eex +++ b/lib/pleroma/web/templates/layout/static_fe.html.eex @@ -19,7 +19,9 @@
- <%= @inner_content %> +
+ <%= @inner_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 index a14ca305e..4679efd7d 100644 --- a/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex +++ b/lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex @@ -1,22 +1,63 @@ -
-

<%= link instance_name(), to: "/" %>

- -

-
- - - -
- <%= raw Formatter.emojify(@user.name, @user.emoji) %> | - <%= link "@#{@user.nickname}@#{Endpoint.host()}", to: (@user.uri || @user.ap_id) %> -

-

<%= raw @user.bio %>

-
- -
+
+
+
+ +
+
+
<%= gettext("Posts") %>
+ <%= @user.note_count %> +
+
+
<%= gettext("Following") %>
+ <%= if @user.hide_follows_count do gettext("Hidden") else @user.following_count end %> +
+
+
<%= gettext("Followers") %>
+ <%= if @user.hide_followers_count do gettext("Hidden") else @user.follower_count end %> +
+
+ <%= raw @user.bio %> +
+
<%= for activity <- @timeline do %> - <%= render("_notice.html", Map.put(activity, :selected, false)) %> + <%= render("_notice.html", Map.put(activity, :selected, false)) %> <% end %>

<%= if @prev_page_id do %> @@ -28,4 +69,10 @@ <% end %>

-
+
+ + diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css index 522eb4ab0..ff43f0944 100644 --- a/priv/static/static-fe/static-fe.css +++ b/priv/static/static-fe/static-fe.css @@ -1,5 +1,14 @@ /* pleroma-light and pleroma-dark themes from pleroma-fe */ :root { + --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7); + + --profileBg: rgba(7, 12, 17, 1); + --profileTint: rgba(15, 22, 30, 0.5); + --btnText: rgba(185, 185, 186, 1); + --btn: rgba(21, 30, 43, 1); + --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; + --btnHoverShadow: 0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; + --lightText: rgba(236, 236, 236, 1); --panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5) , 0px 4px 6px 3px rgba(0, 0, 0, 0.3); --panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) , 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; --topBar: rgba(21, 30, 43, 1); @@ -60,7 +69,7 @@ nav { padding-right: 5px } -.container { +body > .container { display: grid; grid-template-columns: minmax(25em, 45em) 25em; grid-template-areas: "content sidebar"; @@ -148,7 +157,7 @@ nav { flex: 1 1 0; } -.username { +.status-container .username { white-space: nowrap; overflow: hidden; max-width: 85%; @@ -220,3 +229,143 @@ status-body { word-break: break-word; line-height: 1.4; } + +.user-info { + padding: 0.5em 26px; +} + +.user-info .container { + padding: 18px 0 6px 0; + display: flex; + align-items: flex-start; + max-height: 56px; +} + +.user-info a { + color: var(--lightText); +} + +.user-info .avatar img { + height: 56px; + width: 56px; +} + +.avatar img { + border-radius: 3px; + box-shadow: var(--avatarShadow); +} + +.user-summary { + display: block; + margin-left: 0.6em; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1 1 0; + z-index: 1; + line-height: 2em; + color: var(--lightText); +} + +.button-default { + user-select: none; + color: var(--btnText); + background-color: var(--btn); + border: none; + border-radius: 4px; + box-shadow: var(--btnShadow); + font-size: 1em; + min-height: 2em; +} + +.button-default:hover { + box-shadow: var(--btnHoverShadow); +} + +.user-bio { + text-align: center; + display: block; + line-height: 1.3; + padding: 1em; + margin: 0; +} + +.user-banner { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(to bottom, var(--profileTint), var(--profileTint)), + var(--user-banner); + background-size: cover; + background-color: var(--profileBg); + -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); + -webkit-mask-composite: xor; + -webkit-mask-size: 100% 60%; + z-index: -2; +} + +.user-card { + position: relative; + z-index: 1; +} + +.user-profile-fields { + margin: 0 0.5em; +} + +.user-profile-field { + display: flex; + margin: 0.25em; + border: 1px solid var(--border, #222); + border-radius: 3px; + line-height: 1.3; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.user-profile-field dt { + padding: 0.5em 1.5em; + box-sizing: border-box; + flex: 0 1 30%; + font-weight: 500; + color: var(--lightText); + border-right: 1px solid var(--border); + text-align: right; +} + +.user-profile-field dd { + padding: 0.5em 1.5em; + box-sizing: border-box; + flex: 1 1 30%; + margin: 0 0 0 0.25em; +} + +.user-counts { + display: flex; + line-height: 1em; + padding: 0.5em 1.5em 0 1.5em; + text-align: center; + justify-content: space-between; + color: var(--lightText); + flex-wrap: wrap; +} + +.user-count { + flex: 1 0 auto; + padding: 0.5em 0; + margin: 0 0.5em; +} + +.user-count h5 { + font-size: 1em; + font-weight: bolder; + margin: 0 0 0.25em; +} + +.profile .status-container { + border-bottom: 1px solid var(--border); +} -- 2.34.1 From 673c7df2785fd5c5a2dc983814d0e60682e365ed Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sun, 23 Oct 2022 21:50:02 +0300 Subject: [PATCH 03/24] Add admin/mod/bot indicators --- .../static_fe/static_fe/profile.html.eex | 9 +++++++++ priv/static/static-fe/static-fe.css | 16 +++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) 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 index 4679efd7d..b30f8218b 100644 --- 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,6 +20,15 @@
<%= link "@#{@user.nickname}", to: (@user.uri || @user.ap_id), class: "account-name" %> + <%= if @user.is_admin && @user.show_role do %> + <%= gettext("Admin") %> + <% end %> + <%= if @user.is_moderator && @user.show_role do %> + <%= gettext("Moderator") %> + <% end %> + <%= if @user.actor_type == "Service" do %> + <%= gettext("Bot") %> + <% end %>
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css index ff43f0944..97d6b211e 100644 --- a/priv/static/static-fe/static-fe.css +++ b/priv/static/static-fe/static-fe.css @@ -1,5 +1,7 @@ /* pleroma-light and pleroma-dark themes from pleroma-fe */ :root { + --alertNeutral: rgba(185, 185, 186, 0.5); + --alertNeutralText: rgba(255, 255, 255, 1); --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7); --profileBg: rgba(7, 12, 17, 1); @@ -148,7 +150,7 @@ body > .container { display: flex; } -.account-name { +.status-container .account-name { min-width: 1.6em; margin-right: 0.4em; white-space: nowrap; @@ -369,3 +371,15 @@ status-body { .profile .status-container { border-bottom: 1px solid var(--border); } + +.user-role { + color: var(--alertNeutralText); + background-color: var(--alertNeutral); + margin: 0 0.35em; + padding: 0 0.25em; + border-radius: 2px; +} + +.bottom-line { + display: flex; +} -- 2.34.1 From 76e42ba4ee7cfb6729f6acf0126b8c2731e3a74c Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sun, 23 Oct 2022 23:21:51 +0300 Subject: [PATCH 04/24] Make navbar and background scroll-friendly --- .../web/templates/layout/static_fe.html.eex | 1 + priv/static/static-fe/static-fe.css | 23 +++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/lib/pleroma/web/templates/layout/static_fe.html.eex b/lib/pleroma/web/templates/layout/static_fe.html.eex index 23c8af22f..88725ecef 100644 --- a/lib/pleroma/web/templates/layout/static_fe.html.eex +++ b/lib/pleroma/web/templates/layout/static_fe.html.eex @@ -9,6 +9,7 @@ +