Jaculabilis
/
intake
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add a cool show-hidden toggle

This commit is contained in:
Tim Van Baak 2023-07-27 14:22:47 -07:00
parent b71a8d2a59
commit ecb1afb634
2 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
intake-client/public/index.html
View File

@ -59,6 +59,50 @@ table.feed-control td {
article.center { article.center {
text-align: 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;
}
</style> </style>
</head> </head>
<body> <body>

19
intake-client/src/index.js
View File

@ -10,7 +10,7 @@ function Item({ item }) {
<button className="item-button" title="Punt to tomorrow">&#8631;</button> <button className="item-button" title="Punt to tomorrow">&#8631;</button>
{item.link && <a className="item-link" href="#" target="_blank">&#8663;</a>} {item.link && <a className="item-link" href="#" target="_blank">&#8663;</a>}
{/* The item title is a clickable <details> if there is body content */} {/* The item title is a clickable <details> if there is body content */}
{item.title || item.action ? ( {item.body || item.action ? (
<details open> <details open>
<summary><span className="item-title">{item.title || item.id}</span></summary> <summary><span className="item-title">{item.title || item.id}</span></summary>
{item.body && ( {item.body && (
@ -52,11 +52,13 @@ function Item({ item }) {
function App() { function App() {
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
const [showHidden, setShowHidden] = useState(false);
// Initial load // Initial load
useEffect(() => { useEffect(() => {
fetch("http://localhost:5000/api/v1/items") 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)); .catch(error => console.log(error));
}, []); }, []);
@ -64,11 +66,14 @@ function App() {
<main> <main>
<article className="center"> <article className="center">
<span className="item-title"> <span className="item-title">
<a href="{{url_for('root')}}">Home</a> [ <a href="{{url_for('root')}}">Home</a>
<a href="{{ set_query(hidden='false', page=None, count=None) }}">Active</a> <input
| id="showHidden"
<a href="{{ set_query(hidden='true', page=None, count=None) }}">All</a> type="checkbox"
] checked={showHidden}
onChange={(e) => setShowHidden(e.target.checked) }
className="toggle-checkbox"/>
<label htmlFor="showHidden">{showHidden ? "All" : "Active"}</label>
{/* {% if item_count > items|length -%} */} {/* {% if item_count > items|length -%} */}
{/* [<a {% if page_num is greaterthan(0) -%} href="{{ set_query(page=page_num - 1) }}" {%- endif %}>Prev</a> */} {/* [<a {% if page_num is greaterthan(0) -%} href="{{ set_query(page=page_num - 1) }}" {%- endif %}>Prev</a> */}
{/* | */} {/* | */}