#1250 no clickable ontology terms in list views

Author: eilmiv

app/assets/stylesheets/masonry.scss

@@ -105,7 +105,6 @@
   border-radius: 8px;
   padding: $item-padding-base;
   display: block;
-  position: relative;
   transition: $transition-time;
 
   &:hover, &:focus {
@@ -164,20 +163,6 @@
   }
 }
 
-.link-overlay-main-link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 0;
-}
-
-.link-overlay-link {
-  position: relative;
-  z-index: 1;
-}
-
 li.media-item {
   list-style-type: none;
 }

app/helpers/materials_helper.rb

@@ -119,13 +119,13 @@ def keywords_and_topics(resource, limit: nil)
 
     if resource.respond_to?(:scientific_topics)
       tags += resource.scientific_topics.map do |term|
-        link_to(term.preferred_label, term.uri, class: 'label label-info tag-topic link-overlay-link', target: '_blank')
+        content_tag(:span, term.preferred_label, class: 'label label-info tag-topic')
       end
     end
 
     if resource.respond_to?(:operations)
       tags += resource.operations.map do |term|
-        link_to(term.preferred_label, term.uri, class: 'label label-info tag-operation link-overlay-link', target: '_blank')
+        content_tag(:span, term.preferred_label, class: 'label label-info tag-operation')
       end
     end
 

app/views/events/_event.html.erb

@@ -1,8 +1,7 @@
 <% learning_path_topic_item ||= nil %>
 <% collection_item ||= learning_path_topic_item %>
 <li class="masonry-brick media-item long">
-  <div class="link-overlay with-left-icon">
-    <%= link_to '', event, class: 'link-overlay-main-link' %>
+  <%= link_to event, class: 'link-overlay with-left-icon' do %>
     <%= item_order_badge(collection_item) if collection_item %>
     <div class="with-left-icon">
       <div class="icon-container hidden-xs">
@@ -56,5 +55,5 @@
     </div>
 
     <%= item_comment(collection_item) if collection_item %>
-  </div>
+  <% end %>
 </li>

app/views/learning_paths/_learning_path.html.erb

@@ -1,6 +1,5 @@
 <li class="masonry-brick media-item large block-item learning-path-bg-<%= (learning_path.id % 4) + 1 -%>">
-  <div class="link-overlay">
-    <%= link_to '', learning_path, class: 'link-overlay-main-link' %>
+  <%= link_to learning_path, class: 'link-overlay' do %>
     <%= item_order_badge(collection_item) if defined? collection_item %>
 
     <div class="masonry-brick-heading">
@@ -35,5 +34,5 @@
     </div>
 
     <%= item_comment(collection_item) if defined? collection_item %>
-  </div>
+  <% end %>
 </li>

app/views/materials/_material.html.erb

@@ -7,8 +7,7 @@
   end
 %>
 <li class="masonry-brick media-item long">
-  <div class="link-overlay">
-    <%= link_to '', material_path(material, **link_params), class: 'link-overlay-main-link' %>
+  <%= link_to material_path(material, **link_params), class: 'link-overlay' do %>
     <%= item_order_badge(collection_item) if show_order && collection_item %>
 
     <div class="masonry-brick-heading">
@@ -41,5 +40,5 @@
     </div>
 
     <%= item_comment(collection_item) if collection_item %>
-  </div>
+  <% end %>
 </li>

test/controllers/learning_paths_controller_test.rb

@@ -525,7 +525,7 @@ class LearningPathsControllerTest < ActionController::TestCase
     topic_link = @learning_path.topic_links.first
     topic_item = topic_link.topic.items.first
 
-    assert_select '.link-overlay a[href=?]',
+    assert_select '.link-overlay[href=?]',
                   material_path(topic_item.resource, lp: [topic_link, topic_item].map(&:id).join(':'))
   end
 

test/controllers/stars_controller_test.rb

@@ -71,6 +71,6 @@ class StarsControllerTest < ActionController::TestCase
 
     assert_response :success
     assert_select '#materials div.search-results-count', text: '1 Material', count: 1
-    assert_select '#materials li.masonry-brick .link-overlay a[href=?]', material_path(material), count: 1
+    assert_select '#materials li.masonry-brick a.link-overlay[href=?]', material_path(material), count: 1
   end
 end

test/helpers/materials_helper_test.rb

@@ -8,7 +8,7 @@ class MaterialsHelperTest < ActionView::TestCase
     assert_includes topics, 'Metabolomics'
   end
 
-  test 'keywords_and_topics generates clickable links for scientific topics and operations' do
+  test 'keywords_and_topics generates spans with css classes for scientific topics and operations' do
     topic_term = OpenStruct.new(preferred_label: 'Genomics', uri: 'http://edamontology.org/topic_0622')
     operation_term = OpenStruct.new(preferred_label: 'Sequence alignment', uri: 'http://edamontology.org/operation_0292')
     resource = OpenStruct.new(
@@ -18,10 +18,8 @@ class MaterialsHelperTest < ActionView::TestCase
     )
     result = keywords_and_topics(resource)
 
-    assert_includes result, 'href="http://edamontology.org/topic_0622"'
     assert_includes result, 'Genomics'
     assert_includes result, 'tag-topic'
-    assert_includes result, 'href="http://edamontology.org/operation_0292"'
     assert_includes result, 'Sequence alignment'
     assert_includes result, 'tag-operation'
     assert_includes result, 'keyword1'