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 {
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>
</head>
<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>
{item.link && <a className="item-link" href="#" target="_blank">&#8663;</a>}
{/* The item title is a clickable <details> if there is body content */}
{item.title || item.action ? (
{item.body || item.action ? (
<details open>
<summary><span className="item-title">{item.title || item.id}</span></summary>
{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() {
<main>
<article className="center">
<span className="item-title">
<a href="{{url_for('root')}}">Home</a> [
<a href="{{ set_query(hidden='false', page=None, count=None) }}">Active</a>
|
<a href="{{ set_query(hidden='true', page=None, count=None) }}">All</a>
]
<a href="{{url_for('root')}}">Home</a>
<input
id="showHidden"
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 -%} */}
{/* [<a {% if page_num is greaterthan(0) -%} href="{{ set_query(page=page_num - 1) }}" {%- endif %}>Prev</a> */}
{/* | */}