Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce Layout shifts, Inline Styling - Set fixed height/width where possible #2075

Merged
merged 1 commit into from
Jan 28, 2021
Merged

Reduce Layout shifts, Inline Styling - Set fixed height/width where possible #2075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions cms/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,13 +259,9 @@ def get_context(self, request, *args, **kwargs):
.select_related("thumbnail_image")
)

featured_product = ProgramPage.objects.filter(
featured=True, program__live=True
).select_related("program", "thumbnail_image").prefetch_related(
"program__courses__courseruns"
) or CoursePage.objects.filter(
featured=True, course__live=True
)
featured_product = program_page_qset.filter(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change just reuses the queryset that we created above for Program and Course Pages, Plus we were not checking for .live() while obtaining the Featured Product.

featured=True
) or course_page_qset.filter(featured=True)
all_pages, program_pages, course_pages = filter_and_sort_catalog_pages(
program_page_qset,
course_page_qset,
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/partials/faculty-carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h3>{{ page.subhead }}</h3>
{% for member in page.members %}
<div class="slide">
<div class="slide-holder">
<img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}">
<img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}" loading="lazy">
<h2>{{ member.value.name }}</h2>
<div class="text-holder">
{{ member.value.description|richtext }}
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/partials/learning-techniques.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h1>{{ page.title }}</h1>
{% for technique in page.technique_items %}
<li>
<div class="img-holder">
<img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" />
<img src="{% image_version_url technique.value.image "height-110|format-png" %}" alt="Learning technique" loading="lazy"/>
</div>
<h3>{{ technique.value.heading }}</h3>
<h4>{{ technique.value.sub_heading }}</h4>
Expand Down
4 changes: 2 additions & 2 deletions cms/templates/partials/testimonial-carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h3>{{ page.subhead }}</h3>
<div class="slide">
<div class="slide-holder">
{% if testimonial.value.image %}
<img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" />
<img src="{% image_version_url testimonial.value.image "fill-75x75" %}" alt="{{ testimonial.value.name }}" width="75" height="75" loading="lazy"/>
{% endif %}
<h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
<p>{{ testimonial.value.quote|truncatechars:150 }}</p>
Expand All @@ -36,7 +36,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
</div>
<div class="container px-4">
<div class="row py-2">
<img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" />
<img src="{% image_version_url testimonial.value.image "fill-100x100" %}" class="border rounded-circle headshot-image" alt="Testimonial image" width="100" height="100" loading="lazy"/>
</div>
<div class="row mb-4">
<h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
Expand Down
6 changes: 3 additions & 3 deletions mitxpro/templates/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="content-holder">
<div class="row">
<div class="col-sm-6 clearfix">
<img src={% static 'images/help.png' %} alt="Help">
<img src={% static 'images/help.png' %} width="70" height="70" alt="Help" loading="lazy">
<div class="info">
<a href="https://xpro.zendesk.com/hc/">
<h2>Help & FAQ</h2>
Expand All @@ -15,7 +15,7 @@ <h2>Help & FAQ</h2>
</div>
</div>
<div class="col-sm-6 clearfix">
<img src={% static 'images/contact.png' %} alt="Contact Us">
<img src={% static 'images/contact.png' %} width="70" height="70" alt="Contact Us" loading="lazy">
<div class="info">
<a href="https://xpro.zendesk.com/hc/en-us/requests/new">
<h2>Contact Us</h2>
Expand All @@ -30,7 +30,7 @@ <h2>Contact Us</h2>
<div class="container">
<div class="footer-bottom">
<div class="mit-info">
<img src="{% static 'images/mit.png' %}" alt="MIT" />
<img src="{% static 'images/mit.png' %}" width="78" height="41" alt="MIT" loading="lazy"/>
<address>
Massachusetts Institute of Technology <br />77 Massachusetts Avenue
<br />Cambridge, MA 02139
Expand Down
2 changes: 2 additions & 0 deletions static/js/components/TopAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ const TopAppBar = ({ currentUser, location }: Props) => (
src="/static/images/mitx-pro-logo.png"
className="site-logo"
alt={SETTINGS.site_name}
width={154}
height={47.5}
/>
</div>
{currentUser.is_authenticated ? null : (
Expand Down
2 changes: 2 additions & 0 deletions static/js/components/UserMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const UserMenu = ({ currentUser }: Props) => {
src="/static/images/avatar_default.png"
alt={`Profile image for ${currentUser.name}`}
className={`profile-image`}
width={34}
height={34}
/>
</div>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
Expand Down
2 changes: 2 additions & 0 deletions static/js/containers/pages/ReceiptPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@ export class ReceiptPage extends React.Component<Props> {
<img
src="/static/images/mitx-pro-logo.png"
alt="MIT xPro"
width={154}
height={47.5}
/>
</div>
<h1>Receipt</h1>
Expand Down
1 change: 1 addition & 0 deletions static/scss/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@

img {
width: 78px;
height: 41px;
margin: 0 auto 15px;

@include media-breakpoint-up(md) {
Expand Down
2 changes: 1 addition & 1 deletion static/scss/top-app-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@

.site-logo {
width: 154px;
height: auto;
height: 47.5px;
}

.navbar-brand {
Expand Down