Screenshots
eureka.js is designed HTML & mobile first and works well with modern smartphones.
One of the challenges of approaching eureka.js with HTML-first design principles was translating the familiar functionality of the "tree" sidebar on a mobile device. When designer an HTML-first component there is usually a tag or two you simply couldn't do without, in that case that was the <optgroup> tag. Using <optgroup> we can give our users a way to easily navigate to any directory.
<optgroup> is used by eureka.js on mobile and when the sidebar area is closed
Whenever a media items receives focus it is allowed to occupy more space than the other items. Items can receive focus from being tapped, clicked, or tabbed to using keyboard shortcuts.
Wider viewports leverage a Media Source component that features a <select> to change the current media source and a basic "tree" component to browse the current media source. This sidebar can be collapsed to allow the Media Content area to take up more space. When the sidebar is collapsed, alternate components are displayed that mimic the functionality of the sidebar in a simpler way.
Eureka currently supports up to four different views for browsing media. The default "table" view allows name, dimension, file size, and edited on information to easily accessed and even sorted on. Additionally, focused media items will show contextual options to do things like choose or rename the item.
