Redesign social scheduler as inline-edit card grid
- 3-col grid (col-xl-4 col-md-6) replacing left/right split layout - First card is always the "new post" composer in edit state - Clicking a post card (or its pencil icon) opens inline editing on that card - Multiple cards can be in edit state simultaneously - Autosave for existing posts (debounced 2s) with saving/saved/error indicator - Post cards show: datetime + status (top left), action icons (top right), text body, image (centered, max-height = card width), platform badges - Image max-height constrained to card width via JS after render - Emoji picker moved to shared fixed floating panel - Per-card error display; no global form state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
1c43c6c432
commit
e52f90445b
3 changed files with 424 additions and 365 deletions
143
views/social.php
143
views/social.php
|
|
@ -3,115 +3,42 @@ $page_title = 'Social';
|
|||
$nav_active = 'social';
|
||||
include ROOT . '/views/_header.php';
|
||||
?>
|
||||
<h2 class="h4 mb-4"><i class="bi bi-calendar-week me-2"></i>Social Scheduler</h2>
|
||||
|
||||
<div class="row g-4" id="socialPage">
|
||||
|
||||
<!-- ── LEFT: Compose form ─────────────────────────────────────────── -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card" id="socialFormCard" style="position:sticky;top:1rem">
|
||||
<div class="card-header d-flex align-items-center gap-2">
|
||||
<span id="socialFormTitle">Schedule a post</span>
|
||||
<button class="btn btn-xs btn-outline-secondary ms-auto d-none" id="socialCancelEditBtn">
|
||||
<i class="bi bi-x-lg me-1"></i>Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="hidden" id="socialEditId">
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<label class="form-label small mb-0">Content</label>
|
||||
<div class="ms-auto dropdown">
|
||||
<button type="button" class="btn btn-xs btn-outline-secondary" id="socialEmojiBtn"
|
||||
data-bs-toggle="dropdown" data-bs-auto-close="outside" title="Insert emoji">
|
||||
😊
|
||||
</button>
|
||||
<div class="dropdown-menu p-2 social-emoji-picker" aria-labelledby="socialEmojiBtn">
|
||||
<div class="social-emoji-grid">
|
||||
<div class="social-emoji-cat">Smileys</div>
|
||||
<div>😀 😂 🥰 😍 🤩 😎 😭 😤 🤔 😴 🥳 🤗 😅 🫡 😇 🙃 😘 😣 😝 🥺 👀</div>
|
||||
<div class="social-emoji-cat mt-1">Gestures</div>
|
||||
<div>👍 👎 👏 🙌 🤝 ✌️ 👌 🤞 🫶 💪 🎉 🔥 ✨ ⭐ 💯 🙏 👋 🤷♀️</div>
|
||||
<div class="social-emoji-cat mt-1">Hearts</div>
|
||||
<div>❤️ 🧡 💛 💚 💙 💜 🖤 🤍 💔 💕 💞 💓 💗 💖 🫀 ♥️</div>
|
||||
<div class="social-emoji-cat mt-1">Nature</div>
|
||||
<div>🌟 🌈 🌸 🌺 🌻 🌙 ☀️ 🌊 🌿 🍀 🦋 🌍 🌱 🎄 🌴 🌵</div>
|
||||
<div class="social-emoji-cat mt-1">Objects</div>
|
||||
<div>💻 📱 📸 🎵 🎮 🎨 📚 🏆 🔑 💡 🔔 📢 🎯 📊 🚀 🎁</div>
|
||||
<div class="social-emoji-cat mt-1">Symbols</div>
|
||||
<div>✅ ❌ ⚡ 🔗 💬 📌 🔍 💰 ⏰ 📅 🗓️ ➡️ ⬆️ 🔄 💤 ❓</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="socialContent" class="form-control form-control-sm font-monospace"
|
||||
rows="7" placeholder="What's on your mind?"></textarea>
|
||||
<div class="d-flex justify-content-end mt-1">
|
||||
<span id="socialCharCount" class="small text-muted">0 / 500</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Schedule for</label>
|
||||
<input type="datetime-local" id="socialScheduledAt" class="form-control form-control-sm">
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="small">Image <span class="text-muted">(optional)</span></span>
|
||||
<div class="ms-auto d-flex gap-1">
|
||||
<button type="button" class="btn btn-xs btn-outline-secondary" id="socialUploadBtn">
|
||||
<i class="bi bi-image me-1"></i>Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-xs btn-outline-danger d-none" id="socialRemoveImageBtn">
|
||||
<i class="bi bi-x"></i> Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="socialImageInput" accept="image/jpeg,image/png,image/gif,image/webp" class="d-none">
|
||||
<input type="hidden" id="socialImagePath">
|
||||
<div id="socialImagePreview" class="d-none">
|
||||
<img id="socialImageThumb" src="" alt="" class="img-fluid rounded border" style="max-height:140px;object-fit:contain">
|
||||
<div class="text-muted small mt-1" id="socialImageNote">Toggle per-platform below</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform targets -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label small">Platforms</label>
|
||||
<div id="socialTargets">
|
||||
<div class="text-muted small">Loading…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="socialFormError" class="alert alert-danger py-2 small d-none mb-3"></div>
|
||||
|
||||
<button type="button" class="btn btn-primary w-100" id="socialSubmitBtn">
|
||||
<i class="bi bi-calendar-plus me-1"></i>Schedule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-4 gap-2">
|
||||
<h2 class="h4 mb-0"><i class="bi bi-calendar-week me-2"></i>Social Scheduler</h2>
|
||||
<div class="ms-auto btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-secondary active" id="socialFilterPending">Pending</button>
|
||||
<button class="btn btn-outline-secondary" id="socialFilterAll">All</button>
|
||||
</div>
|
||||
|
||||
<!-- ── RIGHT: Post list ───────────────────────────────────────────── -->
|
||||
<div class="col-lg-8">
|
||||
<div class="d-flex align-items-center mb-3 gap-2">
|
||||
<h5 class="mb-0">Posts</h5>
|
||||
<div class="ms-auto btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-secondary active" id="socialFilterPending">Pending</button>
|
||||
<button class="btn btn-outline-secondary" id="socialFilterAll">All</button>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="socialRefreshBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="socialPostsList">
|
||||
<div class="text-muted small">Loading…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary" id="socialRefreshBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="socialPage">
|
||||
<div id="socialPostsGrid" class="row g-3">
|
||||
<div class="col-12 text-center text-muted py-5 small">Loading…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global floating emoji picker -->
|
||||
<div id="socialEmojiPanel" class="social-emoji-panel card shadow d-none">
|
||||
<div class="card-body p-2 social-emoji-grid">
|
||||
<div class="social-emoji-cat">Smileys</div>
|
||||
<div>😀 😂 🥰 😍 🤩 😎 😭 😤 🤔 😴 🥳 🤗 😅 🫡 😇 🙃 😘 😣 😝 🥺 👀</div>
|
||||
<div class="social-emoji-cat mt-1">Gestures</div>
|
||||
<div>👍 👎 👏 🙌 🤝 ✌️ 👌 🤞 🫶 💪 🎉 🔥 ✨ ⭐ 💯 🙏 👋 🤷♀️</div>
|
||||
<div class="social-emoji-cat mt-1">Hearts</div>
|
||||
<div>❤️ 🧡 💛 💚 💙 💜 🖤 🤍 💔 💕 💞 💓 💗 💖 🫀 ♥️</div>
|
||||
<div class="social-emoji-cat mt-1">Nature</div>
|
||||
<div>🌟 🌈 🌸 🌺 🌻 🌙 ☀️ 🌊 🌿 🍀 🦋 🌍 🌱 🎄 🌴 🌵</div>
|
||||
<div class="social-emoji-cat mt-1">Objects</div>
|
||||
<div>💻 📱 📸 🎵 🎮 🎨 📚 🏆 🔑 💡 🔔 📢 🎯 📊 🚀 🎁</div>
|
||||
<div class="social-emoji-cat mt-1">Symbols</div>
|
||||
<div>✅ ❌ ⚡ 🔗 💬 📌 🔍 💰 ⏰ 📅 🗓️ ➡️ ⬆️ 🔄 💤 ❓</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared hidden file input for image uploads -->
|
||||
<input type="file" id="socialImageInput" accept="image/jpeg,image/png,image/gif,image/webp" class="d-none">
|
||||
|
||||
<?php include ROOT . '/views/_footer.php'; ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue