Skip to content

Commit

Permalink
Modify template email styles (#28)
Browse files Browse the repository at this point in the history 
* modify template email styles

* resize images

* add styles to capitalitat email template

* add styles to capitalitat email template

* adjust footer image size

* resize images

* resize body box image

* add dimentions to footer logo

* adjust body box image size

* adjust image size for canodrom template

* change footer logo size

* modify styles

* inline styles for image dimensions

* inline styles for image dimensions

* inline styles

* inline styles

* add more CSS properties

* fix test
  • Loading branch information
@ElviaBth
ElviaBth authored Dec 19, 2023
1 parent 73b61c0 commit deee50d
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 18 deletions.
4 changes: 4 additions & 0 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ jobs:
with:
fetch-depth: 1

- uses: nanasess/setup-chromedriver@v2
with:
chromedriver-version: 119.0.6045.105

- uses: ruby/setup-ruby@v1
with:
ruby-version: ${{ env.RUBY_VERSION }}
Expand Down
27 changes: 16 additions & 11 deletions app/cells/decidim/newsletter_agenda/agenda_events/themes/canodrom.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@
.footer-social__icon {
display: inline-block;
margin-right: 0.5rem;
width: 20px;
height: 20px;
width: 20px !important;
height: 20px !important;
}

.footer-social__icon:last-child {
Expand All @@ -165,6 +165,11 @@
margin: 0 auto;
}

img {
-ms-interpolation-mode: nearest-neighbor;
-ms-interpolation-mode: bicubic;
}

@media only screen and (max-width: 500px) {
.event-box,
.footer-box {
Expand Down Expand Up @@ -220,9 +225,9 @@
<tr>
<td>
<table class="row content image">
<tr>
<th class="small-12 first columns">
<%= image_tag image_url(:main_image, resize_to_fit: [653, 436]) %>
<tr align="center">
<th class="small-12 first columns" align="center">
<%= image_tag image_url(:main_image, resize_to_fit: [653, 436]), width: "653", height: "436" %>
</th>
<th class="expander"></th>
</tr>
Expand All @@ -240,7 +245,7 @@
</tr>
<tr>
<td class="agenda">
<table class="agenda">
<table class="agenda" width="100%">
<tr>
<td class="top" style="vertical-align: middle; padding: 0 120px; text-align: center; font-size:24px;"
colspan="2">
Expand All @@ -251,16 +256,16 @@
</td>
</tr>
<tr>
<td class="middle">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<td class="middle" width="100%">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<% (1..4).each_slice(2) do |boxes| %>
<tr>
<% boxes.each do |num| %>
<td class="event-box" style="padding: 10px;margin-bottom: 30px;" width="50%">
<div class="box-image">
<% if has_image?("body_box_image_#{num}") %>
<%= link_to link_for("body_box_link_url_#{num}") do %>
<%= image_tag(image_url("body_box_image_#{num}")) %>
<%= image_tag(image_url("body_box_image_#{num}"), width: "238", height: "134", style: "width:100%; max-width:500px; display:block; margin:0 auto;") %>
<% end %>
<% end %>
</div>
Expand Down Expand Up @@ -305,7 +310,7 @@
<% (1..3).each do |num| %>
<td class="footer-box" style="padding: 10px;margin-bottom: 30px;" width="33%">
<div class="box-image">
<%= image_tag(image_url("footer_box_image_#{num}", resize_to_fill: [198, 132])) if has_image?("footer_box_image_#{num}") %>
<%= image_tag(image_url("footer_box_image_#{num}", resize_to_fill: [198, 132]), width: "198", height: "132") if has_image?("footer_box_image_#{num}") %>
</div>
<div class="footer-box-date-time">
<%= translated_text_for "footer_box_date_time_#{num}" %>
Expand Down Expand Up @@ -342,7 +347,7 @@
<table class="footer-logo" style="margin: 0;">
<tr>
<td class="footer-bottom" style="padding: 20px 0;">
<%= image_tag footer_image_url, class: "footer-bottom__logo" %>
<%= image_tag footer_image_url, class: "footer-bottom__logo", width: "180", height: "80" %>
</td>
</tr>
</table>
Expand Down
19 changes: 12 additions & 7 deletions app/cells/decidim/newsletter_agenda/agenda_events/themes/capitalitat.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@
height: 25px;
}

img {
-ms-interpolation-mode: nearest-neighbor;
-ms-interpolation-mode: bicubic;
}

@media only screen and (max-width: 400px) {
td.mobile-responsive {
width: 100% !important;
Expand Down Expand Up @@ -107,9 +112,9 @@
<!-- Intro-content -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color: <%= background_color %>;">
<tr>
<td align="center" style="padding: 48px">
<td align="center" style="padding: 48px; width: 653px; height: 436px;">
<% if has_image?(:main_image) %>
<%= image_tag image_url(:main_image, resize_to_fit: [653, 436]), alt: "Intro Image" %>
<%= image_tag image_url(:main_image, resize_to_fit: [653, 436]), alt: "Intro Image", width: "653", height: "436" %>
<% end %>
</td>
</tr>
Expand Down Expand Up @@ -148,7 +153,7 @@
<!-- Image -->
<% if has_image?("body_box_image_#{num}") %>
<%= link_to link_for("body_box_link_url_#{num}") do %>
<%= image_tag(image_url("body_box_image_#{num}"), style: "width:100%; max-width:500px; display:block; margin:0 auto;") %>
<%= image_tag(image_url("body_box_image_#{num}"), width: "238", height: "134", style: "width:100%; max-width:500px; display:block; margin:0 auto;") %>
<% end %>
<% end %>

Expand Down Expand Up @@ -206,7 +211,7 @@
<td class="mobile-responsive footer-box__image" style="width: 33.33%; vertical-align: top; padding: 08px;">
<!-- Image -->
<% if has_image?("footer_box_image_#{num}") %>
<%= image_tag(image_url("footer_box_image_#{num}", resize_to_fill: [198, 132])) %>
<%= image_tag(image_url("footer_box_image_#{num}", resize_to_fill: [198, 132]), width: "198", height: "132", style: "width: 100%; height: auto;") %>
<% end %>
<!-- Date -->
<table width="100%">
Expand Down Expand Up @@ -282,9 +287,9 @@
<td class="mobile-responsive logos-block" style="padding: 0 32px 0 0;vertical-align: bottom;">
<table border="0" cellspacing="0" cellpadding="0">
<tr class="footer-logos">
<td align="left" class="footer-logo" style="padding-left: 16px;padding-right: 20px;"><%= image_tag asset_pack_url("media/images/capital_logo.png", **host_options) %></td>
<td align="center" class="footer-logo" style="padding-left: 16px;padding-right: 20px;"><%= image_tag asset_pack_url("media/images/ajuntament.png", **host_options) %></td>
<td align="right" class="footer-logo" style="padding-left: 16px;"><%= image_tag asset_pack_url("media/images/metropolita_logo.png", **host_options) %></td>
<td align="left" class="footer-logo" style="padding-left: 16px;padding-right: 20px;"><%= image_tag asset_pack_url("media/images/capital_logo.png", **host_options), width: "180", height: "25" %></td>
<td align="center" class="footer-logo" style="padding-left: 16px;padding-right: 20px;"><%= image_tag asset_pack_url("media/images/ajuntament.png", **host_options), width: "100", height: "25" %></td>
<td align="right" class="footer-logo" style="padding-left: 16px;"><%= image_tag asset_pack_url("media/images/metropolita_logo.png", **host_options), width: "80", height: "25" %></td>
</tr>
</table>
</td>
Expand Down

0 comments on commit deee50d

Please sign in to comment.