OLD | NEW |
| (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> | |
OLD | NEW |