-
-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Show links/quotes mixed in order with entries on mobile #165
Labels
Comments
I was hoping this would be possible using clever CSS grid tricks but it looks like it needs some JavaScript after all. |
simonw
added a commit
that referenced
this issue
Oct 21, 2020
JavaScript prototype (to paste into devtools): var items = Array.from(document.querySelectorAll('*[data-date]'));
items.sort((a, b) => {
const aDate = a.getAttribute('data-date');
const bDate = b.getAttribute('data-date');
if (aDate < bDate) {
return 1;
}
if (aDate > bDate) {
return -1;
}
return 0;
});
primary = document.querySelector('#primary');
items.forEach(el => primary.appendChild(el)); |
This version turns the var items = Array.from(document.querySelectorAll('*[data-date]'));
items.sort((a, b) => {
const aDate = a.getAttribute('data-date');
const bDate = b.getAttribute('data-date');
if (aDate < bDate) {
return 1;
}
if (aDate > bDate) {
return -1;
}
return 0;
});
var primary = document.querySelector('#primary');
items.forEach(el => {
if (el.tagName == 'LI') {
// Turn this into a <div>
var div = document.createElement('div');
div.classList.add('elsewhere-in-primary');
div.innerHTML = el.innerHTML;
primary.appendChild(div);
el.parentNode.removeChild(el);
} else {
primary.appendChild(el);
}
}); |
I'm going to style it to look like the search results, with the date displayed on each item when they are shown in the primary navigation. https://simonwillison.net/search/?q=jupyter |
simonw
added a commit
that referenced
this issue
Oct 21, 2020
simonw
added a commit
that referenced
this issue
Oct 21, 2020
simonw
added a commit
that referenced
this issue
Oct 21, 2020
Things were not displaying correctly if the window was resized in and out multiple times.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
On mobile stuff in the "Elsewhere" column is only visible if you scroll most of the way down the page. I want to interleave this content in date order with the entries when the site is displayed in a single column.
The text was updated successfully, but these errors were encountered: