Is there a way to style the "Latest" page and "Top" page separately?

Support
1

I’ve run into an issue trying to style elements on the “Latest” page and “Top” page. They share the exact same body class (class=“staff docked navigation-topics”), meaning I can’t style them individually. The “Categories” page has a different class (class=“staff docked navigation-categories categories-list”) so I can style it no problem. Does anyone have a solution?

2

You can add a custom class or do whatever based on route (discovery.top, discovery.latest). The central block would be sth like

@discourseComputed("router.currentRouteName")
  canDisplay(currentRouteName) {
    if (currentRouteName === `discovery.top`) {
       ...
    }

But would love to hear if there’s a solution that doesn’t involve a custom script.

2 Likes
3

Thanks for the reply. I continued searching around and found another solution that worked out for me and could potentially help someone else as well:

//Javascript - Hide the targeted element based on text within the URL. In this case, the text within the URL was “top” and the ID I wanted to hide was “main-title”.

<script>
    window.onload = function() {
      if (window.location.href.indexOf('/top')) {
        document.querySelectorAll('#main-title')[0].style.display = 'none';
      }
    };
</script>

Edit: This doesn’t work as intended. The issue is that you need to refresh the page to trigger the javascript function.

1 Like
4

Yes, @nolo’s solution is a good approach for achieving things quite simply. Using window.location.href you may run into issues with getting the correct url due to Ember’s runloop anyways.

To adjust what your doing into the more “Ember” approach would be to do something like this:

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    } 
  });
</script>

However, its probably best if you simply add a body class and style that class, which will also allow you to make more complex style changes.

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

.route-discovery-top #main-title {
    display: none;
}
3 Likes