public inbox for pgsql-www@postgresql.org
help / color / mirror / Atom feedNews review in dark mode
4+ messages / 3 participants
[nested] [flat]
* News review in dark mode
@ 2025-11-26 11:20 Dave Page <dpage@pgadmin.org>
2025-11-26 14:50 ` Re: News review in dark mode Álvaro Herrera <alvherre@kurilemu.de>
0 siblings, 1 reply; 4+ messages in thread
From: Dave Page @ 2025-11-26 11:20 UTC (permalink / raw)
To: PostgreSQL WWW <pgsql-www@lists.postgresql.org>
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%}
^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: News review in dark mode
2025-11-26 11:20 News review in dark mode Dave Page <dpage@pgadmin.org>
@ 2025-11-26 14:50 ` Álvaro Herrera <alvherre@kurilemu.de>
2025-11-27 16:04 ` Re: News review in dark mode Jonathan S. Katz <jkatz@postgresql.org>
0 siblings, 1 reply; 4+ messages in thread
From: Álvaro Herrera @ 2025-11-26 14:50 UTC (permalink / raw)
To: Dave Page <dpage@pgadmin.org>; +Cc: PostgreSQL WWW <pgsql-www@lists.postgresql.org>
On 2025-Nov-26, Dave Page wrote:
> 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.
Oh, yes _please_, thank you very much.
--
Álvaro Herrera Breisgau, Deutschland — https://www.EnterpriseDB.com/
"La grandeza es una experiencia transitoria. Nunca es consistente.
Depende en gran parte de la imaginación humana creadora de mitos"
(Irulan)
^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: News review in dark mode
2025-11-26 11:20 News review in dark mode Dave Page <dpage@pgadmin.org>
2025-11-26 14:50 ` Re: News review in dark mode Álvaro Herrera <alvherre@kurilemu.de>
@ 2025-11-27 16:04 ` Jonathan S. Katz <jkatz@postgresql.org>
2025-11-28 08:55 ` Re: News review in dark mode Dave Page <dpage@pgadmin.org>
0 siblings, 1 reply; 4+ messages in thread
From: Jonathan S. Katz @ 2025-11-27 16:04 UTC (permalink / raw)
To: Álvaro Herrera <alvherre@kurilemu.de>; Dave Page <dpage@pgadmin.org>; +Cc: PostgreSQL WWW <pgsql-www@lists.postgresql.org>
On 11/26/25 9:50 AM, Álvaro Herrera wrote:
> On 2025-Nov-26, Dave Page wrote:
>
>> 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.
>
> Oh, yes _please_, thank you very much.
+1 for the feature.
Code overall looks fine to me. I'd prefer if we could make the
"try/catch" block be more discerning about opting to ignore the
Cross-Origin error, but given the contents of the try block are benign,
I wouldn't block the patch on that.
Thanks,
Jonathan
Attachments:
[application/pgp-signature] OpenPGP_signature.asc (840B, 2-OpenPGP_signature.asc)
download
^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: News review in dark mode
2025-11-26 11:20 News review in dark mode Dave Page <dpage@pgadmin.org>
2025-11-26 14:50 ` Re: News review in dark mode Álvaro Herrera <alvherre@kurilemu.de>
2025-11-27 16:04 ` Re: News review in dark mode Jonathan S. Katz <jkatz@postgresql.org>
@ 2025-11-28 08:55 ` Dave Page <dpage@pgadmin.org>
0 siblings, 0 replies; 4+ messages in thread
From: Dave Page @ 2025-11-28 08:55 UTC (permalink / raw)
To: Jonathan S. Katz <jkatz@postgresql.org>; +Cc: Álvaro Herrera <alvherre@kurilemu.de>; PostgreSQL WWW <pgsql-www@lists.postgresql.org>
On Thu, 27 Nov 2025 at 16:04, Jonathan S. Katz <jkatz@postgresql.org> wrote:
> On 11/26/25 9:50 AM, Álvaro Herrera wrote:
> > On 2025-Nov-26, Dave Page wrote:
> >
> >> 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.
> >
> > Oh, yes _please_, thank you very much.
>
> +1 for the feature.
>
> Code overall looks fine to me. I'd prefer if we could make the
> "try/catch" block be more discerning about opting to ignore the
> Cross-Origin error, but given the contents of the try block are benign,
> I wouldn't block the patch on that.
>
Thanks - this has been pushed with a minor tweak to the catch block:
} catch (e) {
/* Only ignore SecurityError/cross-origin errors, rethrow
others */
if (e.name !== 'SecurityError') {
throw e;
}
}
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
^ permalink raw reply [nested|flat] 4+ messages in thread
end of thread, other threads:[~2025-11-28 08:55 UTC | newest]
Thread overview: 4+ messages (download: mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2025-11-26 11:20 News review in dark mode Dave Page <dpage@pgadmin.org>
2025-11-26 14:50 ` Álvaro Herrera <alvherre@kurilemu.de>
2025-11-27 16:04 ` Jonathan S. Katz <jkatz@postgresql.org>
2025-11-28 08:55 ` Dave Page <dpage@pgadmin.org>
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox