Add newline feature for browse category title

Although the immediate need for this is DLME, it seems like a potentially useful addition to Spotlight generally. I know of one unpublished but in-progress Stanford exhibit where a browse category subtitle might come in handy.

There are a lot of places in the app this would touch, but I think we could reuse the same HTML and CSS for most contexts.

End goal - displaying the the Hijri date on a new line

The DLME use case is to split the time-period browse category titles into two rows, to separate the Gregorian and Hijri versions of the title. The solution I'm proposing would end up looking like this in a browse widget on the homepage:

I don't see any need to worry with responsiveness with this addition; it's really no different from how a long browse category title displays when it has to wrap at small viewports (although long titles that are accompanied by a subtitle won't look too good with the additional line; but that is a curator decision).

Each of the sections below represent a different place in the app I think we'd need to update, along with the HTML and CSS I used for the screenshot in each section, but feel free to improve the solution as you see fit. Note that most of the HTML and CSS additions are very similar -- often identical -- across the different contexts.

Editing a browse category

There's no change to how you create a browse category. The new thing is offering an additional subtitle field when editing a browse category:

If the Subtitle field remains empty, I don't think anything changes from the way things are now. If there is a Subtitle value for a browse category, when the category is saved, the list of browse categories on the Curation > Browse page updates to look like this, with both the title and subtitle displayed, separated by a dot:

(In all the HTML examples that follow, I include some surrounding HTML for context, but the new part is just the <span class="category-subtitle">(923 - 1342 H)</span>.)

<h4 class="card-title h6 mb-0">1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
</h4>

span.category-subtitle::before {
    content: " \000B7 ";
    color: #777; // or #999, whatever has a variable defined
    padding-right: 3px;
}

Display on browse category landing page

The HTML change is the same as above, just adding the subtitle, if it has a value, as a span within the existing category title HTML:

<h2 class="browse-category-title">1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
  <small>49199 items</small>
</h2>

span.category-subtitle {
  display: block;
}

Adding browse category widget

If a browse category with a subtitle is selected using the browse category widget, it should display with the title, separator, subtitle, similar to the display on the Curation > Browse page:

<div class="title card-title">1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
</div>

span.category-subtitle::before {
    content: " \000B7 ";
    color: #777; // or #999, whatever has a variable defined
    padding-right: 3px;
}

If a browse category has a subtitle, when it is displayed in the typeahead list of available browse categories, it should (ideally) use the same title-separator-subtitle format as above (I can't figure out how to edit the typeahead menu using the Web Inspector).

Displaying browse category widget

The same as displaying on the browse category landing page:

<p class="category-title">1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
</p>

span.category-subtitle {
  display: block;
}

Displaying on browse category detail page

The best arrangement I found here was just to keep the title and subtitle on the same line, so in a way it's similar to the display on the Curation > Browse page. Same for the breadcrumb:

Breadcrumb

<li class="breadcrumb-item active">1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
</li>

span.category-subtitle::before {
  content: " \000B7 ";
  color: #777; // or #999, whatever has a variable defined
  padding-right: 3px;
}

Page title

<h1>1518 - 1924 CE
  <span class="category-subtitle">(923 - 1342 H)</span>
  <small class="item-count">49199 items</small>
</h1>

span.category-subtitle::before {
  content: " \000B7 ";
  color: #777; // or #999, whatever has a variable defined
  padding-right: 3px;
}

Not sure if I did something wrong, but for the page title I also had to add this to keep the item count from being too close to the subtitle:

span.category-subtitle {
  padding-right: 0.5rem;
}

Save this Search modal

The Save this Search modal includes a select menu that enables the user to overwrite an existing browse category title. Ideally we'd want to use the same title-separator-subtitle format in that select menu (in case the curator is using the subtitle as a way to distinguish a group of similarly titled browse categories -- this isn't the DLME use case but I can see it being used that way, and in that way the subtitle is necessary to disambiguate identically titled categories).

I don't know if there's a good way to do that within a select menu <option> element, though.

Curation > Translations page

We'll also have to add the subtitle field to the Curation > Translations page. I need to spend some time thinking about that (the way that page is now might need some reorganization to enable us to add the subtitle in a nice way), and I don't want to delay this ticket just for that, so I'll create a separate ticket for it.

sul-dlss / dlme