phc/lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mark tabs with new theorems

Browse Source
This commit is contained in:
Jon Eugster
2024-04-24 17:01:33 +02:00
parent eac945e7b5
commit 06cc52bb7e
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/inventory.tsx
+4 -3
View File
@@ -76,9 +76,10 @@ function InventoryList({items, docType, openDoc, tab=null, setTab=undefined, lev
return <> return <>
{categories.length > 1 && {categories.length > 1 &&
<div className="tab-bar"> <div className="tab-bar">
{categories.map((cat) => {categories.map((cat) => {
<div key={`category-${cat}`} className={`tab ${cat == (tab ?? categories[0]) ? "active": ""}`} let hasNew = modifiedItems.filter(item => item.new && (cat == item.category)).length > 0
onClick={() => { setTab(cat) }}>{cat}</div>)} return <div key={`category-${cat}`} className={`tab${cat == (tab ?? categories[0]) ? " active": ""}${hasNew ? " new": ""}`}
onClick={() => { setTab(cat) }}>{cat}</div>})}
</div>} </div>}
<div className="inventory-list"> <div className="inventory-list">
{[...modifiedItems].sort( {[...modifiedItems].sort(
client/src/css/inventory.css
+8
View File
@@ -72,6 +72,14 @@
border-bottom: 0.3em solid var(--clr-primary); border-bottom: 0.3em solid var(--clr-primary);
} }
.inventory .tab.new {
background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(255, 242, 190));
}
.inventory .tab.new:not(.active) {
border-bottom: 0.3em solid rgb(255, 242, 190);
}
.tab.active { .tab.active {
color: black; color: black;
border-bottom: 0.3em solid #999; border-bottom: 0.3em solid #999;