JP DeVries edited this page Feb 7, 2016 · 3 revisions

Responsive Design

eureka.js is designed HTML & mobile first and works well with modern smartphones.

Accessible <select> components

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

Prioritizing Focused Items

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.

Focused Item on the iPhone 6.

(thumb view)

Focused item on the iPad

Focused item on Safari OS X

Collapsable Sidebar

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.

Sidebar open

Sidebar closed

Multiple Views

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.

Eureka Table View

Eureka Thumb View

Eureka Grid View

Eureka List View

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.