_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
Anton Bracke 2022-02-20 21:51:55 +01:00
parent 0f910693ef
commit 6844e0d39d
No known key found for this signature in database
GPG Key ID: B1222603899C6B25
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
desktop/local-app/index.html
View File

@ -22,6 +22,19 @@
#app {
display: flex;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
</style>
</head>
<body>

14
desktop/local-app/src/lib/Sidebar.svelte
View File

@ -5,6 +5,12 @@
let isDevelopment = false;
function getServerColor(i: number) {
const serverColors = ['bg-red-400', 'bg-yellow-500', 'bg-green-500', 'bg-blue-500', 'bg-indigo-500', 'bg-purple-500'];
return serverColors[i % serverColors.length];
}
onMount(async () => {
await loadServers();
isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment();
@ -12,16 +18,16 @@
</script>
<aside class="flex flex-col bg-gray-700 items-center">
<div class="flex flex-col mt-4 space-y-4">
{#each $servers as server}
<div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
{#each $servers as server, i}
<div class="flex flex-col items-center justify-center text-gray-400">
<div
class={`w-12 h-12 rounded-lg flex cursor-pointer text-center items-center justify-center bg-yellow-500 text-light-50 ${
class={`w-12 h-12 rounded-lg flex cursor-pointer text-center items-center justify-center text-light-50 ${getServerColor(i)} ${
$selectedServer === server._id ? "" : ""
}`}
on:click={() => selectServer(server)}
>
{server.name.slice(0, 2)}
{server.name.slice(0, 2).toLocaleUpperCase()}
</div>
</div>
{/each}