Mirrors/linkding
2
0
Fork 0
mirror of https://github.com/sissbruecker/linkding synced 2024-11-10 06:04:15 +00:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
bookmarks/components/SearchAutoComplete.svelte
View file

@ -189,8 +189,8 @@
</script>
<div class="form-autocomplete">
<div class="form-autocomplete-input" class:is-focused={isFocus}>
<input type="search" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
<div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
<input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
bind:this={input}
on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
</div>
@ -257,6 +257,9 @@
.form-autocomplete-input {
padding: 0;
}
.form-autocomplete-input.is-focused {
z-index: 2;
}
/* TODO: Should be read from theme */
.menu-item.selected > a {

26
bookmarks/styles/bookmarks.scss
View file

@ -1,13 +1,33 @@
.bookmarks-page {
.bookmarks-page .search {
$searchbox-height: 1.8rem;
.search input[type=search] {
// Regular input
input[type='search'] {
width: 180px;
height: 1.8rem;
height: $searchbox-height;
-webkit-appearance: none;
@media (min-width: $control-width-md) {
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 {

1
bookmarks/styles/shared.scss
View file

@ -4,7 +4,6 @@ section.content-area {
border-bottom: solid 1px $border-color;
display: flex;
flex-direction: row;
align-items: baseline;
margin-bottom: 16px;
h2 {

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">

33
bookmarks/templates/bookmarks/layout.html
View file

@ -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>