Skip to content

Commit

Permalink
Merge pull request #8664 from gitcoinco/fix/emails-alignment
Browse files Browse the repository at this point in the history 
email alignment fixes
  • Loading branch information
@octavioamu
octavioamu authored Mar 23, 2021
2 parents 2ab9fe4 + 54969ff commit ce1b3e3
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 123 deletions.
53 changes: 3 additions & 50 deletions app/retail/templates/emails/grants/successful_contribution.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,8 @@
{% block content %}

<style>
hr {
width: 80%;
height: 2px;
border-radius: 25px;
border: none;
background-color: #D2D2D2;
}

.grant-header {
width: 100%;
text-align: center;
}

.left-grant-Header {
display: inline-block;
}

.right-grant-header {
display: inline-block;
}

.right-grant-header>h2 {
font-size: 20px;
line-height: 1.5em;
}

.grant-info {
Expand All @@ -65,7 +43,6 @@
.grant-description {
max-width: 50rem;
margin: 1.5rem auto;
text-align: center;
}

.grant-contribution {
Expand All @@ -74,16 +51,6 @@
font-size: 1rem;
}

.grant-button {
padding: 12px 36px;
font-size: 12px;
border-radius: 3px;
text-decoration: none;
background-color: #0D0764;
color: white;
font-weight: 600;
}

#grow-oss {
margin-top: 50px;
margin-bottom: 50px;
Expand All @@ -93,27 +60,13 @@
max-width: 25rem;
width: 100%;
}

@media screen and (min-width: 598px) {
.right-grant-header {
padding-left: 40px;
transform: translateY(-12.5%);
text-align: left;
}

.left-grant-Header>img {
transform: translateY(13.5%);
}
}
</style>

<div id="content-body">
<img class="center-img bounties-img" src="{% static 'v2/images/emails/grants.png' %}">
<div class="grant-header">
<div class="left-grant-Header">
<img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans " Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
</div>
<div class="right-grant-header" style="margin-top: 4em;">
<img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans " Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
<div style="margin-top: 4em;">
<h1 style="text-transform: none;">{% trans "Your contribution of" %} {{ subscription.amount_per_period|floatformat:3|intcomma }} {{ subscription.token_symbol }} {% trans "to " %} {{ grant.title }} {% trans " was successful" %}!
</h1>
<h2 style="text-transform: none;">{% trans "The world of open source is a better place because of you." %}
Expand Down Expand Up @@ -155,7 +108,7 @@ <h2 style="text-transform: none;">{% trans "The world of open source is a better
</div>

<br>
<a class="grant-button" href="{% url 'grants:details' grant.id grant.slug %}?{{ utm_tracking }}">{% trans "View Grant" %}</a>
<a class="button" href="{% url 'grants:details' grant.id grant.slug %}?{{ utm_tracking }}">{% trans "View Grant" %}</a>
<br>
<br>
<p>{% trans "If you ever need to, you can cancel your support" %}
Expand Down
43 changes: 2 additions & 41 deletions app/retail/templates/emails/grants/thank_you_for_supporting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,8 @@
{% block content %}

<style>
hr {
width: 80%;
height: 2px;
border-radius: 25px;
border: none;
background-color: #D2D2D2;
}

.grant-header {
width: 100%;
text-align: center;
}

.left-grant-header {
display: inline-block;
}

.right-grant-header {
display: inline-block;
}

.right-grant-header>h2 {
font-size: 20px;
line-height: 1.5em;
}

.grant-info {
Expand All @@ -65,7 +43,6 @@
.grant-description {
max-width: 50rem;
margin: 1.5rem auto;
text-align: center;
}

.grant-button {
Expand All @@ -86,30 +63,14 @@
max-width: 25rem;
width: 100%;
}

@media (min-width : 1386px) {
.left-grant-header>img {
transform: translateY(13.5%);
}
}

@media screen and (min-width: 598px) {
.right-grant-header {
padding-left: 40px;
transform: translateY(-12.5%);
text-align: left;
}
}
</style>
<div id="content-body">
<img class="center-img bounties-img" src="{% static 'v2/images/emails/grants.png' %}">
{% for grant_with_subscription in grants_with_subscription %}
{% with subscription=grant_with_subscription.subscription grant=grant_with_subscription.grant %}
<div class="grant-header">
<div class="left-grant-header">
<img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans "Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
</div>
<div class="right-grant-header">
<img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans "Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
<div style="margin-top: 4em;">
<h1 style="text-transform: none;">{% trans "Thank you for supporting" %} {{ grant.title }}!
</h1>
<h2 style="text-transform: none;">{% trans "The world of open source is a better place because of you." %}
Expand Down
79 changes: 47 additions & 32 deletions app/retail/templates/emails/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@
}

h4, .h4 {
text-align: center;
padding-top: 40px;
}

Expand Down Expand Up @@ -768,8 +767,27 @@
width: 100%;
}

#footer {
padding-top: 40px;
color: #757087 !important;
}

.footer-links {
margin: 3em 1.4em;
margin: -53px 0px 110px 20px;
}

.footer-links div {
width: 25%;
float: left;
}

.footer-links div img {
float: right;
}

.footer-socials {
width: 3em;
height: auto;
}
}

Expand Down Expand Up @@ -798,8 +816,28 @@
width: 90%;
}

#footer {
padding-top: 40px;
margin: 0px 180px 0px 180px;
color: #757087 !important;
}

.footer-links {
margin: auto;
margin: -53px 0px 110px 0px;
}

.footer-links div {
width: 25%;
float: left;
}

.footer-links div img {
float: right;
}

.footer-socials {
width: 3em;
height: auto;
}
}

Expand All @@ -813,29 +851,6 @@
margin: 0.5em auto 0.5em auto;
}

#footer {
color: #757087 !important;
}

.footer-links {
max-width: 800px;
text-align: justify;
/* margin: auto; */
margin-top: 3em;
margin-bottom: 2em;
}

.footer-links:after {
content: "";
display: inline-block;
width: 100%;
}

.footer-socials {
width: 3em;
height: auto;
}

.bounties-img {
max-width: 20em;
height: auto;
Expand All @@ -852,17 +867,17 @@
{% endblock %}
</div>
<div id="footer">
<a href="https://www.facebook.com/GetGitcoin"><img class="footer-socials" src="{% static "v2/images/emails/facebook.png" %}"></a>
<div class="footer-links">
{% block footer_links %}
<a href="https://www.facebook.com/GetGitcoin"><img class="footer-socials" src="{% static "v2/images/emails/facebook.png" %}"></a>

<a href="https://www.youtube.com/channel/UCeKRqRjzSzq5yP-zUPwc6_w"><img class="footer-socials" src="{% static "v2/images/emails/youtube.png" %}"></a>
<div><a href="https://www.youtube.com/channel/UCeKRqRjzSzq5yP-zUPwc6_w"><img class="footer-socials" src="{% static "v2/images/emails/youtube.png" %}"></a></div>

<a href="https://www.twitter.com/gitcoin"><img class="footer-socials" src="{% static "v2/images/emails/twitter.png" %}"></a>
<div><a href="https://www.twitter.com/gitcoin"><img class="footer-socials" src="{% static "v2/images/emails/twitter.png" %}"></a></div>

<a href="https://github.com/gitcoinco/"><img class="footer-socials" src="{% static "v2/images/emails/github.png" %}"></a>
<div><a href="https://github.com/gitcoinco/"><img class="footer-socials" src="{% static "v2/images/emails/github.png" %}"></a></div>

<a href="mailto:[email protected]"><img class="footer-socials" src="{% static "v2/images/emails/email.png" %}"></a>
<div><a href="mailto:[email protected]"><img class="footer-socials" src="{% static "v2/images/emails/email.png" %}"></a></div>
{% endblock %}
</div>
<center style="margin-bottom: 80px;">
Expand All @@ -874,7 +889,7 @@
<p>
{% trans "Want to change how you receive these emails?" %}
<br>
{% trans "You can update your " %} <a href="{% url "email_settings" subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "preferences" %}</a> or <a href="{% url "email_settings" subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "unsubscribe" %}</a> {% trans "from this list." %}
{% trans "You can update your " %} <a href="{% url 'email_settings' subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "preferences" %}</a> or <a href="{% url 'email_settings' subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "unsubscribe" %}</a> {% trans "from this list." %}
</p>
</center>
</div>
Expand Down

0 comments on commit ce1b3e3

Please sign in to comment.