jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-12 18:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Restyle the users list component

Browse Source
This commit is contained in:
Josh Creek
2023-07-10 18:42:25 +01:00
parent dce909b25c
commit 25b12a202c
1 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UsersList.svelte
+32 -5
View File
@@ -1,25 +1,48 @@
<script lang="ts">
export let users: any;
export let showEstimates: boolean = false;
export let userId: string;
</script>
<div id="users-list">
<h2>Users</h2>
<div class="users-container">
{#each users as user}
<div class="user-wrapper">
<div class="name">{user.name}</div>
<div
class="user-card"
<div class="user-card"
class:user-card-null={user.estimate === null}
class:user-card-green={user.estimate !== null}
>
{#if user.estimate !== null && showEstimates}
{#if user.estimate !== null && (showEstimates || user.userId === userId)}
<p class="estimate">{user.estimate}</p>
{/if}
</div>
</div>
{/each}
</div>
</div>
<style>
#users-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.users-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.user-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.user-card {
display: flex;
flex-direction: column;
@@ -48,10 +71,14 @@
font-size: 24px;
font-weight: bold;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.name {
font-size: 16px;
margin-top: 10px;
margin-bottom: 5px;
}
</style>