ddidderr/lanspread
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

[ui] make the grid good

Browse Source
This commit is contained in:
ddidderr 2024-11-14 00:01:55 +01:00
parent a6ed6e04fe
commit 009c0739d2
Signed by: ddidderr
GPG Key ID: 3841F1C27E6F0E14
2 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
crates/lanspread-tauri-deno-ts/src/App.css
View File

@ -2,16 +2,41 @@ body {
background-color: #000313; background-color: #000313;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
color: #D5DBFE; color: #D5DBFE;
margin: 0;
padding: 0;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000313;
z-index: 1000;
padding-top: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
h1.align-center {
margin: 0;
padding: 10px 0;
}
.main-header {
width: 100%;
} }
.grid-container { .grid-container {
display: grid; margin-top: 160px; /* Adjust based on your header height */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Changed from 220px to 140px */
gap: 20px;
padding: 20px; padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
} }
.item { .item {
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, black, #000938); background: linear-gradient(to bottom, black, #000938);
color: white; color: white;
border: 1px solid #444; border: 1px solid #444;
@ -62,6 +87,7 @@ body {
} }
.play-button { .play-button {
margin-top: auto;
margin-bottom: 2px; margin-bottom: 2px;
padding: 15px 30px; padding: 15px 30px;
background: linear-gradient(45deg, #09305a, #37529c); background: linear-gradient(45deg, #09305a, #37529c);

27
crates/lanspread-tauri-deno-ts/src/App.tsx
View File

@ -74,21 +74,22 @@ const App = () => {
// Rest of your component remains the same // Rest of your component remains the same
return ( return (
<main className="container"> <main className="container">
<h1 className="align-center">SoftLAN Launcher</h1> <div className="fixed-header">
<div className="main-header"> <h1 className="align-center">SoftLAN Launcher</h1>
{/* Search input */} <div className="main-header">
<div className="search-container"> <div className="search-container">
<input <input
type="text" type="text"
placeholder="Search games..." placeholder="Search games..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="search-input" className="search-input"
/> />
</div></div> </div>
</div>
</div>
<div className="grid-container"> <div className="grid-container">
{filteredGames.map((item) => { {filteredGames.map((item) => {
// Convert the thumbnail bytes to base64
const uint8Array = new Uint8Array(item.thumbnail); const uint8Array = new Uint8Array(item.thumbnail);
const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), ''); const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
const thumbnailUrl = `data:image/jpeg;base64,${btoa(binaryString)}`; const thumbnailUrl = `data:image/jpeg;base64,${btoa(binaryString)}`;