diff options
| -rw-r--r-- | public/assets/css/css.css | 18 | ||||
| -rw-r--r-- | src/views/Legend.js | 11 |
2 files changed, 24 insertions, 5 deletions
diff --git a/public/assets/css/css.css b/public/assets/css/css.css index a32dd6a..23fb60b 100644 --- a/public/assets/css/css.css +++ b/public/assets/css/css.css @@ -30,16 +30,17 @@ body { padding: 1rem; margin: 1rem 2rem; background: rgba(0, 0, 0, 0.5); - text-transform: capitalize; - font-variant: small-caps; color: #fff; transition: opacity 0.2s; + text-transform: capitalize; + font-variant: small-caps; } -.legend div { +.legend .category { cursor: pointer; } -.legend div:hover { +.legend .category:hover { text-decoration: underline; + opacity: 1; } .legend .selected { text-decoration: underline; @@ -47,6 +48,15 @@ body { .legend .unselected { opacity: 0.8; } +.legend .removeSelection { + cursor: pointer; + opacity: 0.6; + margin-bottom: 0.5rem; +} +.legend .removeSelection:hover { + opacity: 0.8; + text-decoration: underline; +} /** Detail view */ diff --git a/src/views/Legend.js b/src/views/Legend.js index eedcc35..fe7db4d 100644 --- a/src/views/Legend.js +++ b/src/views/Legend.js @@ -11,11 +11,20 @@ const categories = "No6092,1620s,painting,blunt,National Gallery of Canada,AGO,c export default function Legend({ visible, selected, onSelect }) { return ( <div className="legend" style={{ opacity: visible ? 1 : 0 }}> + {selected && ( + <div className="removeSelection" onClick={() => onSelect(selected)}> + {"View all"} + </div> + )} {categories.map((category, index) => ( <div key={category} className={ - selected ? (selected === index + 1 ? "selected" : "unselected") : "" + selected + ? selected === index + 1 + ? "category selected" + : "category unselected" + : "category" } onClick={() => onSelect(index + 1)} > |