squeegily/pleroma
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

OAuth form: revamp account header styles

Browse Source
This commit is contained in:
Alex Gleason 2020-07-27 18:18:15 -05:00
parent 7c0c499c2e
commit 71ac910508
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
View File

@ -9,46 +9,47 @@
<%= if @user do %> <%= if @user do %>
<div class="account-header"> <div class="account-header">
<div class="avatar"> <div class="account-header__banner" style="background-image: url('<%= Pleroma.User.banner_url(@user) %>')"></div>
<img src="<%= Pleroma.User.avatar_url(@user) %>"> <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div>
</div> <div class="account-header__meta">
<div class="name"> <div class="account-header__display-name"><%= @user.name %></div>
Signed in as: <div class="account-header__nickname">@<%= @user.nickname %>@<%= Pleroma.User.get_domain(@user) %></div>
<div class="username">@<%= @user.nickname %></div>
</div> </div>
</div> </div>
<% end %> <% end %>
<%= if @app do %> <div class="container__content">
<p>Application <strong><%= @app.client_name %></strong> is requesting access to your account.</p> <%= if @app do %>
<%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %> <p>Application <strong><%= @app.client_name %></strong> is requesting access to your account.</p>
<% end %> <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %>
<%= 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>
<% 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 %>
<%= 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>
<% 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, :client_id, value: @client_id %>
<%= hidden_input f, :response_type, value: @response_type %> <%= hidden_input f, :response_type, value: @response_type %>

50
priv/static/instance/static.css
View File

@ -46,14 +46,18 @@ body {
.container { .container {
max-width: 400px; max-width: 400px;
padding: 20px;
background-color: var(--foreground-color); background-color: var(--foreground-color);
border-radius: 4px; border-radius: 4px;
overflow: hidden;
margin: auto; margin: auto;
margin-top: 35px; margin-top: 35px;
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
} }
.container__content {
padding: 0 20px;
}
h1 { h1 {
margin: 0; margin: 0;
font-size: 24px; font-size: 24px;
@ -208,26 +212,38 @@ button:hover {
font-size: 16px; font-size: 16px;
} }
.account-header { .account-header__banner {
display: flex;
}
.account-header .avatar {
display: flex;
max-width: 60px;
margin-right: 10px;
}
.account-header .avatar img {
width: 100%; width: 100%;
border-radius: 4px; height: 112px;
background-size: cover;
background-position: center;
}
.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__meta {
padding: 6px 20px 17px;
}
.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) { @media all and (max-width: 440px) {
.container {
margin-top: 0
}
.scope { .scope {
flex-basis: 0%; flex-basis: 0%;
} }