Fix mobile tag picker in editor

This commit is contained in:
rucki
2026-08-24 11:22:33 +02:00
parent a7567d5d0b
commit 3e1c33e3a3
3 changed files with 11 additions and 13 deletions
+5 -6
View File
@@ -3,13 +3,12 @@
{% csrf_token %}
<div class="card-body vstack gap-2">
<div class="small text-muted">{% trans "Type:" %} {{ item.get_kind_display }}</div>
<div class="mobile-tag-picker">
<button type="button" class="btn btn-sm btn-outline-secondary" @click="showTags=true">{% trans "Add tags" %}</button>
<div class="mobile-tag-backdrop" x-show="showTags" @click="showTags=false" x-cloak></div>
<div class="mobile-tag-popup card shadow" x-show="showTags" x-cloak>
<div class="card-body"><div class="d-flex justify-content-between align-items-center mb-2"><strong>{% trans "Choose tag" %}</strong><button type="button" class="btn-close" @click="showTags=false"></button></div><div class="d-flex flex-wrap gap-2">{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}</div></div>
</div>
<details class="mobile-tag-picker">
<summary class="btn btn-sm btn-outline-secondary">{% trans "Add tags" %}</summary>
<div class="d-flex flex-wrap gap-2 mt-2 p-2 bg-light rounded">
{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}
</div>
</details>
<textarea class="form-control" name="content" rows="5" x-model="text" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)">{{ item.content }}</textarea>
<textarea class="form-control" name="comment" rows="3" placeholder="{% trans 'Comment, e.g. same task already captured [[12]]' %}" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)">{{ item.comment }}</textarea>
<div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>
+1 -1
View File
@@ -23,7 +23,7 @@
<body>
<div class="top-toolbar sticky-top"><nav class="navbar bg-white"><div class="container shell"><div class="d-flex align-items-center gap-2 w-100"><a class="small nav-soft fw-semibold" href="/">Start</a>{% if user.is_authenticated %}<a class="small nav-soft" href="{% url 'journal' %}">{% trans "Journal" %}</a><a class="small nav-soft" href="{% url 'team_list' %}">{% trans "Teams" %}</a><div class="dropdown ms-auto"><button class="btn btn-sm btn-outline-secondary dropdown-toggle user-menu-btn" data-bs-toggle="dropdown">{{ user.get_full_name|default:user.username }}</button><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="{% url 'settings' %}">{% trans "Settings" %}</a></li><li><hr class="dropdown-divider"></li><li><form method="post" action="{% url 'logout' %}">{% csrf_token %}<button class="dropdown-item">{% trans "Logout" %}</button></form></li></ul></div>{% else %}<a class="btn btn-sm btn-dark ms-auto" href="{% url 'login' %}">{% trans "Login" %}</a>{% endif %}</div></div></nav>{% block toolbar_filter %}{% endblock %}</div>
<main class="container shell py-4">{% for message in messages %}<div class="alert alert-{{ message.tags|default:'info' }}">{{ message }}</div>{% endfor %}{% block content %}{% endblock %}</main>
{% if user.is_authenticated %}<nav class="mobile-bottom-nav gap-1 d-md-none" aria-label="Mobile navigation"><a class="btn btn-primary flex-fill" href="{% url 'new_item' %}?kind=todo">Aufgabe</a><a class="btn btn-secondary flex-fill" href="{% url 'new_item' %}?kind=note">Notiz</a><a class="btn btn-success flex-fill" href="{% url 'new_item' %}?kind=link">Link</a><a class="btn btn-info flex-fill" href="{% url 'new_item' %}?kind=journal">Journal</a></nav>{% endif %}
{% if user.is_authenticated and request.resolver_match.url_name == 'index' %}<nav class="mobile-bottom-nav gap-1 d-md-none" aria-label="Mobile navigation"><a class="btn btn-primary flex-fill" href="{% url 'new_item' %}?kind=todo">Aufgabe</a><a class="btn btn-secondary flex-fill" href="{% url 'new_item' %}?kind=note">Notiz</a><a class="btn btn-success flex-fill" href="{% url 'new_item' %}?kind=link">Link</a><a class="btn btn-info flex-fill" href="{% url 'new_item' %}?kind=journal">Journal</a></nav>{% endif %}
<script>
document.body.addEventListener('htmx:configRequest', e => {e.detail.headers['X-CSRFToken']='{{ csrf_token }}'});
window.quickComposer = window.quickComposer || function(tags, itemId=null){
+5 -6
View File
@@ -9,13 +9,12 @@
<div class="d-flex gap-2"><button class="btn btn-success px-3 py-2" title="{% trans 'Save' %}">✓</button><a class="btn btn-danger px-3 py-2" href="{{ next_url }}" title="{% trans 'Cancel' %}">×</a></div>
</div>
<div class="small text-muted">{% trans "Type:" %} {{ item.get_kind_display }}</div>
<div class="mobile-tag-picker">
<button type="button" class="btn btn-sm btn-outline-secondary" @click="showTags=true">{% trans "Add tags" %}</button>
<div class="mobile-tag-backdrop" x-show="showTags" @click="showTags=false" x-cloak></div>
<div class="mobile-tag-popup card shadow" x-show="showTags" x-cloak>
<div class="card-body"><div class="d-flex justify-content-between align-items-center mb-2"><strong>{% trans "Choose tag" %}</strong><button type="button" class="btn-close" @click="showTags=false"></button></div><div class="d-flex flex-wrap gap-2">{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}</div></div>
</div>
<details class="mobile-tag-picker">
<summary class="btn btn-sm btn-outline-secondary">{% trans "Add tags" %}</summary>
<div class="d-flex flex-wrap gap-2 mt-2 p-2 bg-light rounded">
{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}
</div>
</details>
<textarea class="form-control" name="content" rows="18" x-model="text" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)">{{ item.content }}</textarea>
<textarea class="form-control" name="comment" rows="5" placeholder="{% trans 'Comment' %}" @keydown="onKeydown($event)" @input="onInput($event)" @paste="handlePaste($event)">{{ item.comment }}</textarea>
<div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>