fix(social): add social.css to index.html and clean up HTML formatting
- Add social.css to main index.html CSS includes - Remove redundant link tag from social.html - Clean up HTML formatting
This commit is contained in:
parent
a9dc598dd1
commit
43be86bad4
2 changed files with 294 additions and 110 deletions
|
|
@ -38,6 +38,7 @@
|
|||
<link rel="stylesheet" href="products/products.css" />
|
||||
<link rel="stylesheet" href="tickets/tickets.css" />
|
||||
<link rel="stylesheet" href="docs/docs.css" />
|
||||
<link rel="stylesheet" href="social/social.css" />
|
||||
|
||||
<!-- Local Libraries (no external CDN dependencies) -->
|
||||
<script src="js/vendor/htmx.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,82 @@
|
|||
<link rel="stylesheet" href="social/social.css" />
|
||||
|
||||
<div class="social-app">
|
||||
<div class="social-header">
|
||||
<div class="social-tabs">
|
||||
<button class="social-tab active" data-tab="feed" hx-get="/api/ui/social/feed" hx-target="#social-content" hx-swap="innerHTML">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
<button
|
||||
class="social-tab active"
|
||||
data-tab="feed"
|
||||
hx-get="/api/ui/social/feed"
|
||||
hx-target="#social-content"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
<span data-i18n="social-feed">Feed</span>
|
||||
</button>
|
||||
<button class="social-tab" data-tab="communities" hx-get="/api/ui/social/communities" hx-target="#social-content" hx-swap="innerHTML">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
<button
|
||||
class="social-tab"
|
||||
data-tab="communities"
|
||||
hx-get="/api/ui/social/communities"
|
||||
hx-target="#social-content"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<span data-i18n="social-communities">Communities</span>
|
||||
</button>
|
||||
<button class="social-tab" data-tab="announcements" hx-get="/api/ui/social/announcements" hx-target="#social-content" hx-swap="innerHTML">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
|
||||
<button
|
||||
class="social-tab"
|
||||
data-tab="announcements"
|
||||
hx-get="/api/ui/social/announcements"
|
||||
hx-target="#social-content"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"
|
||||
/>
|
||||
</svg>
|
||||
<span data-i18n="social-announcements">Announcements</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="social-actions">
|
||||
<button class="btn-new-post" onclick="showNewPostModal()">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
<span data-i18n="social-new-post">New Post</span>
|
||||
</button>
|
||||
|
|
@ -41,19 +87,34 @@
|
|||
<aside class="social-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<h3 data-i18n="social-my-communities">My Communities</h3>
|
||||
<div id="my-communities" hx-get="/api/ui/social/my-communities" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="my-communities"
|
||||
hx-get="/api/ui/social/my-communities"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h3 data-i18n="social-trending">Trending</h3>
|
||||
<div id="trending-topics" hx-get="/api/ui/social/trending" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="trending-topics"
|
||||
hx-get="/api/ui/social/trending"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h3 data-i18n="social-suggested">Suggested Communities</h3>
|
||||
<div id="suggested-communities" hx-get="/api/ui/social/suggested" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="suggested-communities"
|
||||
hx-get="/api/ui/social/suggested"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,32 +126,69 @@
|
|||
<div class="avatar-placeholder"></div>
|
||||
</div>
|
||||
<div class="composer-input" onclick="showNewPostModal()">
|
||||
<span data-i18n="social-whats-on-mind">What's on your mind?</span>
|
||||
<span data-i18n="social-whats-on-mind"
|
||||
>What's on your mind?</span
|
||||
>
|
||||
</div>
|
||||
<div class="composer-actions">
|
||||
<button class="composer-btn" title="Add image">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21 15 16 10 5 21"/>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="18"
|
||||
height="18"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||||
<polyline points="21 15 16 10 5 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="composer-btn" title="Add poll">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="20" x2="18" y2="10"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4"/>
|
||||
<line x1="6" y1="20" x2="6" y2="14"/>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="20" x2="18" y2="10" />
|
||||
<line x1="12" y1="20" x2="12" y2="4" />
|
||||
<line x1="6" y1="20" x2="6" y2="14" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="composer-btn" title="Send praise">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="social-content" hx-get="/api/ui/social/feed" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="social-content"
|
||||
hx-get="/api/ui/social/feed"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<span data-i18n="loading">Loading...</span>
|
||||
|
|
@ -101,13 +199,23 @@
|
|||
<aside class="social-right-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<h3 data-i18n="social-recent-activity">Recent Activity</h3>
|
||||
<div id="recent-activity" hx-get="/api/ui/social/activity" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="recent-activity"
|
||||
hx-get="/api/ui/social/activity"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h3 data-i18n="social-people">People to Follow</h3>
|
||||
<div id="people-suggestions" hx-get="/api/ui/social/people" hx-trigger="load" hx-swap="innerHTML">
|
||||
<div
|
||||
id="people-suggestions"
|
||||
hx-get="/api/ui/social/people"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="loading-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,49 +228,117 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 data-i18n="social-create-post">Create Post</h3>
|
||||
<button class="btn-close" onclick="closeNewPostModal()">×</button>
|
||||
<button class="btn-close" onclick="closeNewPostModal()">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form id="newPostForm" hx-post="/api/social/posts" hx-swap="none" hx-on::after-request="handlePostCreated(event)">
|
||||
<form
|
||||
id="newPostForm"
|
||||
hx-post="/api/social/posts"
|
||||
hx-swap="none"
|
||||
hx-on::after-request="handlePostCreated(event)"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<div class="post-author-row">
|
||||
<div class="avatar-placeholder"></div>
|
||||
<div class="author-info">
|
||||
<span class="author-name" id="currentUserName">User</span>
|
||||
<span class="author-name" id="currentUserName"
|
||||
>User</span
|
||||
>
|
||||
<select name="visibility" class="visibility-select">
|
||||
<option value="organization" data-i18n="social-org-only">Organization</option>
|
||||
<option value="community" data-i18n="social-community-only">Community Only</option>
|
||||
<option value="public" data-i18n="social-public">Public</option>
|
||||
<option
|
||||
value="organization"
|
||||
data-i18n="social-org-only"
|
||||
>
|
||||
Organization
|
||||
</option>
|
||||
<option
|
||||
value="community"
|
||||
data-i18n="social-community-only"
|
||||
>
|
||||
Community Only
|
||||
</option>
|
||||
<option value="public" data-i18n="social-public">
|
||||
Public
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<textarea name="content" class="post-textarea" placeholder="What's on your mind?" rows="5" required></textarea>
|
||||
<textarea
|
||||
name="content"
|
||||
class="post-textarea"
|
||||
placeholder="What's on your mind?"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<div class="post-attachments" id="postAttachments"></div>
|
||||
<div class="post-options">
|
||||
<select name="community_id" class="community-select">
|
||||
<option value="" data-i18n="social-no-community">No Community</option>
|
||||
<option value="" data-i18n="social-no-community">
|
||||
No Community
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="post-tools">
|
||||
<button type="button" class="tool-btn" title="Add image">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21 15 16 10 5 21"/>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="18"
|
||||
height="18"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||||
<polyline points="21 15 16 10 5 21" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="tool-btn" title="Add poll" onclick="togglePollCreator()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="20" x2="18" y2="10"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4"/>
|
||||
<line x1="6" y1="20" x2="6" y2="14"/>
|
||||
<button
|
||||
type="button"
|
||||
class="tool-btn"
|
||||
title="Add poll"
|
||||
onclick="togglePollCreator()"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="18" y1="20" x2="18" y2="10" />
|
||||
<line x1="12" y1="20" x2="12" y2="4" />
|
||||
<line x1="6" y1="20" x2="6" y2="14" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="tool-btn" title="Mention someone">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="4"/>
|
||||
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
|
||||
<button
|
||||
type="button"
|
||||
class="tool-btn"
|
||||
title="Mention someone"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path
|
||||
d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -175,70 +351,77 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
"use strict";
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function showNewPostModal() {
|
||||
document.getElementById("newPostModal").classList.add("active");
|
||||
document.querySelector(".post-textarea").focus();
|
||||
}
|
||||
function showNewPostModal() {
|
||||
document.getElementById("newPostModal").classList.add("active");
|
||||
document.querySelector(".post-textarea").focus();
|
||||
}
|
||||
|
||||
function closeNewPostModal() {
|
||||
document.getElementById("newPostModal").classList.remove("active");
|
||||
document.getElementById("newPostForm").reset();
|
||||
}
|
||||
function closeNewPostModal() {
|
||||
document.getElementById("newPostModal").classList.remove("active");
|
||||
document.getElementById("newPostForm").reset();
|
||||
}
|
||||
|
||||
function handlePostCreated(event) {
|
||||
if (event.detail.successful) {
|
||||
closeNewPostModal();
|
||||
htmx.trigger("#social-content", "refresh");
|
||||
if (window.GBAlerts) {
|
||||
window.GBAlerts.info("Social", "Post created successfully!");
|
||||
function handlePostCreated(event) {
|
||||
if (event.detail.successful) {
|
||||
closeNewPostModal();
|
||||
htmx.trigger("#social-content", "refresh");
|
||||
if (window.GBAlerts) {
|
||||
window.GBAlerts.info(
|
||||
"Social",
|
||||
"Post created successfully!",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function togglePollCreator() {
|
||||
var attachments = document.getElementById("postAttachments");
|
||||
var existing = attachments.querySelector(".poll-creator");
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
return;
|
||||
function togglePollCreator() {
|
||||
var attachments = document.getElementById("postAttachments");
|
||||
var existing = attachments.querySelector(".poll-creator");
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
return;
|
||||
}
|
||||
var pollHtml =
|
||||
'<div class="poll-creator">' +
|
||||
'<input type="text" name="poll_question" placeholder="Ask a question..." class="poll-question" />' +
|
||||
'<div class="poll-options">' +
|
||||
'<input type="text" name="poll_option_1" placeholder="Option 1" />' +
|
||||
'<input type="text" name="poll_option_2" placeholder="Option 2" />' +
|
||||
'<button type="button" class="btn-add-option" onclick="addPollOption()">+ Add option</button>' +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
attachments.innerHTML = pollHtml;
|
||||
}
|
||||
var pollHtml = '<div class="poll-creator">' +
|
||||
'<input type="text" name="poll_question" placeholder="Ask a question..." class="poll-question" />' +
|
||||
'<div class="poll-options">' +
|
||||
'<input type="text" name="poll_option_1" placeholder="Option 1" />' +
|
||||
'<input type="text" name="poll_option_2" placeholder="Option 2" />' +
|
||||
'<button type="button" class="btn-add-option" onclick="addPollOption()">+ Add option</button>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
attachments.innerHTML = pollHtml;
|
||||
}
|
||||
|
||||
function addPollOption() {
|
||||
var options = document.querySelector(".poll-options");
|
||||
var count = options.querySelectorAll("input").length + 1;
|
||||
var input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.name = "poll_option_" + count;
|
||||
input.placeholder = "Option " + count;
|
||||
options.insertBefore(input, options.querySelector(".btn-add-option"));
|
||||
}
|
||||
function addPollOption() {
|
||||
var options = document.querySelector(".poll-options");
|
||||
var count = options.querySelectorAll("input").length + 1;
|
||||
var input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.name = "poll_option_" + count;
|
||||
input.placeholder = "Option " + count;
|
||||
options.insertBefore(
|
||||
input,
|
||||
options.querySelector(".btn-add-option"),
|
||||
);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".social-tab").forEach(function(tab) {
|
||||
tab.addEventListener("click", function() {
|
||||
document.querySelectorAll(".social-tab").forEach(function(t) {
|
||||
t.classList.remove("active");
|
||||
document.querySelectorAll(".social-tab").forEach(function (tab) {
|
||||
tab.addEventListener("click", function () {
|
||||
document.querySelectorAll(".social-tab").forEach(function (t) {
|
||||
t.classList.remove("active");
|
||||
});
|
||||
this.classList.add("active");
|
||||
});
|
||||
this.classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
window.showNewPostModal = showNewPostModal;
|
||||
window.closeNewPostModal = closeNewPostModal;
|
||||
window.handlePostCreated = handlePostCreated;
|
||||
window.togglePollCreator = togglePollCreator;
|
||||
window.addPollOption = addPollOption;
|
||||
})();
|
||||
window.showNewPostModal = showNewPostModal;
|
||||
window.closeNewPostModal = closeNewPostModal;
|
||||
window.handlePostCreated = handlePostCreated;
|
||||
window.togglePollCreator = togglePollCreator;
|
||||
window.addPollOption = addPollOption;
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue