From fc1e14f5ba6bb3e1800d33f1a73f976462baca60 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 16 Jun 2021 16:33:22 +0000
Subject: [PATCH] Additional styling for contact listing
---
css/styles.css | 67 +++++++-
.../00-config/_design-tokens.artifact.scss | 2 +-
.../02-html-elements/25-forms/_forms.scss | 3 +-
.../04-components/contact/_contact.scss | 101 ++++++++----
.../04-components/contact/contact.twig | 153 +++++++++---------
.../content-grid-list/_content-grid-list.scss | 6 +
.../04-components/details/_details.scss | 2 +-
.../04-components/filters/_filters.scss | 2 +-
.../_patterns/04-components/view/_view.scss | 4 +
source/images/icons/mobile-arrow-down.svg | 7 +-
source/images/icons/mobile-arrow-up.svg | 7 +-
11 files changed, 228 insertions(+), 126 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 4eb77ea5..95223fbc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1183,13 +1183,15 @@ input {
line-height: normal; }
label,
-.label {
+.label,
+.uw-label {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 20.256px;
font-weight: 400;
margin-bottom: 0.5rem; }
label abbr,
- .label abbr {
+ .label abbr,
+ .uw-label abbr {
display: inline;
font-size: 18px; }
@@ -3810,7 +3812,8 @@ button {
.uw-contact .details {
margin: 0; }
.uw-contact .details__summary {
- text-transform: inherit; }
+ text-transform: inherit;
+ white-space: normal; }
.uw-contact__h2 {
text-decoration: none;
@@ -3824,11 +3827,52 @@ button {
font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1.266rem;
font-weight: 400;
+ padding-right: 1.5rem;
text-decoration: none;
- text-transform: inherit; }
+ text-transform: inherit;
+ width: 100%; }
+
+.uw-contact__content {
+ background: #fafafa;
+ display: grid;
+ font-size: 1rem;
+ grid-template-columns: 100%;
+ margin: 0 0 1.5rem 0;
+ padding: 0.5rem; }
+ .uw-contact__content .uw-label {
+ display: block;
+ margin-top: 1rem; }
+
+.uw-contact .uw-contact__info {
+ grid-column: 1/2;
+ grid-row: 1/2;
+ width: 100%; }
+
+.uw-contact__with_image .uw-contact__image {
+ grid-column: 1/2;
+ grid-row: 1/2;
+ width: 100%; }
+ @media (min-width: 48.06rem) {
+ .uw-contact__with_image .uw-contact__image {
+ grid-column: 1/2;
+ grid-row: 1/2; } }
-.uw-contact__info {
- font-size: 1rem; }
+.uw-contact__with_image .uw-contact__content {
+ display: grid;
+ font-size: 1rem;
+ gap: 2rem;
+ grid-template-columns: 100%; }
+ @media (min-width: 48.06rem) {
+ .uw-contact__with_image .uw-contact__content {
+ grid-template-columns: 5rem 1fr; } }
+
+.uw-contact__with_image .uw-contact__info {
+ grid-column: 1/2;
+ grid-row: 2/3; }
+ @media (min-width: 48.06rem) {
+ .uw-contact__with_image .uw-contact__info {
+ grid-column: 2/3;
+ grid-row: 1/2; } }
.uw-content--grid-list__layout {
display: flex;
@@ -3932,6 +3976,9 @@ button {
-webkit-flex-grow: 1;
flex-grow: 1;
width: 45%; } }
+ .view-uw-view-contacts .view-content .views-row {
+ padding: 0;
+ width: 100%; }
.uw-copy-text__wrapper.uw-contained-width {
margin-left: auto;
@@ -3972,7 +4019,7 @@ details.details {
.details__summary {
background-image: url("../source/images/icons/mobile-arrow-down.svg");
background-color: #eee;
- background-position: right 32px center;
+ background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 0.8125rem;
color: #000;
@@ -4907,7 +4954,7 @@ fieldset,
.seven-details__summary {
background-image: url("../source/images/icons/mobile-arrow-down.svg");
background-color: #eee;
- background-position: right 32px center;
+ background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 0.8125rem;
color: #000;
@@ -8070,6 +8117,10 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
padding: 1rem 0;
padding-top: 0; } }
+.view.view-uw-view-contacts {
+ padding-left: 0;
+ padding-right: 0; }
+
.view-filters {
grid-column: 1/3;
grid-row: 2/4;
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index 799f02ce..6a7dafa7 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -511,4 +511,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
-);
+);
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
index 6daf9204..e40d9d98 100644
--- a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
+++ b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
@@ -69,7 +69,8 @@ input {
// input[type='week'] {}
label,
-.label,{
+.label,
+.uw-label{
font-family: $form-label-font-family;
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
diff --git a/source/_patterns/04-components/contact/_contact.scss b/source/_patterns/04-components/contact/_contact.scss
index 99bc4844..bb0b13ba 100644
--- a/source/_patterns/04-components/contact/_contact.scss
+++ b/source/_patterns/04-components/contact/_contact.scss
@@ -1,24 +1,10 @@
-.node--type-uw-ct-contact{
-
-}
.uw-contact{
-
-
-
.details{
margin:0;
&__summary{
//padding: $details-padding gesso-spacing(xl) $details-padding $details-padding;
text-transform: inherit;
- }
- &__fallback-link{
-
- }
- &__content{
-
- }
- &__description{
-
+ white-space:normal;
}
}
&__h2{
@@ -36,40 +22,85 @@
font-family:gesso-font-family(primary);
font-size:rem(gesso-font-size(2));
font-weight:400;
+ padding-right:1.5rem;
text-decoration:none;
text-transform: inherit;
+ width:100%;
}
- &__info{
+ &__content{
+ background:#fafafa;
+ display:grid;
font-size:rem(gesso-font-size(0));
-
+ grid-template-columns: 100%;
+ margin: 0 0 rem(gesso-spacing(md)) 0;
+ padding:rem(gesso-spacing(xs));
+ .uw-label{
+ display:block;
+ margin-top:rem(gesso-spacing(sm));
}
- &__image{
+ }
+ .uw-contact__info{
- }
- &__phone-email{
+ grid-column:1/2;
+ grid-row: 1/2;
+ width:100%;
+ }
+ &__with_image{
+ .uw-contact__image{
+ grid-column:1/2;
+ grid-row: 1/2;
+ @include medium {
+ grid-column:1/2;
+ grid-row: 1/2;
+ }
+ width:100%;
}
- &__email{
-
+ .uw-contact__content{
+ display:grid;
+ font-size:rem(gesso-font-size(0));
+ gap:2rem;
+ grid-template-columns: 100%;
+ @include medium {
+ grid-template-columns: 5rem 1fr;
}
- &__phone{
}
- &__additional-info{
-
+ .uw-contact__info{
+ grid-column: 1/2;
+ grid-row: 2/3;
+ @include medium {
+ grid-column: 2/3;
+ grid-row: 1/2;
+ }
}
- &__contact-for{
+ }
- }
- &__groups{
- }
- &__location{
+ &__phone-email{
- }
- &__profile{
+ }
+ &__email{
- }
- &__personal-website{
+ }
+ &__phone{
+ }
- }
+ &__contact-for{
+
+ }
+ &__groups{
+
+ }
+ &__location{
+
+ }
+ &__profile{
+
+ }
+ &__personal-website{
+
+ }
+ &__additional-info{
+
+ }
}
diff --git a/source/_patterns/04-components/contact/contact.twig b/source/_patterns/04-components/contact/contact.twig
index a187942b..f5b2d328 100644
--- a/source/_patterns/04-components/contact/contact.twig
+++ b/source/_patterns/04-components/contact/contact.twig
@@ -1,96 +1,99 @@
-<div class="uw-contact">
+<div class="uw-contact {% if contact.image %} uw-contact__with_image {% endif %}">
{% embed "@components/details/details.twig" with {
is_open: is_open
} %}
{% block details_summary %}
- {% if contact.title %}
- <h2 class="uw-contact__h2">
- <a href="{{ contact.url }}">
- {{ contact.title }}
- </a>
- </h2>
- {% endif %}
- {% if contact.sub_title %}
- <div class="uw-contact__position">
- {{ contact.sub_title }}
- </div>
- {% endif %}
+ {% if contact.title %}
+ <h2 class="uw-contact__h2">
+ <a href="{{ contact.url }}">
+ {{ contact.title }}
+ </a>
+ </h2>
+ {% endif %}
+ {% if contact.sub_title %}
+ <span class="uw-contact__position">
+ {{ contact.sub_title }}
+ </span>
+ {% endif %}
{% endblock %}
-
{% block details_content %}
- <div class="uw-contact__info">
+ <div class="uw-contact__content">
{% if contact.image %}
<div class="uw-contact__image">
- <img src="{{ contact.image.uri }} alt="{{ contact.title }}" />
- </div>
- {% endif %}
- {% if contact.email or contact.phone %}
- <div class="uw-contact__phone-email">
- {% if contact.email %}
- <div class="uw-contact__email">
- <a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
- </div>
- {% endif %}
- {% if contact.phone %}
+ <img src="{{ contact.image.uri }}" alt="{{ contact.title }}" />
+ </div>
+ {% endif %}
+ <div class="uw-contact__info">
+ {% if contact.email or contact.phone %}
+ <div class="uw-contact__phone-email">
+ {% if contact.email %}
+ <div class="uw-contact__email">
+ <a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
+ </div>
+ {% endif %}
+ {% if contact.phone %}
<div class="uw-contact__phone">
{{ contact.phone }}
</div>
{% endif %}
</div>
- {% endif %}
- {% if contact.additional_info %}
- <div class="uw-contact__additional-info">
- {{ contact.additional_info }}
- </div>
- {% endif %}
- {% if contact.contact_for %}
- <div class="uw-contact__contact-for">
- {{ contact.contact_for }}
- </div>
- {% endif %}
- {% if contact.groups %}
- <div class="uw-contact__groups">
- {% for group in contact.groups %}
- {% if loop.index0 > 0 %}
- , {{ group.title }}
- {% else %}
+ {% endif %}
+ {% if contact.location %}
+ <div class="uw-contact__location">
+ <span class="uw-label">Location:</span>
+ {{ contact.location }}
+ </div>
+ {% endif %}
+ {% if contact.contact_for %}
+ <div class="uw-contact__contact-for">
+ <span class="uw-label">Contact for:</span>
+ {{ contact.contact_for }}
+ </div>
+ {% endif %}
+ {% if contact.link_profile %}
+ <div class="uw-contact__profile">
+ <span class="uw-label">Link to profile:</span>
+ <a href="{{ contact.link_profile.uri }}">
+ {% if contact.link_profile.title %}
+ {{ contact.link_profile.title }}
+ {% else %}
+ {{ contact.title }}
+ {% endif %}
+ </a>
+ </div>
+ {% endif %}
+ {% if contact.groups %}
+ <div class="uw-contact__groups">
+ <span class="uw-label">Group(s):</span>
+ {% for group in contact.groups %}
+ {% if loop.index0 > 0 %}
+ , {{ group.title }}
+ {% else %}
{{ group.title }}
{% endif %}
{% endfor %}
</div>
- {% endif %}
- {% if contact.location %}
- <div class="uw-contact__location">
- <strong>Location:</strong><br />
- {{ contact.location }}
- </div>
- {% endif %}
- {% if contact.link_profile %}
- <div class="uw-contact__profile">
- <strong>Link to profile:</strong><br />
- <a href="{{ contact.link_profile.uri }}">
- {% if contact.link_profile.title %}
- {{ contact.link_profile.title }}
- {% else %}
- {{ contact.title }}
- {% endif %}
- </a>
- </div>
- {% endif %}
- {% if contact.personal_website %}
- <div class="uw-contact__personal-website">
- <strong>Link to personal website:</strong><br />
- <a href="{{ contact.personal_website.uri }}">
- {% if contact.personal_website.title %}
- {{ contact.personal_website.title }}
- {% else %}
- {{ contact.title }}
- {% endif %}
- </a>
- </div>
- {% endif %}
+ {% endif %}
+ {% if contact.personal_website %}
+ <div class="uw-contact__personal-website">
+ <strong>Link to personal website:</strong><br />
+ <a href="{{ contact.personal_website.uri }}">
+ {% if contact.personal_website.title %}
+ {{ contact.personal_website.title }}
+ {% else %}
+ {{ contact.title }}
+ {% endif %}
+ </a>
+ </div>
+ {% endif %}
+ </div>
</div>
+ {% if contact.additional_info %}
+ <div class="uw-contact__additional-info">
+ {{ contact.additional_info }}
+ </div>
+ {% endif %}
{% endblock %}
- {% endembed %}
+ {% endembed %}
</div>
diff --git a/source/_patterns/04-components/content-grid-list/_content-grid-list.scss b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
index 64eb77d6..e3043e77 100644
--- a/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
+++ b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
@@ -32,6 +32,7 @@
.view-content {
@include uw-flex-grid();
+
.views-row{
@include uw-flex-term-item();
order: 3;
@@ -42,5 +43,10 @@
order: 2;
width: 100% !important;
}
+ .view-uw-view-contacts &{
+ padding:0;
+ width: 100%;
+
+ }
}
}
diff --git a/source/_patterns/04-components/details/_details.scss b/source/_patterns/04-components/details/_details.scss
index 98a992ee..582a33d0 100644
--- a/source/_patterns/04-components/details/_details.scss
+++ b/source/_patterns/04-components/details/_details.scss
@@ -37,7 +37,7 @@ details.details {
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: $details-background-color;
- background-position: right $details-padding center; // LTR
+ background-position: right 1rem center; // LTR
background-repeat: no-repeat;
background-size: rem(13px);
color: gesso-brand(org-default,uw-black,'primary');
diff --git a/source/_patterns/04-components/filters/_filters.scss b/source/_patterns/04-components/filters/_filters.scss
index 58161982..d3116ca4 100644
--- a/source/_patterns/04-components/filters/_filters.scss
+++ b/source/_patterns/04-components/filters/_filters.scss
@@ -45,7 +45,7 @@
.seven-details__summary {
@include svg-background(mobile-arrow-down);
background-color: $details-background-color;
- background-position: right $details-padding center; // LTR
+ background-position: right 1rem center; // LTR
background-repeat: no-repeat;
background-size: rem(13px);
color: gesso-brand(org-default,uw-black,'primary');
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index df4999a7..e45e996c 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -77,6 +77,10 @@ $sidebar-width: 18.75rem;
}
// Universal row for views
}
+ &.view-uw-view-contacts{
+ padding-left:0;
+ padding-right:0;
+ }
}
.view-filters{
// Universal filter form used on events, blog and news.
diff --git a/source/images/icons/mobile-arrow-down.svg b/source/images/icons/mobile-arrow-down.svg
index 240b8d36..3020494b 100644
--- a/source/images/icons/mobile-arrow-down.svg
+++ b/source/images/icons/mobile-arrow-down.svg
@@ -1,3 +1,6 @@
-<svg width="19" height="12" viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg" version="1.1">
-<path fill="#000000" d="M2.3 0l7.5 7.5 7.5-7.5 2.3 2.3-9.7 9.7-9.7-9.7 2.3-2.3z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 19 12" style="enable-background:new 0 0 19 12;" xml:space="preserve">
+<path d="M17.6,0.2L9.5,8.3L1.4,0.2L0,1.6l9.6,9.6L19,1.8l-1.7-1.7H17.6z"/>
</svg>
diff --git a/source/images/icons/mobile-arrow-up.svg b/source/images/icons/mobile-arrow-up.svg
index ae8183fa..42e845bd 100644
--- a/source/images/icons/mobile-arrow-up.svg
+++ b/source/images/icons/mobile-arrow-up.svg
@@ -1,3 +1,6 @@
-<svg width="19" height="12" viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg" version="1.1">
-<path fill="#000000" d="M2.3 12l7.5-7.5 7.5 7.5 2.3-2.3-9.7-9.7-9.7 9.7 2.3 2.3z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 19 12" style="enable-background:new 0 0 19 12;" xml:space="preserve">
+<path d="M1.4,11.2l8.1-8.1l8.1,8.1L19,9.8L9.4,0.2L0,9.5l1.7,1.7H1.4z"/>
</svg>
--
GitLab