diff options
| -rw-r--r-- | lib/pleroma/web/templates/o_auth/o_auth/show.html.eex | 67 | ||||
| -rw-r--r-- | priv/static/instance/static.css | 44 |
2 files changed, 64 insertions, 47 deletions
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 d7efbf184..68b095c87 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 @@ -9,46 +9,47 @@ <%= if @user do %> <div class="account-header"> - <div class="avatar"> - <img src="<%= Pleroma.User.avatar_url(@user) %>"> - </div> - <div class="name"> - Signed in as: - <div class="username">@<%= @user.nickname %></div> + <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_domain(@user) %></div> </div> </div> <% end %> -<%= 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 %> +<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 %> - <%= submit "Authorize" %> -<% 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> + <%= if @user do %> + <%= submit "Authorize" %> <% 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" %> + <%= 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 %> -<% end %> +</div> <%= hidden_input f, :client_id, value: @client_id %> <%= hidden_input f, :response_type, value: @response_type %> diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css index ccc48c294..1531a759c 100644 --- a/priv/static/instance/static.css +++ b/priv/static/instance/static.css @@ -46,14 +46,18 @@ body { .container { max-width: 400px; - padding: 20px; background-color: var(--foreground-color); border-radius: 4px; + overflow: hidden; margin: auto; margin-top: 35px; box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5); } +.container__content { + padding: 0 20px; +} + h1 { margin: 0; font-size: 24px; @@ -208,26 +212,38 @@ button:hover { font-size: 16px; } -.account-header { - display: flex; +.account-header__banner { + width: 100%; + height: 112px; + background-size: cover; + background-position: center; } -.account-header .avatar { - display: flex; - max-width: 60px; - margin-right: 10px; +.account-header__avatar { + width: 94px; + height: 94px; + background-size: cover; + background-position: center; + margin: -47px 10px 0; + border: 6px solid var(--foreground-color); + border-radius: 999px; } -.account-header .avatar img { - width: 100%; - border-radius: 4px; +.account-header__meta { + padding: 6px 20px 17px; } -@media all and (max-width: 440px) { - .container { - margin-top: 0 - } +.account-header__display-name { + font-size: 20px; + font-weight: bold; +} + +.account-header__nickname { + font-size: 14px; + color: var(--muted-text-color); +} +@media all and (max-width: 440px) { .scope { flex-basis: 0%; } |