Skip to content

Commit 927fab9

Browse files
herzog0herzog0
committed
fix: remove non-v3 sections of the component and fix layout
1 parent a134227 commit 927fab9

File tree

2 files changed

+83
-74
lines changed

2 files changed

+83
-74
lines changed

‎static/css/v3/create-post-page.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
/**
22
* Create post page layout (Django).
3-
* BEM: .create-post-wrapper, .create-post-page, .create-post-page__*
43
*/
54

5+
.create-post-section {
6+
width: 100%;
7+
display: flex;
8+
justify-content: center;
9+
margin-top: 40px;
10+
margin-bottom: 80px;
11+
}
12+
613
.create-post-wrapper {
714
width: 100%;
815
max-width: 694px;
@@ -74,6 +81,10 @@
7481
}
7582

7683
@media (max-width: 767px) {
84+
.create-post-section {
85+
margin-top: 32px;
86+
margin-bottom: 64px;
87+
}
7788
.create-post-page__actions {
7889
flex-direction: column;
7990
}

‎templates/news/create_v3.html‎

Lines changed: 71 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -12,93 +12,91 @@
1212
{% endblock %}
1313

1414
{% block content %}
15-
<div class="py-0 px-3 mb-3 md:py-6 md:px-0">
16-
<div class="mx-auto w-full" style="display: flex; justify-content: center;">
17-
<noscript>
18-
<style>
19-
.create-post-page__content-field,
20-
.create-post-page__link-fields { display: none !important; }
21-
.create-post-page__card:has(select[name="post_type"] option[value="blog"]:checked) .create-post-page__content-field,
22-
.create-post-page__card:has(select[name="post_type"] option[value="news"]:checked) .create-post-page__content-field { display: flex !important; }
23-
.create-post-page__card:has(select[name="post_type"] option[value="video"]:checked) .create-post-page__link-fields,
24-
.create-post-page__card:has(select[name="post_type"] option[value="link"]:checked) .create-post-page__link-fields { display: flex !important; flex-direction: column; gap: var(--space-xlarge, 24px); }
25-
</style>
26-
</noscript>
27-
<div class="create-post-wrapper" x-data="createPostForm()" @field-change="handleFieldChange($event)">
28-
<form
29-
class="create-post-page"
30-
enctype="multipart/form-data"
31-
method="post"
32-
:novalidate="true"
33-
action="{{ blogpost_create_url }}"
34-
:action="formAction"
35-
@submit="prepareSubmit"
36-
data-create-post-form
37-
>
38-
{% csrf_token %}
39-
40-
<div class="create-post-page__header">
41-
<h1 class="create-post-page__title">Create Post</h1>
42-
<p class="create-post-page__subtitle">
43-
Posts will be reviewed by the moderation team before they appear in the feed.
44-
</p>
45-
</div>
46-
47-
<div class="create-post-page__card">
48-
{% comment %} Post Type dropdown: Blog, News, Video, Link. Placeholder "Select Post Type". Controls conditional fields. {% endcomment %}
49-
{% include "v3/includes/_field_dropdown.html" with name="post_type" label="Post type *" options=post_type_options placeholder="Select Post Type" required=True %}
50-
<p class="field__error" id="post-type-error" role="alert" x-show="errors.post_type" x-text="errors.post_type" x-cloak></p>
51-
52-
<div class="field" :class="{ 'field--error': errors.title }">
53-
<label class="field__label" for="field-title">Post title *</label>
54-
<div class="field__control">
55-
<input class="field__input" type="text" id="field-title" name="title" placeholder="Title" required
56-
:aria-invalid="!!errors.title"
57-
:aria-describedby="errors.title ? 'field-title-error' : null">
58-
59-
</div>
60-
<p class="field__error" id="field-title-error" role="alert" x-show="errors.title" x-text="errors.title" x-cloak aria-live="polite"></p>
15+
<div class="create-post-section">
16+
<noscript>
17+
<style>
18+
.create-post-page__content-field,
19+
.create-post-page__link-fields { display: none !important; }
20+
.create-post-page__card:has(select[name="post_type"] option[value="blog"]:checked) .create-post-page__content-field,
21+
.create-post-page__card:has(select[name="post_type"] option[value="news"]:checked) .create-post-page__content-field { display: flex !important; }
22+
.create-post-page__card:has(select[name="post_type"] option[value="video"]:checked) .create-post-page__link-fields,
23+
.create-post-page__card:has(select[name="post_type"] option[value="link"]:checked) .create-post-page__link-fields { display: flex !important; flex-direction: column; gap: var(--space-xlarge, 24px); }
24+
</style>
25+
</noscript>
26+
<div class="create-post-wrapper" x-data="createPostForm()" @field-change="handleFieldChange($event)">
27+
<form
28+
class="create-post-page"
29+
enctype="multipart/form-data"
30+
method="post"
31+
:novalidate="true"
32+
action="{{ blogpost_create_url }}"
33+
:action="formAction"
34+
@submit="prepareSubmit"
35+
data-create-post-form
36+
>
37+
{% csrf_token %}
38+
39+
<div class="create-post-page__header">
40+
<h1 class="create-post-page__title">Create Post</h1>
41+
<p class="create-post-page__subtitle">
42+
Posts will be reviewed by the moderation team before they appear in the feed.
43+
</p>
6144
</div>
6245

63-
{% comment %} Write Up (Blog, News): Content required. WYSIWYG editor (Markdown). {% endcomment %}
64-
<div class="field create-post-page__content-field" x-show="isWriteUp" :class="{ 'field--error': errors.content }">
65-
<label class="field__label" for="field-content">Content *</label>
66-
{% include "v3/includes/_wysiwyg_editor.html" with textarea_id="field-content" textarea_name="content" label="Content" %}
67-
<p class="field__error" id="field-content-error" role="alert" x-show="errors.content" x-text="errors.content" x-cloak aria-live="polite"></p>
68-
<p class="field__help" id="field-content-help" x-show="!errors.content">This editor supports Markdown: headings, lists, code blocks, links, and more.</p>
69-
</div>
46+
<div class="create-post-page__card">
47+
{% comment %} Post Type dropdown: Blog, News, Video, Link. Placeholder "Select Post Type". Controls conditional fields. {% endcomment %}
48+
{% include "v3/includes/_field_dropdown.html" with name="post_type" label="Post type *" options=post_type_options placeholder="Select Post Type" required=True %}
49+
<p class="field__error" id="post-type-error" role="alert" x-show="errors.post_type" x-text="errors.post_type" x-cloak></p>
7050

71-
{% comment %} Link (Video, Link): Link (required) and Description (optional). {% endcomment %}
72-
<div class="create-post-page__link-fields" x-show="isLinkType" x-cloak>
73-
<div class="field" :class="{ 'field--error': errors.external_url }">
74-
<label class="field__label" for="field-external_url">Link *</label>
51+
<div class="field" :class="{ 'field--error': errors.title }">
52+
<label class="field__label" for="field-title">Post title *</label>
7553
<div class="field__control">
76-
<input class="field__input" type="url" id="field-external_url" name="external_url" placeholder="https://..."
77-
:aria-invalid="!!errors.external_url"
78-
:aria-describedby="errors.external_url ? 'field-external_url-error' : null">
54+
<input class="field__input" type="text" id="field-title" name="title" placeholder="Title" required
55+
:aria-invalid="!!errors.title"
56+
:aria-describedby="errors.title ? 'field-title-error' : null">
57+
7958
</div>
80-
<p class="field__error" id="field-external_url-error" role="alert" x-show="errors.external_url" x-text="errors.external_url" x-cloak aria-live="polite"></p>
59+
<p class="field__error" id="field-title-error" role="alert" x-show="errors.title" x-text="errors.title" x-cloak aria-live="polite"></p>
60+
</div>
61+
62+
{% comment %} Write Up (Blog, News): Content required. WYSIWYG editor (Markdown). {% endcomment %}
63+
<div class="field create-post-page__content-field" x-show="isWriteUp" :class="{ 'field--error': errors.content }">
64+
<label class="field__label" for="field-content">Content *</label>
65+
{% include "v3/includes/_wysiwyg_editor.html" with textarea_id="field-content" textarea_name="content" label="Content" %}
66+
<p class="field__error" id="field-content-error" role="alert" x-show="errors.content" x-text="errors.content" x-cloak aria-live="polite"></p>
67+
<p class="field__help" id="field-content-help" x-show="!errors.content">This editor supports Markdown: headings, lists, code blocks, links, and more.</p>
68+
</div>
69+
70+
{% comment %} Link (Video, Link): Link (required) and Description (optional). {% endcomment %}
71+
<div class="create-post-page__link-fields" x-show="isLinkType" x-cloak>
72+
<div class="field" :class="{ 'field--error': errors.external_url }">
73+
<label class="field__label" for="field-external_url">Link *</label>
74+
<div class="field__control">
75+
<input class="field__input" type="url" id="field-external_url" name="external_url" placeholder="https://..."
76+
:aria-invalid="!!errors.external_url"
77+
:aria-describedby="errors.external_url ? 'field-external_url-error' : null">
78+
</div>
79+
<p class="field__error" id="field-external_url-error" role="alert" x-show="errors.external_url" x-text="errors.external_url" x-cloak aria-live="polite"></p>
80+
</div>
81+
{% include "v3/includes/_field_textarea.html" with name="content_link" label="Description" placeholder="Optional description" rows=3 %}
8182
</div>
82-
{% include "v3/includes/_field_textarea.html" with name="content_link" label="Description" placeholder="Optional description" rows=3 %}
83-
</div>
8483

85-
{% include "v3/includes/_field_file.html" with name="image" label="Image" accept="image/png,image/jpeg" preview=True alpine_error="errors.image" error=form.errors.image.0 help_text="This should be a PNG or JPEG format and no longer than 5MB" extra_class="field--file-narrow create-post-page__field-image" %}
84+
{% include "v3/includes/_field_file.html" with name="image" label="Image" accept="image/png,image/jpeg" preview=True alpine_error="errors.image" error=form.errors.image.0 help_text="This should be a PNG or JPEG format and no longer than 5MB" extra_class="field--file-narrow create-post-page__field-image" %}
8685

87-
{% include "v3/includes/_field_dropdown.html" with name="related_libraries" label="Related Libraries" options=related_libraries_options placeholder="Select" %}
86+
{% include "v3/includes/_field_dropdown.html" with name="related_libraries" label="Related Libraries" options=related_libraries_options placeholder="Select" %}
8887

89-
{% include "v3/includes/_field_text.html" with name="publish_at" label="Publish Date" type="datetime-local" value=publish_at_initial %}
88+
{% include "v3/includes/_field_text.html" with name="publish_at" label="Publish Date" type="datetime-local" value=publish_at_initial %}
9089

91-
<div class="create-post-page__actions">
92-
<a href="{% url 'news' %}" class="btn btn-secondary">Cancel</a>
93-
<button type="submit" class="btn btn-primary">Submit</button>
90+
<div class="create-post-page__actions">
91+
<a href="{% url 'news' %}" class="btn btn-secondary">Cancel</a>
92+
<button type="submit" class="btn btn-primary">Submit</button>
93+
</div>
9494
</div>
95-
</div>
96-
</form>
97-
</div>
95+
</form>
9896
</div>
9997
</div>
10098

101-
<script>
99+
<script>
102100
document.addEventListener('alpine:init', () => {
103101
const createUrls = {
104102
blog: '{{ blogpost_create_url }}',

0 commit comments

Comments
 (0)