From 701de33f436ac2bed4c82923e58caad7f8f5b5cd Mon Sep 17 00:00:00 2001 From: Eric Bremner <ebremner@uwaterloo.ca> Date: Thu, 23 Jun 2022 09:30:28 -0400 Subject: [PATCH] ISTWCMS-5647: adding the rest of the card elements --- .../card/card-elements/_additional-info.twig | 45 ++++++++++++ .../card/card-elements/_banner.twig | 39 ++++++++++ .../card/card-elements/_contact-for.twig | 15 ++++ .../card/card-elements/_employment_type.twig | 6 ++ .../card/card-elements/_groups.twig | 21 ++++++ .../card/card-elements/_image.twig | 15 ++++ .../card/card-elements/_job.id.twig | 4 ++ .../card/card-elements/_listing-image.twig | 13 ++++ .../card/card-elements/_location-info.twig | 45 ++++++++++++ .../card-elements/_opportunity-dates.twig | 53 ++++++++++++++ .../card-elements/_opportunity-details.twig | 35 +++++++++ .../card/card-elements/_opportunity-type.twig | 6 ++ .../card/card-elements/_portrait.twig | 3 + .../card/card-elements/_project-details.twig | 33 +++++++++ .../card/card-elements/_project-members.twig | 39 ++++++++++ .../card/card-elements/_rate-of-pay.twig | 10 +++ .../card/card-elements/_service-details.twig | 72 +++++++++++++++++++ .../card/card-elements/_service-hours.twig | 24 +++++++ .../card-elements/_service-information.twig | 29 ++++++++ .../card/card-elements/_timeline.twig | 23 ++++++ 20 files changed, 530 insertions(+) create mode 100644 src/patterns/04-components/card/card-elements/_additional-info.twig create mode 100644 src/patterns/04-components/card/card-elements/_banner.twig create mode 100644 src/patterns/04-components/card/card-elements/_contact-for.twig create mode 100644 src/patterns/04-components/card/card-elements/_employment_type.twig create mode 100644 src/patterns/04-components/card/card-elements/_groups.twig create mode 100644 src/patterns/04-components/card/card-elements/_image.twig create mode 100644 src/patterns/04-components/card/card-elements/_job.id.twig create mode 100644 src/patterns/04-components/card/card-elements/_listing-image.twig create mode 100644 src/patterns/04-components/card/card-elements/_location-info.twig create mode 100644 src/patterns/04-components/card/card-elements/_opportunity-dates.twig create mode 100644 src/patterns/04-components/card/card-elements/_opportunity-details.twig create mode 100644 src/patterns/04-components/card/card-elements/_opportunity-type.twig create mode 100644 src/patterns/04-components/card/card-elements/_portrait.twig create mode 100644 src/patterns/04-components/card/card-elements/_project-details.twig create mode 100644 src/patterns/04-components/card/card-elements/_project-members.twig create mode 100644 src/patterns/04-components/card/card-elements/_rate-of-pay.twig create mode 100644 src/patterns/04-components/card/card-elements/_service-details.twig create mode 100644 src/patterns/04-components/card/card-elements/_service-hours.twig create mode 100644 src/patterns/04-components/card/card-elements/_service-information.twig create mode 100644 src/patterns/04-components/card/card-elements/_timeline.twig diff --git a/src/patterns/04-components/card/card-elements/_additional-info.twig b/src/patterns/04-components/card/card-elements/_additional-info.twig new file mode 100644 index 00000000..364c8ba1 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_additional-info.twig @@ -0,0 +1,45 @@ +<div class="card__additional-info"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + } %} + {% block details_summary %} + Additional Information + {% endblock %} + + {% block details_content %} + + {% if additional_info.host %} + <span class="uw-label">Host:</span> + {% include '@components/links/links.twig' with { + 'links': additional_info.host + } %} + {% endif %} + + {% if additional_info.event_website %} + <span class="uw-label">Event website:</span> + {% include '@components/links/links.twig' with { + 'links': additional_info.event_website + } %} + {% endif %} + + {% if additional_info.cost %} + <span class="uw-label">Cost:</span> + {{ additional_info.cost }} + {% endif %} + + {% if additional_info.tags %} + {% for key,tag in additional_info.tags %} + <span class="uw-label">{{ key }}:</span> + {% include "@components/tag-list/tag-list.twig" with { + items: tag + } %} + {% endfor %} + {% endif %} + + {% if additional_info.info %} + {{ additional_info.info }} + {% endif %} + + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_banner.twig b/src/patterns/04-components/card/card-elements/_banner.twig new file mode 100644 index 00000000..450b126c --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_banner.twig @@ -0,0 +1,39 @@ +<div class="card__banner--image"> + {% if image.link %} + <a href="{{ image.link }}"> + {% endif %} + <div class="card__banner--media"> + {% if listing_image.img_element %} + {% include "@components/responsive-image/responsive-image.twig" with { + sources: image.sources, + img_element: listing_image.img_element, + alt: listing_image.alt + }%} + {% else %} + {% include "@components/responsive-image/responsive-image.twig" with { + sources: image.sources, + img_element: image.img_element, + alt: image.alt + }%} + {% endif %} + </div> + {% if image.big_text or image.small_text %} + <div class="card__banner--caption"> + {% if image.big_text %} + <strong> + <span class="card__banner--title"> + {{ image.big_text }} + </span> + {% endif %} + </strong> + {% if image.small_text %} + <span class="card__banner--sub-title"> + {{ image.small_text }} + </span> + {% endif %} + </div> + {% endif %} + {% if image.link %} + </a> + {% endif %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_contact-for.twig b/src/patterns/04-components/card/card-elements/_contact-for.twig new file mode 100644 index 00000000..3c981fa1 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_contact-for.twig @@ -0,0 +1,15 @@ +<div class="card__contact-for"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Contact for + {% endblock %} + + {% block details_content %} + <div class="card__contact-for-content"> + {{ contact_for.contact }} + </div> + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_employment_type.twig b/src/patterns/04-components/card/card-elements/_employment_type.twig new file mode 100644 index 00000000..08ec08cb --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_employment_type.twig @@ -0,0 +1,6 @@ +{% include '@components/label/label.twig' with { + 'label': 'Employment type' +} %} +{% include "@components/tag-list/tag-list.twig" with { + items: employment_type +} %} diff --git a/src/patterns/04-components/card/card-elements/_groups.twig b/src/patterns/04-components/card/card-elements/_groups.twig new file mode 100644 index 00000000..1434e9ae --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_groups.twig @@ -0,0 +1,21 @@ +<div class="card__groups"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Groups + {% endblock %} + + {% block details_content %} + <div class="card__groups-list"> + {% for group in groups %} + {% if loop.index0 > 0 %} + , {{ group.title }} + {% else %} + {{ group.title }} + {% endif %} + {% endfor %} + </div> + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_image.twig b/src/patterns/04-components/card/card-elements/_image.twig new file mode 100644 index 00000000..0b4be901 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_image.twig @@ -0,0 +1,15 @@ +<div class="card__image"> + {% if image.type == 'listing_image' %} + {% include '@components/card/card-elements/_listing-image.twig' with { + 'listing_image': image + } %} + {% endif %} + + {% if image.type == 'portrait' %} + {% include "@components/responsive-image/responsive-image.twig" with { + sources: image.sources, + img_element: image.img_element, + alt: image.alt + }%} + {% endif %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_job.id.twig b/src/patterns/04-components/card/card-elements/_job.id.twig new file mode 100644 index 00000000..68af3ffa --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_job.id.twig @@ -0,0 +1,4 @@ +{% include '@components/label/label.twig' with { + 'label': 'Job id' +} %} +{{ job_id }} diff --git a/src/patterns/04-components/card/card-elements/_listing-image.twig b/src/patterns/04-components/card/card-elements/_listing-image.twig new file mode 100644 index 00000000..be9cae0c --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_listing-image.twig @@ -0,0 +1,13 @@ +{% if url %} + <a href="{{ url }}"> +{% endif %} + + {% include "@components/responsive-image/responsive-image.twig" with { + sources: listing_image.sources, + img_element: listing_image.img_element, + alt: listing_image.alt + }%} + +{% if url %} + </a> +{% endif %} diff --git a/src/patterns/04-components/card/card-elements/_location-info.twig b/src/patterns/04-components/card/card-elements/_location-info.twig new file mode 100644 index 00000000..67453d1f --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_location-info.twig @@ -0,0 +1,45 @@ +{% set address = location_info.address %} +{% set map = location_info.map %} +{% set map_link = location_info.map_link %} + +<div class="card__location"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Location Information + {% endblock %} + + {% block details_content %} + {% if address %} + <div class="card__address"> + <span class="uw-label">Location Address:</span> + {% if address.organization %} + {{ address.organization }}<br /> + {% endif %} + {% if address.address_line1 %} + {{ address.address_line1 }}<br /> + {% endif %} + {% if address.address_line2 %} + {{ address.address_line2 }}<br /> + {% endif %} + {% if address.locality or address.administrative_area or address.country_code or address.postal_code %} + {% if address.locality %}{{ address.locality }}{% if address.administrative_area %}, {% endif %}{% endif %}{% if address.administrative_area %}{{ address.administrative_area }}{% endif %}{% if address.country_code and (address.locality or address.administrative_area) %}, {% endif %}{% if address.country_code %}{{ address.country_code }}{% endif %}{% if address.postal_code and (address.locality or address.administrative_area or address.country_code) %} {% endif %}{% if address.postal_code %}{{ address.postal_code }}{% endif %} + {% endif %} + </div> + {% endif %} + {% if map %} + <div class="card__map"> + <span class="uw-label">Location coordinates:</span> + {{ map }} + </div> + {% endif %} + {% if map_link %} + <div class="card__map-link"> + <span class="uw-label"> Link to map:</span> + <a href="{{ map_link.uri }}">{{ map_link.uri }}</a> + </div> + {% endif %} + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_opportunity-dates.twig b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig new file mode 100644 index 00000000..504fb449 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig @@ -0,0 +1,53 @@ +<div class="card__opportunity-dates"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Dates + {% endblock %} + + {% block details_content %} + + {% if dates.posted %} + {% include '@components/label/label.twig' with { + 'label': 'Date posted' + } %} + {% include '@components/card/card-elements/_date.twig' with { + 'date_format': 'long', + 'date': dates.posted + } %} + {% endif %} + + {% if dates.deadline %} + {% include '@components/label/label.twig' with { + 'label': 'Application deadline' + } %} + {% include '@components/card/card-elements/_date.twig' with { + 'date_format': 'long_with_time', + 'date': dates.deadline + } %} + {% endif %} + + {% if dates.start_date %} + {% include '@components/label/label.twig' with { + 'label': 'Start date' + } %} + {% include '@components/card/card-elements/_date.twig' with { + 'date_format': 'long', + 'date': dates.start_date + } %} + {% endif %} + + {% if dates.end_date %} + {% include '@components/label/label.twig' with { + 'label': 'End date' + } %} + {% include '@components/card/card-elements/_date.twig' with { + 'date_format': 'long', + 'date': dates.end_date + } %} + {% endif %} + + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_opportunity-details.twig b/src/patterns/04-components/card/card-elements/_opportunity-details.twig new file mode 100644 index 00000000..7607ff58 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_opportunity-details.twig @@ -0,0 +1,35 @@ +<div class="card__opportunity-details"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Details + {% endblock %} + + {% block details_content %} + + {% if opportunity_details.posted_by %} + {% include '@components/label/label.twig' with { + 'label': 'Posted by (department/office)' + } %} + {{ opportunity_details.posted_by }} + {% endif %} + + {% if opportunity_details.number_of_positions %} + {% include '@components/label/label.twig' with { + 'label': 'Number of positions' + } %} + {{ opportunity_details.number_of_positions }} + {% endif %} + + {% if opportunity_details.reports_to %} + {% include '@components/label/label.twig' with { + 'label': 'Reports to' + } %} + {{ opportunity_details.reports_to }} + {% endif %} + + {% endblock %} + + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_opportunity-type.twig b/src/patterns/04-components/card/card-elements/_opportunity-type.twig new file mode 100644 index 00000000..4a28ef79 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_opportunity-type.twig @@ -0,0 +1,6 @@ +{% include '@components/label/label.twig' with { + 'label': 'Opportunity type' +} %} +{% include "@components/tag-list/tag-list.twig" with { + items: opportunity_type +} %} diff --git a/src/patterns/04-components/card/card-elements/_portrait.twig b/src/patterns/04-components/card/card-elements/_portrait.twig new file mode 100644 index 00000000..86bf32af --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_portrait.twig @@ -0,0 +1,3 @@ +<div class="card__portrait"> + <img src="{{ image.uri }}" alt="{{ image.alt }}" /> +</div> diff --git a/src/patterns/04-components/card/card-elements/_project-details.twig b/src/patterns/04-components/card/card-elements/_project-details.twig new file mode 100644 index 00000000..9c06b2ad --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_project-details.twig @@ -0,0 +1,33 @@ +{% if project_details | length > 0 %} + <div class="card__project-details"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Project details + {% endblock %} + + {% block details_content %} + <div class="card__project-details--status"> + {% include '@components/label/label.twig' with { + 'label': 'Status' + } %} + {% include "@components/tag-list/tag-list.twig" with { + items: project_details.status + } %} + </div> + + {% if project_details.topics %} + <div class="card__project-details--topics"> + {% include '@components/label/label.twig' with { + 'label': 'Topics' + } %} + {% include "@components/tag-list/tag-list.twig" with { + items: project_details.topics + } %} + </div> + {% endif %} + {% endblock %} + {% endembed %} + </div> +{% endif %} diff --git a/src/patterns/04-components/card/card-elements/_project-members.twig b/src/patterns/04-components/card/card-elements/_project-members.twig new file mode 100644 index 00000000..0ca74509 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_project-members.twig @@ -0,0 +1,39 @@ +{% if project_members | length > 0 %} + <div class="card__project-members"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Project members + {% endblock %} + + {% block details_content %} + <div class="card__project-members--content"> + {% for member in project_members %} + <div class="card__project-member"> + {% if member.link %} + <a href="{{ member.link }}"> + {% endif %} + + {% if member.roles %} + {% set roles = '' %} + {% for role in member.roles %} + {% if loop.index0 > 0 %} + {% set roles = roles ~ ', ' %} + {% endif %} + {% set roles = roles ~ role.title %} + {% endfor %} + {{ member.name }} ({{ roles }}) + {% else %} + {{ member.name }} + {% endif %} + {% if member.link %} + </a> + {% endif %} + </div> + {% endfor %} + </div> + {% endblock %} + {% endembed %} + </div> +{% endif %} diff --git a/src/patterns/04-components/card/card-elements/_rate-of-pay.twig b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig new file mode 100644 index 00000000..e7ad5474 --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig @@ -0,0 +1,10 @@ +{% include '@components/label/label.twig' with { + 'label': 'Rate of pay' +} %} +{% if rate_of_pay and rate_of_pay_type %} + {{ rate_of_pay }} ({{ rate_of_pay_type[0].title }}) +{% elseif rate_of_pay_type %} + {{ rate_of_pay_type }} +{% else %} + {{ rate_of_pay }} +{% endif %} diff --git a/src/patterns/04-components/card/card-elements/_service-details.twig b/src/patterns/04-components/card/card-elements/_service-details.twig new file mode 100644 index 00000000..160b6c0d --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_service-details.twig @@ -0,0 +1,72 @@ +<div class="card__service-details"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE + } %} + {% block details_summary %} + Service Details + {% endblock %} + + {% block details_content %} + {% if service_details.popularity %} + {% include '@components/label/label.twig' with { + 'label': 'Popularity' + } %} + {{ service_details.popularity }} + {% endif %} + + {% if service_details.use_service %} + {% include '@components/label/label.twig' with { + 'label': 'What can use this service' + } %} + {% include "@components/tag-list/tag-list.twig" with { + items: service_details.use_service + } %} + {% endif %} + + {% if service_details.whats_available %} + {% include '@components/label/label.twig' with { + 'label': 'What\'s available' + } %} + {% for wa in service_details.whats_available %} + {{ wa }}<br /> + {% endfor %} + {% endif %} + + {% if service_details.request_service %} + {% include '@components/label/label.twig' with { + 'label': 'How to request this service' + } %} + {{ service_details.request_service }} + {% endif %} + + {% if service_details.minimum_notice %} + {% include '@components/label/label.twig' with { + 'label': 'Minimum notice to use this service' + } %} + {{ service_details.minimum_notice }} + {% endif %} + + {% if service_details.average_length %} + {% include '@components/label/label.twig' with { + 'label': 'Average length of time to complete request' + } %} + {{ service_details.average_length }} + {% endif %} + + {% if service_details.pricing_cost %} + {% include '@components/label/label.twig' with { + 'label': 'Pricing/Cost' + } %} + {{ service_details.pricing_cost }} + {% endif %} + + {% if service_details.support %} + {% include '@components/label/label.twig' with { + 'label': 'Support for this service' + } %} + {{ service_details.support }} + {% endif %} + + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_service-hours.twig b/src/patterns/04-components/card/card-elements/_service-hours.twig new file mode 100644 index 00000000..6fc3e11f --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_service-hours.twig @@ -0,0 +1,24 @@ +<div class="card__service-details"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE + } %} + {% block details_summary %} + Service Hours + {% endblock %} + + {% block details_content %} + + {% if service_hours.hours %} + {{ service_hours.hours }} + {% endif %} + + {% if service_hours.hours_notes %} + {% include '@components/label/label.twig' with { + 'label': 'General notes about service hours' + } %} + {{ service_hours.hours_notes }} + {% endif %} + + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_service-information.twig b/src/patterns/04-components/card/card-elements/_service-information.twig new file mode 100644 index 00000000..9105935d --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_service-information.twig @@ -0,0 +1,29 @@ +<div class="card__service-information"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE + } %} + {% block details_summary %} + Service Information + {% endblock %} + + {% block details_content %} + + {% if info.status %} + {% include '@components/label/label.twig' with { + 'label': 'Status' + } %} + {{ info.status }} + {% endif %} + + {% if info.categories %} + {% include '@components/label/label.twig' with { + 'label': 'Categories' + } %} + {% include "@components/tag-list/tag-list.twig" with { + items: info.categories + } %} + {% endif %} + + {% endblock %} + {% endembed %} +</div> diff --git a/src/patterns/04-components/card/card-elements/_timeline.twig b/src/patterns/04-components/card/card-elements/_timeline.twig new file mode 100644 index 00000000..3d702b0b --- /dev/null +++ b/src/patterns/04-components/card/card-elements/_timeline.twig @@ -0,0 +1,23 @@ +<div class="card__timeline"> + {% embed '@components/details/details.twig' with { + 'is_open': TRUE, + }%} + {% block details_summary %} + Project time line + {% endblock %} + + {% block details_content %} + <div class="card__timeline--content"> + {% include '@components/date/_date.twig' with { + 'date_format': 'standard', + 'date': timeline.start_date, + } %} + to + {% include '@components/date/_date.twig' with { + 'date_format': 'standard', + 'date': timeline.end_date, + } %} + </div> + {% endblock %} + {% endembed %} +</div> -- GitLab