Skip to content

Commit

Permalink
Merge pull request #1458 from CuBoulder/issue/1311
Browse files Browse the repository at this point in the history 
Newsletter: Additional Style Fixes
  • Loading branch information
@jcsparks @web-flow
jcsparks authored and web-flow committed Nov 12, 2024
2 parents 896a6c6 + 51de32c commit 9cd3cd2
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 44 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- ### Newsletter: Additional Style Fixes
- Header issues fixed including: Campus logo too small, Website link wrong color, Newsletter title too small, and date and website link should be smaller. Email header too large. Provided correct email header from Lissa ( thanks!). **NOTE**: Link color SHOULD have all the correct client-specific and dark/light mode overrides being applied to force brand colors... but is not guaranteed to work across all clients equally due to email HTML having zero standards between clients.
- Fixes spacing between border and next articles in a series of Articles or User-content. Previously the top spacing was too small.
- Fixes a footer issue where sometimes the background wouldn't apply and there would present white text on a white background.
- Fixes header images cropping oddly

Resolves https://github.com/CuBoulder/tiamat-theme/issues/1311
Resolves https://github.com/CuBoulder/tiamat-theme/issues/1450
---

- ### Collection Grid Fixes
Resolves #1439 and #1446.
Adds a condition for the collection items to be published, and adds a condition to force the columns to always be equal length.
Expand Down
93 changes: 51 additions & 42 deletions templates/content/node--newsletter--email-html.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,11 @@
{% set headerStyles = 'width:100%;background-color: black; padding-bottom:50px;' %}
{% set classicTableOffset = 'margin-top: -50px;padding:10px;' %}
{# padding: 15px 25px; #}
{% set footerStyles = 'background-color: black; padding-top:20px' %}
{% set footerStyles = 'background-color: black !important; padding-top:20px;' %}
{% set cuLogoSrc = cuLogoLight %}
{% set classicImgOffset = 'width:100%'%}
{% set emailBackground = 'background-color:black;' %}
{% set boxBackground = 'background-color:black !important;'%}
{# Minimal #}
{% elseif designType == 'minimal' %}
{% set divStyles = 'background-color: #FFFFFF;margin:auto;' %}
Expand Down Expand Up @@ -156,14 +157,18 @@ a, a:visited, a:hover, a:active {
.ucb-email-footer-darkbox a {
color: #cfb87b;
}
.ucb-email-header-classic :hover,
.ucb-email-header-classic a:hover,
.ucb-email-footer-classic a:hover,
.ucb-email-header-simple a:hover,
.ucb-email-footer-simple a:hover,
.ucb-email-header-darkbox a:hover,
.ucb-email-footer-darkbox a:hover {
color: #fff;
}
.ucb-email-header-minimal a:hover,
.ucb-email-footer.minimal a:hover {
color: #0000;
}
#email h2{
font-size: 20px;
Expand Down Expand Up @@ -355,40 +360,44 @@ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
<tbody>
<tr>
<td style='{{headerStyles}}'>
<table width="600" role='presentation' align="center" style="max-width:600px;">
<tbody>
{# CU LOGO #}
{# NEW #}
<center>
<table width="600" class="ucb-email-header-classic" style="width:100%;{{boxBackground}};{{headerStyles}}; padding-bottom:50px;">
<tr>
<td style="width:100%;{{boxBackground}}; padding-bottom:50px;">
<table width="600" role="presentation" align="center" style="max-width:600px;">
<tr>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 25px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<a href="http://www.colorado.edu">
{# TO DO -- need to swap between this and the white one depending on the color #}
<img style="max-width:35%" src="{{cuLogoSrc}}">
</a>
</td>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 10px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<a href="http://www.colorado.edu">
<img style="max-width:85%" src="{{cuLogoSrc}}">
</a>
</td>
</tr>
{# Newsletter Taxonomy Image -- might need to be a separate table #}
{% if node.field_newsletter_type.entity.field_newsletter_name_image.entity.uri.value %}
<tr>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 25px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<img style="object-fit:cover;-ms-interpolation-mode: bicubic; clear: both; display: block; float: left; height: 167px !important; max-width: 100% !important; outline: none; text-decoration: none; width: 250px !important; max-height: auto !important;"src="{{base_domain}}{{ file_url(node.field_newsletter_type.entity.field_newsletter_name_image.entity.uri.value) }}">
</td>
</tr>
{% endif %}
{# Newsletter title #}
{# Newsletter Taxonomy Image #}
{% if node.field_newsletter_type.entity.field_newsletter_name_image.entity.uri.value %}
<tr>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 25px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px; padding-left:25px; text-align:left">
<span>{{node.field_newsletter_type.entity.label}}</span>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 10px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<img style="object-fit:contain;-ms-interpolation-mode: bicubic; clear: both; display: block; float: left; height: 167px !important; max-width: 100% !important; outline: none; text-decoration: none; width: 250px !important; max-height: auto !important;"src="{{base_domain}}{{ file_url(node.field_newsletter_type.entity.field_newsletter_name_image.entity.uri.value) }}">
</td>
</tr>
{# Date & View on Website Link #}
{% endif %}
<tr>
<td style="width:50%;padding-left:25px; text-align:left">{{ node.changed.value|date("M. j, Y") }}</td>
<td style="width:50%;padding-right:25px;text-align:right;">
<a style="text-wrap:nowrap" href="{{base_url}}{{ path('entity.node.canonical', {'node': node.id}) }}">View on website</a>
</td>
<td style="-moz-hyphens: none; -webkit-hyphens: none; border-collapse: collapse !important; hyphens: none; word-break: break-word; padding: 20px; text-align: left; vertical-align: top; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 20px; padding-left:10px; text-align:left">
<span>{{node.field_newsletter_type.entity.label}}</span>
</td>
</tr>
</tbody>
<tr>
<td style="width:50%;padding: 20px;padding-left:10px; text-align:left; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 12px; margin: 0; font-size: 12px; width: 50%; {{boxBackground}}">{{ node.changed.value|date("M. j, Y") }}</td>
<td style="line-height: 12px; margin: 0; font-size: 12px; width:50%;padding-right:10px;text-align:right;">
<a style="text-wrap:nowrap" href="https://www.colorado.edu/cwa/cwa/newsletter/cwanews/september-newsletter">View on website</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
{# END NEW #}
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -541,15 +550,15 @@ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
</center>
<!--Footer-->
{% if node.field_newsletter_type.entity.field_newsletter_footer.value %}
<center>
<center width="600" style="{{boxBackground}}">
<table class="ucb-email-footer-{{designType}}"role="presentation" border="0" width="600" cellspacing="0" style="{{footerStyles}}border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<tbody>
<tr>
<td style="text-align: left; padding-right:10px; padding-left:10px;padding-bottom:20px; padding-top:20px">
<table align="center" width="600" style="max-width:600px;">
<tbody>
<tr>
<td>
<tbody style="{{boxBackground}}">
<tr style="{{boxBackground}}">
<td style="{{boxBackground}}text-align: left; padding-right:10px; padding-left:10px;padding-bottom:20px; padding-top:20px">
<table align="center" width="600" style="max-width:600px;{{boxBackground}}">
<tbody style="max-width:600px;{{boxBackground}}">
<tr style="max-width:600px;{{boxBackground}}">
<td style="max-width:600px;{{boxBackground}}">
{{node.field_newsletter_type.entity.field_newsletter_footer.0.processed}}
</td>
</tr>
Expand All @@ -563,11 +572,11 @@ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
{% endif %}
{# Social share #}
{% if node.field_newsletter_type.entity.field_newsletter_social_link is defined and node.field_newsletter_type.entity.field_newsletter_social_link is not empty %}
<table role="presentation" border="0" width="600" cellspacing="0" style="{{footerStyles}}border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;">
<tbody>
<tr class="newsletter-social-{{designType}}">
<td>
<center style="margin-bottom: 1em;font-size: 1.25rem; line-height: 1.25;" class="social-media-menu newsletter-social-media-menu" data-style="{{designType}}" data-url="{{base_url}}">
<table role="presentation" border="0" width="600" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; margin: 0; font-size: 14px;margin-bottom:20px;{{boxBackground}}">
<tbody style="{{boxBackground}}">
<tr style="{{boxBackground}}" width="600" class="newsletter-social-{{designType}}">
<td width="600" style="padding-right:10px; padding-left:10px;{{boxBackground}}">
<center width="600" style="{{boxBackground}}" style="margin-bottom: 20px;font-size: 1.25rem; line-height: 1.25;" class="social-media-menu newsletter-social-media-menu" data-style="{{designType}}" data-url="{{base_url}}">
{% for link in node.field_newsletter_type.entity.field_newsletter_social_link %}
{% set uri = link.url.toString() %}
{% set hostname = '' %}
Expand Down Expand Up @@ -606,7 +615,7 @@ h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {

{% set alt = service == 'link' ? 'Social link' : service %}
{% set color = designType == 'darkbox' or designType == 'simple' or designType == 'classic' ? 'white' : 'black' %}
<a{{ create_attribute({ class: 'ucb-email-social-icon', href: uri }) }}>
<a style="{{boxBackground}}" {{ create_attribute({ class: 'ucb-email-social-icon', href: uri }) }}>
<img{{ create_attribute({
src: base_url ~ '/' ~ base_path ~ directory ~ '/images/social_icons/' ~ color ~ '-' ~ service|lower ~ '.png',
alt: alt,
Expand Down
2 changes: 1 addition & 1 deletion templates/paragraphs/paragraph--newsletter-section--email-html.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
item.entity.field_newsletter_content_text.value|render %}
<!--Teaser Article-->
<center align="left">
<table role="presentation" width="600" style="padding-bottom: 20px; border-bottom: solid 1px #cccccc;">
<table role="presentation" width="600" style="padding-top:20px; padding-bottom: 20px; border-bottom: solid 1px #cccccc;">
<tbody>
<tr class="email-feature-art-row">
{# Image #}
Expand Down
2 changes: 1 addition & 1 deletion templates/paragraphs/paragraph--newsletter-section.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@

{# Code to render user made content (content text) #}
{% elseif item.entity.field_newsletter_content_text.value|render %}
<div class="article-summary" id="teaser-article-summary-user-text--{{kkey}}">
<div class="article-summary" id="teaser-article-summary-user-text--{{key}}">
{{ item.entity.field_newsletter_content_text|view }}
</div>
{% endif %}
Expand Down

0 comments on commit 9cd3cd2

Please sign in to comment.