Add the flights app scaffolding demo.
R=abarth@chromium.org Review URL: https://codereview.chromium.org/720593002
BIN
examples/flights/images/ba.jpg
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
examples/flights/images/delta.jpg
Normal file
After Width: | Height: | Size: 5.1 KiB |
BIN
examples/flights/images/jetblue.jpg
Normal file
After Width: | Height: | Size: 8.3 KiB |
BIN
examples/flights/images/menu-disabled.png
Normal file
After Width: | Height: | Size: 117 B |
BIN
examples/flights/images/menu-enabled.png
Normal file
After Width: | Height: | Size: 112 B |
BIN
examples/flights/images/menu-pressed.png
Normal file
After Width: | Height: | Size: 135 B |
BIN
examples/flights/images/menu-white.png
Normal file
After Width: | Height: | Size: 121 B |
BIN
examples/flights/images/united.jpg
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
examples/flights/images/virgin-america.jpg
Normal file
After Width: | Height: | Size: 6.2 KiB |
288
examples/flights/index.sky
Normal file
|
@ -0,0 +1,288 @@
|
|||
<app>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
t, span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #494949;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
|
||||
app-header {
|
||||
display: flex;
|
||||
background: linear-gradient(#3E77B7, #6C98C4);
|
||||
padding: 8px;
|
||||
color: white;
|
||||
border-bottom: 1px solid #3E77B7;
|
||||
}
|
||||
|
||||
app-title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
app-menu-button {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.menu-icon-inner {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
app-scrollable {
|
||||
flex: 1;
|
||||
box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
app-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
app-panel-header {
|
||||
background-color: #DEDEDE;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
app-panel-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
background-color: #F6F6F6;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
app-search-input {
|
||||
background-color: #F6F6F6;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
app-toast {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
max-width: 55%;
|
||||
box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
|
||||
background-color: #b0281a;
|
||||
background-image: linear-gradient(#E5D658, #DFCF43);
|
||||
border: 1px solid #AEA477;
|
||||
padding: 6px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
app-toast-header {
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
border-radius: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid black;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.route-result {
|
||||
margin: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.airline {
|
||||
border-radius: 2px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.airline-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.airline-logo-image {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.airline-best-price {
|
||||
color: #ABB4B6;
|
||||
}
|
||||
|
||||
.airline-name,
|
||||
.airline-best-price {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1155CC;
|
||||
}
|
||||
</style>
|
||||
<app-header>
|
||||
<app-title>
|
||||
<t>Search</t>
|
||||
</app-title>
|
||||
<app-menu-button>
|
||||
<img src="images/menu-white.png" class="menu-icon">
|
||||
</app-menu-button>
|
||||
</app-header>
|
||||
<app-toolbar>
|
||||
<app-search-input>
|
||||
<span class="input-icon"><t>🔎</t></span>
|
||||
<span class="input-text"><t>flights today to dc by price</t></span>
|
||||
</app-search-input>
|
||||
</app-toolbar>
|
||||
<app-scrollable>
|
||||
<app-panel class="route-result">
|
||||
<app-panel-header>
|
||||
<div class="route-title">
|
||||
<t>SFO to DCA</t>
|
||||
</div>
|
||||
<app-menu-button>
|
||||
<img src="images/menu-enabled.png" class="menu-icon-inner">
|
||||
</app-menu-button>
|
||||
</app-panel-header>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/virgin-america.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Virgin America</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$800</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/ba.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>British Airways</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$700</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/united.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>United</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$667</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/delta.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Delta</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$450</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
</app-panel>
|
||||
<app-panel class="route-result">
|
||||
<app-panel-header>
|
||||
<div class="route-title">
|
||||
<t>SJC to DCA</t>
|
||||
</div>
|
||||
<app-menu-button>
|
||||
<img src="images/menu-enabled.png" class="menu-icon-inner">
|
||||
</app-menu-button>
|
||||
</app-panel-header>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/virgin-america.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Virgin America</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$1500</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/jetblue.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>jetBlue</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$650</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="images/united.jpg">
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>United</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$367</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
</app-panel>
|
||||
</app-scrollable>
|
||||
<app-toast>
|
||||
<app-toast-header>
|
||||
<div class="tip-icon">
|
||||
<t>?</t>
|
||||
</div>
|
||||
</app-toast-header>
|
||||
<app-toast-content>
|
||||
<t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
|
||||
</app-toast-content>
|
||||
</app-toast>
|
||||
</app>
|