rDesign Brief: Pick'em Table Design using Vue and Tailwind CSS
Overview:
The goal is to replicate the Pick'em leaderboard table from the provided screenshot, displaying user picks for different weeks, in a dynamic and responsive way using Vue.js and Tailwind CSS. This table will display user avatars (or initials), usernames, and team picks for each week of a season. The table layout should allow users to see the picks by week, with empty cells for upcoming weeks.
1. Functional Requirements:
a. Table Layout:
Rows for each user with:
User's initials or avatars in a circle.
Username.
Weekly picks displayed with icons and team abbreviations.
Columns represent weeks, with each week displaying picks made by the user for that week. Empty cells represent weeks where picks are not yet made.
b. User Information:
Left-most column contains:
A circle with the first letter or avatar of the username.
Username next to the circle.
c. Week Information:
From Week 5 onward, each week is displayed in a grid.
A card for each pick, showing:
Team jersey or logo (image or colored icon).
Team abbreviation.
d. Picks:
Display a row for each user that includes:
Small team jerseys or color icons for each pick (team name or abbreviation under the jersey).
Each pick is enclosed in a small box or card with padding and borders.
Each pick should be dynamic, so users can select teams.
2. Technical Requirements:
a. Vue.js:
Dynamic rendering of the table using Vue's reactive data system.
Props: The component should receive props for:
A list of users.
A list of weeks (with dynamic content of each user’s picks for each week).
Looping: Utilize Vue loops (v-for) to generate rows for each user and dynamically fill in the data for each week.
Conditional Rendering: Use Vue's conditional rendering (v-if) to show empty cells where picks are not yet made.
b. Tailwind CSS:
Grid Layout: Use Tailwind’s grid or flexbox utilities to create a responsive layout for the table.
Typography: Use Tailwind utilities for the initials, user names, and team abbreviations.
Styling the Picks:
Use Tailwind's padding (p-2, p-4) for spacing within pick boxes.
Apply borders, rounded corners, and background colors to mimic the look of jerseys or team picks (e.g., border, rounded-lg, bg-gray-100).
Use different colors to distinguish teams (e.g., bg-red-500, bg-blue-600).
3. Design Requirements:
a. Table Structure:
Each user occupies one row.
A column header for each week (Weeks 5 to 14).
Empty cells for upcoming weeks should have a faint border or outline (e.g., border-gray-300).
b. Usernames and Initials:
Circle: Tailwind rounded-full and bg-gray-200 for user initials/avatar on the left.
Initials: Large, bold initials inside the circle, using Tailwind text utilities like text-lg font-bold.
Username: Align usernames to the left of the initials using flex utilities.
c. Picks (Team Icons):
Each pick is represented by a jersey or icon within a bordered box.
Align jerseys horizontally for each week.
For upcoming weeks (with no picks), use placeholders (optional).
4. CSS Specifics:
Tailwind Classes Breakdown:
Grid Structure:
Use grid grid-cols-[repeat(10,_minmax(0,_1fr))] for the 10 weeks in the season.
Use grid grid-rows-[repeat(users.length, minmax(0, 1fr))] to display each user's picks in rows.
User Info (Initials and Username):
flex items-center space-x-4 p-2 for aligning the avatar and username.
rounded-full bg-purple-500 text-white p-2 for user initials inside a circle.
Pick Items (Jersey Representation):
flex items-center justify-center for centering jerseys.
border-2 border-green-500 p-1 rounded-lg for each pick box.
Use dynamic classes like bg-blue-500, bg-red-600 to color-code picks.
5. Responsiveness:
Use Tailwind's responsive utilities to ensure that the table adjusts well on different screen sizes (e.g., sm:grid-cols-5, md:grid-cols-10).
Allow for horizontal scrolling for smaller screens using overflow-x-auto.
6. Additional Features (Optional):
Hover States: Add hover effects (e.g., hover:bg-gray-300) on picks to enhance interactivity.
Click Events: If picks need to be updated, add a Vue event listener for clicks on pick items (@click).
Example Vue Code:
vue
Copy code
<template>
<div class="overflow-x-auto">
<table class="min-w-full table-auto">
<thead>
<tr>
<th class="p-4">User</th>
<th v-for="week in weeks" :key="week" class="p-4">Week {{ week }}</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td class="flex items-center space-x-4 p-2">
<span class="rounded-full bg-purple-500 text-white p-2">{{ user.initials }}</span>
<span>{{ user.username }}</span>
</td>
<td v-for="(pick, index) in user.picks" :key="index" class="p-4">
<div v-if="pick" class="border-2 border-green-500 p-1 rounded-lg flex items-center justify-center">
<img :src="pick.teamJersey" alt="team" class="w-8 h-8"/>
<span>{{ pick.teamAbbreviation }}</span>
</div>
<div v-else class="border-2 border-gray-300 p-1 rounded-lg"></div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
weeks: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
users: [
{
id: 1,
initials: "D",
username: "dusty456",
picks: [
{ teamJersey: "path-to-tex-jersey", teamAbbreviation: "TEX" },
{ teamJersey: "path-to-ore-jersey", teamAbbreviation: "ORE" },
{ teamJersey: "path-to-miz-jersey", teamAbbreviation: "MIZ" },
null, null, null, null, null, null, null,
],
},
// More users here...
]
};
}
};
</script>
This should help you get started with designing and implementing this table in Vue and Tailwind CSS. Let me know if you'd like to refine this further!