Profile UI update (#11357)

* tooltips 1.0.1

* tooltips 1.0.1

* profile layout

* fix

* whoops

* better github repos

* spec

* brining back doc, and making liitle fixes

* button placement, stats styling

* rename
This commit is contained in:
ludwiczakpawel 2020-11-12 08:47:04 +01:00 committed by GitHub
parent 9f62711123
commit de5a22ecf7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 198 additions and 220 deletions

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M22.314 10.172l-1.415 1.414-.707-.707-4.242 4.242-.707 3.536-1.415 1.414-4.242-4.243-4.95 4.95-1.414-1.414 4.95-4.95-4.243-4.242 1.414-1.415L8.88 8.05l4.242-4.242-.707-.707 1.414-1.415z"/>
</svg>

After

Width:  |  Height:  |  Size: 293 B

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 22H5a3 3 0 01-3-3V3a1 1 0 011-1h14a1 1 0 011 1v12h4v4a3 3 0 01-3 3zm-1-5v2a1 1 0 002 0v-2h-2zm-2 3V4H4v15a1 1 0 001 1h11zM6 7h8v2H6V7zm0 4h8v2H6v-2zm0 4h5v2H6v-2z"/>
</svg>

After

Width:  |  Height:  |  Size: 274 B

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.784 14l.42-4H4V8h4.415l.525-5h2.011l-.525 5h3.989l.525-5h2.011l-.525 5H20v2h-3.784l-.42 4H20v2h-4.415l-.525 5h-2.011l.525-5H9.585l-.525 5H7.049l.525-5H4v-2h3.784zm2.011 0h3.99l.42-4h-3.99l-.42 4z"/>
</svg>

After

Width:  |  Height:  |  Size: 306 B

View file

@ -7,7 +7,7 @@
initializeCommentPreview,
initializeTimeFixer, initializeDashboardSort, initializePWAFunctionality,
initializeEllipsisMenu, initializeArchivedPostFilter, initializeCreditsPage,
initializeUserProfilePage, initializePodcastPlayback,
initializeUserProfilePage, initializeProfileInfoToggle, initializePodcastPlayback,
initializeVideoPlayback, initializeDrawerSliders,
initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
nextPage:writable, fetching:writable, done:writable, adClicked:writable,
@ -57,6 +57,7 @@ function callInitializers() {
initializeArchivedPostFilter();
initializeCreditsPage();
initializeUserProfilePage();
initializeProfileInfoToggle();
initializePodcastPlayback();
initializeVideoPlayback();
initializeDrawerSliders();

View file

@ -33,3 +33,18 @@ function initializeUserProfilePage() {
}
}
}
function initializeProfileInfoToggle() {
const infoPanels = document.querySelector('.js-user-info');
const trigger = document.querySelector('.js-user-info-trigger');
const triggerWrapper = document.querySelector(
'.js-user-info-trigger-wrapper',
);
if (trigger && infoPanels) {
trigger.addEventListener('click', () => {
triggerWrapper.classList.replace('block', 'hidden');
infoPanels.classList.replace('hidden', 'grid');
});
}
}

View file

@ -105,7 +105,7 @@
.sidebar-navigation-links .crayons-icon svg {
height: 24px;
weight: 24px;
width: 24px;
}
@keyframes fade-in {
@ -277,19 +277,6 @@
max-width: calc(100% - 560px); // 560 = 2*280: two sidebars
}
.pinned-articles {
padding: 8px;
margin: 0 auto;
@include dev-card;
h5 {
margin: 0 0 8px;
padding: 8px 0;
display: flex;
align-items: center;
}
}
.placeholder-div {
// TOOD: what is this?
display: block;

View file

@ -126,6 +126,13 @@
}
}
}
&--1-2 {
@media (min-width: $breakpoint-l) {
--layout-sidebar-left-width: 1fr;
--layout-content-width: 2fr;
}
}
}
.crayons-layout--3-cols {

View file

@ -1,77 +1,14 @@
<% if @user.badge_achievements_count > 0 %>
<style>
.badge-achievement {
display: block;
position: relative;
z-index: 1;
color: black;
opacity: 1 !important;
}
.badge-achievement-image {
width: auto !important;
max-height: 110px;
min-height: 10px;
max-width: 230px;
border-radius: 50%;
border: none;
border-radius: 0px;
border: 0px !important;
margin: 3px;
background: transparent;
}
.badge-achievement-info h2 {
font-size: 15px;
}
.badge-achievement img:hover {
opacity: 0.88 !important;
}
.badge-widget {
position: relative;
overflow: auto;
min-height: 105px;
overflow: visible;
display: grid;
grid-template-columns: 50% 50%;
}
</style>
<div style="overflow: visible;padding-top:20px;">
<div class="widget-body badge-widget">
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3">Badges</h3>
</header>
<div class="crayons-card__body grid gap-4 grid-cols-3 m:grid-cols-2">
<% @user.badge_achievements.order(id: :desc).includes(:badge).each do |achievement| %>
<a class="badge-achievement" href="/badge/<%= achievement.badge.slug %>">
<img
src="<%= optimized_image_url(achievement.badge.badge_image_url, width: 180) %>"
alt="<%= achievement.badge.title %>"
title="<%= achievement.badge.title %>"
class="badge-achievement-image mx-auto"
style="transform: rotate(<%= -25 + (achievement.id.digits.first * 5) %>deg);
margin-left: <%= achievement.id.digits.first * 3 %>px;
margin-right: <%= achievement.id.digits.first * 1 %>px;" />
<a href="/badge/<%= achievement.badge.slug %>" title="<%= achievement.badge.title %>">
<img src="<%= optimized_image_url(achievement.badge.badge_image_url, width: 180) %>" alt="<%= achievement.badge.title %>" class="mx-auto max-w-100 h-auto align-middle" style="transform: rotate(<%= rand(-10..10) %>deg);" />
</a>
<% end %>
</div>
</div>
<% else %>
<style>
.widget-body {
margin: 0 auto;
padding: 20px;
}
@media screen and (min-width: 1024px) {
.no-badges-text {
display: none;
}
}
</style>
<div style="overflow: visible;padding-top:20px;">
<div class="widget-body">
<p class="no-badges-text">
Eat and than sleep on your face annoy the old grumpy cat, start a fight and then retreat to wash when I lose and I shall purr myself to sleep or run around the house at 4 in the morning.
</p>
</div>
</div>
<% end %>

View file

@ -3,7 +3,7 @@
<% if @comments.present? %>
<% if params[:view] == "comments" %>
<div class="crayons-card__header">
<h4 class="crayons-card__headline">
<h4 class="crayons-subtitle-2">
<% if @user.comments_count > 250 %>
Last 250 comments
<% else %>
@ -18,7 +18,7 @@
</div>
<% else %>
<div class="crayons-card__header">
<h4 class="crayons-card__headline">
<h4 class="crayons-subtitle-2">
Recent comments
</h4>
</div>

View file

@ -1,21 +1,37 @@
<% repositories.each do |repo| %>
<a class="widget" href="<%= repo.url %>" target="_blank" rel="noopener">
<header>
<h4><span class="emoji"><img src="<%= asset_path("github-logo.svg") %>" alt="github logo"></span><%= repo.name %></h4>
<% if repositories.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3 flex items-center">GitHub Repositories</h3>
</header>
<div class="widget-body">
<% if repo.description.present? %>
<%= EmojiConverter.call(repo.description) %>
<div>
<% repositories.each do |repo| %>
<a href="<%= repo.url %>" target="_blank" rel="noopener" class="crayons-link crayons-link--contentful">
<p class="fw-bold flex items-center">
<%= repo.name %>
</p>
<% if repo.description.present? %>
<p class="fs-s color-base-80 mb-1"><%= EmojiConverter.call(repo.description) %></p>
<% end %>
<p class="fs-s color-base-60 flex items-center">
<% if repo.fork %>
<span class="crayons-indicator mr-3">Fork</span>
<% end %>
<% if repo.language %>
<%= repo.language %>
<% end %>
<% if repo.language && repo.stargazers_count.to_i > 0 %>
<span class="opacity-50 inline-block px-1">&bull;</span>
<% end %>
<% if repo.stargazers_count.to_i > 0 %>
<%= pluralize repo.stargazers_count, "star" %>
<% end %>
</p>
</a>
<% end %>
<div class="widget-footer">
<% if repo.fork %>
<span class="widget-accent">fork</span>
<% end %>
<%= repo.language %>
<% if repo.stargazers_count.to_i > 0 %>
<img src="<%= asset_path("star.svg") %>" alt="star icon"> <%= repo.stargazers_count %>
<% end %>
</div>
</div>
</a>
</div>
<% end %>

View file

@ -1,9 +1,16 @@
<% if @pinned_stories.present? %>
<div class="pinned-articles">
<h5><img src="<%= asset_path("pushpin.svg") %>" width="20" height="20" alt="pin" /> Pinned</h5>
<% @pinned_stories.each do |story| %>
<%= render "articles/single_story", story: story, featured: false %>
<% end %>
<div class="crayons-card mb-2 border-2 border-solid border-accent-brand">
<header>
<h3 class="crayons-subtitle-3 inline-flex items-center bg-accent-brand color-base-inverted pl-3 pr-4 py-2 ml-4 -mt-2 radius-default">
<%= inline_svg_tag("pin.svg", aria: true, class: "crayons-icon mr-2", title: "Pin") %>
Pinned
</h3>
</header>
<div class="p-4 pb-2 pt-3">
<% @pinned_stories.each do |story| %>
<%= render "articles/single_story", story: story, featured: false %>
<% end %>
</div>
</div>
<% end %>
<% @stories.each_with_index do |story, i| %>
@ -18,4 +25,3 @@
<% if @stories.size > 1 %>
<div class="placeholder-div"></div>
<% end %>
<div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div>

View file

@ -1,18 +0,0 @@
<%# it's highly unlikely a single use will belong to so many organizations to slow down
this fetch, thus we can safely use the .present?/.each pattern to load them %>
<% if @user.organizations.present? %>
<div id="sidebar-organizations" class="widget">
<div class="widget-suggested-follows-container">
<header><h4>organizations</h4></header>
<div class="widget-body">
<% @user.organizations.each do |organization| %>
<div class="widget-user-pic">
<a href="/<%= organization.slug %>">
<img src="<%= Images::Profile.call(organization.profile_image_url, length: 90) %>" alt="<%= organization.name %> profile image">
</a>
</div>
<% end %>
</div>
</div>
</div>
<% end %>

View file

@ -1,62 +1,93 @@
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
<div class="sidebar-bg" id="sidebar-bg-left"></div>
<div class="side-bar">
<div class="user-sidebar">
<% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>
<% if @user.mostly_work_with.present? %>
<div class="widget">
<header>
<h4>skills/languages</h4>
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.mostly_work_with %>
</div>
</div>
<% end %>
<% if @user.currently_learning.present? %>
<div class="widget">
<header>
<h4>learning/trying</h4>
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.currently_learning %>
</div>
</div>
<% end %>
<% if @user.currently_hacking_on.present? %>
<div class="widget">
<header>
<h4>projects and hacks</h4>
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.currently_hacking_on %>
</div>
</div>
<% end %>
<% if @user.available_for.present? %>
<div class="widget">
<header>
<h4>available for</h4>
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.available_for %>
</div>
</div>
<% end %>
<% end %>
<% cache "user-profile-sidebar-stats-#{@user.id}-#{@user.last_article_at&.rfc3339}-#{@user.last_comment_at&.rfc3339}-#{@user.following_tags_count}-#{@user.last_followed_at&.rfc3339}", expires_in: 10.days do %>
<div class="sidebar-data">
<div>
<%= pluralize @user.articles.published.size, "Post" %> Published
</div>
<div>
<%= pluralize @user.comments.where(deleted: false).size, "Comment" %> Written
</div>
<div>
<%= pluralize @user.decorate.cached_followed_tags.size, "Tag" %> Followed
</div>
<div class="gap-2 m:gap-4 hidden m:grid js-user-info">
<% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
<% if @user.organizations.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3 spec-org-titles">Organizations</h3>
</header>
<div>
<%# it's highly unlikely a single use will belong to so many organizations to slow down this fetch, thus we can safely use the .present?/.each pattern to load them %>
<% @user.organizations.each do |organization| %>
<a href="/<%= organization.slug %>" class="flex items-center crayons-link crayons-link--contentful">
<span class="crayons-logo crayons-logo--l mr-2 shrink-0">
<img src="<%= Images::Profile.call(organization.profile_image_url, length: 90) %>" alt="<%= organization.name %> profile image" class="crayons-logo__image">
</span>
<h4 class="fs-base fw-medium"><%= organization.name %></h4>
</a>
<% end %>
</div>
<% end %>
</div>
<% end %>
<%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>
<%= render "articles/badges_area" %>
<% end %>
<% cache "user-profile-sidebar-profile-details-#{@user.id}-#{@user.profile_updated_at}", expires_in: 10.days do %>
<% if @user.mostly_work_with.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3">Skills/languages</h3>
</header>
<div class="crayons-card__body">
<%= sanitized_sidebar @user.mostly_work_with %>
</div>
</div>
<% end %>
<% if @user.currently_learning.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3">Learning/trying</h3>
</header>
<div class="crayons-card__body">
<%= sanitized_sidebar @user.currently_learning %>
</div>
</div>
<% end %>
<% if @user.currently_hacking_on.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3">Projects</h3>
</header>
<div class="crayons-card__body">
<%= sanitized_sidebar @user.currently_hacking_on %>
</div>
</div>
<% end %>
<% if @user.available_for.present? %>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3">Available for...</h3>
</header>
<div class="crayons-card__body">
<%= sanitized_sidebar @user.available_for %>
</div>
</div>
<% end %>
<% end %>
<% cache "user-profile-sidebar-stats-#{@user.id}-#{@user.last_article_at&.rfc3339}-#{@user.last_comment_at&.rfc3339}-#{@user.following_tags_count}-#{@user.last_followed_at&.rfc3339}", expires_in: 10.days do %>
<div class="crayons-card crayons-card--secondary p-4">
<div class="flex items-center mb-4">
<%= inline_svg_tag("post.svg", aria: true, class: "crayons-icon mr-3 color-base-50", title: "Post") %>
<%= pluralize @user.articles.published.size, "post" %> published
</div>
<div class="flex items-center mb-4">
<%= inline_svg_tag("comment.svg", aria: true, class: "crayons-icon mr-3 color-base-50", title: "Comment") %>
<%= pluralize @user.comments.where(deleted: false).size, "comment" %> written
</div>
<div class="flex items-center">
<%= inline_svg_tag("tag.svg", aria: true, class: "crayons-icon mr-3 color-base-50", title: "Tag") %>
<%= pluralize @user.decorate.cached_followed_tags.size, "tag" %> followed
</div>
</div>
</div>
<% end %>
</div>

View file

@ -1,10 +0,0 @@
<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right">
<div class="sidebar-bg" id="sidebar-bg-right">
</div>
<div class="side-bar sidebar-additional showing" id="sidebar-additional">
<%= render "users/organizations_area" %>
<%= render partial: "users/github_repositories_area", locals: { repositories: repositories } %>
<%= render "articles/badges_area" %>
</div>
</div>

View file

@ -18,7 +18,7 @@
}
</style>
<div class="brand-bg">
<div class="crayons-layout pt-7 m:pt-9">
<div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9">
<header class="profile-header crayons-card mt-2">
<div class="relative profile-header__top">
<span class="crayons-avatar crayons-avatar--3xl">
@ -149,6 +149,10 @@
<%= render "users/metadata" %>
<div class="p-3 pt-0 block m:hidden js-user-info-trigger-wrapper">
<button type="button" class="crayons-btn crayons-btn--outlined w-100 js-user-info-trigger">More info about user...</button>
</div>
<div class="crayons-modal align-left hidden">
<div class="crayons-modal__box">
<div class="crayons-modal__box__header">
@ -177,23 +181,19 @@
</div>
<% end %>
<div class="home sub-home" id="index-container"
data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
data-tag=""
data-feed="<%= params[:timeframe] || "base-feed" %>"
data-articles-since="0">
<%= render "users/sidebar" %>
<div class="articles-list" id="articles-list">
<div class="on-page-nav-controls user-nav-controls" id="on-page-nav-controls">
<button class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
<div class="crayons-icon nav-icon">
<%= SiteConfig.left_navbar_svg_icon.html_safe %>
</div>
</button>
<button class="on-page-nav-butt on-page-nav-butt-right" style="margin-top:-1px;" id="on-page-nav-butt-right" aria-label="nav-button-right">
<img style="height:28px;width:28px;" src="<%= asset_path "ribbon.svg" %>" alt="right-sidebar-nav">
</button>
</div>
<div
class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols crayons-layout--2-cols--1-2 pt-4 m:pt-0"
id="index-container"
data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
data-tag=""
data-feed="<%= params[:timeframe] || "base-feed" %>"
data-articles-since="0">
<div class="crayons-layout__sidebar-left">
<%= render partial: "users/sidebar", locals: { repositories: @github_repositories } %>
</div>
<main class="crayons-layout__content articles-list" id="articles-list">
<div class="substories" id="substories">
<% if params[:view] == "comments" %>
<%= render "users/comments_section" %>
@ -204,10 +204,7 @@
<div class="loading-articles" id="loading-articles">
loading...
</div>
</div>
<% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
<%= render partial: "users/sidebar_additional", locals: { repositories: @github_repositories } %>
<% end %>
</main>
</div>
<%= render "stories/stories_list_script" %>

View file

@ -76,7 +76,7 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
it "shows organizations", js: true do
Capybara.current_session.driver.browser.manage.window.resize_to(1920, 1080)
expect(page).to have_css("#sidebar-wrapper-right h4", text: "organizations")
expect(page).to have_css(".spec-org-titles", text: "Organizations")
end
end