Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add styling for contact cards #3010

Open
charludo opened this issue Nov 29, 2024 · 3 comments · May be fixed by #3075
Open

Add styling for contact cards #3010

charludo opened this issue Nov 29, 2024 · 3 comments · May be fixed by #3075
Assignees
@bahaaTuffaha
Labels
Native Affects the native project prio:high ready Task Web Affects the web project

Comments

@charludo
Copy link
Contributor

charludo commented Nov 29, 2024 •
edited
Loading

Is your feature request related to a problem? Please describe.
Once digitalfabrik/integreat-cms#3169 is merged, 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, due to the reasons discussed here and here, styling should be handled by the app.

Feel free to either copy the styling from the CMS (kudos @PeterNerlich):
image

.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) !important;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%), url("../svg/contact.svg") !important;
    background-blend-mode: difference;
    background-position: calc(100% + 2em) calc(100% + 1em);
    background-size: 7em;
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
    cursor: default !important;
    color: initial;
    text-decoration: initial;
    min-width: 50%;
    white-space: initial !important;

    p {
        margin: 4px 0 0 0;
    }

    h4 {
        margin: 0 0 12px 0;
    }
}

or to come up with your own web/app specific styling 😄

Describe the solution you'd like
Add styling for the contact-card class on web and mobile.

Describe alternatives you've considered
None. Styling in the CMS comes with some hurdles we'd rather avoid.

Additional context
CMS issue: digitalfabrik/integreat-cms#2959
Each .contact-card will contain a .marker-link which should receive display: none as its styling. This one is done inline.
@charludo charludo added the Task label Nov 29, 2024
@steffenkleinle steffenkleinle added Web Affects the web project Native Affects the native project waiting-for-cms labels Nov 29, 2024
@charludo
Copy link
Contributor Author

charludo commented Feb 5, 2025

This is already test-able with the test cms. Would it be possible to bump the priority of this? Ideally, we would want to release the contact card feature by the conference 😄

@LeandraH LeandraH moved this to Next Up in team-app Feb 5, 2025
@LeandraH
Copy link
Contributor

LeandraH commented Feb 5, 2025

@charludo Do you happen to have a specific page already that we can test it with, or do we need to still set that up in the test CMS?

@charludo
Copy link
Contributor Author

charludo commented Feb 5, 2025 •
edited by LeandraH
Loading

Ah, I don't think there's an inserted contact card anywhere in the test CMS yet, just the feature itself.

  • go to the Testumgebung (or any other region, really)
  • click on "Contacts" -> "Create Contact" -> Fill out the fields and save
  • go to any page/poi/event in that region
  • click "Insert" in the editor -> "Contact" -> search for your contact -> "Submit"

@bahaaTuffaha bahaaTuffaha self-assigned this Feb 6, 2025
@bahaaTuffaha bahaaTuffaha moved this from Next Up to In Progress in team-app Feb 6, 2025
@bahaaTuffaha bahaaTuffaha linked a pull request Feb 6, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bahaaTuffaha bahaaTuffaha

Labels
Native Affects the native project prio:high ready Task Web Affects the web project
Projects
team-app
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

3010: Styling for contact cards digitalfabrik/integreat-app
4 participants
@LeandraH @steffenkleinle @charludo @bahaaTuffaha