public inbox for pgsql-www@postgresql.org
help / color / mirror / Atom feedFrom: Dave Page <dpage@pgadmin.org>
To: PostgreSQL WWW <pgsql-www@lists.postgresql.org>
Subject: News review in dark mode
Date: Wed, 26 Nov 2025 11:20:25 +0000
Message-ID: <CA+OCxozbC8_=C6iky5bpHc1fGgH417TwpJqJHjQivZ2uWEtOiw@mail.gmail.com> (raw)
It's bugged me for ages that the news preview in dark mode has been broken
forever. Here's a patch to fix that, along with before/after screenshots.
Note that it does change more than just styles; it now uses an iframe and a
hidden text area to properly isolate the styles from the email template and
stop them leaking into the main page content.
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
Attachments:
[image/png] before-dark-mode.png (325.4K, 3-before-dark-mode.png)
download | view image
[image/png] after-light-mode.png (335.3K, 4-after-light-mode.png)
download | view image
[image/png] before-light-mode.png (282.7K, 5-before-light-mode.png)
download | view image
[image/png] after-dark-mode.png (337.5K, 6-after-dark-mode.png)
download | view image
[application/octet-stream] news_preview_dark_mode_v1.diff (3.0K, 7-news_preview_dark_mode_v1.diff)
download | inline diff:
diff --git a/media/css/main.css b/media/css/main.css
index 3be226d3..28e01b8d 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1851,6 +1851,14 @@ details.release-notes-list {
max-width: 650px;
}
+.moderation-preview-iframe {
+ width: 100%;
+ min-height: 400px;
+ border: 1px solid var(--button-input-bdr-color);
+ border-radius: 5px;
+ background-color: #fff;
+}
+
/* Buttons that are images */
button.imagebutton {
border: 0;
diff --git a/media/js/moderation_preview.js b/media/js/moderation_preview.js
new file mode 100644
index 00000000..a6634463
--- /dev/null
+++ b/media/js/moderation_preview.js
@@ -0,0 +1,33 @@
+/*
+ * Moderation preview handler
+ * Renders HTML content in iframes to isolate styles from the main page
+ */
+document.addEventListener('DOMContentLoaded', function() {
+ /* Find preview data textareas and render them in iframes */
+ var dataAreas = document.getElementsByClassName('moderation-preview-data');
+ for (var i = 0; i < dataAreas.length; i++) {
+ var dataArea = dataAreas[i];
+ var container = dataArea.parentElement;
+ var content = dataArea.value;
+
+ /* Create an iframe to isolate the HTML content styles */
+ var iframe = document.createElement('iframe');
+ iframe.className = 'moderation-preview-iframe';
+ iframe.sandbox = 'allow-same-origin';
+ iframe.srcdoc = content;
+
+ /* Resize iframe to fit content after it loads */
+ iframe.onload = function() {
+ try {
+ var contentHeight = this.contentDocument.body.scrollHeight;
+ if (contentHeight > 0) {
+ this.style.height = (contentHeight + 20) + 'px';
+ }
+ } catch (e) {
+ /* Ignore cross-origin errors */
+ }
+ };
+
+ container.appendChild(iframe);
+ }
+});
diff --git a/templates/account/submit_preview.html b/templates/account/submit_preview.html
index 054e03bf..c7ac5a6e 100644
--- a/templates/account/submit_preview.html
+++ b/templates/account/submit_preview.html
@@ -17,7 +17,16 @@
{%for fld, title, contents, mdcontents, note in preview %}
<div class="row">
<div class="col-sm-2 col-form-label"><strong>{{title}}</strong></div>
- <div class="col-sm-10">{%if mdcontents%}<div class="moderation-mdpreview-wrap">{{mdcontents|safe}}</div>{%else%}{{contents}}{%endif%}</div>
+ <div class="col-sm-10">
+ {%if mdcontents%}
+ <div class="moderation-mdpreview-wrap moderation-preview-container">
+ {# Use hidden textarea to store raw HTML without browser parsing #}
+ <textarea class="moderation-preview-data" style="display:none;">{{mdcontents}}</textarea>
+ </div>
+ {%else%}
+ {{contents}}
+ {%endif%}
+ </div>
</div>
{%endfor%}
@@ -25,3 +34,7 @@
{%include "base/form_contents.html" with savebutton="Submit for moderation"%}
{%endblock%}
+
+{%block extrascript%}
+<script src="/media/js/moderation_preview.js?{{gitrev}}"></script>
+{%endblock%}
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: pgsql-www@postgresql.org
Cc: dpage@pgadmin.org, pgsql-www@lists.postgresql.org
Subject: Re: News review in dark mode
In-Reply-To: <CA+OCxozbC8_=C6iky5bpHc1fGgH417TwpJqJHjQivZ2uWEtOiw@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox