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

Side by Side Diff: sky/examples/flights-app/flights-app.sky

Issue 722103002: Revert "Add a version of flights that's made of components." (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: 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 unified diff | Download patch
« no previous file with comments | « sky/examples/flights-app/app-toolbar.sky ('k') | sky/examples/flights-app/index.sky » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
2 <import src="app-header.sky" />
3 <import src="app-title.sky" />
4 <import src="app-menu-button.sky" />
5 <import src="app-panel.sky" />
6 <import src="app-panel-header.sky" />
7 <import src="app-panel-content.sky" />
8 <import src="app-toolbar.sky" />
9 <import src="app-search-input.sky" />
10 <import src="app-scrollable.sky" />
11 <import src="app-toast.sky" />
12
13 <template>
14 <style>
15 * { box-sizing: border-box; }
16
17 t, span {
18 display: inline;
19 }
20
21 :host {
22 display: flex;
23 flex-direction: column;
24 height: 100%;
25 background-color: #494949;
26 font-family: "Helvetica Neue", sans-serif;
27 font-size: 16px;
28 color: #2B2B2B;
29 }
30
31 .toast-icon {
32 font-weight: bold;
33 font-size: 24px;
34 border-radius: 16px;
35 width: 32px;
36 height: 32px;
37 border: 2px solid black;
38 line-height: 30px;
39 text-align: center;
40 }
41
42 .tip-price {
43 font-weight: bold;
44 }
45
46 .route-result {
47 margin: 16px 16px 0 16px;
48 }
49
50 .route-title {
51 flex: 1;
52 }
53
54 .airline {
55 border-radius: 2px;
56 align-items: center;
57 padding: 8px;
58 }
59
60 .airline-name {
61 flex: 1;
62 }
63
64 .airline-logo-image {
65 width: 50px;
66 flex-shrink: 0;
67 }
68
69 .airline-best-price {
70 color: #ABB4B6;
71 }
72
73 .airline-name,
74 .airline-best-price {
75 padding: 8px;
76 }
77
78 a {
79 text-decoration: none;
80 color: #1155CC;
81 }
82 </style>
83 <app-header>
84 <app-title>
85 <t>Search</t>
86 </app-title>
87 <app-menu-button>
88 <img src="../flights/images/menu-white.png" style="width: 18px" />
89 </app-menu-button>
90 </app-header>
91 <app-toolbar>
92 <app-search-input />
93 </app-toolbar>
94 <app-scrollable>
95 <app-panel class="route-result">
96 <app-panel-header>
97 <div class="route-title">
98 <t>SFO to DCA</t>
99 </div>
100 <app-menu-button>
101 <img src="../flights/images/menu-enabled.png" style="width: 14px" />
102 </app-menu-button>
103 </app-panel-header>
104 <app-panel-content class="airline">
105 <div class="airline-logo">
106 <img class="airline-logo-image" src="../flights/images/virgin-america. jpg" />
107 </div>
108 <div class="airline-name">
109 <t>Virgin America</t>
110 </div>
111 <div class="airline-best-price">
112 <t><a>$800</a></t>
113 </div>
114 </app-panel-content>
115 <app-panel-content class="airline">
116 <div class="airline-logo">
117 <img class="airline-logo-image" src="../flights/images/ba.jpg" />
118 </div>
119 <div class="airline-name">
120 <t>British Airways</t>
121 </div>
122 <div class="airline-best-price">
123 <t><a>$700</a></t>
124 </div>
125 </app-panel-content>
126 <app-panel-content class="airline">
127 <div class="airline-logo">
128 <img class="airline-logo-image" src="../flights/images/united.jpg" />
129 </div>
130 <div class="airline-name">
131 <t>United</t>
132 </div>
133 <div class="airline-best-price">
134 <t><a>$667</a></t>
135 </div>
136 </app-panel-content>
137 <app-panel-content class="airline">
138 <div class="airline-logo">
139 <img class="airline-logo-image" src="../flights/images/delta.jpg" />
140 </div>
141 <div class="airline-name">
142 <t>Delta</t>
143 </div>
144 <div class="airline-best-price">
145 <t><a>$450</a></t>
146 </div>
147 </app-panel-content>
148 </app-panel>
149 <app-panel class="route-result">
150 <app-panel-header>
151 <div class="route-title">
152 <t>SJC to DCA</t>
153 </div>
154 <app-menu-button>
155 <img src="../flights/images/menu-enabled.png" style="width: 14px" />
156 </app-menu-button>
157 </app-panel-header>
158 <app-panel-content class="airline">
159 <div class="airline-logo">
160 <img class="airline-logo-image" src="../flights/images/virgin-america. jpg" />
161 </div>
162 <div class="airline-name">
163 <t>Virgin America</t>
164 </div>
165 <div class="airline-best-price">
166 <t><a>$1500</a></t>
167 </div>
168 </app-panel-content>
169 <app-panel-content class="airline">
170 <div class="airline-logo">
171 <img class="airline-logo-image" src="../flights/images/jetblue.jpg" />
172 </div>
173 <div class="airline-name">
174 <t>jetBlue</t>
175 </div>
176 <div class="airline-best-price">
177 <t><a>$650</a></t>
178 </div>
179 </app-panel-content>
180 <app-panel-content class="airline">
181 <div class="airline-logo">
182 <img class="airline-logo-image" src="../flights/images/united.jpg" />
183 </div>
184 <div class="airline-name">
185 <t>United</t>
186 </div>
187 <div class="airline-best-price">
188 <t><a>$367</a></t>
189 </div>
190 </app-panel-content>
191 </app-panel>
192 </app-scrollable>
193 <app-toast>
194 <div class="toast-icon">
195 <t>?</t>
196 </div>
197 <div class="toast-content">
198 <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
199 </div>
200 </app-toast>
201 </template>
202 <script>
203 SkyElement({
204 name: "flights-app",
205 });
206 </script>
OLDNEW
« no previous file with comments | « sky/examples/flights-app/app-toolbar.sky ('k') | sky/examples/flights-app/index.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698