create new "tiled view (alt)": 3pts

[paregorios]

As a user with appropriate permissions I will be able to apply a new "tiled view (alt)" that works exactly like the current "tiled view" except:

• "follow isaw on social media" clicklets are not displayed
• No images are used
• Bylines from content are not displayed
• "READ MORE" button is not displayed
• Entire tile (rectangle containing title and summary) gets a 1px border outline
• Entire tile is clickable as a single link and has mouseover style to match our main menu behavior (i.e., blue outline on hover)
  • Title is underlined in standard appearance for links with href and changes to blue dashed underlining when any part of the tile is moused over
  • Summary text, even though it is part of the big tile link, is not underlined
• Title is centered side-to-side in tile
• Summary text is left-justified
• we do not want any pagination: load tiles for all content
• use folders or collections (i.e. both)

• 

[alecpm]

OK, I've got a first pass at this up here you should be able to select the Titled Listing (alt) view from the display menu on any Folder, Collection, or Topic. It uses a flex grid that switches from 3 to 2 columns at the mobile breakpoint.

[alecpm]

I'm not quite sure how to handle the :active styling for this large linked box, but the default black background did not seem like a good choice so I've disabled that for now.

[paregorios]

So a few things:

1. Maybe try white background for the tiles?
2. The twitching/flickering/text-reflow behavior I'm seeing on mousein and mouseout (106.0.5 (64-bit) on MacOS Monterey 12.6.1) is not going to work for us. If that can't be stabilized with a minimum of further CSS experimentation, then I think we should lose entirely the blue-box-outline and just make the change on the linked title (big bonus) if that behavior and assocaiated click-through behavior could still happen on the entire tile.

[alecpm]

@paregorios white background when active or always white background? I'll see what I can do about flickering, I thought I had it fixed with the padding adjustments I made, but if I can't get it settled I'll try turning off the default border animations for the tile.

[alecpm]

It might also help to make the border always 1px or always 3px.

[alecpm]

FWIW I'm not seeing flickering on Chrome 107.0.5304.87 MacOS Monterey or Safari 16.1 (17614.2.9.1.13, 17614).

[paregorios]

yeah, the border width is probably part of the problem on FF

[alecpm]

@paregorios I've removed the animation around the border switch, which should help with the flicker. However, since I couldn't reproduce it, I can't confirm. Can you let me know if you're still seeing it? You may want to try clearing your browser cache if you are.

[paregorios]

@alecpm I can confirm that the flickering is gone in FF! If you think this is ready to merge and deploy to production, then so do I.

[alecpm]

@paregorios I forgot about Firefox. Not seeing flicker on 106.0.3 (64-bit) with the current implementation.

[paregorios]

yep, it's all good

[alecpm]

FWIW, I implemented the :active styling as a white background for now. The change from the default background to white is probably too subtle for WCAG, but I'm not sure what's best here.

[paregorios]

My sense is that we have enough indicia in the form of the cursor and the underlined title and the blue box around the tile that we meet WCAG for "two indicators"

[alecpm]

@paregorios Good for production then? In that case, I'll merge it and start work on #449 based on this.

[paregorios]

Merge it!

[paregorios]

@alecpm I am attempting to test this functionality on production at https://isaw.nyu.edu/skunkworks/financial-resources, but I do not see the new display listing available on the actions menu. This is after fully dumping cache in my browser and performing a new login.

[alecpm]

Needed to run an upgrade step. Done.

[paregorios]

Perfect!