Finished :)
This commit is contained in:
+10
-306
@@ -1,128 +1,14 @@
|
||||
{{define "room.html"}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Room.Name}} — SprintPadawan</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/styles/main.css" />
|
||||
<script src="/static/js/htmx.min.js" defer></script>
|
||||
<script src="/static/js/sse.js" defer></script>
|
||||
</head>
|
||||
{{template "app-head" (dict "Title" .Room.Name "UseHTMX" true "UseSSE"
|
||||
true)}}
|
||||
<body class="app-body">
|
||||
<div class="app-shell">
|
||||
<div
|
||||
id="sidebar-backdrop"
|
||||
class="sidebar-backdrop"
|
||||
onclick="
|
||||
document
|
||||
.getElementById('app-sidebar')
|
||||
.classList.remove('open');
|
||||
document
|
||||
.getElementById('sidebar-backdrop')
|
||||
.classList.remove('open');
|
||||
"
|
||||
></div>
|
||||
|
||||
<aside class="sidebar" id="app-sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">⚡</div>
|
||||
<span class="logo-text"><span>Sprint</span>Padawan</span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="/" class="nav-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="7" height="7" />
|
||||
<rect x="14" y="3" width="7" height="7" />
|
||||
<rect x="3" y="14" width="7" height="7" />
|
||||
<rect x="14" y="14" width="7" height="7" />
|
||||
</svg>
|
||||
Rooms
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<div class="user-avatar">
|
||||
{{slice .User.Username 0 1}}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{.User.Username}}</span>
|
||||
<span class="user-role">Member</span>
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="/logout">
|
||||
<button class="sign-out-btn" type="submit">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
|
||||
/>
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" y1="12" x2="9" y2="12" />
|
||||
</svg>
|
||||
Sign Out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-content">
|
||||
<header class="topbar">
|
||||
<div style="display: flex; align-items: center; gap: 1rem">
|
||||
<button
|
||||
class="mobile-menu-btn"
|
||||
onclick="
|
||||
document
|
||||
.getElementById('app-sidebar')
|
||||
.classList.toggle('open');
|
||||
document
|
||||
.getElementById('sidebar-backdrop')
|
||||
.classList.toggle('open');
|
||||
"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="topbar-brand">
|
||||
{{template "brand-mark" .}}
|
||||
<a href="/" class="back-btn">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -139,20 +25,19 @@
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="topbar-title">{{.Room.Name}}</span>
|
||||
<span class="topbar-title room-title"
|
||||
>{{.Room.Name}}</span
|
||||
>
|
||||
<span class="room-code-badge">{{.Room.Code}}</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; align-items: center; gap: 0.75rem"
|
||||
>
|
||||
<div class="topbar-actions">
|
||||
<span class="scale-badge">{{.Room.Scale}}</span>
|
||||
{{if .IsOwner}}
|
||||
<button
|
||||
hx-get="/rooms/{{.Room.ID}}/stories/new"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
class="btn-primary"
|
||||
style="width: auto; padding: 0.5rem 1rem"
|
||||
class="btn-primary topbar-btn"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -170,7 +55,7 @@
|
||||
</svg>
|
||||
Add Story
|
||||
</button>
|
||||
{{end}}
|
||||
{{end}} {{template "session-controls" .User}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -210,185 +95,4 @@
|
||||
{{template "sse-script"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}} {{define "stories-panel"}}
|
||||
<div class="stories-panel" id="stories-panel">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
"
|
||||
>
|
||||
<h3 class="panel-title">Stories</h3>
|
||||
<div class="sse-indicator">
|
||||
<span class="sse-dot"></span>
|
||||
<span>Live</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stories-list" id="stories-list">
|
||||
{{template "stories-list" .}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}} {{define "stories-list"}} {{range .Stories}} {{$isActive := eq (derefInt
|
||||
$.Room.ActiveStoryID) .ID}}
|
||||
<div
|
||||
class="story-card {{if .Voted}}story-revealed{{end}} {{if $isActive}}story-active{{end}}"
|
||||
id="story-{{.ID}}"
|
||||
>
|
||||
<div class="story-header">
|
||||
<span class="story-title">{{.Title}}</span>
|
||||
<div class="story-actions">
|
||||
{{if .Voted}}
|
||||
<span class="story-badge story-badge-revealed">Revealed</span>
|
||||
{{if $.IsOwner}}
|
||||
<form
|
||||
method="POST"
|
||||
action="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
|
||||
hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/unreveal"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
style="margin: 0"
|
||||
>
|
||||
<button type="submit" class="story-btn story-btn-secondary">
|
||||
Hide
|
||||
</button>
|
||||
</form>
|
||||
{{end}} {{else if $.IsOwner}} {{if $isActive}}
|
||||
<form
|
||||
method="POST"
|
||||
action="/rooms/{{$.Room.ID}}/reveal"
|
||||
hx-post="/rooms/{{$.Room.ID}}/reveal"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
style="margin: 0"
|
||||
>
|
||||
<input type="hidden" name="story_id" value="{{.ID}}" />
|
||||
<button type="submit" class="story-btn story-btn-primary">
|
||||
Reveal
|
||||
</button>
|
||||
</form>
|
||||
<span class="story-badge story-badge-active">Active</span>
|
||||
{{else}}
|
||||
<form
|
||||
method="POST"
|
||||
action="/rooms/{{$.Room.ID}}/active"
|
||||
hx-post="/rooms/{{$.Room.ID}}/active"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
style="margin: 0"
|
||||
>
|
||||
<input type="hidden" name="story_id" value="{{.ID}}" />
|
||||
<button type="submit" class="story-btn story-btn-secondary">
|
||||
Set Active
|
||||
</button>
|
||||
</form>
|
||||
{{end}} {{end}} {{if $.IsOwner}}
|
||||
<button
|
||||
type="button"
|
||||
class="story-action-btn"
|
||||
hx-get="/rooms/{{$.Room.ID}}/stories/{{.ID}}/edit"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
title="Rename"
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="story-action-btn story-action-delete"
|
||||
hx-post="/rooms/{{$.Room.ID}}/stories/{{.ID}}/delete"
|
||||
hx-target="#stories-panel"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete this story?"
|
||||
title="Delete"
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if $isActive}}
|
||||
<div id="vote-area">
|
||||
{{template "vote-area" (dict "RoomData" $ "Story" .)}}
|
||||
</div>
|
||||
{{end}} {{if .Voted}}
|
||||
<div class="revealed-votes">
|
||||
{{range (index $.StoryVotes .ID)}}
|
||||
<div class="revealed-vote">
|
||||
<span class="revealed-vote-user">{{.Username}}</span>
|
||||
<span class="revealed-vote-value">{{.Value}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<p>No stories yet. Add one to start voting.</p>
|
||||
</div>
|
||||
{{end}} {{end}} {{define "vote-area"}} {{$data := .RoomData}} {{$story :=
|
||||
.Story}} {{$userVote := index $data.UserVotes $story.ID}}
|
||||
<div class="vote-form" id="vote-form-{{$story.ID}}">
|
||||
{{range scaleToOptions $data.Room.Scale}}
|
||||
<button
|
||||
type="button"
|
||||
hx-post="/rooms/{{$data.Room.ID}}/vote"
|
||||
hx-target="#vote-form-{{$story.ID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-vals='{"story_id":"{{$story.ID}}","value":"{{.}}"}'
|
||||
class="vote-option {{if eq . $userVote}}vote-selected{{end}}"
|
||||
>
|
||||
{{.}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}} {{define "members-panel"}}
|
||||
<div class="members-panel" id="members-panel">
|
||||
<h3 class="panel-title">Members ({{len .Members}})</h3>
|
||||
<div class="members-list">
|
||||
{{range .Members}}
|
||||
<div class="member-row">
|
||||
<div
|
||||
class="user-avatar"
|
||||
style="width: 28px; height: 28px; font-size: 0.7rem"
|
||||
>
|
||||
{{slice .Username 0 1}}
|
||||
</div>
|
||||
<span class="member-name">{{.Username}}</span>
|
||||
{{if .HasVoted}}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="var(--success-text)"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="margin-left: auto"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}} {{define "sse-script"}}
|
||||
<script>
|
||||
document.addEventListener("htmx:sseOpen", function() {
|
||||
document.body.classList.add("sse-connected");
|
||||
});
|
||||
|
||||
document.addEventListener("htmx:sseClose", function() {
|
||||
document.body.classList.remove("sse-connected");
|
||||
});
|
||||
|
||||
document.addEventListener("htmx:sseError", function() {
|
||||
document.body.classList.remove("sse-connected");
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user