From 581a54e67f2e2746aab6894c5c31ed1d85ebba09 Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff Date: Sun, 23 Oct 2022 02:52:32 +0300 Subject: [PATCH] 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 | 25 ++ lib/pleroma/web/views/layout_view.ex | 7 + priv/static/static-fe/static-fe.css | 354 ++++++++++-------- 5 files changed, 232 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 8e23a79a3..df5ff5628 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 @@ def format_date(date) 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..d7f2ae640 100644 --- a/lib/pleroma/web/templates/layout/static_fe.html.eex +++ b/lib/pleroma/web/templates/layout/static_fe.html.eex @@ -8,8 +8,33 @@ +
+
<%= @inner_content %> +
+
+
+ About <%= 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 3161bb1ae..baf5f27df 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; }