_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 { #app {
display: flex; 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> </style>
</head> </head>
<body> <body>

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

@ -5,6 +5,12 @@
let isDevelopment = false; 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 () => { onMount(async () => {
await loadServers(); await loadServers();
isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment(); isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment();
@ -12,16 +18,16 @@
</script> </script>
<aside class="flex flex-col bg-gray-700 items-center"> <aside class="flex flex-col bg-gray-700 items-center">
<div class="flex flex-col mt-4 space-y-4"> <div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
{#each $servers as server} {#each $servers as server, i}
<div class="flex flex-col items-center justify-center text-gray-400"> <div class="flex flex-col items-center justify-center text-gray-400">
<div <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 ? "" : "" $selectedServer === server._id ? "" : ""
}`} }`}
on:click={() => selectServer(server)} on:click={() => selectServer(server)}
> >
{server.name.slice(0, 2)} {server.name.slice(0, 2).toLocaleUpperCase()}
</div> </div>
</div> </div>
{/each} {/each}