diff options
Diffstat (limited to 'internal/ui')
-rw-r--r-- | internal/ui/search.go (renamed from internal/ui/search_entries.go) | 42 | ||||
-rw-r--r-- | internal/ui/static/css/common.css | 143 | ||||
-rw-r--r-- | internal/ui/static/js/app.js | 13 | ||||
-rw-r--r-- | internal/ui/static/js/bootstrap.js | 2 | ||||
-rw-r--r-- | internal/ui/static/js/keyboard_handler.js | 3 | ||||
-rw-r--r-- | internal/ui/ui.go | 2 |
6 files changed, 70 insertions, 135 deletions
diff --git a/internal/ui/search_entries.go b/internal/ui/search.go index 68df5c9b..d426411f 100644 --- a/internal/ui/search_entries.go +++ b/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")) } diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css index 731c19c9..c3d79f59 100644 --- a/internal/ui/static/css/common.css +++ b/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 */ diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js index 99145d49..599119a2 100644 --- a/internal/ui/static/js/app.js +++ b/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"); diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js index cd11008e..fcc4d648 100644 --- a/internal/ui/static/js/bootstrap.js +++ b/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) { diff --git a/internal/ui/static/js/keyboard_handler.js b/internal/ui/static/js/keyboard_handler.js index 3459db5d..55b72964 100644 --- a/internal/ui/static/js/keyboard_handler.js +++ b/internal/ui/static/js/keyboard_handler.js @@ -17,8 +17,7 @@ class KeyboardHandler { return; } - if (key != "Enter") - { + if (key != "Enter") { event.preventDefault(); } diff --git a/internal/ui/ui.go b/internal/ui/ui.go index 0393d33b..6d8e729c 100644 --- a/internal/ui/ui.go +++ b/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. |