jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-14 11:33:45 +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
+41 -14
View File
@@ -1,25 +1,48 @@
<script lang="ts"> <script lang="ts">
export let users: any; export let users: any;
export let showEstimates: boolean = false; export let showEstimates: boolean = false;
export let userId: string;
</script> </script>
<div id="users-list"> <div id="users-list">
<h2>Users</h2> <div class="users-container">
{#each users as user} {#each users as user}
<div class="name">{user.name}</div> <div class="user-wrapper">
<div <div class="name">{user.name}</div>
class="user-card" <div class="user-card"
class:user-card-null={user.estimate === null} class:user-card-null={user.estimate === null}
class:user-card-green={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> <p class="estimate">{user.estimate}</p>
{/if} {/if}
</div> </div>
{/each} </div>
{/each}
</div>
</div> </div>
<style> <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 { .user-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -48,10 +71,14 @@
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} }
.name { .name {
font-size: 16px; font-size: 16px;
margin-top: 10px; margin-bottom: 5px;
} }
</style> </style>