innoq/rocair

progressive enhancement demo

rocair's Issues

use nested lists to represent rows

that could provide a little more structure to the unstyled version and might also make styling easier

explain rationale

the application should include a brief "about" section, elaborating on why we built it and (roughly) how

add legend

@jannikolai suggested in #11:

What about adding a legend, that describes the different kinds of seat visualizations?

of course that's only relevant for the augmented version, so we'll have to think about how best to handle that in the basic versions

highlight and explain debug menu

it's not particularly obvious right now

(this is tangentially related to #2)

Unicode!

💺 (U+1F4BA) might be used in the basic version - but I suspect five-character Unicode chars are only supported on a few machines right now, so not sure what to do about the rest

aisle misalignment (iPhone)

via @aheusingfeld

highlight selection

when first loading the page, it's not immediately obvious which seat has been (pre-)selected

this is partly due to #4, but @saivlis reports that the blue glow was barely visible

investigate jQuery Seat Charts for inspiration

→ https://github.com/mateuszmarkowski/jQuery-Seat-Charts

might have some ideas worth adopting

rename to ROCAir?

it's silly and somewhat beside the point (this is primarily about progressive enhancement), but "seat selector" seems far too sober/boring

opinions, @stilkov @rstrangh et al.?

(note that this affects both the repo and the Heroku instance)

display row/seat numbers in augmented version

at the very least they should be visible as tooltips - though something more elegant would be preferable

submit button position and styling

currently still very crude, sitting all the way at the bottom (which is somewhat awkward)

Multiple selection of seats for more than one passenger

it'd be nice to support multiple selection for groups of travelers

in theory, checkboxes should Just Work - though we'd have to handle limitations (max. n seats), both client- and server-side

this might be a nice use case for declarative pub/sub:

<input type="checkbox" data-publish="seat-selected">

<!-- ... -->

<p class="status" data-subscribe="seat-selected">
    You've selected two out of three seats.
</p>

VIP seats confuse plebs

when first loading the page, only the VIP seats appear above the fold (for most viewport sizes)

it's not immediately clear though why those are inaccessible, in part due to the lack of visual distinction

cf. #4, #5

explain keyboard controls

users are not necessarily familiar with how to navigate/select radio buttons via the keyboard, so we probably need to add a brief explanation (since this is one of the primary benefits)

of course we should mention that this is just standard browser functionality

reduce cabin size

the plane's graphical representation takes up far too much space right now, pushing all the relevant "content" below the fold

we might consider switching to a horizontal layout, but I'd rather avoid that