xevion/factorio-achievements-fixer
1
0
Fork 0
mirror of https://github.com/Xevion/factorio-achievements-fixer.git synced 2026-01-31 08:24:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

Ellipsis, text truncation handling, fixup text spacing with flexbox

Browse Source
This commit is contained in:
Xevion
2024-11-27 05:17:52 -06:00
parent 0a8f292fe7
commit b1af481b86
3 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+1 -1
View File
@@ -4,7 +4,7 @@
html, html,
body { body {
@apply h-screen w-screen bg-zinc-600; @apply h-screen w-screen bg-zinc-600 text-zinc-200;
} }
@layer base { @layer base {
src/App.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import SaveSelector from "./views/SaveSelector";
function App() { function App() {
return ( return (
<main class="h-[100vh] w-[100vw] bg-zinc-800 p-4 flex flex-col"> <main class="h-[100vh] w-[100vw] bg-zinc-800 px-4 py-2 flex flex-col">
<SaveSelector /> <SaveSelector />
</main> </main>
); );
src/views/SaveSelector.tsx
+11 -11
View File
@@ -22,23 +22,23 @@ export default function SaveSelector() {
return ( return (
<> <>
<DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} /> <DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
<div className="mt-2.5 overflow-y-auto pr-1.5"> <div className="mt-1 text-center select-none text-zinc-300 text-[0.85rem]">
Or, select a save file from below
</div>
<div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-1.5 space-y-2">
{saveFiles.map((file) => { {saveFiles.map((file) => {
return ( return (
<div <div
class="flex items-center justify-between p-1 bg-zinc-700 rounded-lg mb-2 hover:bg-zinc-600 group" class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
title={file.path} title={file.path}
> >
<div class="flex items-center"> <div className="flex justify-between w-full items-center">
<FolderIcon class="w-6 h-6 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" /> <FolderIcon class="inline w-6 h-6 shrink-0 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" />
<div> <div className="grow text-sm font-medium text-zinc-200 truncate">
<p class="text-zinc-400">
<span class="text-sm font-semibold text-zinc-100">
{file.name} {file.name}
</span> </div>
{" "} <div className="text-sm text-zinc-400 pl-1 shrink-0">
<span className="text-sm">({file.size})</span> {file.size}
</p>
</div> </div>
</div> </div>
</div> </div>