diff options
Diffstat (limited to 'lib/pleroma/web/templates')
| -rw-r--r-- | lib/pleroma/web/templates/email/digest.html.eex | 2 | ||||
| -rw-r--r-- | lib/pleroma/web/templates/layout/app.html.eex | 236 | ||||
| -rw-r--r-- | lib/pleroma/web/templates/o_auth/o_auth/show.html.eex | 66 |
3 files changed, 56 insertions, 248 deletions
diff --git a/lib/pleroma/web/templates/email/digest.html.eex b/lib/pleroma/web/templates/email/digest.html.eex index 860df5f9c..60eceff22 100644 --- a/lib/pleroma/web/templates/email/digest.html.eex +++ b/lib/pleroma/web/templates/email/digest.html.eex @@ -126,7 +126,7 @@ <div align="center" class="img-container center" style="padding-right: 0px;padding-left: 0px;"> <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img - align="center" alt="Image" border="0" class="center" src="cid:logo.png" + align="center" alt="Image" border="0" class="center" src="cid:logo.svg" style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: 80px; width: auto; max-height: 80px; display: block;" title="Image" height="80" /> <!--[if mso]></td></tr></table><![endif]--> diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex index 3f28f1920..1ede59fd8 100644 --- a/lib/pleroma/web/templates/layout/app.html.eex +++ b/lib/pleroma/web/templates/layout/app.html.eex @@ -1,233 +1,19 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui" /> - <title> - <%= Pleroma.Config.get([:instance, :name]) %> - </title> - <style> - body { - background-color: #121a24; - font-family: sans-serif; - color: #b9b9ba; - text-align: center; - } - - .container { - max-width: 420px; - padding: 20px; - background-color: #182230; - border-radius: 4px; - margin: auto; - margin-top: 10vh; - box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5); - } - - h1 { - margin: 0; - font-size: 24px; - } - - h2 { - color: #b9b9ba; - font-weight: normal; - font-size: 18px; - margin-bottom: 20px; - } - - a { - color: #d8a070; - text-decoration: none; - } - - form { - width: 100%; - } - - .input { - text-align: left; - color: #89898a; - display: flex; - flex-direction: column; - } - - input { - box-sizing: content-box; - padding: 10px; - margin-top: 5px; - margin-bottom: 10px; - background-color: #121a24; - color: #b9b9ba; - border: 0; - transition-property: border-bottom; - transition-duration: 0.35s; - border-bottom: 2px solid #2a384a; - font-size: 14px; - } - - .scopes-input { - display: flex; - flex-direction: column; - margin-top: 1em; - text-align: left; - color: #89898a; - } - - .scopes-input label:first-child { - height: 2em; - } - - .scopes { - display: flex; - flex-wrap: wrap; - text-align: left; - color: #b9b9ba; - } - - .scope { - display: flex; - flex-basis: 100%; - height: 2em; - align-items: center; - } - - .scope:before { - color: #b9b9ba; - content: "✔\fe0e"; - margin-left: 1em; - margin-right: 1em; - } - - [type="checkbox"] + label { - display: none; - cursor: pointer; - margin: 0.5em; - } - - [type="checkbox"] { - display: none; - } - - [type="checkbox"] + label:before { - cursor: pointer; - display: inline-block; - color: white; - background-color: #121a24; - border: 4px solid #121a24; - box-shadow: 0px 0px 1px 0 #d8a070; - box-sizing: border-box; - width: 1.2em; - height: 1.2em; - margin-right: 1.0em; - content: ""; - transition-property: background-color; - transition-duration: 0.35s; - color: #121a24; - margin-bottom: -0.2em; - border-radius: 2px; - } - - [type="checkbox"]:checked + label:before { - background-color: #d8a070; - } - - input:focus { - outline: none; - border-bottom: 2px solid #d8a070; - } - - button { - box-sizing: border-box; - width: 100%; - background-color: #1c2a3a; - color: #b9b9ba; - border-radius: 4px; - border: none; - padding: 10px; - margin-top: 20px; - margin-bottom: 20px; - text-transform: uppercase; - font-size: 16px; - box-shadow: 0px 0px 2px 0px black, - 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, - 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - } - - button:hover { - cursor: pointer; - box-shadow: 0px 0px 0px 1px #d8a070, - 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, - 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; - } - - .alert-danger { - box-sizing: border-box; - width: 100%; - background-color: #931014; - border: 1px solid #a06060; - border-radius: 4px; - padding: 10px; - margin-top: 20px; - font-weight: 500; - font-size: 16px; - } - - .alert-info { - box-sizing: border-box; - width: 100%; - border-radius: 4px; - border: 1px solid #7d796a; - padding: 10px; - margin-top: 20px; - font-weight: 500; - font-size: 16px; - } - - @media all and (max-width: 440px) { - .container { - margin-top: 0 - } - - .scope { - flex-basis: 0%; - } - - .scope:before { - content: ""; - margin-left: 0em; - margin-right: 1em; - } - - .scope:first-child:before { - margin-left: 1em; - content: "✔\fe0e"; - } - - .scope:after { - content: ","; - } - - .scope:last-child:after { - content: ""; - } - } - .form-row { - display: flex; - } - .form-row > label { - text-align: left; - line-height: 47px; - flex: 1; - } - .form-row > input { - flex: 2; - } - </style> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui"> + <title><%= Pleroma.Config.get([:instance, :name]) %></title> + <link rel="stylesheet" href="/instance/static.css"> </head> <body> + <div class="instance-header"> + <a class="instance-header__content" href="/"> + <img class="instance-header__thumbnail" src="<%= Pleroma.Config.get([:instance, :instance_thumbnail]) %>"> + <h1 class="instance-header__title"><%= Pleroma.Config.get([:instance, :name]) %></h1> + </a> + </div> <div class="container"> - <h1><%= Pleroma.Config.get([:instance, :name]) %></h1> <%= @inner_content %> </div> </body> diff --git a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex index b17142ff8..1a85818ec 100644 --- a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex +++ b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex @@ -5,32 +5,55 @@ <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> <% end %> -<h2>OAuth Authorization</h2> <%= form_for @conn, o_auth_path(@conn, :authorize), [as: "authorization"], fn f -> %> -<%= if @params["registration"] in ["true", true] do %> - <h3>This is the first time you visit! Please enter your Pleroma handle.</h3> - <p>Choose carefully! You won't be able to change this later. You will be able to change your display name, though.</p> - <div class="input"> - <%= label f, :nickname, "Pleroma Handle" %> - <%= text_input f, :nickname, placeholder: "lain" %> +<%= if @user do %> + <div class="account-header"> + <div class="account-header__banner" style="background-image: url('<%= Pleroma.User.banner_url(@user) %>')"></div> + <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div> + <div class="account-header__meta"> + <div class="account-header__display-name"><%= @user.name %></div> + <div class="account-header__nickname">@<%= @user.nickname %>@<%= Pleroma.User.get_host(@user) %></div> + </div> </div> - <%= hidden_input f, :name, value: @params["name"] %> - <%= hidden_input f, :password, value: @params["password"] %> - <br> -<% else %> - <div class="input"> - <%= label f, :name, "Username" %> - <%= text_input f, :name %> - </div> - <div class="input"> - <%= label f, :password, "Password" %> - <%= password_input f, :password %> - </div> - <%= submit "Log In" %> - <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> <% end %> +<div class="container__content"> + <%= if @app do %> + <p>Application <strong><%= @app.client_name %></strong> is requesting access to your account.</p> + <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> + <% end %> + + <%= if @user do %> + <div class="actions"> + <a class="button button--cancel" href="/">Cancel</a> + <%= submit "Approve", class: "button--approve" %> + </div> + <% else %> + <%= if @params["registration"] in ["true", true] do %> + <h3>This is the first time you visit! Please enter your Pleroma handle.</h3> + <p>Choose carefully! You won't be able to change this later. You will be able to change your display name, though.</p> + <div class="input"> + <%= label f, :nickname, "Pleroma Handle" %> + <%= text_input f, :nickname, placeholder: "lain" %> + </div> + <%= hidden_input f, :name, value: @params["name"] %> + <%= hidden_input f, :password, value: @params["password"] %> + <br> + <% else %> + <div class="input"> + <%= label f, :name, "Username" %> + <%= text_input f, :name %> + </div> + <div class="input"> + <%= label f, :password, "Password" %> + <%= password_input f, :password %> + </div> + <%= submit "Log In" %> + <% end %> + <% end %> +</div> + <%= hidden_input f, :client_id, value: @client_id %> <%= hidden_input f, :response_type, value: @response_type %> <%= hidden_input f, :redirect_uri, value: @redirect_uri %> @@ -40,4 +63,3 @@ <%= if Pleroma.Config.oauth_consumer_enabled?() do %> <%= render @view_module, Pleroma.Web.Auth.Authenticator.oauth_consumer_template(), assigns %> <% end %> - |