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

Add button to show tags on smaller screens (#529)

Browse Source 
* Implement tag modal

* Improve header controls responsiveness

* Improve modal styles

* Cleanup
This commit is contained in:
Sascha Ißbrücker
2023-09-10 09:44:49 +03:00
committed by GitHub
parent 0975914a86
commit d9c4ddb4d7
9 changed files with 160 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bookmarks/templates/bookmarks/archive.html
View File

@@ -14,9 +14,10 @@
<section class="content-area col-2">
<div class="content-area-header mb-0">
<h2>Archived bookmarks</h2>
<div class="d-flex">
<div class="header-controls">
{% bookmark_search bookmark_list.search tag_cloud.tags mode='archived' %}
{% include 'bookmarks/bulk_edit/toggle.html' %}
<button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
</div>
</div>

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

@@ -14,9 +14,10 @@
<section class="content-area col-2">
<div class="content-area-header mb-0">
<h2>Bookmarks</h2>
<div class="d-flex">
<div class="header-controls">
{% bookmark_search bookmark_list.search tag_cloud.tags %}
{% include 'bookmarks/bulk_edit/toggle.html' %}
<button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
</div>
</div>

80
bookmarks/templates/bookmarks/search.html
View File

@@ -1,48 +1,42 @@
{% load widget_tweaks %}
<div class="search">
<form action="" method="get" role="search">
<div class="d-flex">
<div class="input-group">
<span id="search-input-wrap">
<input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
value="{{ search.query }}">
</span>
<input type="submit" value="Search" class="btn input-group-btn">
<form id="search" action="" method="get" role="search">
<div class="input-group">
<input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
value="{{ search.query }}">
<input type="submit" value="Search" class="btn input-group-btn">
</div>
<div class="search-options dropdown dropdown-right">
<button type="button" class="btn dropdown-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M6 4v4"></path>
<path d="M6 12v8"></path>
<path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M12 4v10"></path>
<path d="M12 18v2"></path>
<path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M18 4v1"></path>
<path d="M18 9v11"></path>
</svg>
</button>
<div class="menu text-sm" tabindex="0">
<div class="form-group">
<label for="{{ form.sort.id_for_label }}" class="form-label">Sort by</label>
{{ form.sort|add_class:"form-select select-sm" }}
</div>
<div class="search-options dropdown dropdown-right">
<button type="button" class="btn dropdown-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M6 4v4"></path>
<path d="M6 12v8"></path>
<path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M12 4v10"></path>
<path d="M12 18v2"></path>
<path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
<path d="M18 4v1"></path>
<path d="M18 9v11"></path>
</svg>
</button>
<div class="menu text-sm" tabindex="0">
<div class="form-group">
<label for="{{ form.sort.id_for_label }}" class="form-label">Sort by</label>
{{ form.sort|add_class:"form-select select-sm" }}
</div>
<div class="actions">
<button type="submit" class="btn btn-sm btn-primary">Apply</button>
</div>
</div>
<div class="actions">
<button type="submit" class="btn btn-sm btn-primary">Apply</button>
</div>
</div>
</div>
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
</form>
</div>
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
</form>
{# Replace search input with auto-complete component #}
<script type="application/javascript">
@@ -55,10 +49,10 @@
user: '{{ search.user }}',
}
const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
const wrapper = document.getElementById('search-input-wrap')
const newWrapper = document.createElement('div')
const input = document.querySelector('#search input[name="q"]')
const wrapper = document.createElement('div')
new linkding.SearchAutoComplete({
target: newWrapper,
target: wrapper,
props: {
name: 'q',
placeholder: 'Search for words or #tags',
@@ -70,6 +64,6 @@
search,
}
})
wrapper.parentElement.replaceChild(newWrapper, wrapper)
input.replaceWith(wrapper.firstElementChild);
});
</script>

5
bookmarks/templates/bookmarks/shared.html
View File

@@ -13,7 +13,10 @@
<section class="content-area col-2">
<div class="content-area-header">
<h2>Shared bookmarks</h2>
{% bookmark_search bookmark_list.search tag_cloud.tags mode='shared' %}
<div class="header-controls">
{% bookmark_search bookmark_list.search tag_cloud.tags mode='shared' %}
<button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
</div>
</div>
<form class="bookmark-actions" action="{{ bookmark_list.action_url|safe }}"