QoL update
This commit is contained in:
@@ -2,6 +2,10 @@
|
||||
|
||||
{% block title %}New Blog Post{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Hero -->
|
||||
@@ -12,21 +16,21 @@
|
||||
|
||||
<!-- Form -->
|
||||
<section class="py-16 bg-black text-white">
|
||||
<div class="max-w-3xl mx-auto px-6 max-h-[85vh] overflow-y-auto">
|
||||
<div class="max-w-3xl mx-auto px-6">
|
||||
<form action="{{ url_for('new_blog') }}" method="post" enctype="multipart/form-data" class="space-y-6">
|
||||
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label for="title" class="block font-semibold mb-1">Post Title</label>
|
||||
<input type="text" id="title" name="title" required
|
||||
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div>
|
||||
<label for="content" class="block font-semibold mb-1">Post Content</label>
|
||||
<textarea id="content" name="content" required
|
||||
class="text-black w-full border border-gray-300 rounded px-4 py-2 leading-relaxed text-base focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none overflow-hidden"
|
||||
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 leading-relaxed text-base focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none overflow-hidden"
|
||||
rows="1"></textarea>
|
||||
</div>
|
||||
|
||||
@@ -34,14 +38,14 @@
|
||||
<div>
|
||||
<label for="category" class="block font-semibold mb-1">Category</label>
|
||||
<input type="text" id="category" name="category" placeholder="What's This Post About?"
|
||||
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div>
|
||||
<label for="tags" class="block font-semibold mb-1">Tags (comma-separated)</label>
|
||||
<input type="text" id="tags" name="tags" placeholder="e.g., Flask, SQLite, API"
|
||||
class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
||||
</div>
|
||||
|
||||
<!-- Images -->
|
||||
@@ -52,10 +56,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="pt-4">
|
||||
<button type="submit"
|
||||
<div class="pt-4 flex gap-3">
|
||||
<button type="submit" name="action" value="draft"
|
||||
class="bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-500 transition">
|
||||
Save as Draft
|
||||
</button>
|
||||
<button type="submit" name="action" value="publish"
|
||||
class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
|
||||
Submit Post
|
||||
Publish Post
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -67,18 +75,13 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Textarea autoresize -->
|
||||
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const textarea = document.getElementById('content');
|
||||
if (textarea) {
|
||||
const resize = () => {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = textarea.scrollHeight + 'px';
|
||||
};
|
||||
resize(); // Initial sizing
|
||||
textarea.addEventListener('input', resize);
|
||||
}
|
||||
new EasyMDE({
|
||||
element: document.getElementById('content'),
|
||||
spellChecker: false,
|
||||
autosave: { enabled: true, uniqueId: 'new_blog' },
|
||||
toolbar: ['bold','italic','heading','|','quote','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide'],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user