From 0f3e4d8a289ac2fbab0e3f4a8aa8430d5d570b02 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Mon, 30 Sep 2024 16:39:00 +0000 Subject: [PATCH 1/4] use buttons instead of anchor, use webp and smaller res for images in article --- .../templates/images/stream_blocks/image_block.html | 11 ++++++----- ubyssey/static_src/src/styles/modules/_buttons.scss | 2 +- ubyssey/static_src/src/styles/objects/_archive.scss | 6 +++++- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/images/templates/images/stream_blocks/image_block.html b/images/templates/images/stream_blocks/image_block.html index e9608f42f..4961b3297 100644 --- a/images/templates/images/stream_blocks/image_block.html +++ b/images/templates/images/stream_blocks/image_block.html @@ -2,15 +2,16 @@ {% load wagtailimages_tags %}
- {% image self.image original as image %} - {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} + {% image self.image width-1000 format-webp as image %} + {% image self.image original as ogImage %} + {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} {% if self.click_to_enlarge %} - +
-
- +
+
{% endif %} diff --git a/ubyssey/static_src/src/styles/modules/_buttons.scss b/ubyssey/static_src/src/styles/modules/_buttons.scss index 1aad477d3..22cb3d0e2 100644 --- a/ubyssey/static_src/src/styles/modules/_buttons.scss +++ b/ubyssey/static_src/src/styles/modules/_buttons.scss @@ -26,7 +26,7 @@ a.button, button { } &:active, &:focus { - outline: none; + //outline: none; } &.large { diff --git a/ubyssey/static_src/src/styles/objects/_archive.scss b/ubyssey/static_src/src/styles/objects/_archive.scss index 59ac7bea6..3a4eab6ec 100644 --- a/ubyssey/static_src/src/styles/objects/_archive.scss +++ b/ubyssey/static_src/src/styles/objects/_archive.scss @@ -419,7 +419,11 @@ $search-bar-height: 50px; .image-modal { position: relative; - + button { + margin: 0; + border: none; + background: none; + } .open-modal { position:absolute; top: 0; From dff4cfc0d79fff580b0bc3fa8dcf93bc9042f221 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Tue, 1 Oct 2024 00:36:04 +0000 Subject: [PATCH 2/4] Comment out lots of unused javascript, use author image for open graph image on author page, reduce res and use decoding async on in article images, other smalll fixes that hopefully improve performace --- .../article/objects/author_card.html | 4 +- authors/models.py | 2 +- .../images/stream_blocks/image_block.html | 2 +- ubyssey/static_src/src/js/article.jsx | 58 ++++++++++--------- ubyssey/static_src/src/js/main.js | 24 +------- .../styles/components/_cookie-disclaimer.scss | 4 ++ .../styles/modules/article/_author_card.scss | 4 ++ ubyssey/templates/ubyssey/base.html | 1 - 8 files changed, 44 insertions(+), 55 deletions(-) diff --git a/article/templates/article/objects/author_card.html b/article/templates/article/objects/author_card.html index 938bc84da..dc2812a51 100644 --- a/article/templates/article/objects/author_card.html +++ b/article/templates/article/objects/author_card.html @@ -27,6 +27,8 @@ {% if author.author.short_bio_description != "" %}

{{ author.author.short_bio_description }}

{% endif %} -
  • See more from {{ author.author.full_name|safe }}
    • +
    \ No newline at end of file diff --git a/authors/models.py b/authors/models.py index 57aebf67a..1f99231c0 100644 --- a/authors/models.py +++ b/authors/models.py @@ -233,7 +233,7 @@ def organize_media(self, media_type, request, context): def get_context(self, request, *args, **kwargs): context = super().get_context(request, *args, **kwargs) - + context["self"].featured_media = self.image media_types = [] if VideoSnippet.objects.all().count() > 0: media_types.append("videos") diff --git a/images/templates/images/stream_blocks/image_block.html b/images/templates/images/stream_blocks/image_block.html index 4961b3297..21463146a 100644 --- a/images/templates/images/stream_blocks/image_block.html +++ b/images/templates/images/stream_blocks/image_block.html @@ -4,7 +4,7 @@
    {% image self.image width-1000 format-webp as image %} {% image self.image original as ogImage %} - {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} + {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} {% if self.click_to_enlarge %} diff --git a/ubyssey/static_src/src/js/article.jsx b/ubyssey/static_src/src/js/article.jsx index 707425e2b..ea0c59c8b 100644 --- a/ubyssey/static_src/src/js/article.jsx +++ b/ubyssey/static_src/src/js/article.jsx @@ -1,30 +1,32 @@ import React from 'react' import ReactDOM from 'react-dom' -import Search from './components/Search.jsx'; -import { AdblockSplash, CookieDisclaimer } from './components/Cookies' -import { Galleries } from './components/Gallery' +//import Search from './components/Search.jsx'; +//import { AdblockSplash, CookieDisclaimer } from './components/Cookies' +import { CookieDisclaimer } from './components/Cookies' +//import { Galleries } from './components/Gallery' -window.articleHeader = false; +//window.articleHeader = false; -const BOX_HEIGHT = 274 -const SKYSCRAPER_HEIGHT = 624 +//const BOX_HEIGHT = 274 +//const SKYSCRAPER_HEIGHT = 624 $(function () { - + /* ReactDOM.render( , document.getElementById('adblock-splash') ) + */ + ReactDOM.render( , document.getElementById('cookie-disclaimer') ) - - + }); - +/* if ($('main.article').length) { const $article = $('article'); @@ -43,13 +45,13 @@ if ($('main.article').length) { articleIds = articleIds.split(','); } - /* - var firstArticle = { - id: articleId, - headline: articleHeadline, - url: articleURL - }; - */ + + //var firstArticle = { + // id: articleId, + // headline: articleHeadline, + // url: articleURL + //}; + function stickyAds(scrollTop, stickyElements) { @@ -202,19 +204,19 @@ if ($('main.article').length) { ]; - /* - const gallery = ReactDOM.render( - , - document.getElementById('gallery') - ); - */ + + //const gallery = ReactDOM.render( + // , + // document.getElementById('gallery') + //); + } -/* -ReactDOM.render( - , - document.getElementById('search-form') -); + +//ReactDOM.render( +// , +// document.getElementById('search-form') +//); */ \ No newline at end of file diff --git a/ubyssey/static_src/src/js/main.js b/ubyssey/static_src/src/js/main.js index fc89222b2..72a32222e 100644 --- a/ubyssey/static_src/src/js/main.js +++ b/ubyssey/static_src/src/js/main.js @@ -1,5 +1,5 @@ // import * as mp from './modules/Mixpanel'; //commented out because creepy af -import upcomingEvents from './widgets/upcoming-events'; +//import upcomingEvents from './widgets/upcoming-events'; import { initializeDarkModeToggle } from './darkmode'; // self-executing js anonymous function @@ -418,28 +418,6 @@ function openModal(modal) { disableScroll(); } -/* -function moveModals() { - var modalBlocks = document.getElementsByClassName("add-to-modal"); - var modal = document.getElementById("modal"); - var index = 0; - while (modalBlocks.length > 0) { - //modalBlocks[i].remove(); - var div = document.createElement("div"); - div.classList.add("openModal"); - div.setAttribute("modal", index); - - var mod = modalBlocks[0]; - mod.insertAdjacentElement("beforebegin", div); - mod.classList.remove("add-to-modal"); - modal.appendChild(mod); - - modalBlocks = document.getElementsByClassName("add-to-modal"); - index = index + 1; - } -} -*/ - function initializeFilterDropdown() { $(document).on('click', 'a.filterDropdown', function (e) { e.preventDefault(); diff --git a/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss b/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss index 58fa9f813..b493b2768 100644 --- a/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss +++ b/ubyssey/static_src/src/styles/components/_cookie-disclaimer.scss @@ -39,6 +39,8 @@ .c-button { // Structure margin: 0; + border: none; + padding: 0.5em 1em; // Background background-color: white; @@ -46,6 +48,8 @@ // Text font-size: 1rem; color: $color-accent-blue; + + cursor: pointer; &:hover { // Background diff --git a/ubyssey/static_src/src/styles/modules/article/_author_card.scss b/ubyssey/static_src/src/styles/modules/article/_author_card.scss index 12c6de740..4bfab73b2 100644 --- a/ubyssey/static_src/src/styles/modules/article/_author_card.scss +++ b/ubyssey/static_src/src/styles/modules/article/_author_card.scss @@ -63,6 +63,10 @@ div.article-content .author_card { margin-top: 0.5em; } + ul { + padding: 0; + } + li { margin-left: 1em; } diff --git a/ubyssey/templates/ubyssey/base.html b/ubyssey/templates/ubyssey/base.html index 596e28767..84e0c9b3b 100644 --- a/ubyssey/templates/ubyssey/base.html +++ b/ubyssey/templates/ubyssey/base.html @@ -224,7 +224,6 @@ {% comment %} {% endcomment %} - {% block scripts %} From 7df51917ebebe17fd60c1c8d5c7f078fb487a631 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Tue, 1 Oct 2024 00:40:06 +0000 Subject: [PATCH 3/4] Add aria-label to image enlarge, minimize, buttons --- images/templates/images/stream_blocks/image_block.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/images/templates/images/stream_blocks/image_block.html b/images/templates/images/stream_blocks/image_block.html index 21463146a..5fdfb88ca 100644 --- a/images/templates/images/stream_blocks/image_block.html +++ b/images/templates/images/stream_blocks/image_block.html @@ -7,11 +7,11 @@ {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} {% if self.click_to_enlarge %} - +
    - +
    {% endif %} From 5ff05efab1861b339dbf7c5d1ec31d5dd4d20b2c Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Wed, 2 Oct 2024 06:51:38 +0000 Subject: [PATCH 4/4] Add explicit height to images, make image credit colour darker to improve contrast --- .../templates/article/objects/fw_article_featured_media.html | 2 ++ images/templates/images/stream_blocks/image_block.html | 2 +- .../infinitefeed/sidebar/sidebar_single_issue_block.html | 2 +- ubyssey/static_src/src/styles/modules/_core.scss | 2 +- ubyssey/static_src/src/styles/modules/article/_embeds.scss | 1 + 5 files changed, 6 insertions(+), 3 deletions(-) diff --git a/article/templates/article/objects/fw_article_featured_media.html b/article/templates/article/objects/fw_article_featured_media.html index 0f6d9e6d0..6e69d9d8a 100644 --- a/article/templates/article/objects/fw_article_featured_media.html +++ b/article/templates/article/objects/fw_article_featured_media.html @@ -9,6 +9,8 @@ {% image featured_image_object.image width-1500 format-webp as featured_image %} {% image self.image width-1000 format-webp as image %} {% image self.image original as ogImage %} - {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} + {% if self.alt_text %}{{ self.alt_text }}{% else %}{{self.caption}}{% endif %} {% if self.click_to_enlarge %} diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html index d98491a98..6dced85f4 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_single_issue_block.html @@ -4,7 +4,7 @@

    {{ self.date }}

    {% if self.show_image and self.image %} {% image self.image width-700 format-webp as mag %} - {{self.date}} Issue + {{self.date}} Issue {% endif %} diff --git a/ubyssey/static_src/src/styles/modules/_core.scss b/ubyssey/static_src/src/styles/modules/_core.scss index 4067a4e72..6e021b2f0 100644 --- a/ubyssey/static_src/src/styles/modules/_core.scss +++ b/ubyssey/static_src/src/styles/modules/_core.scss @@ -324,7 +324,7 @@ div.image-inner { span.credit { margin-left: 0.5em; font-style: italic; - color: #969696; + color: #888; white-space: pre; } diff --git a/ubyssey/static_src/src/styles/modules/article/_embeds.scss b/ubyssey/static_src/src/styles/modules/article/_embeds.scss index de579960a..9ad6696af 100644 --- a/ubyssey/static_src/src/styles/modules/article/_embeds.scss +++ b/ubyssey/static_src/src/styles/modules/article/_embeds.scss @@ -379,6 +379,7 @@ div.article-content { .image-attachment { img { width: 100%; + height: auto; } a {