Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Truncate long tags in sidebar #11057

Merged
merged 1 commit into from Oct 26, 2020
Merged

Truncate long tags in sidebar #11057

merged 1 commit into from Oct 26, 2020

Conversation

PakkuDon
Copy link
Contributor

What type of PR is this? (check all applicable)

  • Refactor
  • Feature
  • Bug Fix
  • Optimization
  • Documentation Update

Description

A popular tag with a long name causes a horizontal scrollbar in the sidebar
Sidebar with long popular tag and horizontal scrollbars

This PR truncates long tags and shows ellipses on text overflow.

Related Tickets & Documents

Resolves #10990

QA Instructions, Screenshots, Recordings

  • In rails console create a new tag. Tags must be marked as supported to appear in the sidebar. Eg:
Tag.create!(name: 'longnamethatcausesoverflow', supported: true)
  • If you have more than 30 tags you may need to change the new tag's hotness_score so that it appears in the list.
    For reference: Here's the query that generates the popular tag list

    forem/app/views/articles/_sidebar_nav.html.erb

    Line 81 in 4dde307

    <% Tag.where(supported: true).order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
  • Navigate to /

Sidebar after changes
Forem sidebar with long tag truncated with ellipses

Added tests?

  • yes
  • no, because they aren't needed (I think?)
  • no, because I need help

Added to documentation?

  • docs.forem.com
  • readme
  • no documentation needed

@pr-triage pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Oct 25, 2020
@CLAassistant
Copy link

CLAassistant commented Oct 25, 2020 •
edited

CLA assistant check
All committers have signed the CLA.

citizen428
citizen428 approved these changes Oct 26, 2020
View reviewed changes
Copy link
Contributor

@citizen428 citizen428 left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks for the contribution @PakkuDon 🎉

@pr-triage pr-triage bot added PR: partially-approved bot applied label for PR's where a single reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Oct 26, 2020
@pr-triage pr-triage bot added PR: reviewed-approved bot applied label for PR's where reviewer approves changes and removed PR: partially-approved bot applied label for PR's where a single reviewer approves changes labels Oct 26, 2020
@rhymes rhymes merged commit e4865a6 into forem:master Oct 26, 2020
@pr-triage pr-triage bot added PR: merged bot applied label for PR's that are merged and removed PR: reviewed-approved bot applied label for PR's where reviewer approves changes labels Oct 26, 2020
@PakkuDon PakkuDon deleted the pakkudon/truncate-long-tags-in-sidebar branch October 26, 2020 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@citizen428 citizen428 citizen428 approved these changes

@ludwiczakpawel ludwiczakpawel ludwiczakpawel approved these changes

Assignees
No one assigned
Labels
PR: merged bot applied label for PR's that are merged
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

text overflow in "Popular tags"
5 participants
@PakkuDon @CLAassistant @citizen428 @ludwiczakpawel @rhymes