Skip to content

Instantly share code, notes, and snippets.

@philsherry

philsherry/seatmap.html

Created September 14, 2014 14:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save philsherry/fa089efabace28cb75ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save philsherry/fa089efabace28cb75ed to your computer and use it in GitHub Desktop.
Download ZIP
Solution for passenger pods on the new BA seatmap.
Raw
seatmap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BA seatmap</title>
<!-- include main BA VSG styles -->
<link rel="stylesheet" type="text/css" href="https://www.britishairways.com/cms/global/styles/core/core_vsg.css" />
<!--
scenario has-seat has-paid has-infant highlight
1 No No No No
2 Yes No No No
3a No No No Yes
3b Yes No No Yes
3c Yes Yes No Yes
4 Yes No No No
5 Yes Yes No No
6 Yes No Yes No
7 Yes No No No
8 No No No No
9 No No No No
No Seat text Shows by default, hides with every other class
Choose seat button Shows by default, hides with every other class
Seat details text Shows with .has-seat
Change button Shows when .has-seat but not when .highlight or inactive
Choose a seat text Shows when .highlight but not when .has-seat
Choose a new seat text Shows when .highlight and .has-seat
or keep seat text Shows when .highlight and .has-seat
choose a new seat price text Shows when .highlight and .has-seat but not .has-paid
general price text Shows when .has-seat but not when .has-paid
Paid text Shows when .has-paid but not .highlight
-->
<style>
body {
margin: 20px auto;
width: 940px;
}
.pod-wrap {
background-color: #fff;
padding: 10px 20px;
}
#pax-info {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
margin: 0;
}
/* -- for fake <a> look when used in conjuction with above -- */
.faux-link {
color: #4b97fa;
font-weight: bold;
}
.pax-info {
margin: 0 0 22px;
}
.pax-pod {
background-color: #f0f0f0;
float: left;
list-style-type: none;
margin-bottom: 20px;
margin-right: 20px;
position: relative;
width: 300px;
}
.pax-pod a {
font-weight: bold;
}
.pax-pod:nth-child(3n+3),
.pax-pod-end-row {
clear: right;
margin-right: 0;
}
.pax-name,
.pax-seat {
padding: 10px;
}
.pax-seat {
background-color: #e0e0e0;
}
.pax-seat-info {
color: #666;
margin: 3px 0;
max-width: 178px;
}
.pax-seat-type {
text-transform: lowercase;
}
.pax-seat-price {
font-weight: bold;
}
.pax-ellipsis {
/* display: inline-block; // cross-browser version below */
width: 100%;
}
.has-infant .pax-number {
top: 34px;
}
.pax-infant-name {
border-top: 2px solid #e0e0e0;
margin-left: 50px;
position: relative;
}
.pax-infant-name .pax-ellipsis {
max-width: 58%;
width: auto;
}
.pax-infant-name .pax-name {
line-height: 23px;
padding: 10px 0;
}
.infant {
/* had to do this to render properly in non-webkit browsers (i know, i know...) */
position: absolute;
top: 12px;
}
.pax-name {
color: #172e4d;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 28px;
margin: 0 3px 0 0;
overflow: hidden;
padding: 10px 10px 10px 50px;
text-overflow: ellipsis;
white-space: nowrap;
}
.pax-focus .pax-name {
color: #ce210f;
}
/* -- pax numbers: regular -- */
.pax-number {
background-color: #172e4d;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
color: #fff;
font-size: 14px;
left: 10px;
line-height: 23px;
margin-right: 10px;
padding: 3px 10.5px;
position: absolute;
text-align: center;
top: 10px;
}
/* -- pax numbers: focus/active -- */
.pax-focus .pax-number {
background-color: #ce210f;
}
/* -- display:inline-block -- */
.pax-ellipsis,
.pax-number,
.pax-legend li,
.pax-deck-select li {
display: -moz-inline-stack;
display: inline-block;
*display: inline; zoom:1;
}
.has-standby .pax-name {
color: #999;
}
.pax-seat-price-paid,
.pax-seat-price-free {
font-weight: bold;
}
.pax-pod:nth-child(3n+1),
.pax-pod-start-row {
clear: left;
}
/* hide things */
.pax-choose-seat,
.pax-choose-new-seat,
.pax-keep-seat,
.pax-infant-name,
.pax-seat-price-to-pay,
.change-seat,
.seating-info,
.no-change,
.pax-seat-price-free,
.has-seat .choose-seat,
.has-seat .pax-seat-price-paid,
.has-seat .pax-seat-price,
.pax-focus .seating-info,
.has-seat .seating-info,
.no-seat .pax-has-no-seat,
.pax-focus.has-seat .pax-has-no-seat, /* awkward -- needs overriding */
.pax-focus .pax-has-no-seat,
.has-seat .pax-has-no-seat,
.has-seat.has-paid .pax-seat-price,
.has-infant.has-seat .pax-seat-price,
.has-paid.mmb-reshop .pax-has-no-seat,
.has-paid.mmb-reshop .pax-seat-price,
.has-paid.mmb-reshop .pax-seat-price-paid,
.pax-focus.has-seat.has-paid .pax-seat-price-paid,
.pax-focus .pax-seat-action,
.has-paid.mmb-reshop .pax-seat-price-free,
.has-paid.free-change.mmb-reshop .pax-seat-price-to-pay,
.has-standby .pax-seat-action {
display: none;
visibility: hidden;
}
/* show things */
.has-seat .change-seat,
.has-infant .pax-infant-name,
.pax-focus.no-seat .pax-choose-seat,
.pax-focus.has-seat .pax-choose-new-seat,
.has-paid.mmb-reshop .seating-info {
display: block;
visibility: visible;
}
.has-seat .seating-info,
.pax-focus.has-seat .pax-keep-seat,
.has-seat .pax-seat-price,
.has-seat.has-paid .pax-seat-price-paid,
.has-standby .no-change,
.has-paid.mmb-reshop .pax-seat-price-to-pay {
display: inline-block;
visibility: visible;
}
.has-paid.free-change.mmb-reshop .pax-seat-price-free {
display: inline;
visibility: visible;
}
.has-seat .pax-seat-info,
.has-standby .pax-seat-info {
max-width: 220px;
}
.intro dd { margin: 0; }
/* -- clear:fix; -- */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
</style>
</head>
<body>
<div class="pod-wrap">
<div class="intro">
<h1>The Pax Pod Problem</h1>
<dl>
<dt>Problem: how to display and manipulate passenger seating details</dt>
<dd>Solution: <b>INCLUDE ALL THE THINGS,</b> and kick them around with CSS. </dd>
</dl>
</div>
<ol id="pax-info" class="pax-info cf">
<li class="pax-pod">
<div class="">
<span class="pax-number">1</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div><!-- //.pax-infant-name -->
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div><!-- //.pax-seat-info -->
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div><!-- //.pax-seat -->
</div><!-- // default -->
</li>
<li class="pax-pod">
<div class="has-seat">
<span class="pax-number">2</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="pax-focus no-seat">
<span class="pax-number">3</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="pax-focus has-seat">
<span class="pax-number">3</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="pax-focus has-seat has-paid">
<span class="pax-number">3</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-seat">
<span class="pax-number">4</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-seat has-paid">
<span class="pax-number">5</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-seat has-infant">
<span class="pax-number">6</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-paid mmb-reshop">
<span class="pax-number">7</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-paid free-change mmb-reshop">
<span class="pax-number">8</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
<li class="pax-pod">
<div class="has-standby">
<span class="pax-number">9</span>
<div class="pax-ellipsis">
<h3 class="pax-name">Miss Sally Donaldson</h3>
</div><!-- //.pax-ellipsis -->
<div class="pax-infant-name">
<div class="pax-ellipsis">
<h4 class="pax-name">David Samuel Donaldson</h4>
</div>
<span class="infant">(infant)</span>
</div>
<div class="pax-seat cf">
<div class="pax-seat-info flt-l">
<b class="pax-has-no-seat">No seat</b>
<b class="pax-choose-seat">Choose a seat</b>
<b class="pax-choose-new-seat">Choose a new seat</b>
<span class="pax-keep-seat">or <a href="#">keep seat</a> </span>
<span id="seating-x" class="seating-info">
<span class="pax-seat-number">38D</span>
<span class="pax-seat-type">(window)</span>
<span class="pax-seat-price">£23</span>
<span class="pax-seat-price-to-pay">£23 to pay</span>
<span class="pax-seat-price-free">FREE change</span>
<span class="pax-seat-price-paid">PAID</span>
</span>
<span class="no-change faux-link">No change allowed</span>
</div>
<div class="pax-seat-action btn flt-r">
<input type="submit" class="secondary choose-seat" name="Choose seat" value="Choose seat" title="Choose seat" />
<input type="submit" class="secondary change-seat" name="Change" value="Change" title="Change" />
</div>
</div>
</div>
</li>
</ol><!-- //.pax-info -->
<div class="cf">
By Phil Sherry for British Airways, via Leighton Ltd.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment