mirror of
https://codeberg.org/catask-org/catask.git
synced 2025-04-20 05:43:41 -05:00
some question card style changes
This commit is contained in:
mst
parent
42459b0c74
commit
3b19d27fad
1 changed files with 26 additions and 23 deletions
|
|
@ -3,48 +3,51 @@
|
|||
<div class="card mt-3 mb-3{% if question.pinned %} border-2{% endif %}" id="question-{{ question.id }}">
|
||||
<div class="card-header{% if question.pinned %} border-2{% endif %}">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap text-break">
|
||||
<h3 class="h5 card-title my-1 markdown-content w-50">
|
||||
<h3 class="{% if cfg.style.cardStyle == 'compact' %}mt-1 mb-0{% else %}my-1{% endif %} h5 card-title markdown-content w-50">
|
||||
{% if question.from_who %}
|
||||
{{ render_markdown(question.from_who, fromWho=True) }}
|
||||
{% else %}
|
||||
<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
|
||||
<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="{{ _('This question was asked anonymously') }}" data-bs-placement="top"></i> {{ cfg.anonName }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<h3 class="h6 card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
|
||||
<h3 class="h6 card-subtitle mt-1 fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
|
||||
</div>
|
||||
{% with question=question %}
|
||||
{% include 'snippets/q-card-text.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="card-body markdown-content" id="a-{{ question.id }}-content">
|
||||
<div class="card-body markdown-content {% if cfg.style.cardStyle == 'compact' %}pb-0 pt-2 mt-1{% endif %}" id="a-{{ question.id }}-content">
|
||||
{% if answer.cw %}
|
||||
<div class="text-center mb-2 fw-bold cw-text markdown-content">{{ answer.cw | render_markdown }}</div>
|
||||
<div class="collapse question-cw markdown-content" id="answer-cw-{{ answer.id }}">
|
||||
{{ answer.content | render_markdown }}
|
||||
</div>
|
||||
<button class="z-0 cw-btn btn btn-sm btn-secondary shadow text-center w-100 sticky-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#answer-cw-{{ answer.id }}" aria-expanded="false" aria-controls="answer-cw-{{ answer.id }}">
|
||||
<span class="fw-medium cw-btn-text">Show content</span>
|
||||
<span class="text-body-secondary cw-btn-chars">({{ len(answer.content) }} characters)</span>
|
||||
<span class="fw-medium cw-btn-text">{{ _('Show content') }}</span>
|
||||
<span class="text-body-secondary cw-btn-chars">({{ _("{} characters").format(len(answer.content)) }})</span>
|
||||
</button>
|
||||
{% else %}
|
||||
{{ answer.content | render_markdown }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-footer pt-0 pb-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
|
||||
<div class="card-footer {% if cfg.style.cardStyle == 'compact' %}border-0 bg-transparent{% endif %} py-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
|
||||
<div>
|
||||
{% if cfg.username %}
|
||||
<span class="text-body">{{ cfg.username }}</span><span> · </span>
|
||||
{% endif %}
|
||||
<span class="fs-6" data-bs-toggle="tooltip" data-bs-title="{{ answer.creation_date.strftime("%B %d, %Y %H:%M") }}">{{ formatRelativeTime(str(answer.creation_date)) }}</span>
|
||||
{% if question.pinned %}
|
||||
<span class="ms-1 fw-medium"><i class="bi bi-pin"></i> Pinned</span>
|
||||
<span class="ms-1 fw-medium"><i class="bi bi-pin"></i> {{ _('Pinned') }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
{% if showViewQuestionBtn %}
|
||||
<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="View question" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
|
||||
<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ _('View question') }}" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
|
||||
{% endif %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share question"><i class="bi bi-share"></i></button>
|
||||
<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ _('Share question') }}"><i class="bi bi-share"></i></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> Copy to clipboard</button></li>
|
||||
<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> {{ _('Copy to clipboard') }}</button></li>
|
||||
<li>
|
||||
<button class="dropdown-item d-flex align-items-center gap-1" data-bs-toggle="modal" data-q-id="{{ question.id }}" data-bs-target="#question-modal">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 64 64" class="me-1">
|
||||
|
|
@ -119,11 +122,11 @@
|
|||
<div class="position-relative">
|
||||
<div class="card-header{% if question.pinned %} border-2{% endif %}">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap text-break">
|
||||
<h3 class="h5 card-title mt-1 mb-1 markdown-content w-75">
|
||||
<h3 class="{% if cfg.style.cardStyle == 'compact' %}mt-1 mb-0{% else %}my-1{% endif %} h5 card-title markdown-content w-50">
|
||||
{% if question.from_who %}
|
||||
{{ question.from_who | render_markdown }}
|
||||
{{ render_markdown(question.from_who, fromWho=True) }}
|
||||
{% else %}
|
||||
<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
|
||||
<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="{{ _('This question was asked anonymously') }}" data-bs-placement="top"></i> {{ cfg.anonName }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<h3 class="h6 card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
|
||||
|
|
@ -133,35 +136,35 @@
|
|||
{% endwith %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-body markdown-content {% if cfg.style.cardStyle == 'compact' %}pb-0 pt-2 mt-1{% endif %}" id="a-{{ question.id }}-content">
|
||||
{% if answer.cw %}
|
||||
<div class="text-center mb-2 fw-bold cw-text markdown-content">{{ answer.cw | render_markdown }}</div>
|
||||
<div class="collapse question-cw markdown-content" id="answer-cw-{{ answer.id }}">
|
||||
{{ answer.content | render_markdown }}
|
||||
</div>
|
||||
<button class="z-0 cw-btn btn btn-sm btn-secondary shadow text-center w-100 sticky-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#answer-cw-{{ answer.id }}" aria-expanded="false" aria-controls="answer-cw-{{ answer.id }}">
|
||||
<span class="fw-medium cw-btn-text">Show content</span>
|
||||
<span class="text-body-secondary cw-btn-chars">({{ len(answer.content) }} characters)</span>
|
||||
<span class="fw-medium cw-btn-text">{{ _('Show content') }}</span>
|
||||
<span class="text-body-secondary cw-btn-chars">({{ _("{} characters").format(len(answer.content)) }})</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<div class="markdown-content" id="a-{{ question.id }}-content">{{ answer.content | render_markdown }}</div>
|
||||
{{ answer.content | render_markdown }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-footer pt-0 pb-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
|
||||
<div class="card-footer {% if cfg.style.cardStyle == 'compact' %}border-0 bg-transparent{% endif %} py-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
|
||||
<div>
|
||||
<span class="fs-6" data-bs-toggle="tooltip" data-bs-title="{{ answer.creation_date.strftime("%B %d, %Y %H:%M") }}">{{ formatRelativeTime(str(answer.creation_date)) }}</span>
|
||||
{% if question.pinned %}
|
||||
<span class="ms-1"><i class="bi bi-pin"></i> <span class="fw-medium">Pinned</span></span>
|
||||
<span class="ms-1"><i class="bi bi-pin"></i> <span class="fw-medium">{{ _('Pinned') }}</span></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
{% if showViewQuestionBtn %}
|
||||
<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="View question" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
|
||||
<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ _('View question') }}" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
|
||||
{% endif %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share question"><i class="bi bi-share"></i></button>
|
||||
<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ _('Share question') }}"><i class="bi bi-share"></i></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> Copy to clipboard</button></li>
|
||||
<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> {{ _('Copy to clipboard') }}</button></li>
|
||||
<li>
|
||||
<button class="dropdown-item d-flex align-items-center gap-1" data-bs-toggle="modal" data-q-id="{{ question.id }}" data-bs-target="#question-modal">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 64 64" class="me-1">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue