Organizations profile header redesign (#10258)
* organizations profile header * merge * tests * .
This commit is contained in:
ludwiczakpawel
GitHub
parent
3bce753303
commit
009c89d843
5 changed files with 85 additions and 112 deletions
|
|
@ -132,8 +132,7 @@ body.ten-x-hacker-theme {
|
|||
.chatchannels__config img,
|
||||
.message__actions img,
|
||||
.external-link-img,
|
||||
.group-img,
|
||||
.user-profile-header .social a {
|
||||
.group-img {
|
||||
-webkit-filter: invert(95%);
|
||||
filter: invert(95%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.crayons-avatar {
|
||||
.crayons-avatar,
|
||||
.crayons-logo {
|
||||
width: var(--su-9);
|
||||
height: var(--su-9);
|
||||
border: var(--su-1) solid var(--profile-brand-color);
|
||||
|
|
|
|||
21
app/views/organizations/_metadata.html.erb
Normal file
21
app/views/organizations/_metadata.html.erb
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<% if @organization.company_size.present? || @organization.email.present? %>
|
||||
<div class="profile-header__bottom fs-base">
|
||||
<% if @organization.email.present? %>
|
||||
<div class="crayons-definition">
|
||||
<strong class="crayons-definition__title">Support email</strong>
|
||||
<p class="crayons-definition__value">
|
||||
<a href="mailto:<%= sanitize @organization.email %>">
|
||||
<%= sanitize @organization.email %>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @organization.company_size.present? %>
|
||||
<div class="crayons-definition">
|
||||
<strong class="crayons-definition__title">Employees</strong>
|
||||
<p class="crayons-definition__value"><%= @organization.company_size %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -1,117 +1,69 @@
|
|||
<style>
|
||||
.widget header {
|
||||
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
|
||||
}
|
||||
|
||||
<% if user_colors(@user)[:bg].downcase.start_with?("#fff") %>
|
||||
.user-profile-follow-button {
|
||||
border: 1px solid <%= user_colors(@user)[:text] %> !important;
|
||||
}
|
||||
<% end %>
|
||||
</style>
|
||||
|
||||
<% unless internal_navigation? || user_signed_in? %>
|
||||
<script type="application/ld+json">
|
||||
<%= @organization_json_ld.to_json.html_safe %>
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
<div class="user-profile-header" style="<%= user_colors_style(@user) %>">
|
||||
<a href="<%= user_url(@user) %>"></a>
|
||||
<div class="user-profile-header-container">
|
||||
<div class="profile-pic-wrapper">
|
||||
<img class="profile-pic" src="<%= Images::Profile.call(@user.profile_image_url, length: 320) %>" alt="<%= @user.username %> profile" style="border-color:<%= user_colors(@user)[:bg] %>;background:<%= user_colors(@user)[:bg] %>" />
|
||||
</div>
|
||||
<div class="profile-details">
|
||||
<h1 style="color:<%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %>">
|
||||
<span><%= sanitize @user.name %></span>
|
||||
<span class="user-profile-follow-button-wrapper">
|
||||
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:text] %>;background-color:<%= user_colors(@user)[:bg] %>" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'> </button>
|
||||
<style>
|
||||
:root {
|
||||
--profile-brand-color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
|
||||
}
|
||||
</style>
|
||||
<div class="brand-bg">
|
||||
<div class="crayons-layout pt-7 m:pt-9">
|
||||
<header class="profile-header crayons-card mt-2">
|
||||
<div class="relative profile-header__top">
|
||||
<span class="crayons-logo crayons-logo--3xl">
|
||||
<img src="<%= Images::Profile.call(@user.profile_image_url, length: 320) %>" alt="<%= @user.name %> logo" width="128" height="128" alt="<%= @user.name %> profile picture" class="crayons-logo__image">
|
||||
</span>
|
||||
</h1>
|
||||
<p class="profile-description">
|
||||
<%= sanitize(@user.summary.presence || "404 bio not found") %>
|
||||
</p>
|
||||
<style>
|
||||
.profile-details .social .icon-img path {
|
||||
fill: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
|
||||
}
|
||||
</style>
|
||||
<p class="social">
|
||||
<% if @user.twitter_username.present? %>
|
||||
<a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("twitter-logo.svg", class: "icon-img", aria: true, title: "Twitter logo") %>
|
||||
</a>
|
||||
|
||||
<div class="profile-header__actions">
|
||||
<button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>"}'>Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-header__details">
|
||||
<h1 class="fs-2xl m:fs-3xl fw-heavy mb-2"><%= sanitize @user.name %></h1>
|
||||
<% if @user.tag_line.present? %>
|
||||
<p class="fs-l m:fs-xl color-base-70 mb-4 mx-auto max-w-100 m:max-w-75"><%= sanitize @user.tag_line %></p>
|
||||
<% end %>
|
||||
<% if @user.github_username.present? %>
|
||||
<a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("github-logo.svg", class: "icon-img", aria: true, title: "GitHub logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.class.name == "User" %>
|
||||
<% if @user.mastodon_url.present? %>
|
||||
<a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener">
|
||||
<%= inline_svg_tag("mastodon-logo.svg", class: "icon-img", aria: true, title: "Mastodon logo") %>
|
||||
</a>
|
||||
<p class="fs-base m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= sanitize(@user.summary.presence || "404 bio not found") %></p>
|
||||
|
||||
<div class="profile-header__meta">
|
||||
<% if @organization.location.present? %>
|
||||
<span class="profile-header__meta__item">
|
||||
<%= inline_svg_tag("location.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Location") %>
|
||||
<%= sanitize @organization.location %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% if @user.facebook_url.present? %>
|
||||
<a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("facebook-logo.svg", class: "icon-img", aria: true, title: "Facebook logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.youtube_url.present? %>
|
||||
<a href="<%= @user.youtube_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("youtube-logo.svg", class: "icon-img", aria: true, title: "Youtube logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.linkedin_url.present? %>
|
||||
<a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("linkedin_icon.svg", class: "icon-img", aria: true, title: "LinkedIn logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.behance_url.present? %>
|
||||
<a href="<%= @user.behance_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("behance_icon.svg", class: "icon-img", aria: true, title: "Behance logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.stackoverflow_url.present? %>
|
||||
<a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("stackoverflow-logo.svg", class: "icon-img", aria: true, title: "StackOverflow logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.dribbble_url.present? %>
|
||||
<a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me">
|
||||
<%= inline_svg_tag("dribbble_icon.svg", class: "icon-img", aria: true, title: "Dribbble logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.medium_url.present? %>
|
||||
<a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("medium_icon.svg", class: "icon-img", aria: true, title: "Medium logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.gitlab_url.present? %>
|
||||
<a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("gitlab.svg", class: "icon-img", aria: true, title: "GitLab logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.instagram_url.present? %>
|
||||
<a href="<%= @user.instagram_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("instagram-logo.svg", class: "icon-img", aria: true, title: "Instagram logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.twitch_url.present? %>
|
||||
<a href="<%= @user.twitch_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("twitch-logo.svg", class: "icon-img", aria: true, title: "Twitch logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.website_url.present? %>
|
||||
<a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me">
|
||||
<%= inline_svg_tag("external-link-logo.svg", class: "icon-img", aria: true, title: "external link icon") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span class="profile-header__meta__item">
|
||||
<%= inline_svg_tag("cake.svg", aria: true, class: "crayons-icon mr-2 shrink-0", title: "Joined") %>
|
||||
Joined on
|
||||
<%= local_date(@user.created_at) %>
|
||||
</span>
|
||||
|
||||
<span class="profile-header__meta__item -ml-1">
|
||||
<% if @user.twitter_username.present? %>
|
||||
<a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("twitter.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.github_username.present? %>
|
||||
<a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("github.svg", class: "crayons-icon", aria: true, title: "GitHub logo") %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if @user.website_url.present? %>
|
||||
<a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
|
||||
<%= inline_svg_tag("external.svg", class: "crayons-icon", aria: true, title: "External link icon") %>
|
||||
</a>
|
||||
<% end %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render "organizations/metadata" %>
|
||||
|
||||
</header>
|
||||
</div>
|
||||
<%= render "articles/user_metadata", context: "profile" %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ RSpec.describe "Organization index", type: :system do
|
|||
|
||||
it "shows the header", js: true, stub_elasticsearch: true do
|
||||
within("h1") { expect(page).to have_content(organization.name) }
|
||||
within("div.profile-details") do
|
||||
within("div.profile-header__actions") do
|
||||
expect(page).to have_button("Follow")
|
||||
end
|
||||
end
|
||||
|
|
@ -54,7 +54,7 @@ RSpec.describe "Organization index", type: :system do
|
|||
it "shows the correct button", js: true, stub_elasticsearch: true do
|
||||
visit "/#{organization.slug}"
|
||||
|
||||
within(".profile-details") do
|
||||
within(".profile-header__actions") do
|
||||
expect(page).to have_button("Following")
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue