marcel/linkding
1
0
Fork 0
mirror of https://github.com/sissbruecker/linkding.git synced 2025-08-14 22:19:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile issues with searchbox and nav menu (#72)

Browse Source 
* Fix mobile Safari searchbox style (#62)

* Fix mobile menu not closing on outside click (#62)
This commit is contained in:
Sascha Ißbrücker
2021-02-07 00:10:02 +01:00
committed by GitHub
parent 91d876a7f1
commit f555bba9e9
6 changed files with 82 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bookmarks/templates/bookmarks/index.html
View File

@@ -12,10 +12,10 @@
<h2>Bookmarks</h2>
<div class="spacer"></div>
<div class="search">
<form action="{% url 'bookmarks:index' %}" method="get">
<form action="{% url 'bookmarks:index' %}" method="get" role="search">
<div class="input-group">
<span id="search-input-wrap">
<input type="search" name="q" placeholder="Search for words or #tags"
<input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
value="{{ query }}">
</span>
<input type="submit" value="Search" class="btn input-group-btn">

35
bookmarks/templates/bookmarks/layout.html
View File

@@ -5,7 +5,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="{% static 'favicon.png' %}" />
<link rel="icon" href="{% static 'favicon.png' %}"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="description" content="Self-hosted bookmark service">
<meta name="robots" content="index,follow">
@@ -23,39 +23,10 @@
<h1>linkding</h1>
</a>
</section>
{# Only nav items menu when logged in #}
{# Only show nav items menu when logged in #}
{% if request.user.is_authenticated %}
<section class="navbar-section">
{# Basic menu list #}
<div class="hide-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</div>
{# Menu drop-down for smaller devices #}
<div class="show-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">
<i class="icon icon-plus"></i>
</a>
<div class="dropdown dropdown-right">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
<i class="icon icon-menu icon-2x"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
</li>
<li>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
</li>
<li>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</li>
</ul>
</div>
</div>
{% include 'bookmarks/nav_menu.html' %}
</section>
{% endif %}
</header>

49
bookmarks/templates/bookmarks/nav_menu.html Normal file
View File

@@ -0,0 +1,49 @@
{# Basic menu list #}
<div class="hide-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</div>
{# Menu drop-down for smaller devices #}
<div class="show-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">
<i class="icon icon-plus"></i>
</a>
<div class="dropdown dropdown-right">
<a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
<i class="icon icon-menu icon-2x"></i>
</a>
<!-- menu component -->
<ul class="menu">
<li>
<a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
</li>
<li>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
</li>
<li>
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</li>
</ul>
</div>
</div>
<script>
// Hide mobile menu on outside click
// The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
// Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
// behaviour through Javascript
const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');
function mobileNavMenuOutsideClickHandler(clickEvent) {
if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
mobileNavMenuTrigger.blur();
}
mobileNavMenuTrigger.addEventListener('focus', function () {
document.addEventListener('click', mobileNavMenuOutsideClickHandler);
})
mobileNavMenuTrigger.addEventListener('blur', function () {
document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
})
</script>