boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-02-26 17:22:09 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #73 from revsys/forum-issues

Browse Source 
🎨 styles and toggles for forum forms
This commit is contained in:
Greg Newman
2022-12-16 10:28:46 -05:00
committed by GitHub
parent f159a5084f ccd7a0f9ed
commit 9bbaa57857
15 changed files with 294 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/styles.css
View File

@@ -1,12 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
color: white;
}
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
@layer base {
body {
color: white;
@apply font-cairo;
}
h1 {
@apply text-6xl;
@apply mb-3;
@@ -34,4 +35,10 @@ body {
textarea {
@apply w-full rounded bg-charcoal border border-slate;
}
input[type=checkbox] {
@apply mr-3 rounded bg-charcoal border border-slate text-orange;
}
input[type=file] {
@apply block w-full px-3 py-1 text-base font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
}
}

115
static/css/styles.css
View File

@@ -582,6 +582,11 @@ select {
outline: 1px auto -webkit-focus-ring-color;
}
body {
color: white;
font-family: 'Cairo', sans-serif;
}
h1 {
font-size: 3.75rem;
line-height: 1;
@@ -631,6 +636,45 @@ textarea {
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
}
input[type=checkbox] {
margin-right: 0.75rem;
border-radius: 0.25rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(49 74 87 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(23 42 52 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 159 0 / var(--tw-text-opacity));
}
input[type=file] {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
display: block;
width: 100%;
border-radius: 0.25rem;
border-width: 1px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(49 74 87 / var(--tw-border-opacity));
background-clip: padding-box;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
--tw-text-opacity: 1;
color: rgb(255 159 0 / var(--tw-text-opacity));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -1109,6 +1153,10 @@ textarea {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-\[15px\] {
height: 15px;
}
@@ -1157,6 +1205,10 @@ textarea {
width: 33.333333%;
}
.w-5 {
width: 1.25rem;
}
.w-1\/5 {
width: 20%;
}
@@ -1177,6 +1229,10 @@ textarea {
flex: 1 1 auto;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.table-auto {
table-layout: auto;
}
@@ -1219,6 +1275,10 @@ textarea {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
@@ -1297,24 +1357,30 @@ textarea {
margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1384,6 +1450,10 @@ textarea {
border-right-width: 1px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-orange {
--tw-border-opacity: 1;
border-color: rgb(255 159 0 / var(--tw-border-opacity));
@@ -1404,6 +1474,10 @@ textarea {
border-color: rgb(23 42 52 / var(--tw-border-opacity));
}
.border-slate\/60 {
border-color: rgb(49 74 87 / 0.6);
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(5 26 38 / var(--tw-bg-opacity));
@@ -1418,6 +1492,10 @@ textarea {
background-color: rgb(90 213 153 / 0.1);
}
.bg-charcoal\/60 {
background-color: rgb(23 42 52 / 0.6);
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@@ -1553,6 +1631,19 @@ textarea {
padding-right: 40px;
}
.px-11 {
padding-left: 2.75rem;
padding-right: 2.75rem;
}
.pl-11 {
padding-left: 2.75rem;
}
.pr-11 {
padding-right: 2.75rem;
}
.pr-2 {
padding-right: 0.5rem;
}
@@ -1641,10 +1732,6 @@ textarea {
padding-left: 1.25rem;
}
.pr-11 {
padding-right: 2.75rem;
}
.pt-5 {
padding-top: 1.25rem;
}
@@ -1653,6 +1740,10 @@ textarea {
padding-top: 0px;
}
.pb-4 {
padding-bottom: 1rem;
}
.text-left {
text-align: left;
}
@@ -1793,10 +1884,6 @@ textarea {
transition-duration: 150ms;
}
body {
color: white;
}
.last\:border-0:last-child {
border-width: 0px;
}

1
templates/base.html
View File

@@ -15,7 +15,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@500;600&display=swap" rel="stylesheet">
{% block extra_head %}{% endblock %}
<style>

33
templates/board_base.html
View File

@@ -13,6 +13,7 @@
{% block forum_body %}
{# commented out because it's not in the designs #}
{#{% block header %}#}
{#<nav class="navbar navbar-expand-lg navbar-dark bg-primary">#}
{# <a class="navbar-brand" href="{% url 'forum:index' %}">{% block brand %}{{ MACHINA_FORUM_NAME|default:"My forum" }}{% endblock %}</a>#}
@@ -34,23 +35,21 @@
{#{% endblock header %}#}
<div class="my-5 container" id="main_container">
<div>
<div class="flex w-full">
<div class="w-1/2">
{% block breadcrumb %}{% include "partials/breadcrumb.html" %}{% endblock breadcrumb %}
</div>
<div class="w-1/2 text-right controls-link-wrapper">
{% spaceless %}
{% if not request.user.is_anonymous %}
<a href="{% url 'forum_member:user_subscriptions' %}" class="uppercase text-sm"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
<a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
{% endif %}
{% get_permission 'can_access_moderation_queue' request.user as can_access_moderation_queue %}
{% if can_access_moderation_queue %}
<a href="{% url 'forum_moderation:queue' %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
{% endif %}
{% endspaceless %}
</div>
<div class="flex w-full">
<div class="w-1/2 pl-11">
{% block breadcrumb %}{% include "partials/breadcrumb.html" %}{% endblock breadcrumb %}
</div>
<div class="w-1/2 text-right controls-link-wrapper pr-11">
{% spaceless %}
{% if not request.user.is_anonymous %}
<a href="{% url 'forum_member:user_subscriptions' %}" class="uppercase text-sm"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
<a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
{% endif %}
{% get_permission 'can_access_moderation_queue' request.user as can_access_moderation_queue %}
{% if can_access_moderation_queue %}
<a href="{% url 'forum_moderation:queue' %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
{% endif %}
{% endspaceless %}
</div>
</div>
<div class="flex">

10
templates/forum_conversation/forum_attachments/attachment_formset.html
View File

@@ -2,9 +2,9 @@
{{ attachment_formset.management_form }}
{% for form in attachment_formset.forms %}
<div class="attachment-form row">
<div class="attachment-form w-full space-y-3 mb-4">
{% for field in form.visible_fields %}
<div class="col-md-4">
<div class="my-5">
{% if forloop.first %}
{{ form.id }}
{% endif %}
@@ -16,7 +16,7 @@
{% endfor %}
{% endif %}
{% if field.name == 'DELETE' %}
<div class="checkbox">
<div class="checkbox mt-3">
<label for="{{ field.auto_id }}">
{{ field }}
{{ field.label }}
@@ -38,4 +38,6 @@
{% endfor %}
</div>
{% endfor %}
<a href="#" id="add_more_attachment" class="btn btn-sm btn-info"><i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add another file" %}</a>
<a href="#" id="add_more_attachment" class="border-slate border py-3 px-4 text-orange my-5 text-xs rounded uppercase">
<i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add another file" %}
</a>

4
templates/forum_conversation/forum_attachments/attachments_detail.html
View File

@@ -3,12 +3,12 @@
{% get_permission 'can_download_files' post.topic.forum request.user as user_can_download_files %}
{% if post.attachments.exists and user_can_download_files %}
<div class="row attachments">
<div class="w-full attachments space-y-4">
<div class="col-md-12">
<span class="text-muted attachments-title"><i class="fa fa-files-o"></i>&nbsp;{% trans "Attachments" %}</span>
</div>
{% for attachment in post.attachments.all %}
<div class="col-md-12 attachment">
<div class="w-full attachment">
<a href="{% url 'forum_conversation:attachment' pk=attachment.id %}"><i class="fa fa-file"></i>&nbsp;{{ attachment.filename }} ({{ attachment.file.size|filesizeformat }})</a>
{% if attachment.comment %}
<p class="text-muted"><em>{{ attachment.comment }}</em></p>

32
templates/forum_conversation/partials/post_form.html
View File

@@ -15,16 +15,28 @@
{% if post_form.update_reason %}
{% include "partials/form_field.html" with field=post_form.update_reason %}
{% endif %}
<!-- Sub "forms" tabs -->
{% if attachment_formset %}
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a href="#options" class="nav-link active" data-toggle="tab">{% trans "Options" %}</a></li>
<li class="nav-item"><a href="#attachments" class="nav-link" data-toggle="tab">{% trans "Attachments" %}</a></li>
</ul>
{% endif %}
<!-- Sub "forms" panes -->
<div class="tab-content">
<div class="tab-pane active" id="options">
<div class="tab-content" x-data="{ tab: '#options' }">
<!-- Sub "forms" tabs -->
{% if attachment_formset %}
<ul class="w-full flex flex-row justify-between">
<a href="#"
:class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
class="px-11 w-1/2 text-center active pb-4"
data-toggle="tab"
x-on:click.prevent="tab='#options'"
>{% trans "Options" %}</a>
<a href="#"
:class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
class="px-11 w-1/2 text-center pb-4"
data-toggle="tab"
x-on:click.prevent="tab='#attachments'"
>{% trans "Attachments" %}</a>
</ul>
{% endif %}
<div class="tab-pane active" id="options" x-show="tab == '#options'" x-cloak>
<div class="form-group">
<br />
<div class="w-full">
@@ -52,7 +64,7 @@
</div>
</div>
{% if attachment_formset %}
<div class="tab-pane" id="attachments">
<div class="tab-pane" id="attachments" x-show="tab == '#attachments'" x-cloak>
<div class="form-group">
<br />
<div class="row">

72
templates/forum_conversation/partials/topic_detail_actions.html
View File

@@ -12,31 +12,61 @@
{% get_permission 'can_update_topics_to_announces' topic.forum request.user as user_can_change_to_announces %}
{% if user_can_add_post %}
<a href="{% url 'forum_conversation:post_create' forum.slug forum.pk topic.slug topic.pk %}" class="rounded rounded-lg border border-1 border-orange text-orange uppercase text-sm py-2 px-4 mr-3"><img class="inline-block mr-3" src="{% static 'img/icons/icon_button-talk-bubble.svg' %}" />{% trans "Post reply" %}</a>
<a href="{% url 'forum_conversation:post_create' forum.slug forum.pk topic.slug topic.pk %}"
class="rounded rounded-lg border border-1 border-orange text-orange uppercase text-sm py-3 px-4"><img
class="inline-block" src="{% static 'img/icons/icon_button-talk-bubble.svg' %}"/>{% trans "Post reply" %}</a>
{% endif %}
{% if user_can_subscribe_to_topic %}
<a href="{% url 'forum_member:topic_subscribe' topic.pk %}" class="rounded rounded-lg border border-1 border-slate text-orange uppercase text-sm py-2 px-4"><img class="inline-block mr-3" src="{% static 'img/icons/icon_button-checkmark.svg' %}" />{% trans "Subscribe" %}</a>
<a href="{% url 'forum_member:topic_subscribe' topic.pk %}"
class="rounded rounded-lg border border-1 border-slate text-orange uppercase text-sm py-3 px-4"><img
class="inline-block" src="{% static 'img/icons/icon_button-checkmark.svg' %}"/>{% trans "Subscribe" %}</a>
{% elif user_can_unsubscribe_from_topic %}
<a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="btn btn-info btn-sm btn-subscription"><i class="fas fa-times">&nbsp;</i>{% trans "Unsubscribe" %}</a>
<a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="btn btn-info btn-sm btn-subscription"><i
class="fas fa-times">&nbsp;</i>{% trans "Unsubscribe" %}</a>
{% endif %}
{% if user_can_lock_topics and not topic.is_locked or user_can_move_topics or user_can_delete_topics %}
<div class="btn-group moderation-dropdown">
<button id="id_dropdown_moderation_menu_button" class="btn btn-warning btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-gavel">&nbsp;&nbsp;</i><span class="caret"></span></button>
<div class="dropdown-menu" aria-labelledby="id_dropdown_moderation_menu_button" style="min-width:13rem;">
{% if user_can_lock_topics and not topic.is_locked %}<a href="{% url 'forum_moderation:topic_lock' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Lock topic" %}</a>{% endif %}
{% if user_can_lock_topics and topic.is_locked %}<a href="{% url 'forum_moderation:topic_unlock' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Unlock topic" %}</a>{% endif %}
{% if user_can_delete_topics %}<a href="{% url 'forum_moderation:topic_delete' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Delete topic" %}</a>{% endif %}
{% if user_can_move_topics %}<a href="{% url 'forum_moderation:topic_move' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Move topic" %}</a>{% endif %}
{% if topic.is_topic %}
{% if user_can_change_to_sticky_topics %}<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
{% if user_can_change_to_announces %}<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
{% elif topic.is_sticky %}
{% if user_can_change_to_normal_topics %}<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
{% if user_can_change_to_announces %}<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
{% elif topic.is_announce %}
{% if user_can_change_to_normal_topics %}<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
{% if user_can_change_to_sticky_topics %}<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
{% endif %}
<div class="inline-block">
<button id="id_dropdown_moderation_menu_button" class="rounded rounded-lg border border-1 border-slate text-orange py-3 px-4" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="{% static 'img/icons/icon_button-gavel.svg' %}" />
</button>
{# TODO: This is hidden but needs to be displayed with x-show #}
<div class="dropdown-menu hidden" aria-labelledby="id_dropdown_moderation_menu_button" style="min-width:13rem;">
{% if user_can_lock_topics and not topic.is_locked %}
<a href="{% url 'forum_moderation:topic_lock' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Lock topic" %}</a>{% endif %}
{% if user_can_lock_topics and topic.is_locked %}
<a href="{% url 'forum_moderation:topic_unlock' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Unlock topic" %}</a>{% endif %}
{% if user_can_delete_topics %}<a href="{% url 'forum_moderation:topic_delete' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Delete topic" %}</a>{% endif %}
{% if user_can_move_topics %}<a href="{% url 'forum_moderation:topic_move' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Move topic" %}</a>{% endif %}
{% if topic.is_topic %}
{% if user_can_change_to_sticky_topics %}
<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
{% if user_can_change_to_announces %}
<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
{% elif topic.is_sticky %}
{% if user_can_change_to_normal_topics %}
<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
{% if user_can_change_to_announces %}
<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
{% elif topic.is_announce %}
{% if user_can_change_to_normal_topics %}
<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
{% if user_can_change_to_sticky_topics %}
<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}"
class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
{% endif %}
</div>
</div>
</div>
{% endif %}

57
templates/forum_conversation/partials/topic_form.html
View File

@@ -1,6 +1,6 @@
{% load i18n %}
<form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
<form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
{% for error in post_form.non_field_errors %}
<div class="alert alert-danger">
<i class="icon-exclamation-sign"></i> {{ error }}
@@ -16,25 +16,44 @@
{% include "partials/form_field.html" with field=post_form.update_reason %}
{% endif %}
<!-- Sub "forms" tabs -->
{% if poll_option_formset or attachment_formset %}
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a href="#options" class="nav-link active" data-toggle="tab">{% trans "Options" %}</a></li>
{% if poll_option_formset %}<li class="nav-item"><a href="#poll" class="nav-link" data-toggle="tab">{% trans "Poll" %}</a></li>{% endif %}
{% if attachment_formset %}<li class="nav-item"><a href="#attachments" class="nav-link" data-toggle="tab">{% trans "Attachments" %}</a></li>{% endif %}
</ul>
{% endif %}
<!-- Sub "forms" panes -->
<div class="tab-content">
<div class="tab-pane active" id="options">
<div class="tab-content" x-data="{ tab: '#options' }">
<!-- Sub "forms" tabs -->
{% if poll_option_formset or attachment_formset %}
<ul class="w-full flex flex-row justify-between">
<a href="#options"
:class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
class="px-11 w-1/2 text-center active pb-4"
data-toggle="tab"
x-on:click.prevent="tab='#options'"
>{% trans "Options" %}</a>
{% if poll_option_formset %}
<a href="#poll"
:class="tab === '#poll' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
class="px-11 w-1/2 text-center active pb-4"
data-toggle="tab"
x-on:click.prevent="tab='#poll'"
>{% trans "Poll" %}</a>
{% endif %}
{% if attachment_formset %}
<a href="#attachments"
:class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
class="px-11 w-1/2 text-center active pb-4"
data-toggle="tab"
x-on:click.prevent="tab='#attachments'"
>{% trans "Attachments" %}</a>
{% endif %}
</ul>
{% endif %}
<div class="tab-pane active" id="options" x-show="tab == '#options'" x-cloak>
<div class="form-group">
<br />
<div class="w-full">
<div class="w-full">
{% include "partials/form_field.html" with field=post_form.topic_type %}
{% with field=post_form.enable_signature %}
<div class="checkbox">
<div class="checkbox mt-3">
<label for="{{ field.auto_id }}">
{{ field }}
{{ field.label }}
@@ -56,12 +75,12 @@
</div>
</div>
{% if poll_option_formset %}
<div class="tab-pane" id="poll">
<div class="tab-pane" id="poll" x-show="tab == '#poll'" x-cloak>
<div class="form-group">
<br />
{% if poll_options_validated and poll_option_formset.non_form_errors %}<div class="alert alert-danger">{{ poll_option_formset.non_form_errors|striptags }}</div>{% endif %}
<div class="row">
<div class="col-md-6">
<div class="w-full flex space-x-4">
<div class="w-1/2 space-y-4">
{% include "partials/form_field.html" with field=post_form.poll_question %}
{% include "partials/form_field.html" with field=post_form.poll_max_options %}
{% include "partials/form_field.html" with field=post_form.poll_duration %}
@@ -74,7 +93,7 @@
</div>
</div>
</div>
<div id="poll_formset" class="col-md-6">
<div id="poll_formset" class="w-1/2 space-y-4">
{% include "forum_conversation/forum_polls/poll_option_formset.html" %}
</div>
</div>
@@ -82,7 +101,7 @@
</div>
{% endif %}
{% if attachment_formset %}
<div class="tab-pane" id="attachments">
<div class="tab-pane" id="attachments" x-show="tab == '#attachments'" x-cloak>
<div class="form-group">
<br />
<div class="row">
@@ -95,7 +114,7 @@
{% endif %}
</div>
<div class="form-actions my-5">
<div class="form-actions pt-6">
<input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
<input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
</div>

6
templates/forum_conversation/post_create.html
View File

@@ -15,15 +15,15 @@
{% include "forum_conversation/post_preview.html" %}
{% endif %}
<div>
<div class="w-full bg-charcoal border border-1 border-slate rounded">
<div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
<div class="card post-edit">
<div class="card-header border-b border-slate px-4 py-2">
<h3 class="m-0 h5 card-title text-base">{% trans "Post a reply" %}</h3>
</div>
<div class="card-body p-4">
<form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
<form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
{% include "forum_conversation/partials/post_form.html" %}
<div class="form-actions my-5">
<div class="form-actions pt-6">
<input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
<input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
</div>

10
templates/forum_conversation/post_update.html
View File

@@ -13,13 +13,13 @@
{% if preview %}
{% include "forum_conversation/post_preview.html" %}
{% endif %}
<div class="row">
<div class="col-12">
<div>
<div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
<div class="card post-edit">
<div class="card-header">
<h3 class="m-0 h5 card-title">{% trans "Edit post" %}</h3>
<div class="card-header border-b border-slate px-4 py-2">
<h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
</div>
<div class="card-body">
<div class="card-body p-4">
<form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
{% include "forum_conversation/partials/post_form.html" %}
<div class="form-actions">

2
templates/forum_conversation/topic_create.html
View File

@@ -17,7 +17,7 @@
{% include "forum_conversation/post_preview.html" %}
{% endif %}
<div class="w-full">
<div class="w-full bg-charcoal border border-1 border-slate rounded">
<div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
<div class="card post-edit">
<div class="card-header border-b border-slate px-4 py-2">
<h3 class="m-0 h5 card-title text-base">{% trans "Post a new topic" %}</h3>

10
templates/forum_conversation/topic_detail.html
View File

@@ -9,7 +9,7 @@
{% block content %}
<div class="w-full mb-8"><h1>{{ topic.subject }}</h1></div>
<div class="w-full">
<div class="topic-actions-block">
<div class="items-center inline-flex space-x-3">
{% include "forum_conversation/partials/topic_detail_actions.html" %}
</div>
<div class="pagination-block">
@@ -27,7 +27,7 @@
<div id="{{ post.id }}" class="my-3 card post">
<div class="card-body">
<div class="flex space-x-4 bg-charcoal border border-1 border-slate rounded p-6">
<div class="w-3/4 post-content-wrapper">
<div class="w-5/6 post-content-wrapper">
<div class="float-right post-controls ">
{% get_permission 'can_edit_post' post request.user as user_can_edit_post %}
{% if user_can_edit_post %}
@@ -84,14 +84,14 @@
</div>
{% endif %}
</div>
<div class="w-1/4 d-none d-md-block post-sidebar">
<div class="w-1/6 d-none d-md-block post-sidebar text-sm">
{% if post.poster %}
<div class="avatar">
<a href="{% url 'forum_member:profile' post.poster_id %}">
{% include "partials/avatar.html" with profile=post.poster.forum_profile show_placeholder=True %}
</a>
</div>
<div class="username"><a href="{% url 'forum_member:profile' post.poster_id %}"><b>{{ post.poster|forum_member_display_name }}</b></a></div>
<div class="username"><a class="text-orange" href="{% url 'forum_member:profile' post.poster_id %}"><b>{{ post.poster|forum_member_display_name }}</b></a></div>
<div class="posts-count text-muted"><b>{% trans "Posts:" %}</b>&nbsp;{{ post.poster.forum_profile.posts_count }}</div>
{% else %}
<div class="username"><b>{{ post.username }}</b></div>
@@ -105,7 +105,7 @@
</div>
</div>
<div class="w-full mt-11">
<div class="w-1/2 topic-actions-block">
<div class="w-1/2 items-center inline-flex space-x-3">
{% include "forum_conversation/partials/topic_detail_actions.html" %}
</div>
<div class="w-full">

10
templates/forum_conversation/topic_update.html
View File

@@ -16,13 +16,13 @@
{% if preview %}
{% include "forum_conversation/post_preview.html" %}
{% endif %}
<div class="row">
<div class="col-12">
<div>
<div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
<div class="card post-edit">
<div class="card-header">
<h3 class="m-0 h5 card-title">{% trans "Edit post" %}</h3>
<div class="card-header border-b border-slate px-4 py-2">
<h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
</div>
<div class="card-body">
<div class="card-body p-4">
{% include "forum_conversation/partials/topic_form.html" %}
</div>
</div>

35
templates/partials/breadcrumb.html
View File

@@ -1,16 +1,37 @@
{% load i18n %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'forum:index' %}"><i class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
<ol class="inline-flex space-x-2 items-center">
<li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:index' %}"><i
class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
{% if forum %}
{% for ancestor in forum.get_ancestors %}
<li class="breadcrumb-item"><a href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a></li>
{% endfor %}
<li class="breadcrumb-item"><a href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
{% for ancestor in forum.get_ancestors %}
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
<li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
</li>
{% endfor %}
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
<li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
{% endif %}
{% if topic %}
<li class="breadcrumb-item"><a href="{% url 'forum_conversation:topic' forum.slug forum.id topic.slug topic.id %}">{{ topic.subject }}</a></li>
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
<li class="breadcrumb-item"><a
href="{% url 'forum_conversation:topic' forum.slug forum.id topic.slug topic.id %}">{{ topic.subject }}</a></li>
{% endif %}
</ol>
</nav>