ea58bac548
# Change HTML tag to button Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript. # Differentiate links and buttons visually When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear. Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button. I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
265 lines
12 KiB
HTML
265 lines
12 KiB
HTML
{{ define "title"}}{{ .entry.Title }}{{ end }}
|
||
|
||
{{ define "page_header"}}
|
||
<section class="entry" data-id="{{ .entry.ID }}" aria-labelledby="page-header-title">
|
||
<header class="entry-header">
|
||
<h1 id="page-header-title" dir="auto">
|
||
<a href="{{ .entry.URL | safeURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .entry.Title }}</a>
|
||
</h1>
|
||
{{ if .user }}
|
||
<div class="entry-actions">
|
||
<ul>
|
||
<li>
|
||
<button
|
||
class="page-button"
|
||
title="{{ t "entry.status.title" }}"
|
||
data-toggle-status="true"
|
||
data-label-loading="{{ t "entry.state.saving" }}"
|
||
data-label-unread="{{ t "entry.status.unread" }}"
|
||
data-label-read="{{ t "entry.status.read" }}"
|
||
data-toast-unread="{{ t "entry.status.toast.unread" }}"
|
||
data-toast-read="{{ t "entry.status.toast.read" }}"
|
||
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
|
||
>{{ if eq .entry.Status "unread" }}{{ icon "read" }}{{ else }}{{ icon "unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}</span></button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="page-button"
|
||
data-toggle-bookmark="true"
|
||
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
|
||
data-label-loading="{{ t "entry.state.saving" }}"
|
||
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
|
||
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
|
||
data-toast-star="{{ t "entry.bookmark.toast.on" }}"
|
||
data-toast-unstar="{{ t "entry.bookmark.toast.off" }}"
|
||
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
|
||
>{{ if .entry.Starred }}{{ icon "unstar" }}{{ else }}{{ icon "star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></button>
|
||
</li>
|
||
{{ if .hasSaveEntry }}
|
||
<li>
|
||
<button
|
||
class="page-button"
|
||
title="{{ t "entry.save.title" }}"
|
||
data-save-entry="true"
|
||
data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
|
||
data-label-loading="{{ t "entry.state.saving" }}"
|
||
data-label-done="{{ t "entry.save.completed" }}"
|
||
data-toast-done="{{ t "entry.save.toast.completed" }}"
|
||
>{{ icon "save" }}<span class="icon-label">{{ t "entry.save.label" }}</span></button>
|
||
</li>
|
||
{{ end }}
|
||
{{ if .entry.ShareCode }}
|
||
<li>
|
||
<a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
|
||
title="{{ t "entry.shared_entry.title" }}"
|
||
data-share-status="shared"
|
||
target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.shared_entry.label" }}</span></a>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="page-button"
|
||
data-confirm="true"
|
||
data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
|
||
data-label-question="{{ t "confirm.question" }}"
|
||
data-label-yes="{{ t "confirm.yes" }}"
|
||
data-label-no="{{ t "confirm.no" }}"
|
||
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}<span class="icon-label">{{ t "entry.unshare.label" }}</span></button>
|
||
</li>
|
||
{{ else }}
|
||
<li>
|
||
<a href="{{ route "shareEntry" "entryID" .entry.ID }}"
|
||
class="page-link"
|
||
title="{{ t "entry.share.title" }}"
|
||
data-share-status="share"
|
||
target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
|
||
</li>
|
||
{{ end }}
|
||
<li>
|
||
<a href="{{ .entry.URL | safeURL }}"
|
||
class="page-link"
|
||
target="_blank"
|
||
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"
|
||
title="{{ t "entry.scraper.title" }}"
|
||
data-fetch-content-entry="true"
|
||
data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
|
||
data-label-loading="{{ t "entry.state.loading" }}"
|
||
>{{ icon "scraper" }}<span class="icon-label">{{ t "entry.scraper.label" }}</span></button>
|
||
</li>
|
||
{{ if .entry.CommentsURL }}
|
||
<li>
|
||
<a href="{{ .entry.CommentsURL | safeURL }}"
|
||
class="page-link"
|
||
title="{{ t "entry.comments.title" }}"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
referrerpolicy="no-referrer"
|
||
data-comments-link="true"
|
||
>{{ icon "comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
|
||
</li>
|
||
{{ end }}
|
||
</ul>
|
||
</div>
|
||
{{ end }}
|
||
<div class="entry-meta" dir="auto">
|
||
<span class="entry-website">
|
||
{{ if and .user (ne .entry.Feed.Icon.IconID 0) }}
|
||
<img src="{{ route "icon" "iconID" .entry.Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .entry.Feed.Title }}">
|
||
{{ end }}
|
||
{{ if .user }}
|
||
<a href="{{ route "feedEntries" "feedID" .entry.Feed.ID }}">{{ .entry.Feed.Title }}</a>
|
||
{{ else }}
|
||
<a href="{{ .entry.Feed.SiteURL | safeURL }}">{{ .entry.Feed.Title }}</a>
|
||
{{ end }}
|
||
</span>
|
||
{{ if .entry.Author }}
|
||
<span class="entry-author">
|
||
{{ if isEmail .entry.Author }}
|
||
- <a href="mailto:{{ .entry.Author }}">{{ .entry.Author }}</a>
|
||
{{ else }}
|
||
– <em>{{ .entry.Author }}</em>
|
||
{{ end }}
|
||
</span>
|
||
{{ end }}
|
||
{{ if .user }}
|
||
<span class="category">
|
||
<a href="{{ route "categoryEntries" "categoryID" .entry.Feed.Category.ID }}">{{ .entry.Feed.Category.Title }}</a>
|
||
</span>
|
||
{{ end }}
|
||
</div>
|
||
{{ if .entry.Tags }}
|
||
<div class="entry-tags">
|
||
{{ t "entry.tags.label" }}
|
||
{{range $i, $e := .entry.Tags}}{{if $i}}, {{end}}<strong>{{ $e }}</strong>{{end}}
|
||
</div>
|
||
{{ end }}
|
||
<div class="entry-date">
|
||
{{ if .user }}
|
||
<time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed $.user.Timezone .entry.Date }}</time>
|
||
{{ else }}
|
||
<time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed "UTC" .entry.Date }}</time>
|
||
{{ end }}
|
||
{{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
|
||
·
|
||
<span class="entry-reading-time">
|
||
{{ plural "entry.estimated_reading_time" .entry.ReadingTime .entry.ReadingTime }}
|
||
</span>
|
||
{{ end }}
|
||
</div>
|
||
</header>
|
||
</section>
|
||
{{ end }}
|
||
|
||
|
||
{{ define "content"}}
|
||
{{ if gt (len .entry.Content) 120 }}
|
||
{{ if .user }}
|
||
<div class="pagination-entry-top">
|
||
{{ template "entry_pagination" . }}
|
||
</div>
|
||
{{ end }}
|
||
{{ end }}
|
||
<article class="entry-content gesture-nav-{{ $.user.GestureNav }}" dir="auto">
|
||
{{ if (and .entry.Enclosures (not .entry.Feed.NoMediaPlayer)) }}
|
||
{{ range .entry.Enclosures }}
|
||
{{ if ne .URL "" }}
|
||
{{ if hasPrefix .MimeType "audio/" }}
|
||
<div class="enclosure-audio" >
|
||
<audio controls preload="metadata"
|
||
data-last-position="{{ .MediaProgression }}"
|
||
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
|
||
>
|
||
{{ if (and $.user (mustBeProxyfied "audio")) }}
|
||
<source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
|
||
{{ else }}
|
||
<source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
|
||
{{ end }}
|
||
</audio>
|
||
</div>
|
||
{{ else if hasPrefix .MimeType "video/" }}
|
||
<div class="enclosure-video">
|
||
<video controls preload="metadata"
|
||
data-last-position="{{ .MediaProgression }}"
|
||
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
|
||
>
|
||
{{ if (and $.user (mustBeProxyfied "video")) }}
|
||
<source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
|
||
{{ else }}
|
||
<source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
|
||
{{ end }}
|
||
</video>
|
||
</div>
|
||
{{ end }}
|
||
{{ end }}
|
||
{{ end }}
|
||
{{end}}
|
||
{{ if .user }}
|
||
{{ noescape (proxyFilter .entry.Content) }}
|
||
{{ else }}
|
||
{{ noescape .entry.Content }}
|
||
{{ end }}
|
||
</article>
|
||
{{ if .entry.Enclosures }}
|
||
<details class="entry-enclosures">
|
||
<summary>{{ t "page.entry.attachments" }} ({{ len .entry.Enclosures }})</summary>
|
||
{{ range .entry.Enclosures }}
|
||
{{ if ne .URL "" }}
|
||
<div class="entry-enclosure">
|
||
{{ if hasPrefix .MimeType "audio/" }}
|
||
<div class="enclosure-audio">
|
||
<audio controls preload="metadata"
|
||
data-last-position="{{ .MediaProgression }}"
|
||
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
|
||
>
|
||
{{ if (and $.user (mustBeProxyfied "audio")) }}
|
||
<source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
|
||
{{ else }}
|
||
<source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
|
||
{{ end }}
|
||
</audio>
|
||
</div>
|
||
{{ else if hasPrefix .MimeType "video/" }}
|
||
<div class="enclosure-video">
|
||
<video controls preload="metadata"
|
||
data-last-position="{{ .MediaProgression }}"
|
||
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
|
||
>
|
||
{{ if (and $.user (mustBeProxyfied "video")) }}
|
||
<source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
|
||
{{ else }}
|
||
<source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
|
||
{{ end }}
|
||
</video>
|
||
</div>
|
||
{{ else if hasPrefix .MimeType "image/" }}
|
||
<div class="enclosure-image">
|
||
{{ if (and $.user (mustBeProxyfied "image")) }}
|
||
<img src="{{ proxyURL .URL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
|
||
{{ else }}
|
||
<img src="{{ .URL | safeURL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
|
||
{{ end }}
|
||
</div>
|
||
{{ end }}
|
||
|
||
<div class="entry-enclosure-download">
|
||
<a href="{{ .URL | safeURL }}" title="{{ t "action.download" }}{{ if gt .Size 0 }} - {{ formatFileSize .Size }}{{ end }} ({{ .MimeType }})" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .URL | safeURL }}</a>
|
||
<small>{{ if gt .Size 0 }} - <strong>{{ formatFileSize .Size }}</strong>{{ end }}</small>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
{{ end }}
|
||
</details>
|
||
{{ end }}
|
||
|
||
|
||
{{ if .user }}
|
||
<div class="pagination-entry-bottom">
|
||
{{ template "entry_pagination" . }}
|
||
</div>
|
||
{{ end }}
|
||
{{ end }}
|