Fixes for tweet rendering in NetNewsWire

It does some pretty aggressive reformatting of HTML: - tables are wrapped in a `<div class="nnw-overflow">` (https://github.com/Ranchero-Software/NetNewsWire/blob/b52292d4590ab07616981dffd5956aec6deea15f/Shared/Article%20Rendering/main.js#L55-L64) which ends up adding borders around everything (https://github.com/Ranchero-Software/NetNewsWire/blob/ff19a9c48e6b0b3f6f27de34e02a43ef9ded7e22/iOS/Resources/styleSheet.css#L50-L52) - background colors, text colors and text size are stripped (https://github.com/Ranchero-Software/NetNewsWire/blob/b52292d4590ab07616981dffd5956aec6deea15f/Shared/Article%20Rendering/main.js#L15-L26) - Images get a "viewer" unless they have a `nnw-nozoom` class (https://github.com/Ranchero-Software/NetNewsWire/blob/ff19a9c48e6b0b3f6f27de34e02a43ef9ded7e22/iOS/Resources/main_ios.js#L111-L123) Switch tweet display to flexbox and to not depend as heavily on background colors. Footer/status font sizes are controlled with a <font> tag.
mihaip · Jun 1, 2021 · 0370b5e · 0370b5e
1 parent 5192c0a
commit 0370b5e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/app/base/constants.py b/app/base/constants.py
@@ -12,6 +12,7 @@ def __getattr__(self, m):
     USER_LINK_COLOR='#333',
     BUBBLE_COLOR='#f6f6f6',
     BUBBLE_QUOTED_COLOR='#eaeef9',
+    BUBBLE_QUOTED_BORDER_COLOR='#eaeef988',
     BUBBLE_REPLY_COLOR='#e6e6e6',
     BUBBLE_TEXT_COLOR='#41419b',
     BUBBLE_SEPARATOR_COLOR='#d6e0ff',

diff --git a/app/datasources/twitterdisplay.py b/app/datasources/twitterdisplay.py
@@ -295,7 +295,7 @@ def add_footer_thumbnail_chunk(
 
             add_footer_raw_chunk(
                 '<a href="%s" border="0">'
-                  '<img src="%s" alt="" style="%s"%s/>'
+                  '<img src="%s" alt="" class="nnw-nozoom" style="%s"%s/>'
                 '</a>' % (
                     escape(link_url),
                     escape(thumb_url),
@@ -359,8 +359,8 @@ def add_status(status):
                     "https://twitter.com/%s/status/%s" %
                         (quoted_screen_name, status.quoted_status.id)
                 ])
-                add_raw_chunk('<div style="padding:10px;margin:5px 0;background:%s">' %
-                    CONSTANTS.BUBBLE_QUOTED_COLOR)
+                add_raw_chunk('<div style="padding:10px;margin:5px 0;background:%s;border:solid 1px %s;border-radius:6px">' %
+                    (CONSTANTS.BUBBLE_QUOTED_COLOR, CONSTANTS.BUBBLE_QUOTED_BORDER_COLOR))
                 add_raw_chunk('<a href="')
                 add_escaped_chunk(quoted_screen_name)
                 add_raw_chunk('" %s>@' % _LINK_ATTRIBUTES)

diff --git a/app/templates/base/status-group.snippet b/app/templates/base/status-group.snippet
@@ -1,36 +1,39 @@
 {% spaceless %}
-  <tr style="display:table-row">
-    <td style="text-align:right;padding:0 0.2em 0 0 !important;width:60px !important;display:table-cell" valign="top">
-      <div style="margin:0 0 {{ bottom_margin }} 0">
-          <a href="/{{ status_group.user.screen_name }}"
-             title="{{ status_group.user.name }}"
-             style="color:{{ USER_LINK_COLOR }};text-decoration:none"><img src="{{ status_group.user.profile_image_url }}" width="48" height="48" style="border:solid 6px {{ BUBBLE_COLOR }};background:{{ BUBBLE_COLOR }};" /><br />{{ status_group.user.screen_name }}</a>
-       </div>
-    </td>
-    <td valign="top" style="width:13px !important;display:table-cell">
-      <div style="margin-top:0.35em;width:1px;height:1px;border:solid;border-color:transparent {{ BUBBLE_COLOR }} transparent transparent;border-width:6px 12px 13px 0"></div>
-    </td>
-    <td valign="top" style="display:table-cell">
-      <div style="background: {{ BUBBLE_COLOR }};margin:0 0 {{ bottom_margin }} 0">
+  <div style="display:flex;margin: 0 0 {{ bottom_margin }} 0">
+    <div style="padding:0.5em 0.5em 0 0 !important;flex-shrink:0;white-space:nowrap;text-align:center">
+      <a href="/{{ status_group.user.screen_name }}"
+          title="{{ status_group.user.name }}"
+          style="color:{{ USER_LINK_COLOR }};text-decoration:none">
+        <img src="{{ status_group.user.profile_image_url }}"
+            width="48"
+            height="48"
+            style="border-radius:24px;overflow:hidden"
+            class="nnw-nozoom"/><br />
+        @{{ status_group.user.screen_name }}
+      </a>
+    </div>
+    <div style="background:{{ BUBBLE_COLOR }};border-radius:6px">
 {% endspaceless %}
       {% for status, display_status in status_group.status_pairs %}
         <div style="padding:0.5em;{% if not forloop.first %} border-top:solid 1px {{ BUBBLE_SEPARATOR_COLOR }} {% endif %}">
           {{ display_status.body_as_html|safe }}
           {% spaceless %}
-            <div style="font-size:0.8em;text-align:right;margin:0.2em 0 0 0">
-              <a href="{{ display_status.permalink_no_base }}"
-                {#  Only include the full date as a tooltip if using relative (script) dates, since otherwise it's a repetition #}
-                {% if use_relative_dates %}
-                    title="{{ status.created_at }}"
-                {% endif %}
-                 style="color:{{ ANCHOR_COLOR }}">
-                {% if use_relative_dates %}{{ status.relative_created_at }}{% else %}at {{ display_status.created_at_formatted }}{% endif %}</a>
-              {% with display_status.permalink_status as permalink_status %}
-                from {{ permalink_status.source|striptags }}
-                {%if permalink_status.in_reply_to_status_id %}
-                  <a href="{{ permalink_status.in_reply_to_screen_name }}/status/{{ permalink_status.in_reply_to_status_id }}" style="color:{{ ANCHOR_COLOR }}">in reply to {{ permalink_status.in_reply_to_screen_name }}</a>
-                {% endif %}
-              {% endwith %}
+            <div style="text-align:right;margin:0.2em 0 0 0">
+              <font size="-2">
+                <a href="{{ display_status.permalink_no_base }}"
+                  {#  Only include the full date as a tooltip if using relative (script) dates, since otherwise it's a repetition #}
+                  {% if use_relative_dates %}
+                      title="{{ status.created_at }}"
+                  {% endif %}
+                  style="color:{{ ANCHOR_COLOR }}">
+                  {% if use_relative_dates %}{{ status.relative_created_at }}{% else %}at {{ display_status.created_at_formatted }}{% endif %}</a>
+                {% with display_status.permalink_status as permalink_status %}
+                  from {{ permalink_status.source|striptags }}
+                  {%if permalink_status.in_reply_to_status_id %}
+                    <a href="{{ permalink_status.in_reply_to_screen_name }}/status/{{ permalink_status.in_reply_to_status_id }}" style="color:{{ ANCHOR_COLOR }}">in reply to {{ permalink_status.in_reply_to_screen_name }}</a>
+                  {% endif %}
+                {% endwith %}
+              </font>
             </div>
             {% if include_status_json %}
               <pre class="status-json collapsed" onclick="this.classList.remove('collapsed')">{{ status.AsOriginalJsonString }}</pre>
@@ -39,7 +42,6 @@
         </div>
       {% endfor %}
 {% spaceless %}
-      </div>
-    </td>
-  </tr>
+    </div>
+  </div>
 {% endspaceless %}
diff --git a/app/templates/tweetdigest/digest-contents.snippet b/app/templates/tweetdigest/digest-contents.snippet
@@ -1,15 +1,13 @@
-<table style="border-spacing:0;border-collapse:collapse;font-family:sans-serif;font-size:inherit;font-weight:inherit;font-style:inherit;font-variant:inherit;color:{{ BUBBLE_TEXT_COLOR }};width:100%" cellpadding="0">
+<div style="color:{{ BUBBLE_TEXT_COLOR }}">
   {% if grouped_statuses %}
     {% for status_group in grouped_statuses %}
       {% with '1.5em' as bottom_margin %}
         {% include 'base/status-group.snippet' %}
       {% endwith %}
     {% endfor %}
   {% else %}
-    <tr>
-      <td style="padding:0.5em">
-        No updates for this day.
-      </td>
-    </tr>
+    <div style="padding:0.5em">
+      No updates for this day.
+    </div>
   {% endif %}
-</table>
+</div>