-
Notifications
You must be signed in to change notification settings - Fork 20
adds template + CSS for contact compontent #695
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.
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
Merged
Merged
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
8e61f4d
adds template + CSS for contact compontent
markconroy 481523d
sets up variables for contact component CSS
markconroy 2e03003
fixes CSS coding standards
markconroy fe642d2
empty commit to trigger workflow
millnut ceb893e
removes margin top from sibling contact groups
markconroy a9d129a
Add better spacing for items
markconroy 41b2460
Merge branch '1.x' into feature/421-contact-component
markconroy d5ed618
Add if statement to correct place
markconroy File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| .lgd-contact__headings, | ||
| .lgd-contact__content { | ||
| border: var(--contact-border); | ||
| border-color: var(--contact-accent-color); | ||
| padding: var(--contact-spacing); | ||
| } | ||
|
|
||
| .lgd-contact__headings { | ||
| border-block-end: 0; | ||
| background-color: var(--contact-accent-color); | ||
| color: var(--contact-accent-color-contrast); | ||
| } | ||
|
|
||
| .lgd-contact__headings h2 { | ||
| margin-block-end: 0; | ||
| color: var(--contact-accent-color-contrast); | ||
| } | ||
|
|
||
| .lgd-contact__content { | ||
| display: grid; | ||
| gap: var(--contact-spacing); | ||
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | ||
| } | ||
|
|
||
| .lgd-contact__group { | ||
| padding-block-end: var(--contact-spacing); | ||
| border-block-end: var(--contact-border); | ||
| border-color: var(--contact-accent-color); | ||
| } | ||
|
|
||
| .lgd-contact__group > h3 { | ||
| margin-block-end: 0; | ||
| } | ||
|
|
||
| .lgd-contact__group > * + *, | ||
| .lgd-contact__group | ||
| .field--name-localgov-contact-other-social | ||
| > .field__item | ||
| + .field__item, | ||
| .lgd-contact__group .office-hours__item + .office-hours__item { | ||
| margin-block-start: var(--contact-spacing); | ||
| } | ||
|
|
||
| .lgd-contact__group .field__label { | ||
| float: none; | ||
| } | ||
|
|
||
| .lgd-contact__group + .lgd-contact__group { | ||
| margin-block-start: var(--contact-spacing); | ||
| } | ||
|
|
||
| .lgd-contact__group .office-hours__item-label { | ||
| display: block; | ||
| } | ||
|
|
||
| .lgd-contact__location { | ||
| margin-block-start: var(--contact-spacing); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
169 changes: 169 additions & 0 deletions
169
templates/paragraphs/paragraph--localgov-contact.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| {# | ||
| /** | ||
| * @file | ||
| * Default theme implementation to display a paragraph. | ||
| * | ||
| * Available variables: | ||
| * - paragraph: Full paragraph entity. | ||
| * Only method names starting with "get", "has", or "is" and a few common | ||
| * methods such as "id", "label", and "bundle" are available. For example: | ||
| * - paragraph.getCreatedTime() will return the paragraph creation timestamp. | ||
| * - paragraph.id(): The paragraph ID. | ||
| * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". | ||
| * - paragraph.getOwnerId(): The user ID of the paragraph author. | ||
| * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties | ||
| * and methods for the paragraph object. | ||
| * - content: All paragraph items. Use {{ content }} to print them all, | ||
| * or print a subset such as {{ content.field_example }}. Use | ||
| * {{ content|without('field_example') }} to temporarily suppress the printing | ||
| * of a given child element. | ||
| * - attributes: HTML attributes for the containing element. | ||
| * The attributes.class element may contain one or more of the following | ||
| * classes: | ||
| * - paragraphs: The current template type (also known as a "theming hook"). | ||
| * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an | ||
| * "Image" it would result in "paragraphs--type--image". Note that the machine | ||
| * name will often be in a short form of the human readable label. | ||
| * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a | ||
| * preview would result in: "paragraphs--view-mode--preview", and | ||
| * default: "paragraphs--view-mode--default". | ||
| * - view_mode: View mode; for example, "preview" or "full". | ||
| * - logged_in: Flag for authenticated user status. Will be true when the | ||
| * current user is a logged-in member. | ||
| * - is_admin: Flag for admin user status. Will be true when the current user | ||
| * is an administrator. | ||
| * | ||
| * @see template_preprocess_paragraph() | ||
| * | ||
| * @ingroup themeable | ||
| */ | ||
| #} | ||
| {% | ||
| set classes = [ | ||
| 'lgd-contact', | ||
| 'paragraph', | ||
| 'paragraph--type--' ~ paragraph.bundle|clean_class, | ||
| view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, | ||
| not paragraph.isPublished() ? 'paragraph--unpublished' | ||
| ] | ||
| %} | ||
|
|
||
| {% if not localgov_base_remove_css %} | ||
| {{ attach_library('localgov_base/contact') }} | ||
| {% endif %} | ||
|
|
||
|
|
||
| {% set email_website_fields = [ | ||
| 'localgov_contact_url', | ||
| 'localgov_contact_email', | ||
| 'localgov_contact_other_url', | ||
| ] %} | ||
|
|
||
| {% set phone_fields = [ | ||
| 'localgov_contact_minicom', | ||
| 'localgov_contact_mobile', | ||
| 'localgov_contact_out_of_hours', | ||
| 'localgov_contact_phone', | ||
| ] %} | ||
|
|
||
| {% set social_media_field = [ | ||
| 'localgov_contact_facebook', | ||
| 'localgov_contact_instagram', | ||
| 'localgov_contact_other_social', | ||
| 'localgov_contact_twitter', | ||
| ] %} | ||
|
|
||
| {% set has_email_website_fields = false %} | ||
| {% set has_phone_fields = false %} | ||
| {% set has_social_media_fields = false %} | ||
|
|
||
|
|
||
| {% for item in email_website_fields %} | ||
| {% if content[item].0 is not empty %} | ||
| {% set has_email_website_fields = true %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% for item in phone_fields %} | ||
| {% if content[item].0 is not empty %} | ||
| {% set has_phone_fields = true %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% for item in social_media_field %} | ||
| {% if content[item].0 is not empty %} | ||
| {% set has_social_media_fields = true %} | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| <div{{attributes.addClass(classes)}}> | ||
|
|
||
| {% if paragraph.localgov_contact_heading.value or paragraph.localgov_contact_subheading.value %} | ||
| <div class="lgd-contact__headings"> | ||
| {% if paragraph.localgov_contact_heading.value %} | ||
| <h2>{{ content.localgov_contact_heading }}</h2> | ||
| {% endif %} | ||
| {% if paragraph.localgov_contact_subheading.value %} | ||
| {{ content.localgov_contact_subheading }} | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| <div class="lgd-contact__content"> | ||
| <div class="lgd-contact__group"> | ||
| <h3>{{ 'Email & Website'|t }}</h3> | ||
| {% for item in email_website_fields %} | ||
| {% if content[item].0 is not empty %} | ||
| {{ content[item] }} | ||
| {% endif %} | ||
| {% endfor %} | ||
| </div> | ||
| {% if has_email_website_fields %}{% endif %} | ||
|
|
||
| {% if has_phone_fields %} | ||
| <div class="lgd-contact__group"> | ||
| <h3>{{ 'Phone'|t }}</h3> | ||
| {% for item in phone_fields %} | ||
| {% if content[item].0 is not empty %} | ||
| {{ content[item] }} | ||
| {% endif %} | ||
| {% endfor %} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if has_social_media_fields %} | ||
| <div class="lgd-contact__group"> | ||
| <h3>{{ 'Social Media'|t }}</h3> | ||
| {% for item in social_media_field %} | ||
| {% if content[item].0 is not empty %} | ||
| {{ content[item] }} | ||
| {% endif %} | ||
| {% endfor %} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if paragraph.localgov_contact_address.value %} | ||
| <div class="lgd-contact__group"> | ||
| <h3>{{ 'Address'|t }}</h3> | ||
| {{ content.localgov_contact_address}} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if paragraph.localgov_contact_office_hours.value %} | ||
| <div class="lgd-contact__group"> | ||
| <h3>{{ 'Office Hours'|t }}</h3> | ||
| {{ content.localgov_contact_office_hours}} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
|
|
||
| {% if paragraph.localgov_contact_location.value %} | ||
| <div class="lgd-contact__location"> | ||
| <h3>{{ 'Location'|t }}</h3> | ||
| {{ content.localgov_contact_location}} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {{ content|without('localgov_contact_heading', 'localgov_contact_subheading', 'localgov_contact_url', 'localgov_contact_email', 'localgov_contact_other_url', 'localgov_contact_minicom', 'localgov_contact_mobile', 'localgov_contact_out_of_hours', 'localgov_contact_phone', 'localgov_contact_facebook', 'localgov_contact_instagram', 'localgov_contact_other_social', 'localgov_contact_twitter', 'localgov_contact_address', 'localgov_contact_office_hours', 'localgov_contact_location') }} | ||
|
|
||
| </div> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is supposed to wrap the block above.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed, can't believe I made such a rookie mistake!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume you left it to check my QA skills ;)