Making an entire td link while having a different link within (JQuery)

Contribute UX
4

Thx for the info @ccdw, perhaps it will come in handy in the future. I took another look at what I was trying to do and realized it could be done just with CSS :slightly_smiling:

I went with a simpler topic link display:

{{#if controller.hideCategory}}
  <a href="{{topic.lastUnreadUrl}}" class="title" title="Escrito por {{content.creator.username}}"><div class="category-title">{{topic.title}}</div></a>
{{else}}
  <a href="{{topic.lastUnreadUrl}}" class="title" title="Escrito por {{content.creator.username}}"><div class="home-title">{{topic.title}}</div></a>
  <span class="foro">{{category-link content.category}}</span>
{{/if}}

And then applied the following CSS, floating the category title and adjusting margins so that it would still appear within the anchor block for the title link.

td.main-link  {width: 70% !important; padding:0px !important;}
td.main-link .title {font-size: 19px; display: block;}
td.main-link .title:hover {background-color: gold;}
td.main-link .title .home-title {padding: 0px 5px 40px 15px; margin-bottom: -20px;}
td.main-link .title .category-title {padding: 8px 5px 8px 15px;}
td.main-link .foro {  float: left; margin-top: -30px; padding-left: 15px; margin-bottom: -40px;}
.foro a.badge-wrapper.bullet span.badge-category {font-size: 14px; color: #333 !important; padding-bottom: 0px;}
.foro .badge-wrapper.bullet .badge-category-parent-bg, 
.foro .badge-wrapper.bullet .badge-category-bg {line-height: 10px;}

Feel free to check it out. I think it could really improve the microinteraction of accessing topics.
https://www.helloforos.com/

1 me gusta