public inbox for [email protected]help / color / mirror / Atom feed
News review in dark mode 4+ messages / 3 participants [nested] [flat]
* News review in dark mode @ 2025-11-26 11:20 Dave Page <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Dave Page @ 2025-11-26 11:20 UTC (permalink / raw) To: PostgreSQL WWW <[email protected]> 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 14:50 Álvaro Herrera <[email protected]> parent: Dave Page <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Álvaro Herrera @ 2025-11-26 14:50 UTC (permalink / raw) To: Dave Page <[email protected]>; +Cc: PostgreSQL WWW <[email protected]> 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-27 16:04 Jonathan S. Katz <[email protected]> parent: Álvaro Herrera <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Jonathan S. Katz @ 2025-11-27 16:04 UTC (permalink / raw) To: Álvaro Herrera <[email protected]>; Dave Page <[email protected]>; +Cc: PostgreSQL WWW <[email protected]> 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-28 08:55 Dave Page <[email protected]> parent: Jonathan S. Katz <[email protected]> 0 siblings, 0 replies; 4+ messages in thread From: Dave Page @ 2025-11-28 08:55 UTC (permalink / raw) To: Jonathan S. Katz <[email protected]>; +Cc: Álvaro Herrera <[email protected]>; PostgreSQL WWW <[email protected]> On Thu, 27 Nov 2025 at 16:04, Jonathan S. Katz <[email protected]> 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 <[email protected]> 2025-11-26 14:50 ` Álvaro Herrera <[email protected]> 2025-11-27 16:04 ` Jonathan S. Katz <[email protected]> 2025-11-28 08:55 ` Dave Page <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox