DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source 
- Removed subtitle from header
- Added vertical borders to table for better readability
- Removed footer text
- Cleaner, more minimal interface
This commit is contained in:
DaX
2025-06-17 23:30:27 +02:00
parent 050292539a
commit 0860686019
2 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@@ -76,9 +76,6 @@ function App() {
</button> </button>
</div> </div>
</div> </div>
<p className="mt-2 text-gray-600 dark:text-gray-400">
Bambu Lab praćenje zaliha filamenata sinhronizovano sa Confluence
</p>
</div> </div>
</header> </header>
@@ -90,13 +87,6 @@ function App() {
/> />
</main> </main>
<footer className="bg-white dark:bg-gray-800 border-t dark:border-gray-700 mt-12 transition-colors">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<p className="text-center text-sm text-gray-500 dark:text-gray-400">
Filamenteka - Automatsko praćenje filamenata sa kodiranjem bojama
</p>
</div>
</footer>
</div> </div>
); );
} }

32
src/components/FilamentTable.tsx
View File

@@ -77,33 +77,33 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
<thead> <thead>
<tr className="bg-gray-100 dark:bg-gray-700"> <tr className="bg-gray-100 dark:bg-gray-700">
<th <th
className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100" className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
onClick={() => handleSort('brand')} onClick={() => handleSort('brand')}
> >
Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')} Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
</th> </th>
<th <th
className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100" className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
onClick={() => handleSort('tip')} onClick={() => handleSort('tip')}
> >
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')} Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
</th> </th>
<th <th
className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100" className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
onClick={() => handleSort('finish')} onClick={() => handleSort('finish')}
> >
Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')} Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
</th> </th>
<th <th
className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100" className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
onClick={() => handleSort('boja')} onClick={() => handleSort('boja')}
> >
Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')} Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
</th> </th>
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th> <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th>
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th> <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th>
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th> <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th>
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th> <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th>
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th> <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
</tr> </tr>
</thead> </thead>
@@ -125,16 +125,16 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
color: textColor color: textColor
}} }}
> >
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.brand}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.brand}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.tip}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.tip}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.finish}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.finish}</td>
<td className="px-4 py-2 border-b dark:border-gray-700"> <td className="px-4 py-2 border-b border-r dark:border-gray-700">
<ColorCell colorName={filament.boja} /> <ColorCell colorName={filament.boja} />
</td> </td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.refill}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.refill}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.vakum}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.vakum}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.otvoreno}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.otvoreno}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.kolicina}</td> <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.kolicina}</td>
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td> <td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td>
</tr> </tr>
); );