#1250 Make ontology terms clickable

Author: eilmiv

app/assets/stylesheets/application.scss

@@ -1111,3 +1111,7 @@ td.day .calendar-text {
   display: flex;
   justify-content: center;
 }
+
+.tag-topic, .tag-operation {
+  text-decoration: none;
+}

app/assets/stylesheets/masonry.scss

@@ -105,6 +105,7 @@
   border-radius: 8px;
   padding: $item-padding-base;
   display: block;
+  position: relative;
   transition: $transition-time;
 
   &:hover, &:focus {
@@ -163,6 +164,20 @@
   }
 }
 
+.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

@@ -71,17 +71,15 @@ def display_attribute(resource, attribute, show_label: true, title: nil, markdow
     ].any?
 
     value = resource.send(attribute)
-    if markdown
-      value = render_markdown(value)
-    end
+    value = render_markdown(value) if markdown
     if value.present?
-      if list
-        value = value.map do |v|
-          html_escape(block_given? ? yield(v) : v)
-        end
-      else
-        value = html_escape(block_given? ? yield(value) : value)
-      end
+      value = if list
+                value.map do |v|
+                  html_escape(block_given? ? yield(v) : v)
+                end
+              else
+                html_escape(block_given? ? yield(value) : value)
+              end
     end
     string = "<p class=\"#{attribute}#{show_label ? ' no-spacing' : ''}\">"
     unless value.blank? || value.try(:strip) == 'License Not Specified'
@@ -119,18 +117,26 @@ def embed_youtube(material)
   def keywords_and_topics(resource, limit: nil)
     tags = []
 
-    %i[scientific_topic_names operation_names keywords].each do |field|
-      tags |= resource.send(field) if resource.respond_to?(field)
+    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')
+      end
     end
 
-    limit_exceeded = limit && (tags.length > limit)
-    tags = tags.first(limit) if limit
+    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')
+      end
+    end
 
-    elements = tags.map do |tag|
-      content_tag(:span, tag, class: 'label label-info')
+    if resource.respond_to?(:keywords)
+      tags += resource.keywords.map do |tag|
+        content_tag(:span, tag, class: 'label label-info tag-keyword')
+      end
     end
-    elements << '&hellip;' if limit_exceeded
 
-    elements.join(' ').html_safe
+    tags = tags.first(limit) if limit
+    tags << '&hellip;' if limit && (tags.length > limit)
+    safe_join(tags, ' ')
   end
 end

app/views/common/_extra_metadata.html.erb

@@ -63,7 +63,9 @@
 <%= display_attribute(resource, :contributors) { |values| values.join(', ') } if resource.respond_to?(:contributors) %>
 <%= display_attribute(resource, :remote_created_date) if resource.respond_to?(:remote_created_date) %>
 <%= display_attribute(resource, :remote_updated_date) if resource.respond_to?(:remote_updated_date) %>
-<%= display_attribute(resource, :scientific_topics) { |values| values.map { |x| x.preferred_label }.join(', ') } %>
+<%= display_attribute(resource, :scientific_topics) { 
+  |values| safe_join(values.map { |x| link_to(x.preferred_label, x.uri, target: '_blank') }, ', ') 
+} %>
 
 <% if resource.is_a?(LearningPath) %>
   <%= display_attribute(resource, :status) { |value| material_status_title_for_label(value) } %>
@@ -73,5 +75,7 @@
 <% end %>
 
 <% if resource.respond_to?(:operations) -%>
-  <%= display_attribute(resource, :operations) { |values| values.map { |x| x.preferred_label }.join(', ') } %>
+  <%= display_attribute(resource, :operations) { 
+    |values| safe_join(values.map { |x| link_to(x.preferred_label, x.uri, target: '_blank') }, ', ') 
+  } %>
 <% end %>

app/views/events/_event.html.erb

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

app/views/learning_paths/_learning_path.html.erb

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

app/views/materials/_material.html.erb

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