mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
fixed a bunch of styling and component usage
made sure almost all viewer pages use the navbar component properly instead of using their hardcoded version, started to match the styling of the design for a lot of pages
This commit is contained in:
bobbert committed
1 parent
ffdc2279ec
commit
8d0bca1d87
16 files changed
+292
-126
No files matched your search
@@ -10,6 +10,8 @@ import {
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import { use } from "react";
|
||||
// Add missing import for NavBar component
|
||||
import NavBar from "@/components/NavBar";
|
||||
|
||||
// Dynamically import the QR scanner component with no SSR
|
||||
const EnhancedQRScanner = dynamic(
|
||||
@@ -731,25 +733,8 @@ export default function CluePage({ params }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<div className="nav-bar">
|
||||
<Link href="/map" className="nav-item">
|
||||
<div className="nav-icon">🗺️</div>
|
||||
<div className="nav-label">Map</div>
|
||||
</Link>
|
||||
<Link href="/stats" className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
<div className="nav-label">Stats</div>
|
||||
</Link>
|
||||
<Link href="/team-selection" className="nav-item">
|
||||
<div className="nav-icon">👥</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
<div className="nav-label">Leaderboard</div>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Replace hardcoded navbar with NavBar component */}
|
||||
<NavBar activeLink="clue" teamData={teamData?.team} />
|
||||
|
||||
<style jsx>{`
|
||||
.clue-container {
|
||||
@@ -1070,37 +1055,6 @@ export default function CluePage({ params }) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-tools {
|
||||
background-color: #f8d7da;
|
||||
border: 2px dashed #d9534f;
|
||||
@@ -1133,7 +1087,10 @@ export default function CluePage({ params }) {
|
||||
|
||||
/* Map Banner Styles */
|
||||
.map-banner {
|
||||
background-color: #68543c;
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
@@ -1206,6 +1163,47 @@ export default function CluePage({ params }) {
|
||||
font-family: monospace;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.clue-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
padding-bottom: 70px; /* Space for navbar */
|
||||
}
|
||||
|
||||
.clue-banner {
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
color: white;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -161,7 +161,10 @@ export default function LeaderboardPage() {
|
||||
|
||||
{/* Only show navigation bar when the hunt hasn't ended */}
|
||||
{!huntJustEnded && (
|
||||
<NavBar activeLink="leaderboard" teamData={{ id: session?.user?.teamId }} />
|
||||
<NavBar
|
||||
activeLink="leaderboard"
|
||||
teamData={{ id: session?.user?.teamId }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Add a "back to home" button when the hunt has ended */}
|
||||
@@ -186,7 +189,10 @@ export default function LeaderboardPage() {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #68543c;
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
|
||||
@@ -9,20 +9,22 @@
|
||||
}
|
||||
|
||||
.map-banner {
|
||||
background-color: #68543c;
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #4a3c2a;
|
||||
z-index: 10;
|
||||
flex-shrink: 0; /* Prevent banner from shrinking */
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 18px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
@@ -32,7 +34,12 @@
|
||||
}
|
||||
|
||||
.elapsed-time {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
@@ -46,8 +53,9 @@
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 16px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
|
||||
+47
-11
@@ -175,9 +175,12 @@ export default function StatsPage() {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Team Stats</h1>
|
||||
<h2 className={styles.teamName}>{teamStats.team.name}</h2>
|
||||
{/* Replace header with team banner that matches team page */}
|
||||
<div className="team-banner">
|
||||
<div className="team-info">
|
||||
<h1 className="team-name">Team Name: {teamStats.team.name}</h1>
|
||||
<div className="team-code">{teamStats.team.code}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsCard}>
|
||||
@@ -232,23 +235,56 @@ export default function StatsPage() {
|
||||
<NavBar activeLink="stats" teamData={teamStats.team} />
|
||||
|
||||
<style jsx>{`
|
||||
.team-banner {
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clues-section {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
margin: 15px 0 10px 0;
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.clue-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.clue-item {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
@@ -257,23 +293,23 @@ export default function StatsPage() {
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #4caf50;
|
||||
}
|
||||
|
||||
|
||||
.skipped-clue {
|
||||
border-left: 3px solid #2196f3;
|
||||
}
|
||||
|
||||
|
||||
.clue-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.clue-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.clue-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
@@ -281,7 +317,7 @@ export default function StatsPage() {
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.empty-state {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
|
||||
@@ -3,34 +3,34 @@
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
padding-bottom: 70px; /* Space for the navbar */
|
||||
padding-bottom: 70px; /* Space for navbar */
|
||||
}
|
||||
|
||||
/* Remove the header styles since we're using a custom banner */
|
||||
/*
|
||||
.header {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 5px 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.teamName {
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
}
|
||||
font-size: 1.25rem;
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
*/
|
||||
|
||||
.statsCard {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -140,7 +140,7 @@ export default function TeamPage({ params }) {
|
||||
const continueTreasureHunt = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
|
||||
try {
|
||||
// Check if hunt is active first
|
||||
const timestamp = Date.now();
|
||||
@@ -153,10 +153,10 @@ export default function TeamPage({ params }) {
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
|
||||
if (data.active) {
|
||||
// Hunt is active, redirect to map
|
||||
router.push("/map");
|
||||
@@ -219,23 +219,25 @@ export default function TeamPage({ params }) {
|
||||
<div className="members-container">
|
||||
<h2 className="members-title">Team Members</h2>
|
||||
|
||||
{teamMembers.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="member-card">
|
||||
<div className="member-avatar">👤</div>
|
||||
<div className="member-details">
|
||||
<div className="member-name">
|
||||
{member.username}
|
||||
{member.id === session?.user?.id && " (You)"}
|
||||
<div className="members-background">
|
||||
{teamMembers.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="member-card">
|
||||
<div className="member-avatar">👤</div>
|
||||
<div className="member-details">
|
||||
<div className="member-name">
|
||||
{member.username}
|
||||
{member.id === session?.user?.id && " (You)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="team-actions">
|
||||
@@ -404,7 +406,10 @@ export default function TeamPage({ params }) {
|
||||
}
|
||||
|
||||
.team-banner {
|
||||
background-color: #68543c;
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
@@ -423,12 +428,14 @@ export default function TeamPage({ params }) {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
@@ -444,10 +451,26 @@ export default function TeamPage({ params }) {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* New background div that holds the scroll background image */
|
||||
.members-background {
|
||||
position: relative;
|
||||
background-image: url("/images/scroll.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
@@ -457,6 +480,8 @@ export default function TeamPage({ params }) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
width: 80vw;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
@@ -472,6 +497,10 @@ export default function TeamPage({ params }) {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #888;
|
||||
width: 80vw;
|
||||
max-width: 500px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
|
||||
Reference in new issue
Block a user