AllenCell / AllenCell/cell-catalog

AICS ID/Image thumbnail refresh

Aberta
#139 1 comentário 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
TypeScript
Estrelas
0
Forks
0
Merge médio
1min
PRs com merge (30d)
8

Descrição

## 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)

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.