浏览代码

feat(ui): display external URL in single entry view

Display the article's external URL directly in the single entry view.

Rationale: On mobile devices, users couldn't see where a link pointed before tapping it.
Previously, the only way to view the external URL was by hovering - an action not available on touch devices.
Frédéric Guillot 10 月之前
父节点
当前提交
70b513b8db
共有 2 个文件被更改,包括 18 次插入13 次删除
  1. 12 13
      internal/template/templates/views/entry.html
  2. 6 0
      internal/ui/static/css/common.css

+ 12 - 13
internal/template/templates/views/entry.html

@@ -69,20 +69,12 @@
                 <li>
                     <form method="post" action="{{route "shareEntry" "entryID" .entry.ID }}">
                         <input type="hidden" name="csrf" value="{{ .csrf }}">
-                          <button type="submit" class="page-button">
-		              {{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span>
-	                  </button>
-		    </form>
+                        <button type="submit" class="page-button">
+                            {{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span>
+                        </button>
+                    </form>
                 </li>
                 {{ end }}
-                <li>
-                    <a href="{{ .entry.URL | safeURL  }}"
-                        class="page-link"
-                        {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}
-                        rel="noopener noreferrer"
-                        referrerpolicy="no-referrer"
-                        data-original-link="{{ .user.MarkReadOnView }}">{{ icon "external-link" }}<span class="icon-label">{{ t "entry.external_link.label" }}</span></a>
-                </li>
                 <li>
                     <button
                         class="page-button"
@@ -173,6 +165,14 @@
             {{ end }}
         </div>
         {{ end }}
+        <div class="entry-external-link">
+            <a
+                href="{{ .entry.URL | safeURL  }}"
+                {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}
+                rel="noopener noreferrer"
+                referrerpolicy="no-referrer"
+                data-original-link="{{ $.user.MarkReadOnView }}">{{ .entry.URL }}</span></a>
+        </div>
         <div class="entry-date">
             {{ if .user }}
             <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed $.user.Timezone .entry.Date }}</time>
@@ -276,7 +276,6 @@
 </details>
 {{ end }}
 
-
 {{ if .user }}
 <div class="pagination-entry-bottom">
     {{ template "entry_pagination" . }}

+ 6 - 0
internal/ui/static/css/common.css

@@ -1227,6 +1227,12 @@ details.entry-enclosures {
     max-width: 100%;
 }
 
+.entry-external-link {
+    font-size: 0.8em;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 /* Confirmation */
 .confirm {
     font-weight: 500;