US Redesign material card view

[KhrystynaHarasym]

As an Admin I want to see redesigned Material Cards so that I could swiftly choose Material to make changes in it

Preconditions: Registered User is logged in Registered User has Admin role The Admin is on the Адміністрування/Важливе page/Додати матеріали/ https://dokazovi-fe-release.herokuapp.com/admin

Description:

Objects on the Material Card

1. The Card image
2. The Material title
3. Icon Edit (redesigned Button “Редагувати”)
4. Icon Add (redesigned Button “Додати до каруселі”)

Legend: “card image” – image loaded by Admin in special section of editor during creation or editing the Material.

  | width | height | viewing the page | hovering over the Material Card -- | -- | -- | -- | -- The Card image | as described in US #485 | as described in US #485 | grayscale | displays actual color (s) of image loaded Material title | as described in US #280 | as described in US #280 | black color | invisible Icon Edit | 30px | 30px | invisible | black color Icon Add | 30px | 30 px | invisible | black color

Acceptance Criteria

1. Admin should be able to see the relevant Material title on each Card when entering the page with Cards:

• When Admin enters the page with Cards the relevant Material title should be visible on each Card image;
• The color of Material title on the Card should be black and the Card image should be grayscale;
• The Material title should be centered on the Card;
• The text with Material title on the Card should be clickable;
• Click on Material title button should redirect to Editing page with prefilled Material content;
• When Admin hovers over Card image it displays actual color(s) of image loaded;
• When Admin hovers over Card image the Material title becomes invisible.

2. Admin should be able to see redesigned icon Edit so he could edit different materials

• The button “Редагувати” should be redesigned into icon Edit;
• When Admin enters the page with Cards the icon Edit should be invisible;
• When Admin hovers over Card image the icon Edit appears;
• The icon Edit should be placed in the right top corner of Material card.

3. Admin should be able to see redesigned icon Add so he could fill up the carousel with pictures

• The button “Додати до каруселі” should be redesigned into icon Add;
• When Admin enters the page with Cards the icon Add should be invisible;
• When Admin hovers over Card image the icon Add appears for Material with pictures uploaded as described in US #485;
• The icon Add should be placed in the left top corner of the Card.

[KhrystynaHarasym]

AC change: The text with Material title on the Card should not be clickable