1322516 - On the product topic page articles are displayed as tiles

Status: RESOLVED FIXED

(support.mozilla.org :: Lithium Migration, task)

Description

[Patrick McClard;pmcclard]

Attachment: Basic Browsing Mozilla Support Community.png

Current Behavior: The topic articles are currently displayed on tiles. See screenshot.

Expected Behavior: Articles should be displayed in a list with the Title of the article and a short description of the article content.

Comment 1

[scott.riley]

Swapped <component id="tkb.widget.article-list”/> with  <component id="message-list"/>.  It's on stage if you want to see what it looks like.  Copying in Joni because you now could probably make that layout have a left rail if you want and move components.

The other decision is that Tiles will contain the initial text.  The list view does not.

https://support-stage.allizom.org/t5/Basic-Browsing/tkb-p/basic-browsing-kb

To switch it back, reverse the components above in the TKBPage quilt in Studio.

Comment 2

[madalina]

This looks strange, like forum threads:http://migration26.stage.lithium.com/t5/Basic-Browsing/tkb-p/basic-browsing-kb

I was expecting it to look like a list similar to the original display: https://support.mozilla.org/en-US/products/firefox/basic-browsing-firefox

Comment 3

[Joni Chan]

The article list now looks like a list of single-author forum posts. We'd like to remove everything but the title and the search summary.

Comment 4

[scott.riley]

There are only two OOB presentations of articles.  The tiles that were there and the list which is there now.  Generally, lists that have text beyond the subject line don't work nicely with responsive sites.  That is why there is only text in the tiles since they stack in mobile breaks.  

Asking Tyson to comment if something else is needed.

Comment 5

[Alice Wyman]

As a side note, I've been noticing that Lithium KB article lists are a mixture of different categories. For example, http://migration26.stage.lithium.com/t5/Basic-Browsing/tkb-p/basic-browsing-kb lists support ("How to" and "Troubleshooting") articles, "How to contribute" articles and templates.  I think what might be happening is that articles are being listed by Topics and/or Relevant to: product instead of by category. Related discussion:
https://support.mozilla.org/en-US/kb/how-translate-sumo-kb-articles-bengali/discuss/6994

Comment 6

[Tyson Nunemacher]

Tiles are a part of our responsive TKB product.  If you swap for a "message-list" component, yes, it'll look much more like a discussion forum.  If you want a hybrid of these, something in between, customization will be required.  I can think of a couple approaches off the top of my head:

1) Start with the tiles component.  Use CSS to stretch the tiles to full width, remove the borders, and adjust padding/color of the space between the tiles.  Basically, you'd take 4 cols of tiles at the widest break and turn them into 1.  You have all the data you want with this component, but it'd take a bit of CSS work to tranform it into something which resembles your old site.

2) Start with the list component.  Use CSS to hide the fields which make the topics look like discussion threads which you don't want.  Very little CSS would be required, but the component doesn't provide the summary/snippet you want.

If neither of these options suits you, then you'd need to build a completely custom TKB component around API calls, which is possible, but realize that you're likely to lose some OOB functionality which may not be immediately obvious to you, but may be valuable to your mods, like batch processing.  This seems like it'd be very much out of scope for a release in 2 weeks.

Comment 7

[madalina]

Thanks Tyler.

Joni, which ones of the options 1 or 2 you think makes more sense?

Comment 8

[Joni Chan]

#1 seems to be the best option here. We'd need the summary/snippet in the list view.

Comment 9

[Tyson Nunemacher]

Check out https://support-stage.allizom.org/t5/Basic-Browsing/tkb-p/basic-browsing-kb.

Comment 10

[Joni Chan]

This looks good, Tyson. Thanks! Should I push it to Production now?

Comment 11

[scott.riley]

Deployed to production https://hwsfp35778.lithium.com/t5/Basic-Browsing/tkb-p/basic-browsing-kb

Comment 12

[Patrick McClard;pmcclard]

Looks better after the push.