Skip to content

Commit

Permalink
Update profile cards to allow for additional fields in view mode to b…
Browse files Browse the repository at this point in the history 
…e used.
  • Loading branch information
@occupant
occupant committed Sep 16, 2022
1 parent 1d3235b commit 8815be3
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 44 deletions.
32 changes: 28 additions & 4 deletions css/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/styles.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/styles.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/styles.min.css.map
View file

Large diffs are not rendered by default.

55 changes: 37 additions & 18 deletions templates/content/node--ubc-profile--card-horizontal-round-image.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,8 @@
'ubc-card__media',
'm-4',
'flex',
'img-cover',
'justify-center',
'xs--w-[200px]',
'xs--h-[200px]',
'xs--shrink-0',
'img-rounded',
]
Expand Down Expand Up @@ -129,7 +128,8 @@
%}
{%
set text_classes = [
'mt-3',
'md--mt-2',
'text-sm',
]
%}
{%
Expand All @@ -145,11 +145,22 @@
]
%}

{# need to put content into variable for striptags to work #}
{% set tagless_body %}
{{ content.body }}
{% endset %}

<article{{ attributes.addClass(classes) }}>
{% if not (node.field_profile_image.isEmpty == true) and content.field_profile_image is defined %}
<figure{{ figure_attributes.addClass(figure_classes) }}>{{ content.field_profile_image.0 }}</figure>
{% endif %}
<div{{ content_attributes.addClass(content_classes) }}>
<div class="md--grid md--grid-cols-2 md--gap-6">
{% if not (node.body.isEmpty == true) and content.body is defined %}
<div class="md--col-span-1">
{% else %}
<div class="md--col-span-2">
{% endif %}
{{ title_prefix }}
<h3{{ title_attributes.addClass(title_classes) }}>
<a{{ link_attributes.addClass(link_classes) }} href="{{ url }}" rel="bookmark">
Expand All @@ -164,37 +175,45 @@
</h3>
{{ title_suffix }}
{% if not (node.field_profile_pronouns.isEmpty == true) and content.field_profile_pronouns is defined %}
<p class="mt-0 text-base text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
<p class="mt-0 text-xs text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
{% endif %}
{% if not node.isPublished() %}
<div class="unpublished">Unpublished</div>
<div class="unpublished">Unpublished</div>
{% endif %}
{% if not (node.field_profile_role.isEmpty == true) and content.field_profile_role is defined %}
<p class="mt-0 text-sm">{{ content.field_profile_role.0 }}</p>
<p class="mt-2 text-sm">{{ content.field_profile_role.0 }}</p>
{% endif %}
{% if not (node.field_profile_job_title.isEmpty == true) and content.field_profile_job_title is defined %}
<p class="mt-0">{{ content.field_profile_job_title.0 }}</p>
<p class="mt-0 text-sm">{{ content.field_profile_job_title.0 }}</p>
{% endif %}
{% if not (node.field_profile_department_unit.isEmpty == true) and content.field_profile_department_unit is defined %}
<p class="mt-0 text-sm">
{%- for tag in content.field_profile_department_unit['#items'] -%}
{{- tag.entity.name.value -}}
{% if loop.last == false %}, {% endif %}
{%- endfor -%}
</p>
<p class="mt-0 text-sm">
{%- for tag in content.field_profile_department_unit['#items'] -%}
{{- tag.entity.name.value -}}
{% if loop.last == false %}, {% endif %}
{%- endfor -%}
</p>
{% endif %}
{% if not (node.field_profile_phone.isEmpty == true) and content.field_profile_phone is defined %}
<p class="text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue link-expand-break"><use xlink:href="#icon-phone"></use></svg> {{ content.field_profile_phone.0 }}</p>
<p class="text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue link-expand-break"><use xlink:href="#icon-phone"></use></svg> {{ content.field_profile_phone.0 }}</p>
{% endif %}
{% if not (node.field_profile_email.isEmpty == true) and content.field_profile_email is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-mail"></use></svg> <a href="mailto:{{ content.field_profile_email.0 }}" class="link-expand-break">{{ content.field_profile_email.0 }}</a></p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-mail"></use></svg> <a href="mailto:{{ content.field_profile_email.0 }}" class="link-expand-break">{{ content.field_profile_email.0 }}</a></p>
{% endif %}
{% if not (node.field_profile_office.isEmpty == true) and content.field_profile_office is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-location"></use></svg> {{ content.field_profile_office.0 }}</p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-location"></use></svg> {{ content.field_profile_office.0 }}</p>
{% endif %}
{% if not (node.field_profile_preferred_website.isEmpty == true) and content.field_profile_preferred_website is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-4 h-4 mr-5 text-ubc-blue "><use xlink:href="#icon-link-external"></use></svg> <a href="{{ content.field_profile_preferred_website[0]['#url'] }}" class="link-expand-break">Website</a></p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-4 h-4 mr-5 text-ubc-blue "><use xlink:href="#icon-link-external"></use></svg> <a href="{{ content.field_profile_preferred_website[0]['#url'] }}" class="link-expand-break">Website</a></p>
{% endif %}
<p{{ secondlinkwrapper_attributes.addClass(second_link_wrapper_classes) }}><a{{ secondlink_attributes.addClass(second_link_classes) }} href="{{ url }}" aria-label="View profile">View profile</a></p>
</div>
{% if not (node.body.isEmpty == true) and content.body is defined %}
<div class="md--col-span-1">
<p{{text_attributes.addClass(text_classes)}}>{{ tagless_body|striptags }}</p>
</div>
{% endif %}
<div class="mt-auto md--col-span-2">
<p{{ secondlinkwrapper_attributes.addClass(second_link_wrapper_classes) }}><a{{ secondlink_attributes.addClass(second_link_classes) }} href="{{ url }}" aria-label="View profile">View profile</a></p>
</div>
</div>
</article>
51 changes: 35 additions & 16 deletions templates/content/node--ubc-profile--card-horizontal.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@
%}
{%
set text_classes = [
'mt-3',
'md--mt-2',
'text-sm',
]
%}
{%
Expand All @@ -143,12 +144,22 @@
'unit-button',
]
%}
{# need to put content into variable for striptags to work #}
{% set tagless_body %}
{{ content.body }}
{% endset %}

<article{{ attributes.addClass(classes) }}>
{% if not (node.field_profile_image.isEmpty == true) and content.field_profile_image is defined %}
<figure{{ figure_attributes.addClass(figure_classes) }}>{{ content.field_profile_image.0 }}</figure>
{% endif %}
<div{{ content_attributes.addClass(content_classes) }}>
<div class="md--grid md--grid-cols-2 md--gap-6">
{% if not (node.body.isEmpty == true) and content.body is defined %}
<div class="md--col-span-1">
{% else %}
<div class="md--col-span-2">
{% endif %}
{{ title_prefix }}
<h3{{ title_attributes.addClass(title_classes) }}>
<a{{ link_attributes.addClass(link_classes) }} href="{{ url }}" rel="bookmark">
Expand All @@ -163,37 +174,45 @@
</h3>
{{ title_suffix }}
{% if not (node.field_profile_pronouns.isEmpty == true) and content.field_profile_pronouns is defined %}
<p class="mt-0 text-base text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
<p class="mt-0 text-xs text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
{% endif %}
{% if not node.isPublished() %}
<div class="unpublished">Unpublished</div>
<div class="unpublished">Unpublished</div>
{% endif %}
{% if not (node.field_profile_role.isEmpty == true) and content.field_profile_role is defined %}
<p class="mt-0 text-sm">{{ content.field_profile_role.0 }}</p>
<p class="mt-2 text-sm">{{ content.field_profile_role.0 }}</p>
{% endif %}
{% if not (node.field_profile_job_title.isEmpty == true) and content.field_profile_job_title is defined %}
<p class="mt-0">{{ content.field_profile_job_title.0 }}</p>
<p class="mt-0 text-sm">{{ content.field_profile_job_title.0 }}</p>
{% endif %}
{% if not (node.field_profile_department_unit.isEmpty == true) and content.field_profile_department_unit is defined %}
<p class="mt-0 text-sm">
{%- for tag in content.field_profile_department_unit['#items'] -%}
{{- tag.entity.name.value -}}
{% if loop.last == false %}, {% endif %}
{%- endfor -%}
</p>
<p class="mt-0 text-sm">
{%- for tag in content.field_profile_department_unit['#items'] -%}
{{- tag.entity.name.value -}}
{% if loop.last == false %}, {% endif %}
{%- endfor -%}
</p>
{% endif %}
{% if not (node.field_profile_phone.isEmpty == true) and content.field_profile_phone is defined %}
<p class="text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue link-expand-break"><use xlink:href="#icon-phone"></use></svg> {{ content.field_profile_phone.0 }}</p>
<p class="text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue link-expand-break"><use xlink:href="#icon-phone"></use></svg> {{ content.field_profile_phone.0 }}</p>
{% endif %}
{% if not (node.field_profile_email.isEmpty == true) and content.field_profile_email is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-mail"></use></svg> <a href="mailto:{{ content.field_profile_email.0 }}" class="link-expand-break">{{ content.field_profile_email.0 }}</a></p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-mail"></use></svg> <a href="mailto:{{ content.field_profile_email.0 }}" class="link-expand-break">{{ content.field_profile_email.0 }}</a></p>
{% endif %}
{% if not (node.field_profile_office.isEmpty == true) and content.field_profile_office is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-location"></use></svg> {{ content.field_profile_office.0 }}</p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-5 h-5 mr-4 text-ubc-blue "><use xlink:href="#icon-location"></use></svg> {{ content.field_profile_office.0 }}</p>
{% endif %}
{% if not (node.field_profile_preferred_website.isEmpty == true) and content.field_profile_preferred_website is defined %}
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-4 h-4 mr-5 text-ubc-blue "><use xlink:href="#icon-link-external"></use></svg> <a href="{{ content.field_profile_preferred_website[0]['#url'] }}" class="link-expand-break">Website</a></p>
<p class="mt-0 text-sm"><svg aria-hidden="true" class="inline-block w-4 h-4 mr-5 text-ubc-blue "><use xlink:href="#icon-link-external"></use></svg> <a href="{{ content.field_profile_preferred_website[0]['#url'] }}" class="link-expand-break">Website</a></p>
{% endif %}
<p{{ secondlinkwrapper_attributes.addClass(second_link_wrapper_classes) }}><a{{ secondlink_attributes.addClass(second_link_classes) }} href="{{ url }}" aria-label="View profile">View profile</a></p>
</div>
{% if not (node.body.isEmpty == true) and content.body is defined %}
<div class="md--col-span-1">
<p{{text_attributes.addClass(text_classes)}}>{{ tagless_body|striptags }}</p>
</div>
{% endif %}
<div class="mt-auto md--col-span-2">
<p{{ secondlinkwrapper_attributes.addClass(second_link_wrapper_classes) }}><a{{ secondlink_attributes.addClass(second_link_classes) }} href="{{ url }}" aria-label="View profile">View profile</a></p>
</div>
</div>
</article>
6 changes: 3 additions & 3 deletions templates/content/node--ubc-profile--card-vertical.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,13 +166,13 @@
</a>
</h3>
{% if not (node.field_profile_pronouns.isEmpty == true) and content.field_profile_pronouns is defined %}
<p class="mt-0 text-base text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
<p class="mt-0 text-xs text-grey-700">{{ content.field_profile_pronouns.0 }}</p>
{% endif %}
{% if not (node.field_profile_role.isEmpty == true) and content.field_profile_role is defined %}
<p class="mt-0 text-sm">{{ content.field_profile_role.0 }}</p>
<p class="mt-2 text-sm">{{ content.field_profile_role.0 }}</p>
{% endif %}
{% if not (node.field_profile_job_title.isEmpty == true) and content.field_profile_job_title is defined %}
<p class="mt-0">{{ content.field_profile_job_title.0 }}</p>
<p class="mt-0 text-sm">{{ content.field_profile_job_title.0 }}</p>
{% endif %}
{% if not (node.field_profile_department_unit.isEmpty == true) and content.field_profile_department_unit is defined %}
<p class="mt-0 text-sm">
Expand Down

0 comments on commit 8815be3

Please sign in to comment.