Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Miscellaneous styling fixes for mobile (#29294)

Browse Source 
* fix: Miscellaneous styling fixes for mobile

* fix: Add px fallback since outlook doesn't support rem
This commit is contained in:
Matthew Piatetsky
2021-11-10 16:47:55 -05:00
committed by GitHub
parent 52a2da61f1
commit 5dbfae83fc
3 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lms/djangoapps/course_goals/templates/course_goals/edx_ace/goalreminder/email/body.html
View File

@@ -20,30 +20,17 @@
{# email client support for style sheets is pretty spotty, so we have to inline all of these styles #}
{# we're using important below to override inline styles and my understanding is for email clients where media queries do not work, they'll simply see the desktop css on their phone #}
<table style="width: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<table style="width: 100%; min-width: 325px;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
{% include "goal_reminder_banner.html" %}
<style>
.goal-reminder-body-wrapper {
margin: 2.25rem 1.25rem 0 1.0625rem;
}
@media only screen and (max-width: 600px) {
.goal-reminder-body-wrapper {
margin-left: 0 !important;
}
}
@media only screen and (max-width: 425px) {
.goal-reminder-body-wrapper {
margin-top: 0 !important;
}
}
</style>
<div class="goal-reminder-body-wrapper" style="width:inherit; font-size: 0.875rem; padding: 0 20px 0 20px;">
<div class="goal-reminder-body-wrapper" style="width:inherit; font-size: 14px; font-size: 0.875rem; padding: 0 20px 0 5%; margin: 36px 20px 0 17px; margin: 2.25rem 1.25rem 0 1.0625rem;">
<h3 style="
font-size: 22px;
font-size: 1.38rem;
font-style: normal;
font-weight: 700;
line-height: 28px;
line-height: 1.75rem;
text-align: left;
">
@@ -66,7 +53,12 @@
<a style="color: white; text-decoration: none; display: inline-block;"
href="{{course_url}}" target="_blank">
<div style="padding: 0.5rem 0.75rem; background: #D23228; margin-bottom: 1rem;">
<div style="
padding: 8px 0 12px;
padding: 0.5rem 0.75rem;
background: #D23228;
margin-bottom: 16px;
margin-bottom: 1rem;">
{% filter force_escape %}{% blocktrans %}
Jump back in
{% endblocktrans %}{% endfilter %}
@@ -82,26 +74,33 @@
<a style="color: #D23228; text-decoration: none; display: inline-block; border: 0.0625rem solid #F2F0EF;"
href="{{course_url}}" target="_blank">
<div style="padding: 0.5rem 0.75rem; background: white;">
<div style="
padding: 8px 0 12px;
padding: 0.5rem 0.75rem;
background: white;">
{% filter force_escape %}{% blocktrans %}
Adjust my goal
{% endblocktrans %}{% endfilter %}
</div>
</a>
<a style="
<center>
<a style="
color: #00688D;
display: block;
margin: 15px auto 0 auto;
margin: 0.9375rem auto 0 auto;
text-align: center;
text-decoration: none;
width: 208px;
width: 13rem;
"
href="{{goals_unsubscribe_url}}" target="_blank">
{% filter force_escape %}{% blocktrans %}
Unsubscribe from goal reminder emails for this course
{% endblocktrans %}{% endfilter %}
</a>
{% filter force_escape %}{% blocktrans %}
Unsubscribe from goal reminder emails for this course
{% endblocktrans %}{% endfilter %}
</a>
</center>
</div>
</td>
</tr>

17
lms/djangoapps/course_goals/templates/course_goals/edx_ace/goalreminder/email/head.html
View File

@@ -1 +1,18 @@
{% extends 'ace_common/edx_ace/common/base_head.html' %}
{% block additional_styles %}
<style type="text/css">
@media only screen and (max-width: 456px) {
.goals-banner-div {
background-image: url('{{image_url}}goalreminder-mobile-hero.png') !important;
height: 200px !important;
padding-top: 0 !important;
}
.goal-reminder-body-wrapper {
margin: 0 .8rem 0 .3rem !important;
}
h3 {
margin-top: 0;
}
}
</style>
{% endblock %}

1
openedx/core/djangoapps/ace_common/templates/ace_common/edx_ace/common/base_head.html
View File

@@ -34,3 +34,4 @@
}
}
</style>
{% block additional_styles %}{% endblock %}