From 467e99556cf1fc088bbd91ec0612d4a64ff91ffd Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Tue, 20 Oct 2020 16:07:17 -0400 Subject: [PATCH] [deploy] Fix tag display bug and crayonsify area (#10868) * 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 --- .../initializers/initializeBaseUserData.js | 19 -------- app/assets/stylesheets/articles.scss | 11 ----- app/assets/stylesheets/base/main.scss | 16 +++++++ app/javascript/leftSidebar/TagsFollowed.jsx | 2 +- app/javascript/packs/homePage.jsx | 43 +++++++---------- app/views/articles/_sidebar_nav.html.erb | 47 ++++++++++--------- app/views/articles/index.html.erb | 2 +- app/views/dashboards/following_tags.html.erb | 16 +++---- app/views/layouts/_user_config.html.erb | 12 +++++ .../homepage/user_visits_homepage_spec.rb | 22 ++------- 10 files changed, 82 insertions(+), 108 deletions(-) diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js index 093360e80..b279648a3 100644 --- a/app/assets/javascripts/initializers/initializeBaseUserData.js +++ b/app/assets/javascripts/initializers/initializeBaseUserData.js @@ -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) { diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index 65ab6c563..92758fdf6 100644 --- a/app/assets/stylesheets/articles.scss +++ b/app/assets/stylesheets/articles.scss @@ -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; diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss index 02e5f3bad..d293ab1c7 100644 --- a/app/assets/stylesheets/base/main.scss +++ b/app/assets/stylesheets/base/main.scss @@ -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)); diff --git a/app/javascript/leftSidebar/TagsFollowed.jsx b/app/javascript/leftSidebar/TagsFollowed.jsx index 798b31fc0..f13ab476d 100644 --- a/app/javascript/leftSidebar/TagsFollowed.jsx +++ b/app/javascript/leftSidebar/TagsFollowed.jsx @@ -14,7 +14,7 @@ export const TagsFollowed = ({ tags = [] }) => { > {`#${tag.name}`} diff --git a/app/javascript/packs/homePage.jsx b/app/javascript/packs/homePage.jsx index 32c51e5de..29e03bd6c 100644 --- a/app/javascript/packs/homePage.jsx +++ b/app/javascript/packs/homePage.jsx @@ -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( - , - 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( + , + 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(); diff --git a/app/views/articles/_sidebar_nav.html.erb b/app/views/articles/_sidebar_nav.html.erb index df1d25867..a1620e0d9 100644 --- a/app/views/articles/_sidebar_nav.html.erb +++ b/app/views/articles/_sidebar_nav.html.erb @@ -41,29 +41,30 @@ -