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>
@@ -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 }}
@@ -143,15 +143,20 @@
             </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">
+</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 "" }}
@@ -190,9 +195,9 @@
         {{ else }}
         {{ noescape .entry.Content }}
         {{ end }}
-    </article>
-    {{ if .entry.Enclosures }}
-    <details class="entry-enclosures">
+</article>
+{{ if .entry.Enclosures }}
+<details class="entry-enclosures">
     <summary>{{ t "page.entry.attachments" }} ({{ len .entry.Enclosures }})</summary>
     {{ range .entry.Enclosures }}
     {{ if ne .URL "" }}
@@ -240,9 +245,9 @@
     </div>
     {{ end }}
     {{ end }}
-        </details>
-    {{ end }}
-</section>
+</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 }}">
 

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;
 }