mirror of
https://github.com/sissbruecker/linkding
synced 2024-11-10 06:04:15 +00:00
Fix mobile issues with searchbox and nav menu (#72)
* Fix mobile Safari searchbox style (#62) * Fix mobile menu not closing on outside click (#62)
This commit is contained in:
Sascha Ißbrücker
GitHub
parent
91d876a7f1
commit
f555bba9e9
6 changed files with 82 additions and 40 deletions
|
|
@ -189,8 +189,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="form-autocomplete">
|
<div class="form-autocomplete">
|
||||||
<div class="form-autocomplete-input" class:is-focused={isFocus}>
|
<div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
|
||||||
<input type="search" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
|
<input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
|
||||||
bind:this={input}
|
bind:this={input}
|
||||||
on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
|
on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -257,6 +257,9 @@
|
||||||
.form-autocomplete-input {
|
.form-autocomplete-input {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.form-autocomplete-input.is-focused {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
/* TODO: Should be read from theme */
|
/* TODO: Should be read from theme */
|
||||||
.menu-item.selected > a {
|
.menu-item.selected > a {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,33 @@
|
||||||
.bookmarks-page {
|
.bookmarks-page .search {
|
||||||
|
$searchbox-height: 1.8rem;
|
||||||
|
|
||||||
.search input[type=search] {
|
// Regular input
|
||||||
|
input[type='search'] {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
height: 1.8rem;
|
height: $searchbox-height;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
|
||||||
@media (min-width: $control-width-md) {
|
@media (min-width: $control-width-md) {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Enhanced auto-complete input
|
||||||
|
// This needs a bit more wrangling to make the CSS component align with the attached button
|
||||||
|
.form-autocomplete {
|
||||||
|
height: $searchbox-height;
|
||||||
|
|
||||||
|
.form-autocomplete-input {
|
||||||
|
height: $searchbox-height;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
input[type='search'] {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.bookmark-list {
|
ul.bookmark-list {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ section.content-area {
|
||||||
border-bottom: solid 1px $border-color;
|
border-bottom: solid 1px $border-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
|
||||||
|
|
@ -12,10 +12,10 @@
|
||||||
<h2>Bookmarks</h2>
|
<h2>Bookmarks</h2>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<form action="{% url 'bookmarks:index' %}" method="get">
|
<form action="{% url 'bookmarks:index' %}" method="get" role="search">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<span id="search-input-wrap">
|
<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 }}">
|
value="{{ query }}">
|
||||||
</span>
|
</span>
|
||||||
<input type="submit" value="Search" class="btn input-group-btn">
|
<input type="submit" value="Search" class="btn input-group-btn">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<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="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
|
||||||
<meta name="description" content="Self-hosted bookmark service">
|
<meta name="description" content="Self-hosted bookmark service">
|
||||||
<meta name="robots" content="index,follow">
|
<meta name="robots" content="index,follow">
|
||||||
|
|
@ -23,39 +23,10 @@
|
||||||
<h1>linkding</h1>
|
<h1>linkding</h1>
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
{# Only nav items menu when logged in #}
|
{# Only show nav items menu when logged in #}
|
||||||
{% if request.user.is_authenticated %}
|
{% if request.user.is_authenticated %}
|
||||||
<section class="navbar-section">
|
<section class="navbar-section">
|
||||||
{# Basic menu list #}
|
{% include 'bookmarks/nav_menu.html' %}
|
||||||
<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>
|
|
||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
49
bookmarks/templates/bookmarks/nav_menu.html
Normal file
49
bookmarks/templates/bookmarks/nav_menu.html
Normal 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>
|
||||||
Loading…
Reference in a new issue