change layout structure by moving header

internal/template/templates/common/layout.html

@@ -64,7 +64,7 @@
     <a class="skip-to-content-link" href="#main">
       Skip to content
     </a>
-    <header class="header">
+    <div class="header">
         <nav>
             <details>
                 <summary  aria-label="{{ t "menu.title" }}">
@@ -120,11 +120,8 @@
                     <button type="submit">{{ t "search.submit" }}</button>
                 </form>
             </details>
-            <!-- <div class="search-toggle-switch {{ if $.searchQuery }}has-search-query{{ end }}"> -->
-            <!--     <a href="#" data-action="search">&laquo;&nbsp;{{ t "search.label" }}</a> -->
-            <!-- </div> -->
         </search>
-    </header>
+    </div>
     {{ end }}
     {{ if .flashMessage }}
         <div class="flash-message alert alert-success">{{ .flashMessage }}</div>
@@ -132,6 +129,9 @@
     {{ if .flashErrorMessage }}
         <div class="flash-error-message alert alert-error">{{ .flashErrorMessage }}</div>
     {{ end }}
+
+    {{template "header" .}}
+
     <main id="main">
         {{template "content" .}}
     </main>

internal/template/templates/views/about.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.about.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.about.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.about.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <div class="panel">
     <h3>Miniflux</h3>
     <ul>

internal/template/templates/views/add_subscription.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.add_feed.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.add_feed.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.add_feed.title" }}</h1>
     {{ template "feed_menu" }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .categories }}
     <p class="alert alert-error">{{ t "page.add_feed.no_category" }}</p>
 {{ else }}

internal/template/templates/views/api_keys.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.api_keys.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.api_keys.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.api_keys.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if .apiKeys }}
 {{ range .apiKeys }}
     <table>

internal/template/templates/views/bookmark_entries.html

@@ -1,14 +1,16 @@
 {{ define "title"}}{{ t "page.starred.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">
         {{ t "page.starred.title" }}
         <span aria-hidden="true"> ({{ .total }})</span>
     </h1>
     <span class="sr-only">{{ t "page.starred.total" }}: {{ .total }}</span>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_bookmark" }}</p>
 {{ else }}

internal/template/templates/views/categories.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.categories.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">
         {{ t "page.categories.title" }}
         <span aria-hidden="true"> ({{ .total }})</span>
     </h1>
@@ -14,8 +14,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .categories }}
     <p class="alert alert-error">{{ t "alert.no_category" }}</p>
 {{ else }}

internal/template/templates/views/category_entries.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ .category.Title }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">
         {{ .category.Title }}
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
@@ -15,7 +15,7 @@
     </span>
     <nav aria-label="{{ .category.Title }} {{ t "menu.title" }}">
         <ul>
-        {{ if .entries }}
+            {{ if .entries }}
             <li>
                 <a href="#"
                     data-action="markPageAsRead"
@@ -34,16 +34,16 @@
                     data-label-loading="{{ t "confirm.loading" }}"
                     data-url="{{ route "markCategoryAsRead" "categoryID" .category.ID }}">{{ icon "mark-all-as-read" }}{{ t "menu.mark_all_as_read" }}</a>
             </li>
-        {{ end }}
-        {{ if .showOnlyUnreadEntries }}
+            {{ end }}
+            {{ if .showOnlyUnreadEntries }}
             <li>
                 <a href="{{ route "categoryEntriesAll" "categoryID" .category.ID }}">{{ icon "show-all-entries" }}{{ t "menu.show_all_entries" }}</a>
             </li>
-        {{ else }}
+            {{ else }}
             <li>
                 <a href="{{ route "categoryEntries" "categoryID" .category.ID }}">{{ icon "show-unread-entries" }}{{ t "menu.show_only_unread_entries" }}</a>
             </li>
-        {{ end }}
+            {{ end }}
             <li>
                 <a href="{{ route "categoryFeeds" "categoryID" .category.ID }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
             </li>
@@ -52,8 +52,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert">{{ t "alert.no_category_entry" }}</p>
 {{ else }}

internal/template/templates/views/category_feeds.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ .category.Title }} > {{ t "page.feeds.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">
         {{ .category.Title }} <span aria-hidden="true">&gt;</span> {{ t "page.feeds.title" }}
         <span aria-hidden="true"> ({{ .total }})</span>
     </h1>
@@ -34,8 +34,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .feeds }}
     <p class="alert">{{ t "alert.no_feed_in_category" }}</p>
 {{ else }}

internal/template/templates/views/choose_subscription.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.add_feed.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.add_feed.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.add_feed.title" }}</h1>
     {{ template "feed_menu" }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "chooseSubscription" }}" method="POST">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
     <input type="hidden" name="category_id" value="{{ .form.CategoryID }}">

internal/template/templates/views/create_api_key.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.new_api_key.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.new_api_key.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.new_api_key.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "saveAPIKey" }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/create_category.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.new_category.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.new_category.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.new_category.title" }}</h1>
     <nav aria-label="{{ t "page.new_category.title" }} {{ t "menu.title" }}">
         <ul>
             <li>
@@ -10,8 +10,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "saveCategory" }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/create_user.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.new_user.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.new_user.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.new_user.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "saveUser" }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/edit_category.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.edit_category.title" .category.Title }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.edit_category.title" .category.Title }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.edit_category.title" .category.Title }}</h1>
     <nav aria-label="{{ t "page.edit_category.title" .category.Title }} {{ t "menu.title" }}">
         <ul>
             <li>
@@ -16,8 +16,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "updateCategory" "categoryID" .category.ID }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/edit_feed.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.edit_feed.title" .feed.Title }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">{{ .feed.Title }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">{{ .feed.Title }}</h1>
     <nav aria-label="{{ .feed.Title }} {{ t "menu.title" }}">
         <ul>
             <li>
@@ -23,8 +23,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .categories }}
     <p class="alert alert-error">{{ t "page.add_feed.no_category" }}</p>
 {{ else }}

internal/template/templates/views/edit_user.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.edit_user.title" .selected_user.Username }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.edit_user.title" .selected_user.Username }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.edit_user.title" .selected_user.Username }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "updateUser" "userID" .selected_user.ID }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/entry.html

@@ -1,9 +1,9 @@
 {{ define "title"}}{{ .entry.Title }}{{ end }}
 
-{{ define "content"}}
-<section class="entry" data-id="{{ .entry.ID }}">
-    <header class="entry-header">
-        <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <div 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 }}
@@ -34,40 +34,40 @@
                         >{{ 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></a>
                 </li>
                 {{ if .hasSaveEntry }}
-                    <li>
-                        <a href="#"
-                            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></a>
-                    </li>
+                <li>
+                    <a href="#"
+                        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></a>
+                </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>
-                        <a href="#"
-                            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></a>
-                    </li>
+                <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>
+                    <a href="#"
+                        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></a>
+                </li>
                 {{ else }}
-                    <li>
-                        <a href="{{ route "shareEntry" "entryID" .entry.ID }}"
-                            title="{{ t "entry.share.title" }}"
-                            data-share-status="share"
-                            target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
-                    </li>
+                <li>
+                    <a href="{{ route "shareEntry" "entryID" .entry.ID }}"
+                        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  }}"
@@ -85,15 +85,15 @@
                         >{{ icon "scraper" }}<span class="icon-label">{{ t "entry.scraper.label" }}</span></a>
                 </li>
                 {{ if .entry.CommentsURL }}
-                    <li>
-                        <a href="{{ .entry.CommentsURL | safeURL }}"
-                           title="{{ t "entry.comments.title" }}"
-                           target="_blank"
-                           rel="noopener noreferrer"
-                           referrerpolicy="no-referrer"
-                           data-comments-link="true"
+                <li>
+                    <a href="{{ .entry.CommentsURL | safeURL }}"
+                        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>
+                </li>
                 {{ end }}
             </ul>
         </div>
@@ -101,40 +101,40 @@
         <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 }}">
+                <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>
+                <a href="{{ route "feedEntries" "feedID" .entry.Feed.ID }}">{{ .entry.Feed.Title }}</a>
                 {{ else }}
-                    <a href="{{ .entry.Feed.SiteURL | safeURL }}">{{ .entry.Feed.Title }}</a>
+                <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>
+            <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>
+            <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>
+        <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>
+            <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>
+            <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed "UTC" .entry.Date }}</time>
             {{ end }}
             {{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
             &centerdot;
@@ -143,106 +143,111 @@
             </span>
             {{ end }}
         </div>
-    </header>
-    {{ if gt (len .entry.Content) 120 }}
-    {{ if .user }}
-    <div class="pagination-entry-top">
-        {{ template "entry_pagination" . }}
     </div>
-    {{ end }}
-    {{ end }}
-    <article role="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 }}
+</header>
+{{ end }}
+
+
+{{ define "content"}}
+{{ if gt (len .entry.Content) 120 }}
+{{ if .user }}
+<div class="pagination-entry-top">
+    {{ template "entry_pagination" . }}
+</div>
+{{ end }}
+{{ end }}
+<article role="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) }}
+        {{ noescape (proxyFilter .entry.Content) }}
         {{ else }}
-            {{ noescape .entry.Content }}
+        {{ 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>
+</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 }}
-
-                <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>
+            </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 }}
-        </details>
+
+        <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 }}
-</section>
+    {{ end }}
+</details>
+{{ end }}
+
 
 {{ if .user }}
 <div class="pagination-entry-bottom">

internal/template/templates/views/feed_entries.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ .feed.Title }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1 dir="auto">
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title" dir="auto">
         <a href="{{ .feed.SiteURL | safeURL  }}" title="{{ .feed.SiteURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-original-link="{{ .user.MarkReadOnView }}">{{ .feed.Title }}</a>
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
@@ -70,8 +70,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if ne .feed.ParsingErrorCount 0 }}
 <div class="alert alert-error">
     <h3>{{ t "alert.feed_error" }}</h3>

internal/template/templates/views/feeds.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.feeds.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.feeds.title" }} ({{ .total }})</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.feeds.title" }} ({{ .total }})</h1>
     {{ template "feed_menu" }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .feeds }}
     <p class="alert">{{ t "alert.no_feed" }}</p>
 {{ else }}

internal/template/templates/views/history_entries.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.history.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">
         {{ t "page.history.title" }}
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
@@ -25,8 +25,10 @@
             </li>
         </ul>
     </nav>
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_history" }}</p>
 {{ else }}

internal/template/templates/views/import.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.import.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.import.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.import.title" }}</h1>
     {{ template "feed_menu" }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if .errorMessage }}
     <div class="alert alert-error">{{ .errorMessage }}</div>
 {{ end }}

internal/template/templates/views/integrations.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.integrations.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.integrations.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.integrations.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form method="post" autocomplete="off" action="{{ route "updateIntegration" }}" class="integration-form">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/template/templates/views/search_entries.html

@@ -1,10 +1,12 @@
 {{ define "title"}}{{ t "page.search.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.search.title" }} ({{ .total }})</h1>
-</section>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.search.title" }} ({{ .total }})</h1>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_search_result" }}</p>
 {{ else }}

internal/template/templates/views/sessions.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.sessions.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.sessions.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.sessions.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <table>
     <tr>
         <th>{{ t "page.sessions.table.date" }}</th>

internal/template/templates/views/settings.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.settings.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.settings.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.settings.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form method="post" autocomplete="off" action="{{ route "updateSettings" }}">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 
@@ -18,10 +20,10 @@
 
         <label for="form-username">{{ t "form.user.label.username" }}</label>
         <input type="text" name="username" id="form-username" value="{{ .form.Username }}" autocomplete="username" required>
-    
+
         <label for="form-password">{{ t "form.user.label.password" }}</label>
         <input type="password" name="password" id="form-password" value="{{ .form.Password }}" autocomplete="new-password">
-    
+
         <label for="form-confirmation">{{ t "form.user.label.confirmation" }}</label>
         <input type="password" name="confirmation" id="form-confirmation" value="{{ .form.Confirmation }}" autocomplete="new-password">
 
@@ -105,10 +107,10 @@
 
         <label for="form-default-reading-speed">{{ t "form.prefs.label.default_reading_speed" }}</label>
         <input type="number" name="default_reading_speed" id="form-default-reading-speed" value="{{ .form.DefaultReadingSpeed }}" min="1">
-    
+
         <label><input type="checkbox" name="show_reading_time" value="1" {{ if .form.ShowReadingTime }}checked{{ end }}> {{ t "form.prefs.label.show_reading_time" }}</label>
 
-        <label><input type="checkbox" name="mark_read_on_view" value="1" {{ if .form.MarkReadOnView }}checked{{ end }}> {{ t "form.prefs.label.mark_read_on_view" }}</label>    
+        <label><input type="checkbox" name="mark_read_on_view" value="1" {{ if .form.MarkReadOnView }}checked{{ end }}> {{ t "form.prefs.label.mark_read_on_view" }}</label>
 
         <div class="buttons">
             <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
@@ -165,13 +167,13 @@
             <option value="asc" {{ if eq "asc" $.form.EntryDirection }}selected="selected"{{ end }}>{{ t "form.prefs.select.older_first" }}</option>
             <option value="desc" {{ if eq "desc" $.form.EntryDirection }}selected="selected"{{ end }}>{{ t "form.prefs.select.recent_first" }}</option>
         </select>
-    
+
         <label for="form-entry-order">{{ t "form.prefs.label.entry_order" }}</label>
         <select id="form-entry-order" name="entry_order">
             <option value="published_at" {{ if eq "published_at" $.form.EntryOrder }}selected="selected"{{ end }}>{{ t "form.prefs.select.publish_time" }}</option>
             <option value="created_at" {{ if eq "created_at" $.form.EntryOrder }}selected="selected"{{ end }}>{{ t "form.prefs.select.created_time" }}</option>
         </select>
-    
+
         <label for="form-categories-sorting-order">{{ t "form.prefs.label.categories_sorting_order" }}</label>
         <select id="form-categories-sorting-order" name="categories_sorting_order">
         {{ range $key, $value := .categories_sorting_options }}
@@ -188,9 +190,9 @@
 
         <label for="form-entries-per-page">{{ t "form.prefs.label.entries_per_page" }}</label>
         <input type="number" name="entries_per_page" id="form-entries-per-page" value="{{ .form.EntriesPerPage }}" min="1">
-    
+
         <label><input type="checkbox" name="keyboard_shortcuts" value="1" {{ if .form.KeyboardShortcuts }}checked{{ end }}> {{ t "form.prefs.label.keyboard_shortcuts" }}</label>
-    
+
         <label><input type="checkbox" name="entry_swipe" value="1" {{ if .form.EntrySwipe }}checked{{ end }}> {{ t "form.prefs.label.entry_swipe" }}</label>
 
         <label>{{t "form.prefs.label.custom_css" }}</label><textarea name="custom_css" cols="40" rows="8" spellcheck="false">{{ .form.CustomCSS }}</textarea>

internal/template/templates/views/shared_entries.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.shared_entries.title" }} ({{ .total }}){{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">
         {{ t "page.shared_entries.title" }}
         <span aria-hidden="true">({{ .total }})</span>
     </h1>
@@ -25,8 +25,10 @@
         </ul>
     </nav>
     {{ end }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert alert-info">{{ t "alert.no_shared_entry" }}</p>
 {{ else }}

internal/template/templates/views/unread_entries.html

@@ -1,8 +1,8 @@
 {{ define "title"}}{{ t "page.unread.title" }} {{ if gt .countUnread 0 }}({{ .countUnread }}){{ end }} {{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">
         {{ t "page.unread.title" }}
         <span aria-hidden="true">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
     </h1>
@@ -32,8 +32,10 @@
         </ul>
     </nav>
     {{ end }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if not .entries }}
     <p class="alert">{{ t "alert.no_unread_entry" }}</p>
 {{ else }}

internal/template/templates/views/users.html

@@ -1,11 +1,13 @@
 {{ define "title"}}{{ t "page.users.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.users.title" }}</h1>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.users.title" }}</h1>
     {{ template "settings_menu" dict "user" .user }}
-</section>
+</header>
+{{ end }}
 
+{{ define "content"}}
 {{ if eq (len .users) 1 }}
     <p class="alert">{{ t "alert.no_user" }}</p>
 {{ else }}

internal/template/templates/views/webauthn_rename.html

@@ -1,10 +1,12 @@
 {{ define "title"}}{{ t "page.webauthn_rename.title" }}{{ end }}
 
-{{ define "content"}}
-<section class="page-header">
-    <h1>{{ t "page.webauthn_rename.title" }}</h1>
-</section>
+{{ define "header"}}
+<header class="page-header" aria-labelledby="page-header-title">
+    <h1 id="page-header-title">{{ t "page.webauthn_rename.title" }}</h1>
+</header>
+{{ end }}
 
+{{ define "content"}}
 <form action="{{ route "webauthnSave" "credentialHandle" .cred.HandleEncoded }}" method="post" autocomplete="off">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 

internal/ui/static/css/common.css

@@ -149,6 +149,7 @@ a:hover {
 
 /* Page header and footer*/
 .page-header {
+    padding-inline: 5px;
     margin-bottom: 25px;
 }