Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 05:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

various inbox ui improvements

Browse source
This commit is contained in:
mst 2024-11-26 15:01:18 +03:00
parent 0af8ce7648
commit 9f1b13c64f
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
templates/inbox.html
View file

@ -9,7 +9,7 @@
<h3 class="fs-4"><span id="question-count-inbox">{{ len(questions) }}</span> <span class="fw-light">question(s)</span></h3> <h3 class="fs-4"><span id="question-count-inbox">{{ len(questions) }}</span> <span class="fw-light">question(s)</span></h3>
<div class="row"> <div class="row">
{% for question in questions %} {% for question in questions %}
<div class="col-sm-8 m-auto"> <div class="col-lg-8 m-auto">
<div class="card mb-3 mt-3 alert-placeholder question" id="question-{{ question.id }}"> <div class="card mb-3 mt-3 alert-placeholder question" id="question-{{ question.id }}">
<div class="card-header"> <div class="card-header">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<form hx-trigger="click from:#answer-btn-{{ question.id }}, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none"> <form hx-trigger="click from:#answer-btn-{{ question.id }}, keyup[ctrlKey&&key=='Enter']" hx-disabled-elt="find button[type=submit]" hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">
<div class="form-group d-sm-grid d-md-block gap-2"> <div class="form-group d-sm-grid d-md-block gap-2">
<div class="collapse" id="cw-{{ question.id }}-collapse"> <div class="collapse" id="cw-{{ question.id }}-collapse">
<div class="form-floating mb-2"> <div class="form-floating mb-2">
@ -55,13 +55,15 @@
<label for="cw">Content warning</label> <label for="cw">Content warning</label>
</div> </div>
</div> </div>
<label for="answer-{{ question.id }}" class="visually-hidden-focusable">Write your answer...</label> <div class="form-floating">
<textarea class="form-control mb-2" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea> <textarea class="form-control mb-2" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea>
<div class="d-md-flex justify-content-between align-items-center"> <label for="answer-{{ question.id }}">Write your answer...</label>
</div>
<div class="d-sm-flex justify-content-between align-items-center">
<button class="btn btn-sm btn-outline-secondary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#cw-{{ question.id }}-collapse" aria-expanded="false" aria-controls="cw-{{ question.id }}-collapse"> <button class="btn btn-sm btn-outline-secondary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#cw-{{ question.id }}-collapse" aria-expanded="false" aria-controls="cw-{{ question.id }}-collapse">
<i class="bi bi-plus-lg me-1"></i> Add CW <i class="bi bi-plus-lg me-1"></i> Add CW
</button> </button>
<div class="d-flex flex-column flex-md-row-reverse gap-2"> <div class="d-flex flex-column flex-sm-row-reverse gap-2">
<button type="submit" class="btn btn-primary" id="answer-btn-{{ question.id }}"> <button type="submit" class="btn btn-primary" id="answer-btn-{{ question.id }}">
<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span> <span class="visually-hidden" role="status">Loading...</span>
@ -82,16 +84,16 @@
<div class="modal fade" id="question-{{ question.id }}-modal" tabindex="-1" aria-labelledby="q-{{ question.id }}-modal-label" aria-hidden="true"> <div class="modal fade" id="question-{{ question.id }}-modal" tabindex="-1" aria-labelledby="q-{{ question.id }}-modal-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header border-0">
<h1 class="modal-title fs-5" id="q-{{ question.id }}-modal-label">Confirmation</h1> <h1 class="modal-title fs-5 fw-normal" id="q-{{ question.id }}-modal-label">Confirmation</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close d-flex align-items-center fs-5" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
</div> </div>
<div class="modal-body"> <div class="modal-body pt-0 pb-0">
<p class="mb-0">Are you sure you want to delete this question?</p> <p>Are you sure you want to delete this question?</p>
</div> </div>
<div class="modal-footer flex-row align-items-stretch w-100"> <div class="modal-footer pt-1 border-0">
<button type="button" class="btn btn-outline-secondary flex-fill" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-outline-secondary flex-fill flex-sm-grow-0" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger flex-fill" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button> <button type="button" class="btn btn-danger flex-fill flex-sm-grow-0" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button>
</div> </div>
</div> </div>
</div> </div>