fix menu responsive layout
This commit is contained in:
krvpb024
Frédéric Guillot
parent
da11416b39
commit
84576f2c29
4 changed files with 94 additions and 58 deletions
|
|
@ -66,57 +66,60 @@
|
|||
</a>
|
||||
<div class="header">
|
||||
<nav>
|
||||
<details>
|
||||
<summary aria-label="{{ t "menu.title" }}">
|
||||
<div class="logo"><a aria-label="{{ t "menu.home_page" }}" href="{{ route .user.DefaultHomePage }}">Mini<span>flux</span></a></div>
|
||||
<div class="logo">
|
||||
<a aria-label="{{ t "menu.home_page" }}" href="{{ route .user.DefaultHomePage }}">
|
||||
Mini<span>flux</span>
|
||||
</a>
|
||||
<button aria-controls="header-menu" aria-expanded="false" aria-label="{{ t "menu.title" }}">
|
||||
<svg aria-label="{{ t "menu.title" }}" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<ul id="header-menu">
|
||||
<li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
|
||||
<a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
|
||||
{{ if gt .countUnread 0 }}
|
||||
<span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<ul id="header-menu">
|
||||
<li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
|
||||
<a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
|
||||
{{ if gt .countUnread 0 }}
|
||||
<span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
|
||||
<a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
|
||||
<a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
|
||||
<a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
|
||||
{{ if gt .countErrorFeeds 0 }}
|
||||
<span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
<a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
|
||||
(+)
|
||||
</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
|
||||
<a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
|
||||
<a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
|
||||
</li>
|
||||
{{ if not hasAuthProxy }}
|
||||
<li>
|
||||
<a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
|
||||
<a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
|
||||
<a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
|
||||
<a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
|
||||
{{ if gt .countErrorFeeds 0 }}
|
||||
<span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
<a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
|
||||
(+)
|
||||
</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
|
||||
<a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
|
||||
</li>
|
||||
<li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
|
||||
<a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
|
||||
</li>
|
||||
{{ if not hasAuthProxy }}
|
||||
<li>
|
||||
<a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</details>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
<search role="search" class="search">
|
||||
<details {{ if $.searchQuery }}open{{ end }}>
|
||||
<summary>{{ t "search.label" }}</summary>
|
||||
<summary>
|
||||
<span id="search-label">{{ t "search.label" }}</span>
|
||||
</summary>
|
||||
<form action="{{ route "searchEntries" }}" aria-labelledby="search-input-label">
|
||||
<label class="sr-only" for="search-input" id="search-input-label">{{ t "search.label" }}</label>
|
||||
<input type="search" name="q" id="search-input" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
|
||||
<input type="search" name="q" aria-labelledby="search-label" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
|
||||
<button type="submit">{{ t "search.submit" }}</button>
|
||||
</form>
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -91,25 +91,31 @@ a:hover {
|
|||
|
||||
.header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header nav details {
|
||||
flex: 1;
|
||||
.header nav button[aria-controls="header-menu"] {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header nav details[open] svg {
|
||||
.header nav button[aria-controls="header-menu"] svg {
|
||||
padding: 5px;
|
||||
inline-size: 20px;
|
||||
block-size: 20px;
|
||||
}
|
||||
|
||||
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.header nav summary {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
.header ul.js-menu-show {
|
||||
display: initial;
|
||||
}
|
||||
.header nav summary::-webkit-details-marker {
|
||||
|
||||
.header ul:not(.js-menu-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -187,11 +193,15 @@ a:hover {
|
|||
.logo {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: var(--logo-color);
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo a:hover {
|
||||
|
|
@ -297,6 +307,27 @@ a:hover {
|
|||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
align-items: start;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.header nav button[aria-controls="header-menu"] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header nav button[aria-controls="header-menu"] svg {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.header ul:not(.js-menu-show), .header ul.js-menu-show {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.page-header li,
|
||||
.page-footer li {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -27,13 +27,14 @@ function onAuxClick(selector, callback, noPreventDefault) {
|
|||
|
||||
// Show and hide the main menu on mobile devices.
|
||||
function toggleMainMenu() {
|
||||
console.log("clc")
|
||||
let menu = document.querySelector(".header nav ul");
|
||||
let menuToggleButton = document.querySelector(".header .logo a");
|
||||
if (DomHelper.isVisible(menu)) {
|
||||
menu.style.display = "none";
|
||||
let menuToggleButton = document.querySelector(".header button[aria-controls='header-menu']");
|
||||
if (menu.classList.contains("js-menu-show")) {
|
||||
menu.classList.remove("js-menu-show")
|
||||
menuToggleButton.setAttribute("aria-expanded", false)
|
||||
} else {
|
||||
menu.style.display = "block";
|
||||
menu.classList.add("js-menu-show")
|
||||
menuToggleButton.setAttribute("aria-expanded", true)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
internal/ui/static/js/bootstrap.js
vendored
1
internal/ui/static/js/bootstrap.js
vendored
|
|
@ -112,6 +112,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
}
|
||||
}, true);
|
||||
|
||||
onClick("button[aria-controls='header-menu']", () => toggleMainMenu());
|
||||
if (document.documentElement.clientWidth < 600) {
|
||||
onClick(".header nav li", (event) => onClickMainMenuListItem(event));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue