Develop a compact design to replace current cards in search results

[const8ine]

Suggest a new design for a search feed on a gene search page (https://open-genes.com/genes). It should be more compact and preserve the same functionality at the same time.

For your convenience, we proposed a new design variant here https://www.figma.com/file/1xr7Mg2I7ziwjwGVlnZ8Y4/New-gene-card Please take a look at the components page. Each Figma component there represent its implementation on Frontend.

DoD: More compact card design with the same functionality. In your pull request please share Figma file or a link to Figma template.

About cards and view modes

Gene feed has two view modes: table and cards. Cards view is only available on the phone while on the other resolutions user may switch between table and cards freely.

Responsive design

Cards have responsive layout. The breakpoints are: smartphone, tablet, desktop, widescreen.

phone

form 0 to 767.8px,
only one card in a row

tablet

from 768 to 1199.8px,
two cards in a row

desktop

from 1200px to 1399.8px,
two cards in a row

widescreen

from 1400px and up,
three cards in a row

Content

Content in cards depends on the selected fields. One can switch on/off the visible fields using the "Filters and fields" pane in the sidebar (modal window on phone resolution). Your design should be clean as possible for the case when all fields are on.

Blocks like Gene family origin, gene origin and Conservative in are reusable across the project but their font size and position may vary.

Mosts of the blocks are clickable. Click toggles a corresponding filter.

Some blocks have lists. In lists where the number of items exceeds two, the content is being truncated in accordion.

For the missing values we use placeholders like "No categories specified".

Card has a context menu and "Favorites" button.

Sources

We use basic Bootstrap 12 column grid and Angular Material UI library in the whole project.
The cards are little bit out of it because they don't have the grid inside them and have some custom UI elements such as accordions.
Paddings may vary, but general paddings are: 10px, 15px, 25px.
The main colors are given listed in Design Guidelines, palette section.

Please consider these cases when developing your card design.
Thanks for reading this tasks till the end!