AllenCell / AllenCell/cell-catalog

AICS ID/Image thumbnail refresh

Offen
#139 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
0
Forks
0
Ø Merge
1 Min.
Gemergte PRs (30 T.)
8

Beschreibung

## Use Case

The current images on the cell catalog are small and static. They have been reworked to be more engaging.

## Details
Images have been expanded to fill a rectangle rather than fit into a circle. They are overlayed with the Cell Line ID on a white banner with 85% opacity. [See designs for font size and padding.](https://www.figma.com/design/kMIJN6BoOkXIhnVUruIHNT/Website-allencell.org?node-id=4926-7185&t=GYUrxyq4ZXHiW2rJ-1)

Images will always have identical widths, but may have varying heights depending on whether a line is a multiedit or not (multiedits are taller). Images should always fill to fit width.

**Interaction**
Hovering over the image expands it to a max height of 240px, including the cell line ID banner which is again overlayed. The image should be its correct aspect ratio in the hover state, meaning if is 20x24px it expands to 200x240 pixels. Most of the images should be a square. Ideally the image is a video that begins playing on hover and loops as long as the mouse is over the image.

Clicking the image goes to the cell line details page.

[Interact with the prototype here to see how it feels.](https://www.figma.com/proto/kMIJN6BoOkXIhnVUruIHNT/Website-allencell.org?page-id=235%3A2245&node-id=4926-7185&viewport=-5294%2C629%2C0.35&t=lDprALX8g0jJmkQf-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=4926%3A7185&show-proto-sidebar=1)

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.