3010: Styling for contact cards

[bahaaTuffaha]

Short Description

Regions will be able to insert contact cards into pages. While the CMS/api will provide the HTML markup for the card ready-to-use, styling should be handled by the app.

Proposed Changes

• I added contact-card class to both web and native similar to the class provided in the description of this Task.
• Used the background image same as the one from cms as base64.
• Removed some unnecessary properties from that provided class like cursor, color, text-decoration, white-space as they don't add anything could change this styling.

Side Effects

• It affects anything using class contact-card at the remote content.

Testing

• Go to : http://localhost:9000/testumgebung/en/new-page-test-contacts (English)
• Compare with what in the test-cms

Resolved Issues

Fixes: #3010

---

[lunars97]

Thank you for your PR 🎆 Looks really good. Tested on Android and Chrome.
One more thing: Probably we need a release note for this?

[steffenkleinle]

Looks very good! My css knowledge is very limited, so would be cool if someone else could have a quick look here, e.g. @f1sh1918. From my point of view this would be good to go, with some small possible improvements. Thanks :)

All the things commented on web are also meant for native if possible :)

[LeandraH]

Looks great, nicely done! Tested on emulated iOS and Firefox

[charludo]

Hi, sorry to chime in, we recently noticed on the cms side that for small contact cards, a weird black line appears due to the styles below and slightly changed them. See this PR for details. It would be great if that could be changed here as well 🙈

The new styling, in its totally, is:

.contact-card {
    display: inline-block;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 0.25rem;
    background-repeat: no-repeat;
    background-color: rgba(127, 127, 127, 0.15);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%), url("../svg/contact.svg");
    background-blend-mode: difference;
    background-position:
        calc(100% + 2em) calc(100% + 0em),
        calc(100% + 1.5em) calc(100% + 1.5em);
    background-size: 6.5em;
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
    color: initial;
    text-decoration: initial;
    min-width: 50%;
    white-space: initial;

    p {
        margin: 4px 0 0 0;
    }

    h4 {
        margin: 0 0 12px 0;
    }

    img {
        margin: 0 8px 0 0;
    }
}

in the CMS. Specifically, the line that changed is:

    background-position:
        calc(100% + 2em) calc(100% + 0em),
        calc(100% + 1.5em) calc(100% + 1.5em);
    background-size: 6.5em;

[charludo]

Hahaha, sorry 😂 🙈

[LeandraH]

Good timing 😂

[LeandraH]

@charludo Last chance for more requests 🤣

[charludo]

LGTM 😄