maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Fix tag display bug and crayonsify area (#10868)

Browse source 
* Fix tag display bug and crayonsify

* Fix some specs

* Remove unused tag js

* Adjust to remove crayons card bg

* Adjust padding

* add spacing below nav

* drop unnecessary classname

* cleanup headers

* links

* Finalize style and add hint to eliminate div jump

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
This commit is contained in:
Ben Halpern 2020-10-20 16:07:17 -04:00 • committed by GitHub
parent c3a98db026
commit 467e99556c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 82 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/javascripts/initializers/initializeBaseUserData.js
View file

@ -22,25 +22,6 @@ function initializeProfileImage(user) {
function initializeUserSidebar(user) {
if (!document.getElementById('sidebar-nav')) return;
initializeUserProfileContent(user);
let followedTags = JSON.parse(user.followed_tags);
const tagSeparatorLabel =
followedTags.length === 0
? 'FOLLOW TAGS TO IMPROVE YOUR FEED'
: 'OTHER POPULAR TAGS';
followedTags.forEach((tag) => {
const element = document.getElementById(
'default-sidebar-element-' + tag.name,
);
if (element) {
element.remove();
}
});
document.getElementById('tag-separator').innerHTML = tagSeparatorLabel;
document.getElementById('sidebar-nav-default-tags').classList.add('showing');
}
function addRelevantButtonsToArticle(user) {

11
app/assets/stylesheets/articles.scss
View file

@ -84,17 +84,6 @@
display: block;
}
.sidebar-nav {
.sidebar-nav-block {
.sidebar-nav-default-tags {
display: none;
&.showing {
display: block;
}
}
}
}
.search-partner-mention {
display: none;
text-align: center;

16
app/assets/stylesheets/base/main.scss
View file

@ -20,6 +20,22 @@ body {
}
}
&.user-tags-followed-0, &.user-tags-followed-1, &.user-tags-followed-2{
#sidebar-nav-followed-tags {
height: 90px;
}
}
&.user-tags-followed-3, &.user-tags-followed-4, &.user-tags-followed-5{
#sidebar-nav-followed-tags {
height: 205px;
}
}
&.user-tags-followed-max {
#sidebar-nav-followed-tags {
height: 42vh;
}
}
&.default-header {
padding-top: var(--header-height);
min-height: calc(100vh - var(--header-height));

2
app/javascript/leftSidebar/TagsFollowed.jsx
View file

@ -14,7 +14,7 @@ export const TagsFollowed = ({ tags = [] }) => {
>
<a
title={`${tag.name} tag`}
className="crayons-link crayons-link--block spec__tag-link"
className="crayons-link crayons-link--block"
href={`/t/${tag.name}`}
>
{`#${tag.name}`}

43
app/javascript/packs/homePage.jsx
View file

@ -1,7 +1,7 @@
import { h, render } from 'preact';
import { TagsFollowed } from '../leftSidebar/TagsFollowed';
/* global userData */
// This logic is similar to that in initScrolling.js.erb
const frontPageFeedPathNames = new Map([
['/', ''],
@ -34,26 +34,24 @@ function renderTagsFollowed(tagsFollowedContainer, user = userData()) {
}
// Only render if a user is logged on.
import('../leftSidebar/TagsFollowed').then(({ TagsFollowed }) => {
const { followed_tags } = user; // eslint-disable-line camelcase
const followedTags = JSON.parse(followed_tags);
const { followed_tags } = user; // eslint-disable-line camelcase
const followedTags = JSON.parse(followed_tags);
// This should be done server-side potentially
// sort tags by descending weight, descending popularity and name
followedTags.sort((tagA, tagB) => {
return (
tagB.points - tagA.points ||
tagB.hotness_score - tagA.hotness_score ||
tagA.name.localeCompare(tagB.name)
);
});
render(
<TagsFollowed tags={followedTags} />,
tagsFollowedContainer,
tagsFollowedContainer.firstElementChild,
// This should be done server-side potentially
// sort tags by descending weight, descending popularity and name
followedTags.sort((tagA, tagB) => {
return (
tagB.points - tagA.points ||
tagB.hotness_score - tagA.hotness_score ||
tagA.name.localeCompare(tagB.name)
);
});
render(
<TagsFollowed tags={followedTags} />,
tagsFollowedContainer,
tagsFollowedContainer.firstElementChild,
);
}
const feedTimeFrame = frontPageFeedPathNames.get(window.location.pathname);
@ -96,13 +94,13 @@ if (!document.getElementById('featured-story-marker')) {
}, 2);
}
InstantClick.on('receive', (address, body, title) => {
InstantClick.on('change', () => {
if (document.body.dataset.userStatus !== 'logged-in') {
// Nothing to do, the user is not logged on.
return false;
}
const tagsFollowedContainer = body.querySelector(
const tagsFollowedContainer = document.body.querySelector(
'#sidebar-nav-followed-tags',
);
@ -112,10 +110,5 @@ InstantClick.on('receive', (address, body, title) => {
}
renderTagsFollowed(tagsFollowedContainer);
return {
body,
title,
};
});
InstantClick.init();

47
app/views/articles/_sidebar_nav.html.erb
View file

@ -41,29 +41,30 @@
</div>
</nav>
<nav class="sidebar-tags-browser mb-6 overflow-y-auto scrolling-touch" aria-label="Secondary sidebar nav">
<nav class="mb-6" aria-label="Secondary sidebar nav">
<% if user_signed_in? %>
<header class="fs-xs color-base-50 ff-monospace fw-bold p-2">MY TAGS</header>
<div id="sidebar-nav-followed-tags" class="sidebar-nav-followed-tags"></div>
<% end %>
<div id="sidebar-nav-default-tags" class="sidebar-nav-default-tags <%= "showing" unless user_signed_in? %>">
<header id="tag-separator" class="fs-xs color-base-50 ff-monospace fw-bold p-2">
<% if user_signed_in? %>
OTHER POPULAR TAGS
<% else %>
DESIGN YOUR EXPERIENCE
<% end %>
<header class="p-2 pr-0 flex items-center justify-between">
<h3 class="crayons-subtitle-3">My Tags</h3>
<a href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
<%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon") %>
</a>
</header>
<% Tag.where(supported: true).order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
<div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
<a class="crayons-link crayons-link--block" href="<%= tag_path(tag_array.second) %>">
#<%= tag_array.second %>
</a>
<a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s crayons-btn--secondary_"
href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
data-info='{"id":<%= tag_array.first %>,"className":"Tag"}'>
Follow
</a>
</div>
<% end %>
<div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2" style="max-height: 42vh;"></div>
<% else %>
<h3 class="crayons-subtitle-3 p-2">Popular Tags</h3>
<div id="sidebar-nav-default-tags" class="overflow-y-auto" style="max-height: 42vh">
<% Tag.where(supported: true).order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
<div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
<a class="crayons-link crayons-link--block py-2 px-2" href="<%= tag_path(tag_array.second) %>">
#<%= tag_array.second %>
</a>
<a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
data-info='{"id":<%= tag_array.first %>,"className":"Tag"}'>
Follow
</a>
</div>
<% end %>
</div>
<% end %>
</nav>

2
app/views/articles/index.html.erb
View file

@ -77,7 +77,7 @@
</header>
<% if user_signed_in? %>
<div id="homepage-feed"></div>
<div id="homepage-feed" style="min-height: 90vh"></div>
<% else %>
<%= render "stories/main_stories_feed" %>
<% end %>

16
app/views/dashboards/following_tags.html.erb
View file

@ -13,12 +13,11 @@
<%= render "actions" %>
</aside>
<div class="crayons-layout__content" id="user-dashboard">
<div class="crayons-layout__content mb-5" id="user-dashboard">
<% if @followed_tags.any? %>
<div class="crayons-card crayons-card--secondary p-4 px-6 fs-s mb-2 mx-2 m:mx-0">
<i>
Adjust <strong>Follow Weight</strong> to make a tag show up less or more in your feed (default 1.0). Raising the number will make it so that a tag appears more in your feed, while lowering the number will make a tag less followed. Note that you can even make the follow weight negative for tags that you want to avoid seeing.
</i>
<div class="crayons-notice p-4 px-6 mb-4 mx-2 m:mx-0">
Adjust tag weight to modify your home feed. Higher values mean more appearances for that tag.
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent ml-3">Default 1.0</span>
</div>
<div id="following-wrapper" class="grid gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
<% negative_follow_shown_once = false %>
@ -40,10 +39,9 @@
<%= strip_tags(tag.short_summary) %>
</p>
<%= form_for(follow, html: { class: "flex items-center flex-nowrap" }) do |f| %>
<%= f.label(:points, "Follow weight:", class: "fs-s flex-1 pr-2 color-base-60 align-right whitespace-nowrap") %>
<%= f.number_field(:points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", style: "max-width:90px") %>
<button type="submit" class="crayons-btn crayons-btn--ghost crayons-btn--s" name="commit">Save</button>
<%= form_for(follow, html: { class: "flex items-right w-100" }) do |f| %>
<%= f.number_field(:points, step: :any, required: true, class: "crayons-textfield grow-1 fs-s inline-block w-75") %>
<button type="submit" class="crayons-btn crayons-btn--ghost crayons-btn--s inline-block ml-2" name="commit" style="min-width:60px;">Save</button>
<% end %>
</div>
<% end %>

12
app/views/layouts/_user_config.html.erb
View file

@ -1,6 +1,7 @@
<script>
try {
const bodyClass = localStorage.getItem('config_body_class');
const userString = localStorage.getItem('current_user');
if (bodyClass) {
document.body.className = bodyClass;
@ -30,6 +31,17 @@
if (window.frameElement) { // Hide top bar and footer when loaded within iframe
document.body.classList.add("hidden-shell");
}
if (userString && userString.length > 0) {
const user = JSON.parse(userString)
const numTags = JSON.parse(user.followed_tags).length
if (numTags < 6) {
document.body.classList.add("user-tags-followed-"+numTags);
} else {
document.body.classList.add("user-tags-followed-max");
}
sidebarTags.style.height = "100vh"
sidebarTags.style.backgroundColor = "green"
}
} catch(e) {
Honeybadger.notify(e);
}

22
spec/system/homepage/user_visits_homepage_spec.rb
View file

@ -22,7 +22,7 @@ RSpec.describe "User visits a homepage", type: :system do
end
end
expect(page).to have_text("DESIGN YOUR EXPERIENCE")
expect(page).to have_text("Popular Tags")
end
describe "link tags" do
@ -63,14 +63,6 @@ RSpec.describe "User visits a homepage", type: :system do
sign_in(user)
end
it "offers to follow tags", js: true do
visit "/"
within("#sidebar-nav-default-tags") do
expect(page).to have_text("FOLLOW TAGS TO IMPROVE YOUR FEED")
end
end
context "when rendering broadcasts" do
let!(:broadcast) { create(:announcement_broadcast) }
@ -100,7 +92,7 @@ RSpec.describe "User visits a homepage", type: :system do
end
it "shows the followed tags", js: true do
expect(page).to have_text("MY TAGS")
expect(page).to have_text("My Tags")
# Need to ensure the user data is loaded before doing any checks
find("body")["data-user"]
@ -115,15 +107,7 @@ RSpec.describe "User visits a homepage", type: :system do
find("body")["data-user"]
within("#sidebar-nav-followed-tags") do
expect(all(".spec__tag-link").map(&:text)).to eq(%w[#javascript #go #ruby])
end
end
it "shows other tags", js: true do
expect(page).to have_text("OTHER POPULAR TAGS")
within("#sidebar-nav-default-tags") do
expect(page).to have_link("#webdev", href: "/t/webdev")
expect(page).not_to have_link("#ruby", href: "/t/ruby")
expect(all(".crayons-link--block").map(&:text)).to eq(%w[#javascript #go #ruby])
end
end
end