42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

woring on better CSS for ProfileUsers, the new layout is ok and the avatars show up, but need to get the modal working

Browse Source
This commit is contained in:
Me
2023-01-17 13:15:14 +01:00
parent 822543da3d
commit b7ebdc0b7c
1 changed files with 76 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
View File

@@ -14,6 +14,7 @@
let blockedUsers = [];
let usernameBeingViewed;
let friendshipStatusFull; // date, reveiverUsername, status
// let errors = {avatar: ''};
/**** Layout variables ****/
let tabItems: string[] = [
@@ -317,7 +318,7 @@
let activeTabItem: string = 'All Users'; -->
<div class="sidebar-list">
<Tabs items={tabItems} activeItem={activeTabItem} size="small" on:tabChange={switchTab}/>
<Tabs items={tabItems} activeItem={activeTabItem} size="medium" on:tabChange={switchTab}/>
{#if activeTabItem === 'All Users' && allUsers}
<h3>{activeTabItem}</h3>
{#if Object.keys(allUsers).length === 0}
@@ -327,11 +328,20 @@
<!-- {#each allUsers as aUser (aUser.username)} -->
<!-- {#each allUsers as aUser (aUser.id)} -->
{#each allUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.username)}>{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something?
i could use words but color them?
i could make it so if they're in a game -->
<div class="status sidebar-item">{aUser.status}</div>
<div class="user" on:click={() => viewAUser(aUser.username)}>
<!-- <div class="sidebar-item"></div> -->
<!-- <img class="avatar" src="{avatar}" alt="user avatar"> -->
{#await fetchAvatar(aUser.username) then avatar}
<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
{:catch error}
<p>Avatar was unable to load</p>
{/await}
<div class="sidebar-item">{aUser.username}</div>
<!-- i could make an indicator component? like green for connected or something?
i could use words but color them?
i could make it so if they're in a game -->
<div class="status sidebar-item">{aUser.status}</div>
</div>
<br>
{/each}
{:else if activeTabItem === 'My Friends' && myFriendships}
@@ -340,11 +350,23 @@
<div class="tip">You don't have any Friends... Yet!</div>
{/if}
{#each myFriendships as aFriendship}
{#if aFriendship.senderUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
{:else if aFriendship.receiverUsername !== user.username}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.receiverUsername)}>{aFriendship.receiverUsername}</div>
{/if}
<div class="user" on:click={() => viewAUser(aFriendship.receiverUsername)}>
{#if aFriendship.senderUsername !== user.username}
{#await fetchAvatar(aFriendship.senderUsername) then avatar}
<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
{:catch error}
<p>Avatar was unable to load</p>
{/await}
<div class="sidebar-item" on:click={() => viewAUser(aFriendship.senderUsername)}>{aFriendship.senderUsername}</div>
{:else if aFriendship.receiverUsername !== user.username}
{#await fetchAvatar(aFriendship.receiverUsername) then avatar}
<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
{:catch error}
<p>Avatar was unable to load</p>
{/await}
<div class="sidebar-item">{aFriendship.receiverUsername}</div>
{/if}
</div>
<br>
{/each}
{:else if activeTabItem === 'Friend Requests' && requestsRecieved}
@@ -353,8 +375,15 @@
<div class="tip">You don't have any Friend Requests</div>
{/if}
{#each requestsRecieved as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.senderUsername)}>{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
<div class="user" on:click={() => viewAUser(aUser.senderUsername)}>
{#await fetchAvatar(aUser.senderUsername) then avatar}
<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
{:catch error}
<p>Avatar was unable to load</p>
{/await}
<div class="sidebar-item">{aUser.senderUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
</div>
<br>
{/each}
{:else if activeTabItem === 'Blocked Users' && blockedUsers}
@@ -364,8 +393,15 @@
<div class="tip">You have not Blocked any Users</div>
{/if}
{#each blockedUsers as aUser}
<div class="sidebar-item" on:click={() => viewAUser(aUser.receiverUsername)}>{aUser.receiverUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
<div class="user" on:click={() => viewAUser(aUser.receiverUsername)}>
{#await fetchAvatar(aUser.receiverUsername) then avatar}
<img class="avatar sidebar-item" src="{avatar}" alt="user avatar">
{:catch error}
<p>Avatar was unable to load</p>
{/await}
<div class="sidebar-item">{aUser.receiverUsername}</div>
<div class="status sidebar-item">{aUser.status}</div>
</div>
<br>
{/each}
{/if}
@@ -412,11 +448,11 @@
{/if}
</div>
{/if}
{:else}
<!-- {:else}
<div class="placeholder">
<h1>Click on a user!</h1>
<h4>You'll see them displayed here</h4>
</div>
</div> -->
{/if}
</div>
@@ -436,7 +472,7 @@
/* margin: 0; */
}
div.sidebar-list{
/* div.sidebar-list{
grid-column: 1 / span 2;
background: #FB8B24;
padding: 1vw;
@@ -449,11 +485,29 @@
border-right: 4px solid #071013;
border-bottom: 4px solid #071013;
overflow-wrap: break-word;
} */
div.sidebar-list{
/* grid-column: 1 / span 2; */
grid-column: 3 / span 4;
background: #FB8B24;
padding: 1vw;
font-size: smaller;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 4px solid #071013;
border-bottom: 4px solid #071013;
overflow-wrap: break-word;
}
div.sidebar-item{
/* yea i mean that seems fine... */
display: inline-block;
text-align: center;
/* somehting about the buttons too, smaller ? */
}
div.status{
@@ -487,5 +541,9 @@
font-weight: bold;
}
img.avatar {
width: 60px;
}
</style>