Move search form to a dedicated page

internal/ui/search.go

@@ -14,7 +14,7 @@ import (
 	"miniflux.app/v2/internal/ui/view"
 )
 
-func (h *handler) showSearchEntriesPage(w http.ResponseWriter, r *http.Request) {
+func (h *handler) showSearchPage(w http.ResponseWriter, r *http.Request) {
 	user, err := h.store.UserByID(request.UserID(r))
 	if err != nil {
 		html.ServerError(w, r, err)
@@ -23,32 +23,38 @@ func (h *handler) showSearchEntriesPage(w http.ResponseWriter, r *http.Request)
 
 	searchQuery := request.QueryStringParam(r, "q", "")
 	offset := request.QueryIntParam(r, "offset", 0)
-	builder := h.store.NewEntryQueryBuilder(user.ID)
-	builder.WithSearchQuery(searchQuery)
-	builder.WithoutStatus(model.EntryStatusRemoved)
-	builder.WithOffset(offset)
-	builder.WithLimit(user.EntriesPerPage)
 
-	entries, err := builder.GetEntries()
-	if err != nil {
-		html.ServerError(w, r, err)
-		return
-	}
+	var entries model.Entries
+	var entriesCount int
 
-	count, err := builder.CountEntries()
-	if err != nil {
-		html.ServerError(w, r, err)
-		return
+	if searchQuery != "" {
+		builder := h.store.NewEntryQueryBuilder(user.ID)
+		builder.WithSearchQuery(searchQuery)
+		builder.WithoutStatus(model.EntryStatusRemoved)
+		builder.WithOffset(offset)
+		builder.WithLimit(user.EntriesPerPage)
+
+		entries, err = builder.GetEntries()
+		if err != nil {
+			html.ServerError(w, r, err)
+			return
+		}
+
+		entriesCount, err = builder.CountEntries()
+		if err != nil {
+			html.ServerError(w, r, err)
+			return
+		}
 	}
 
 	sess := session.New(h.store, request.SessionID(r))
 	view := view.New(h.tpl, r, sess)
-	pagination := getPagination(route.Path(h.router, "searchEntries"), count, offset, user.EntriesPerPage)
+	pagination := getPagination(route.Path(h.router, "search"), entriesCount, offset, user.EntriesPerPage)
 	pagination.SearchQuery = searchQuery
 
 	view.Set("searchQuery", searchQuery)
 	view.Set("entries", entries)
-	view.Set("total", count)
+	view.Set("total", entriesCount)
 	view.Set("pagination", pagination)
 	view.Set("menu", "search")
 	view.Set("user", user)
@@ -56,5 +62,5 @@ func (h *handler) showSearchEntriesPage(w http.ResponseWriter, r *http.Request)
 	view.Set("countErrorFeeds", h.store.CountUserFeedsWithErrors(user.ID))
 	view.Set("hasSaveEntry", h.store.HasSaveEntry(user.ID))
 
-	html.OK(w, r, view.Render("search_entries"))
+	html.OK(w, r, view.Render("search"))
 }

internal/ui/static/css/common.css

@@ -29,8 +29,8 @@ h1, h2, h3 {
 }
 
 main {
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 3px;
+    padding-right: 3px;
     margin-bottom: 30px;
 }
 
@@ -51,36 +51,36 @@ a:hover {
 }
 
 .sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  margin: -1px !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
 }
 
 .skip-to-content-link {
-  --padding-size: 8px;
-  --border-size: 1px;
+    --padding-size: 8px;
+    --border-size: 1px;
 
-  background-color: var(--category-background-color);
-  color: var(--category-color);
-  border: var(--border-size) solid var(--category-border-color);
-  border-radius: 5px;
-  inset-inline-start: 50%;
-  padding: var(--padding-size);
-  position: absolute;
-  transition: translate 0.3s;
-  translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
+    background-color: var(--category-background-color);
+    color: var(--category-color);
+    border: var(--border-size) solid var(--category-border-color);
+    border-radius: 5px;
+    inset-inline-start: 50%;
+    padding: var(--padding-size);
+    position: absolute;
+    transition: translate 0.3s;
+    translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
 }
 
 .skip-to-content-link:focus {
-  translate: -50% 0;
+    translate: -50% 0;
 }
 
 /* Header and main menu */
@@ -145,7 +145,7 @@ a:hover {
 
 /* Page header and footer*/
 .page-header {
-    padding-inline: 5px;
+    padding-inline: 3px;
     margin-bottom: 25px;
 }
 
@@ -226,44 +226,6 @@ a:hover {
     color: var(--logo-hover-color-span);
 }
 
-/* Search form */
-.search {
-    text-align: center;
-    margin-top: 10px;
-    margin-right: 5px;
-}
-
-.search-summary-icon {
-   padding: 5px;
-   inline-size: 24px;
-   block-size: 24px;
-   translate: 0 -3px;
-}
-
-.search-details {
-
-   &[open] .search-summary-icon {
-       rotate: 180deg;
-    }
-}
-
-.search-summary {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  inline-size: fit-content;
-  margin-inline: auto;
-}
-
-.search-summary::marker, /* Latest Chrome, Edge, Firefox */
-.search-summary::-webkit-details-marker /* Safari */ {
-  display: none;
-}
-
-.search-toggle-switch {
-    display: none;
-}
-
 /* PWA prompt */
 #prompt-home-screen {
     display: none;
@@ -318,26 +280,33 @@ a:hover {
     100% {visibility: hidden; opacity: 0; z-index: 0}
 }
 
+/* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
+@media (min-width: 625px) and (max-width: 830px) {
+    .logo {
+        display: none;
+    }
+}
+
+@media (min-width: 830px) {
+    .logo {
+        padding-right: 8px;
+    }
+}
+
 @media (min-width: 620px) {
     body {
         margin: auto;
-        max-width: 750px;
+        max-width: 820px;
     }
 
     .header {
-        margin-bottom: 0;
-    }
-
-    .logo {
-        text-align: left;
-        float: left;
-        margin-right: 15px;
+        padding-left: 3px;
     }
 
     .header li {
-        display: inline;
+        display: inline-block;
         padding: 0;
-        padding-right: 15px;
+        padding-right: 12px;
         line-height: normal;
         border: none;
         font-size: 1.0em;
@@ -365,32 +334,6 @@ a:hover {
         display: inline;
         padding-right: 15px;
     }
-
-    /* Search form */
-    .search {
-        text-align: right;
-        display: block;
-    }
-
-    .search details > summary {
-      margin-inline: auto 0;
-    }
-
-    .search-toggle-switch {
-        display: block;
-    }
-
-    .search-form {
-        display: none;
-    }
-
-    .search-toggle-switch.has-search-query {
-        display: none;
-    }
-
-    .search-form.has-search-query {
-        display: block;
-    }
 }
 
 /* Tables */

internal/ui/static/js/app.js

@@ -121,19 +121,6 @@ function handleSubmitButtons() {
     });
 }
 
-// Set cursor focus to the search input.
-function setFocusToSearchInput(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const toggleSearchButton = document.querySelector(".search details")
-    if (!toggleSearchButton.getAttribute("open")) {
-      toggleSearchButton.setAttribute("open", "")
-      const searchInputElement = document.getElementById("search-input");
-      searchInputElement.focus();
-      searchInputElement.value = "";
-    }
-}
-
 // Show modal dialog with the list of keyboard shortcuts.
 function showKeyboardShortcuts() {
     let template = document.getElementById("keyboard-shortcuts");

internal/ui/static/js/bootstrap.js

@@ -35,7 +35,7 @@ document.addEventListener("DOMContentLoaded", () => {
         keyboardHandler.on("?", () => showKeyboardShortcuts());
         keyboardHandler.on("+", () => goToAddSubscription());
         keyboardHandler.on("#", () => unsubscribeFromFeed());
-        keyboardHandler.on("/", (e) => setFocusToSearchInput(e));
+        keyboardHandler.on("/", () => goToPage("search"));
         keyboardHandler.on("a", () => {
             let enclosureElement = document.querySelector('.entry-enclosures');
             if (enclosureElement) {

internal/ui/static/js/keyboard_handler.js

@@ -17,8 +17,7 @@ class KeyboardHandler {
                 return;
             }
 
-            if (key != "Enter")
-            {
+            if (key != "Enter") {
                 event.preventDefault();
             }
 

internal/ui/ui.go

@@ -57,7 +57,7 @@ func Serve(router *mux.Router, store *storage.Storage, pool *worker.Pool) {
 	uiRouter.HandleFunc("/starred/entry/{entryID}", handler.showStarredEntryPage).Name("starredEntry").Methods(http.MethodGet)
 
 	// Search pages.
-	uiRouter.HandleFunc("/search", handler.showSearchEntriesPage).Name("searchEntries").Methods(http.MethodGet)
+	uiRouter.HandleFunc("/search", handler.showSearchPage).Name("search").Methods(http.MethodGet)
 	uiRouter.HandleFunc("/search/entry/{entryID}", handler.showSearchEntryPage).Name("searchEntry").Methods(http.MethodGet)
 
 	// Feed listing pages.