Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(598)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: sky/examples/flights/index.sky

Issue 720593002: Add the flights app scaffolding demo. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: two space indent Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « sky/examples/flights/images/virgin-america.jpg ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: sky/examples/flights/index.sky
diff --git a/sky/examples/flights/index.sky b/sky/examples/flights/index.sky
new file mode 100644
index 0000000000000000000000000000000000000000..22d468589537cf9e5a32dab65bcc6f74fbc1443c
--- /dev/null
+++ b/sky/examples/flights/index.sky
@@ -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>&#128270;</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>
« no previous file with comments | « sky/examples/flights/images/virgin-america.jpg ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698