diff --git a/intake-client/public/index.html b/intake-client/public/index.html
index 143464b..5187e14 100644
--- a/intake-client/public/index.html
+++ b/intake-client/public/index.html
@@ -59,6 +59,50 @@ table.feed-control td {
article.center {
text-align: center;
}
+
+input[type=checkbox]{
+ height: 0;
+ width: 0;
+ visibility: hidden;
+}
+
+label {
+ cursor: pointer;
+ width: 3.8em;
+ padding-inline: 1em 0;
+ height: 1.2em;
+ background: grey;
+ display: inline-block;
+ border-radius: 0.6em;
+ position: relative;
+}
+
+label:after {
+ content: '';
+ position: absolute;
+ top: 0.1em;
+ left: 0.1em;
+ width: 1em;
+ height: 1em;
+ background: #fff;
+ border-radius: 0.5em;
+ transition: 0.1s;
+}
+
+input:checked + label {
+ background: #cc0000;
+ padding-inline: 0 1em;
+}
+
+input:checked + label:after {
+ left: calc(100% - 0.1em);
+ transform: translateX(-100%);
+}
+
+label:active:after {
+ width: 1.4em;
+}
+
diff --git a/intake-client/src/index.js b/intake-client/src/index.js
index 4dbf5ee..e9f568e 100644
--- a/intake-client/src/index.js
+++ b/intake-client/src/index.js
@@ -10,7 +10,7 @@ function Item({ item }) {
{item.link && ⇗}
{/* The item title is a clickable if there is body content */}
- {item.title || item.action ? (
+ {item.body || item.action ? (
{item.title || item.id}
{item.body && (
@@ -52,11 +52,13 @@ function Item({ item }) {
function App() {
const [items, setItems] = useState([]);
+ const [showHidden, setShowHidden] = useState(false);
// Initial load
useEffect(() => {
fetch("http://localhost:5000/api/v1/items")
- .then(response => response.json()).then(newItems => setItems(newItems.items))
+ .then(response => response.json())
+ .then(newItems => setItems(newItems.items))
.catch(error => console.log(error));
}, []);
@@ -64,11 +66,14 @@ function App() {
- Home [
- Active
- |
- All
- ]
+ Home
+ setShowHidden(e.target.checked) }
+ className="toggle-checkbox"/>
+
{/* {% if item_count > items|length -%} */}
{/* [Prev */}
{/* | */}