Dynamically show Most Viewed Posts

Here it is @Joe_Gabriele

<pre><span><style>
[data-test="see-all"] {
display: none;
}

This code works with every type of list

1 Like

Thanks Lucas, but I have 6 other Inline lists on the same page, so the above code hides the ā€œSee Allā€ for 6 vs just 1 particular Inline List. Anyway to isolate the button to just 1 particular list?

What you could do is add a filter condition to your inline list such that it only shows posts where views is greater than X.

But assuming that you want to show (say, for example) just 10 posts, then the tricky part would be dynamically determining the correct value for X. There should be a way to do it, but Iā€™d need to think about that for a bitā€¦

You can take a look at my app at: https://getjourneyer.com.

On the Home Tab, youā€™ll see several Inline Lists for ā€œFeaturedā€, ā€œMost Popularā€ and then for different Continents. All lists are limited to display 10 as there could eventually be 100ā€™s for each continent. I would like the option for people to click ā€œSee Allā€ for the Continent lists, but for ā€œMost Popularā€, the ā€œSee Allā€ option just doesnā€™t make much sense, especially when users can view all Posts under the Journeyā€™s tab.

I would agree with @Darren_Murphyā€™s idea, but yes, determining the right cutoff point for a filter is tricky. Iā€™m wondering if @Lucas_Piresā€™s idea with the CSS would work if you added an nthe child [1] or something like that to single out the first instance of ā€˜See Allā€™.

2 Likes

I was trying here, but have no idea to do it

Maybe Iā€™l just use the CSS to Hide as users can still go to the other Continent Lists via the Categories Tab. Thanks!

@Darren_Murphy gave you a good point too if you determine the right cutoff point for a filter

Hereā€™s also what I did in one of my apps. You can use the filter (or the code) and add some ā€œSee Allā€ button below. In my opinion itā€™s more intuitive, like facebook does

1 Like

Yea the tricky part is that because the app is fairly new, there isnt much view data. But that could be a decent solution down the road when I do have a better idea where the best cut off would be. Would be something Iā€™d have to keep on top of though.

In your example, did you just set buttons to link to a deep link?

1 Like

In this case I set
Button > Link to screen > Relation based in what users Liked/Commented (List)

2 Likes

Your lucky day! :tada:

Thank @marcioferlan, he helpes me a lot and helped me to find this!

Obs:

This :nth-of-type (1) has to match the ordinal of the component that represents the inline, you know? If there are other components above the first inline, this ordinal has to be adjusted.

<style>
div[id*='screenScrollView'] > div > div:nth-of-type(1) button[data-test='see-all'] {
  display: none;
}
</style>
3 Likes

Awesome! Noob question, I know CSS can go in a Rich Text field, but how about HTML?

Also, the list I am adjusting is the 3rd list on the page, would I adjust the (1) to (3)?

Same

Actually, you gotta count how many components you have above. The order your component is in, you put the number

1 Like

Ahh so thatā€™s how it works! Is that the ā€œnthā€ part?

1 Like

So I tried putting everything from #1-13 in the (#) section and nothing worked to make the See All disappear. Am I doing something wrong?

div[id*='screenScrollView'] > div > div:nth-of-type(10) button[data-test='see-all'] { display: none; }

I counted and the inline list you want to put is 11th, so put (11)

Yea I tried 11 and still shows it. I also went the live site incase the display in Glide didnt show the update, but still shows. Very strange!

Try (3) and tell me

Ive tried using 1 - 13 lol