blacklight-spotlight 4.7.1 → 5.0.0.pre.alpha2

data/app/components/spotlight/save_search_component.rb

@@ -3,7 +3,7 @@
 module Spotlight
   # Displays the "Save this search" button and modal
   class SaveSearchComponent < ViewComponent::Base
-    def initialize(button_classes: 'btn btn-secondary')
+    def initialize(button_classes: 'btn btn-outline-primary')
       @button_classes = button_classes
       super
     end

data/app/components/spotlight/select_image_component.html.erb

@@ -0,0 +1,17 @@
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title { t('spotlight.pages.form.select_image') } %>
+  <% component.with_body do %>
+    <div class='p-3 m-2'>
+      <input type="hidden" name="select_image_region">
+      <p class="instructions"><%= help_text.html_safe %></p>
+      <div class="mx-3" id="resource_block_iiif_cropper" data-behavior="iiif-cropper" data-cropper-key="select_image_<%=@block_item_id%>" data-index-id="<%=@index_id%>" data-crop-width="120" data-crop-height="120">
+    </div>
+  <% end %>
+   <% component.with_footer do %>
+    <div> 
+      <input type='button' class='btn btn-outline-primary' value='Cancel' data-bl-dismiss='modal'>
+      <input id='save-cropping-selection' type='button' class='btn btn-primary' value='Save changes' data-bl-dismiss='modal'>  
+    </div>
+  <% end %>
+<% end %>
+

data/app/components/spotlight/select_image_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Component to select section of image
+  class SelectImageComponent < ViewComponent::Base
+    def initialize(index_id, block_item_id)
+      super
+      @index_id = index_id
+      @block_item_id = block_item_id
+    end
+
+    def render?
+      true
+    end
+
+    def initial_crop_selection
+      Spotlight::Engine.config.thumbnail_initial_crop_selection
+    end
+
+    def help_text
+      t(:'spotlight.pages.form.instructions_html')
+    end
+  end
+end

data/app/components/spotlight/skip_link_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Blacklight Skip Link Component with conditional search link for Spotlight
+  class SkipLinkComponent < Blacklight::SkipLinkComponent
+    def initialize(render_search_link: true)
+      @render_search_link = render_search_link
+
+      super
+    end
+
+    def link_to_search
+      super if @render_search_link
+    end
+  end
+end

data/app/components/spotlight/tag_selector_component.html.erb

@@ -0,0 +1,40 @@
+<div data-controller="tag-selector" class="tag-selector" data-tag-selector-translations-value="<%= translation_data.to_json %>" data-tag-selector-tags-value="<%= selected_tags %>">
+  <% if form.nil? %>
+    <%= text_field_tag field_name, selected_tags_value, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
+  <% else %>
+    <%= form.text_field field_name, value: selected_tags_value, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
+  <% end %>
+  <input type="hidden" value="<%= selected_tags_value %>" data-tag-selector-target="initialTags">
+    
+  <div class='mb-3'>
+    <div class="tag-selection-wrapper" data-tag-selector-target="tagControlWrapper">
+      <div class="dropdown w-100 mb-3 d-inline-block" data-action="click@window->tag-selector#clickOutside">
+        <div data-tag-selector-target="tagSearchDropdown">
+          <div data-tag-selector-target="selectedTags"></div>
+          <div data-tag-selector-target="tagSearchInputWrapper" class="border rounded-bottom tag-selection-search-bar d-flex">
+            <button type="button" aria-label="toggle dropdown" class="btn btn-link text-secondary me-1 px-2" data-action="click->tag-selector#tagDropdown">
+              <span><%= search_icon_svg %></span>
+            </button>
+            <input class="flex-grow-1" data-action="input->tag-selector#search input->tag-selector#updateSearchResultsPlaceholder input->tag-selector#updateTagToAdd focus->tag-selector#tagDropdown keydown->tag-selector#handleKeydown" 
+              data-tag-selector-target="tagSearch" placeholder="<%= t('.search') %>" aria-label="<%= t('.search') %>">
+            <button type="button" aria-label="toggle dropdown" class="dropdown-toggle btn btn-link text-secondary" data-bs-toggle="dropdown" data-action="click->tag-selector#tagDropdown"></button>
+          </div>
+        </div>
+        <div data-tag-selector-target="dropdownContent" class="dropdown-content d-none tags-group border rounded">
+          <% all_tags.each do |tag| %>
+            <label class="d-block">
+              <input type="checkbox" <%= 'checked' if selected?(tag) %> data-action="click->tag-selector#tagUpdate" data-tag-selector-target="searchResultTags" data-tag="<%= tag %>">
+              <%= tag %>
+            </label>
+          <% end %>
+          <% if all_tags.empty? %>
+            <label class="no-results"><%= t('.no_results') %></label>
+          <% end %>
+          <label class="d-none" data-tag-selector-target="addNewTagWrapper">
+            <input type="checkbox" disabled data-action="click->tag-selector#tagCreate" data-tag-selector-target="newTag" data-tag=""> Add new tag
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/spotlight/tag_selector_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Displays a tag selection input
+  # This uses a plain text input that acts-as-taggable-on expects.
+  class TagSelectorComponent < ViewComponent::Base
+    # selected_tags_value is a comma delimited string of tags
+    def initialize(field_name:, all_tags:, selected_tags_value: nil, form: nil)
+      @form = form
+      @field_name = field_name
+      @selected_tags_value = selected_tags_value || ''
+      @all_tags = all_tags&.sort_by { |tag| (tag.respond_to?(:name) ? tag.name : tag).downcase }
+
+      super
+    end
+
+    def selected_tags
+      selected_tags_value.split(',').map(&:strip)
+    end
+
+    def search_icon_svg
+      render Blacklight::Icons::SearchComponent.new
+    end
+
+    private
+
+    # To pass to the JS
+    def translation_data
+      {
+        add_new_tag: t('.add_new_tag'),
+        remove: t('.remove')
+      }
+    end
+
+    def selected?(tag)
+      selected_tags.include?(tag.respond_to?(:name) ? tag.name : tag)
+    end
+
+    attr_reader :form, :field_name, :selected_tags_value, :all_tags
+  end
+end

data/app/components/spotlight/tag_selector_component.yml

@@ -0,0 +1,6 @@
+en:
+  add_new_tag: "Add a new tag"
+  no_js_placeholder: "Enter tags delimited by commas"
+  no_results: "No results found"
+  remove: "Remove"
+  search: "Type to search and add tags"

data/app/components/spotlight/title_component.html.erb

@@ -0,0 +1,8 @@
+  <div class="container site-title-container">
+    <div class="site-title-wrapper">
+      <a href="<%= helpers.current_exhibit ? helpers.spotlight.exhibit_path(helpers.current_exhibit) : helpers.spotlight.exhibits_path %>" class="link-unstyled">
+        <%= title %>
+        <%= subtitle %>
+      </a>
+    </div>
+  </div>

data/app/components/spotlight/title_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Draws the title in the masthead
+  class TitleComponent < ViewComponent::Base
+    def initialize(title:, subtitle:)
+      @title = title
+      @subtitle = subtitle
+      super
+    end
+
+    def title
+      tag.h1 @title, class: 'site-title h2'
+    end
+
+    def subtitle
+      return unless @subtitle
+
+      tag.small(@subtitle, class: 'd-none d-md-block py-2 fs-4')
+    end
+  end
+end

data/app/controllers/spotlight/accessibility_controller.rb

@@ -9,7 +9,7 @@ module Spotlight
 
     def alt_text
       # Sort by newest except for the homepage, which is always first
-      pages_with_alt = @exhibit.pages.order(Arel.sql('id = 1 DESC, created_at DESC')).select { |elem| elem.content.any?(&:alt_text?) }
+      pages_with_alt = @exhibit.pages.order(Arel.sql('id = 1 DESC, created_at DESC')).select { |elem| elem.content.any?(&:supports_alt_text?) }
       @pages = pages_with_alt.map { |page| get_alt_info(page) }
       @has_alt_text = @pages.sum { |page| page[:has_alt_text] }
       @total_alt_items = @pages.sum { |page| page[:can_have_alt_text] }
@@ -23,7 +23,7 @@ module Spotlight
       can_have_alt_text = 0
       has_alt_text = 0
       page.content.each do |content|
-        next unless content.alt_text?
+        next unless content.supports_alt_text?
 
         content.item&.each_value do |item|
           can_have_alt_text += 1

data/app/controllers/spotlight/catalog_controller.rb

@@ -30,7 +30,6 @@ module Spotlight
         if Blacklight::VERSION > '8'
           blacklight_config.show.document_component = Spotlight::DocumentComponent
         else
-          blacklight_config.show.partials.unshift 'tophat'
           blacklight_config.show.partials.unshift 'curation_mode_toggle'
         end
       end
@@ -135,6 +134,12 @@ module Spotlight
       end
     end
 
+    def select_image
+      @index_id = params[:index_id]
+      @block_item_id = params[:block_item_id]
+      respond_to :html
+    end
+
     protected
 
     def load_document
@@ -194,7 +199,7 @@ module Spotlight
     def solr_document_params
       params.require(:solr_document).permit(:exhibit_tag_list,
                                             uploaded_resource: [:url],
-                                            sidecar: [:public, { data: [editable_solr_document_params] }])
+                                            sidecar: [:public, { data: editable_solr_document_params }])
     end
 
     def editable_solr_document_params

data/app/controllers/spotlight/contact_email_controller.rb

@@ -12,13 +12,19 @@ module Spotlight
 
     def destroy
       @contact_email.destroy
-      render json: { success: true, error: nil }
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: turbo_stream.remove(@contact_email) }
+        format.json { render json: { success: true, error: nil } }
+      end
     end
 
     private
 
     def record_not_found(_error)
-      render json: { success: false, error: 'Not Found' }, status: :not_found
+      respond_to do |format|
+        format.turbo_stream { head :not_found }
+        format.json { render json: { success: false, error: 'Not Found' }, status: :not_found }
+      end
     end
   end
 end

data/app/controllers/spotlight/languages_controller.rb

@@ -33,10 +33,15 @@ module Spotlight
     def destroy
       @language.destroy
 
-      redirect_to(
-        spotlight.edit_exhibit_path(@exhibit, tab: 'language'),
-        notice: t(:'helpers.submit.language.destroyed', model: @language.model_name.human.downcase)
-      )
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: turbo_stream.remove(@language) }
+        format.html do
+          redirect_to(
+            spotlight.edit_exhibit_path(@exhibit, tab: 'language'),
+            notice: t(:'helpers.submit.language.destroyed', model: @language.model_name.human.downcase)
+          )
+        end
+      end
     end
 
     private

data/app/helpers/spotlight/application_helper.rb

@@ -30,6 +30,13 @@ module Spotlight
       current_site.title.presence
     end
 
+    def content?(field)
+      return content_for?(field) unless Rails.configuration.action_view.annotate_rendered_view_with_filenames && content_for(field).present?
+
+      stripped_content = content_for(field).gsub(/<!-- BEGIN .+? -->/, '').gsub(/<!-- END .+? -->/, '').strip
+      stripped_content.present?
+    end
+
     # Returns the url for the current page in the new locale. This may be
     # overridden in downstream applications where our naive use of `url_for`
     # is insufficient to generate the expected routes

data/app/helpers/spotlight/crop_helper.rb

@@ -34,5 +34,9 @@ module Spotlight
     def form_prefix(f)
       f.object_name.parameterize(separator: '_')
     end
+
+    def input_prefix(f)
+      f.object_name
+    end
   end
 end

data/app/helpers/spotlight/meta_helper.rb

@@ -3,17 +3,37 @@
 module Spotlight
   # HTML <meta> tag helpers
   module MetaHelper
+    def description(description)
+      content_for(:meta) { ActionController::Base.helpers.tag.meta(name: 'description', content: description) } if description
+    end
+
+    def card(type, &block)
+      card = {}
+      block.call(card) if block_given?
+      content_for(:meta) { build_tags(card, type) }
+    end
+
+    # rubocop:disable Rails/OutputSafety
+    def build_tags(attributes, tag_field)
+      type_fields = { 'og' => 'property', 'twitter' => 'name' }
+      attributes.map do |key, value|
+        ActionController::Base.helpers.tag.meta("#{type_fields[tag_field]}": "#{tag_field}:#{key}", content: value) if value
+      end.compact.join("\n").html_safe
+    end
+    # rubocop:enable Rails/OutputSafety
+
     def add_exhibit_meta_content
       exhibit_twitter_card_content
       exhibit_opengraph_content
     end
 
     def exhibit_twitter_card_content
-      twitter_card('summary') do |card|
-        card.url exhibit_root_url(current_exhibit)
-        card.title current_exhibit.title
-        card.description current_exhibit.subtitle
-        card.image meta_image if current_exhibit.thumbnail
+      card('twitter') do |card|
+        card['card'] = 'summary'
+        card['url'] = spotlight.exhibit_root_url(current_exhibit)
+        card['title'] = current_exhibit.title
+        card['description'] = current_exhibit.subtitle
+        card['image'] = meta_image if current_exhibit.thumbnail
       end
     end
 
@@ -22,10 +42,10 @@ module Spotlight
     end
 
     def exhibit_opengraph_content
-      opengraph do |graph|
-        graph.title current_exhibit.title
-        graph.image meta_image if current_exhibit.thumbnail
-        graph.site_name site_title
+      card('og') do |graph|
+        graph['title'] = current_exhibit.title
+        graph['image'] = meta_image if current_exhibit.thumbnail
+        graph['site_name'] = site_title
       end
     end
 
@@ -35,20 +55,21 @@ module Spotlight
     end
 
     def page_twitter_card_content(page)
-      twitter_card('summary_large_image') do |card|
-        card.title page.title
-        card.image page.thumbnail.iiif_url if page.thumbnail
+      card('twitter') do |card|
+        card['card'] = 'summary_large_image'
+        card['title'] = page.title
+        card['image'] = page.thumbnail.iiif_url if page.thumbnail
       end
     end
 
     def page_opengraph_content(page)
-      opengraph do |graph|
-        graph.type 'article'
-        graph.site_name application_name
-        graph.title page.title
-        graph.send('image', page.thumbnail.iiif_url) if page.thumbnail
-        graph.send('article:published_time', page.created_at.iso8601)
-        graph.send('article:modified_time', page.updated_at.iso8601)
+      card('og') do |graph|
+        graph['type'] = 'article'
+        graph['site_name'] = application_name
+        graph['title'] = page.title
+        graph['image'] = page.thumbnail.iiif_url if page.thumbnail
+        graph['article:published_time'] = page.created_at.iso8601
+        graph['article:modified_time'] = page.updated_at.iso8601
       end
     end
 
@@ -58,20 +79,21 @@ module Spotlight
     end
 
     def browse_twitter_card_content(browse)
-      twitter_card('summary_large_image') do |card|
-        card.title browse.title
-        card.image browse.thumbnail.iiif_url if browse.thumbnail
+      card('twitter') do |card|
+        card['card'] = 'summary_large_image'
+        card['title'] = browse.title
+        card['image'] = browse.thumbnail.iiif_url if browse.thumbnail
       end
     end
 
     def browse_opengraph_content(browse)
-      opengraph do |graph|
-        graph.type 'article'
-        graph.site_name application_name
-        graph.title browse.title
-        graph.send('image', browse.thumbnail.iiif_url) if browse.thumbnail
-        graph.send('article:published_time', browse.created_at.iso8601)
-        graph.send('article:modified_time', browse.updated_at.iso8601)
+      card('og') do |graph|
+        graph['type'] = 'article'
+        graph['site_name'] = application_name
+        graph['title'] = browse.title
+        graph['image'] = browse.thumbnail.iiif_url if browse.thumbnail
+        graph['article:published_time'] = browse.created_at.iso8601
+        graph['article:modified_time'] = browse.updated_at.iso8601
       end
     end
 
@@ -83,19 +105,20 @@ module Spotlight
     def document_twitter_card_content(document)
       presenter = document_presenter(document)
 
-      twitter_card('summary_large_image') do |card|
-        card.title presenter.heading
-        card.image document.first(blacklight_config.index.thumbnail_field)
+      card('twitter') do |card|
+        card['card'] = 'summary_large_image'
+        card['title'] = presenter.heading
+        card['image'] = document.first(blacklight_config.index.thumbnail_field)
       end
     end
 
     def document_opengraph_content(document)
       presenter = document_presenter(document)
 
-      opengraph do |graph|
-        graph.site_name application_name
-        graph.title presenter.heading
-        graph.send('image', document.first(blacklight_config.index.thumbnail_field))
+      card('og') do |graph|
+        graph['site_name'] = application_name
+        graph['title'] = presenter.heading
+        graph['image'] = document.first(blacklight_config.index.thumbnail_field)
       end
     end
   end

data/app/javascript/spotlight/admin/blacklight_configuration.js

@@ -59,4 +59,4 @@ export default class {
       });
     });
   }
-}
+}

data/app/javascript/spotlight/admin/block_mixins/autocompleteable.js

@@ -1,3 +1,5 @@
+import { fetchAutocompleteJSON } from 'spotlight/admin/search_typeahead';
+
 (function ($){
   SirTrevor.BlockMixins.Autocompleteable = {
     mixinName: "Autocompleteable",
@@ -7,59 +9,93 @@
       this.on("onRender", this.addAutocompletetoSirTrevorForm);
 
       if (this['autocomplete_url'] === undefined) {
-        this.autocomplete_url = function() { return $('form[data-autocomplete-url]').data('autocomplete-url').replace("%25QUERY", "%QUERY"); };
+        this.autocomplete_url = function() { return $('form[data-autocomplete-url]').data('autocomplete-url'); };
+      }
+
+      if (this['autocomplete_fetch'] === undefined) {
+        this.autocomplete_fetch = this.fetchAutocompleteResults;
       }
 
       if (this['transform_autocomplete_results'] === undefined) {
         this.transform_autocomplete_results = (val) => val
       }
 
+      if (this['highlight'] === undefined) {
+        this.highlight = function(value) {
+          if (!value) return '';
+          const queryValue = this.getQueryValue().trim();
+          return queryValue ? value.replace(new RegExp(queryValue, 'gi'), '<strong>$&</strong>') : value;
+        }
+      }
+
       if (this['autocomplete_control'] === undefined) {
-        this.autocomplete_control = function() { return `<input type="text" class="st-input-string form-control item-input-field" data-twitter-typeahead="true" placeholder="${i18n.t("blocks:autocompleteable:placeholder")}"/>` };
+        this.autocomplete_control = function() {
+          const autocompleteID = this.autocompleteID();
+          return `
+          <auto-complete src="${this.autocomplete_url()}" for="${autocompleteID}-popup" fetch-on-empty>
+            <input type="text" name="${autocompleteID}" placeholder="${i18n.t("blocks:autocompleteable:placeholder")}" data-default-typeahead>
+            <ul id="${autocompleteID}-popup"></ul>
+            <div id="${autocompleteID}-popup-feedback" class="sr-only visually-hidden"></div>
+          </auto-complete>
+        ` };
       }
 
-      if (this['bloodhoundOptions'] === undefined) {
-        this.bloodhoundOptions = function() {
-          return {
-            remote: {
-              url: this.autocomplete_url(),
-              filter: this.transform_autocomplete_results
-            }
-          };
-        };
+      if (this['autocomplete_element_template'] === undefined) {
+        this.autocomplete_element_template = function(item) {
+          return `<li role="option" data-autocomplete-value="${item.id}">${this.autocomplete_template(item)}</li>`
+        }
       }
     },
 
-    addAutocompletetoSirTrevorForm: function() {
-      $('[data-twitter-typeahead]', this.inner).spotlightSearchTypeAhead({bloodhound: this.bloodhound(), template: this.autocomplete_template}).on('typeahead:selected typeahead:autocompleted', this.autocompletedHandler()).on( 'focus', function() {
-        if($(this).val() === '') {
-          $(this).data().ttTypeahead.input.trigger('queryChanged', '');
-        }
-      });
+    queryTokenizer: function(query) {
+      return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
     },
 
-    autocompletedHandler: function(e, data) {
-      var context = this;
+    filterResults: function(data, query) {
+      const queryStrings = this.queryTokenizer(query);
+      return data.filter(item => {
+        const lowerTitle = item.title.toLowerCase();
+        return queryStrings.some(queryString => lowerTitle.includes(queryString));
+      });
+    },
 
-      return function(e, data) {
-        $(this).typeahead("val", "");
-        $(this).val("");
+    fetchAutocompleteResults: async function(url) {
+      const result = await fetchAutocompleteJSON(url);
+      const transformed = this.transform_autocomplete_results(result);
+      this.fetchedData = {};
+      transformed.map(item => this.fetchedData[item.id] = item);
+      return transformed.map(item => this.autocomplete_element_template(item)).join('');
+    },
 
-        context.createItemPanel($.extend(data, {display: "true"}));
+    fetchOnceAndFilterLocalResults: async function(url) {
+      if (this.fetchedData === undefined) {
+        await this.fetchAutocompleteResults(url);
       }
+      const query = url.searchParams.get('q');
+      const data = Object.values(this.fetchedData);
+      const filteredData = query ? this.filterResults(data, query) : data;
+      return filteredData.map(item => this.autocomplete_element_template(item)).join('');
+    },
+
+    autocompleteID: function() {
+      return this.blockID + '-autocomplete';
     },
 
-    bloodhound: function() {
-      var block = this;
-      var results = new Bloodhound(Object.assign({
-        datumTokenizer: function(d) {
-          return Bloodhound.tokenizers.whitespace(d.title);
-        },
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        limit: 100,
-      }, block.bloodhoundOptions()));
-      results.initialize();
-      return results;
+    getQueryValue: function() {
+      const completer = this.inner.querySelector("auto-complete > input");
+      return completer.value;
+    },
+
+    addAutocompletetoSirTrevorForm: function() {
+      const completer = this.inner.querySelector("auto-complete");
+      completer.fetchResult = this.autocomplete_fetch.bind(this);
+      completer.addEventListener('auto-complete-change', (e) => {
+        const data = this.fetchedData[e.relatedTarget.value];
+        if (e.relatedTarget.value && data) {
+          e.value = e.relatedTarget.value = '';
+          this.createItemPanel({ ...data, display: "true" });
+        }
+      });
     },
   },
 

data/app/javascript/spotlight/admin/blocks/block.js

@@ -1,4 +1,5 @@
 import Core from 'spotlight/core'
+
 (function ($){
   Core.Block = SirTrevor.Block.extend({
     scribeOptions: {

data/app/javascript/spotlight/admin/blocks/browse_block.js

@@ -8,22 +8,18 @@ SirTrevor.Blocks.Browse = (function(){
     icon_name: "browse",
 
     autocomplete_url: function() {
-      return $(this.inner).closest('form[data-autocomplete-exhibit-searches-path]').data('autocomplete-exhibit-searches-path').replace("%25QUERY", "%QUERY");
+      return document.getElementById(this.instanceID).closest('form[data-autocomplete-exhibit-searches-path]').dataset.autocompleteExhibitSearchesPath;
+    },
+
+    autocomplete_fetch: function(url) {
+      return this.fetchOnceAndFilterLocalResults(url);
     },
 
     autocomplete_template: function(obj) {
       const thumbnail = obj.thumbnail_image_url ? `<div class="document-thumbnail"><img class="img-thumbnail" src="${obj.thumbnail_image_url}" /></div>` : ''
+      const description = obj.description ? `<small>&nbsp;&nbsp;${obj.description}</small>` : '';
       return `<div class="autocomplete-item${!obj.published ? ' blacklight-private' : ''}">${thumbnail}
-      <span class="autocomplete-title">${obj.full_title}</span><br/><small>&nbsp;&nbsp;${obj.description}</small></div>`
-    },
-
-    bloodhoundOptions: function() {
-      return {
-        prefetch: {
-          url: this.autocomplete_url(),
-          ttl: 0
-        }
-      };
+      <span class="autocomplete-title">${this.highlight(obj.full_title)}</span>${description}</div>`;
     },
 
     _itemPanel: function(data) {
@@ -36,7 +32,7 @@ SirTrevor.Blocks.Browse = (function(){
       }
       var resource_id = data.slug || data.id;
       var markup = `
-           <li class="field form-inline dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId(index)}">
+           <li class="field dd-item dd3-item" data-resource-id="${resource_id}" data-id="${index}" id="${this.formId(index)}">
             <input type="hidden" name="item[${index}][id]" value="${resource_id}" />
             <input type="hidden" name="item[${index}][full_title]" value="${(data.full_title || data.title)}" />
             <input data-property="weight" type="hidden" name="item[${index}][weight]" value="${data.weight}" />