Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Commit

Permalink
Implement ajax inject using HTML Imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebidel
ebidel committed Jan 6, 2015
1 parent f00aebc commit 76429e8
Show file tree
Hide file tree
Showing 11 changed files with 468 additions and 324 deletions.
52 changes: 6 additions & 46 deletions app/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
<core-media-query query="(min-width:769px) and (max-width:944px)" queryMatches="{{isTabletSize}}"></core-media-query>
<core-media-query query="(min-width:945px)" queryMatches="{{isDesktopSize}}"></core-media-query>

<header class="masthead bg-dark-grey" layout vertical>
<header class="masthead {{pages[selectedPage].mastheadBgClass}}" layout vertical>
<core-toolbar id="navbar" class="{{ {'core-narrow': isPhoneSize} | tokenList }}">
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
<div flex><a href="./"><div class="io-logo"></div></a></div>
Expand Down Expand Up @@ -150,57 +150,17 @@
</paper-tabs>
</core-toolbar>
<div class="masthead-container" flex end?="{{!isPhoneSize}}" layout vertical?="{{isPhoneSize}}" horizontal?="{{isDesktopSize || isTabletSize}}">
<div layout vertical end-justified?="{{isPhoneSize}}" flex>
<h1>About I/O</h1>
<div class="masthead-meta" layout vertical end-justified?="{{isPhoneSize}}" flex>

<div id="masthead-title-container"></div>

</div>
</div>
<paper-fab icon="assessment" mini?="{{isPhoneSize}}"></paper-fab>
</header>

<main>

<div class="card__container">
<div class="card">
<div class="card-content">
<h2>Google I/O is an annual developer conference to learn, share and get inspired about the latest and greatest in tech.</h2>
</div>
<div class="card-content">
<a href="#">I/O in Photos</a>
</div>
</div>
</div>

<section class="page__section pics__section" layout horizontal>
<div class="photo__about" flex two></div>
<div layout vertical flex>
<div class="photo__about" layout vertical flex></div>
<div class="photo__about" layout vertical flex></div>
</div>
</section>

<div class="card__container sidebyside" layout horizontal vertical?="{{isPhoneSize}}">
<div class="card" auto-vertical flex>
<div class="card-content">
<h3>Join us to learn about product and platform innovations at Google, starting with a live kickoff from our Senior Vice-President for Android, Chrome &amp; App, Sundar Pichai.</h3>
</div>
<div class="card-content">
<a href="#">See the 2014 Keynote and sessions</a>
</div>
</div>
<div class="card" layout vertical auto-vertical flex>
<div flex class="card__photo card__photo--recap"></div>
<div class="card-content">
<a href="#"><core-icon icon="av:play-circle-fill"></core-icon> Watch the 2014 Recap Video</a>
</div>
</div>
</div>

<section id="hashtag" class="page__section bg-cyan">
<div class="io__hash">
TODO
</div>
</section>

<template id="template-content-container" ref="" bind></template>
</main>

<footer layout horizontal>
Expand Down
116 changes: 5 additions & 111 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
<core-media-query query="(min-width:769px) and (max-width:944px)" queryMatches="{{isTabletSize}}"></core-media-query>
<core-media-query query="(min-width:945px)" queryMatches="{{isDesktopSize}}"></core-media-query>

<header class="masthead bg-medium-grey" layout vertical>
<header class="masthead {{pages[selectedPage].mastheadBgClass}}" layout vertical>
<core-toolbar id="navbar" class="{{ {'core-narrow': isPhoneSize} | tokenList }}">
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
<div flex><a href="./"><div class="io-logo"></div></a></div>
Expand Down Expand Up @@ -180,122 +180,16 @@
</core-toolbar>
<div class="masthead-container" flex end?="{{!isPhoneSize}}" layout vertical?="{{isPhoneSize}}" horizontal?="{{isDesktopSize || isTabletSize}}">
<div class="masthead-meta" layout vertical end-justified?="{{isPhoneSize}}" flex>
<h2 class="masthead-title">Smarch xx - xx</h2>
<h5 class="masthead-subtitle">Moscone Center West,<br>San Francisco</h5>

<div id="masthead-title-container"></div>

</div>
</div>
<paper-fab icon="assessment" mini?="{{isPhoneSize}}"></paper-fab>
</header>

<main>

<div class="card__container">
<div class="card">
<div class="card-content">
<h2>Google I/O brings together best-in-class developers to meet on a global stage. Join us to explore emerging technology for mobile and beyond.</h2>
</div>
<div class="card-content">
<a href="#">Learn more about I/O</a>
</div>
</div>
</div>

<section class="home-photo page__section"></section>

<section id="registration" class="page__section bg-cyan">
<h3>Registration opens<br>Smarch 1 at 9AM PST</h3>
<paper-button class="registration__setreminder" hidden?="{{isPhoneSize}}">
<core-icon icon="social:notifications-none"></core-icon> Set a Reminder
</paper-button>
<div class="io-countdown" layout vertical center>
<countdown-timer autostart
date="Mon, 02 Mar 2015 09:00:00 GMT-0700"
dateadjustment="5" easeintime="500" waittime="300"
easeouttime="400"></countdown-timer>
<h4>Days</h4>
</div>
</section>

<div class="registration__card card__container sidebyside" layout horizontal vertical?="{{isPhoneSize}}">
<template if="{{isPhoneSize}}">
<div class="card" auto-vertical flex>
<div class="card-content">
<a href="#"><core-icon icon="social:notifications-none"></core-icon> Set a Reminder</a>
</div>
</div>
</template>
<div class="card" auto-vertical flex>
<div class="card-content hide-on-mobile">
<h3>I/O is two days of hands-on interaction with the latest technologies, inspirational talks and a few surprises in between</h3>
</div>
<div class="card-content">
<a href="#"><core-icon icon="event"></core-icon> Check the agenda</a>
</div>
</div>
<div class="card" layout vertical auto-vertical flex>
<div flex class="card__photo card__photo--recap hide-on-mobile"></div>
<div class="card-content">
<a href="#"><core-icon icon="av:play-circle-fill"></core-icon> Watch the 2014 Recap Video</a>
</div>
</div>
</div>

<section id="attend" class="page__section bg-dark-grey">
<h3>Attend I/O from <div class="attend__cityname">Mumbai</div> or wherever you may be</h3>
<div class="attend__globe">

</div>
</section>

<div class="card__container">
<div class="card">
<div class="card-content">
<h2>If you aren't able to join us for I/O in person this year, you can still make an event out of it. Watch the live stream with other developers near you.</h2>
</div>
<div class="card-content">
<a href="#">Join from your location</a>
</div>
</div>
</div>

<section id="join" class="page__section bg-light-grey">
<h3>Join the conversation<br>now at #io15</h3>
<div class="join__social" layout vertical end hidden?="{{isPhoneSize}}">
<a href="https://plus.google.com/+GoogleDevelopers">
+googledevelopers<core-icon icon="social:post-gplus"></core-icon>
</a>
<a href="https://twitter.com/googledevs">
@googledevs<core-icon icon="social:post-twitter"></core-icon>
</a>
</div>
<div class="io__hash">
TODO
</div>
<div class="sidebyside" layout horizontal vertical?="{{isPhoneSize}}">
<div class="social-post">
<header>
<a href="https://twitter.com/googledevs">@googledevs</a>
<div>3hrs ago</div>
</header>
<div>Find relief for your bloated game woes in the recent Game On! DevByte on WebP from @duhroach http://goo.gl/0Paa9V</div>
</div>
<div class="social-post">
<header>
<a href="https://twitter.com/googledevs">@googledevs</a>
<div>3hrs ago</div>
</header>
<div>Find relief for your bloated game woes in the recent Game On! DevByte on WebP from @duhroach http://goo.gl/0Paa9V</div>
</div>
<div class="social-post">
<header>
<a href="https://twitter.com/googledevs">@googledevs</a>
<div>3hrs ago</div>
</header>
<div>Find relief for your bloated game woes in the recent Game On! DevByte on WebP from @duhroach http://goo.gl/0Paa9V</div>
</div>
</div>
</section>

<template id="template-content-container" ref="" bind></template>
</main>

<footer layout horizontal>
Expand Down
83 changes: 6 additions & 77 deletions app/onsite.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
<core-media-query query="(min-width:769px) and (max-width:944px)" queryMatches="{{isTabletSize}}"></core-media-query>
<core-media-query query="(min-width:945px)" queryMatches="{{isDesktopSize}}"></core-media-query>

<header class="masthead bg-dark-grey" layout vertical>
<header class="masthead {{pages[selectedPage].mastheadBgClass}}" layout vertical>
<core-toolbar id="navbar" class="{{ {'core-narrow': isPhoneSize} | tokenList }}">
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
<div flex><a href="./"><div class="io-logo"></div></a></div>
Expand Down Expand Up @@ -150,88 +150,17 @@
</paper-tabs>
</core-toolbar>
<div class="masthead-container" flex end?="{{!isPhoneSize}}" layout vertical?="{{isPhoneSize}}" horizontal?="{{isDesktopSize || isTabletSize}}">
<div layout vertical end-justified?="{{isPhoneSize}}" flex>
<h1>Attend Onsite</h1>
<div class="masthead-meta" layout vertical end-justified?="{{isPhoneSize}}" flex>

<div id="masthead-title-container"></div>

</div>
</div>
<paper-fab icon="assessment" mini?="{{isPhoneSize}}"></paper-fab>
</header>

<main>

<div class="card__container">
<div class="card">
<div class="card-content">
<h2>Google I/O is Innovation in the Open. Connect face-to-face with developers and designers from around the world, check the latest product releases first hand, and chat directly with Googlers.</h2>
</div>
</div>
</div>

<section class="page__section onsite__pic"></section>

<section id="traveldetails" class="page__section bg-light-grey">
<h3>Travel details</h3>
<div class="sidebyside" layout horizontal wrap>
<div flex?="{{!isPhoneSize}}">
<h4><core-icon icon="maps:directions"></core-icon> Getting to San Francisco</h4>
<p>Here are the three major airports in the Bay Area with international airline service. SFO is about 13 miles south of downtown; OAK is 5 miles south of downtown; and SJC is in the city of San Jose about 45 miles southwest of downtown San Francisco.</p>
<ul>
<li><a href="http://www.flysfo.com/to-from/ground-transportation">San Francisco International Airport (SFO)</a><br>
14 miles, 25-40 minute drive</li>
<li><a href="http://www.oaklandairport.com/ground_transportation.shtml">Oakland International Airport (OAK)</a><br>
19 miles, 25-40 minute drive</li>
<li><a href="http://www.flysanjose.com/fl/travelers.php?page=ground_trans/gt_overview&exp=3">San Jose International Airport (SJC)</a><br>
47 miles, 60-75 minute drive</li>
</ul>
<h5>From the Airport</h5>
<p>Super Shuttle International is offering a discount to all Google I/O attendees. Reservations must be booked in advance either <a href="https://www.supershuttle.com/default.aspx?GC=G66Z7">online</a> or by calling 1-800-BLUE-VAN (1-800-258-3826). The discount code for Google I/O is G66Z7.</p>
</div>
<div flex?="{{!isPhoneSize}}">
<h4><core-icon icon="maps:hotel"></core-icon> Hotels</h4>
<p>We have room blocks at the following hotels:</p>
<ul>
<li><a href="https://www.intercontinental.com/redirect?path=hd&brandCode=ic&localeCode=en&regionCode=925&hotelCode=sfohb&_PMID=99801505&GPC=GO4">InterContinental</a><br>
Group Code: 1406GOOGLE
</li>
<li><a href="https://parc55hotel.reztrip.com/special_offer?rate_code=GOIO&offer_code=GOIO&vr=3">Parc 55 Wyndham San Francisco</a><br>
Group Code: 1406GOOGLE
</li>
<li><a href="https://www.jdvhotels.com/hotels/california/san-francisco-hotels/hotel-rex">The Hotel Rex</a><br>
Group Code: 1406GOOGLE
</li>
<li><a href="https://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=Google%20Developers%20Conference%5Esfoak%60giogioa%7Cgiogiob%60259%60USD%60false%606/24/14%606/26/14%606/4/14&app=resvlink&stop_mobi=yes">Hotel Adagio</a><br>
Group Code: 1406GOOGLE
</li>
<li><a href="https://www.holidayinn.com/redirect?path=hd&brandCode=hi&localeCode=en&regionCode=%20%201&hotelCode=SFOCC&_PMID=99801505&GPC=GLE">Holiday Inn Civic Center</a><br>
Group Code: GLE or Google I/O 2014
</li>
<li><a href="https://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=GOOGLE%20I/O%20DEVELOPER%20CONF%202014%5ESFODT%60GIOGIOA%7CGIOGIOB%7CGIOGIOC%60299.00-339.00%60USD%60false%606/23/14%606/26/14%606/2/14&app=resvlink&stop_mobi=yes">Marriott Marquis San Francisco</a><br>
Group Code: GIOGIOA (Single/Dbl), GIOGIOB (Triple), GIOGIOC (Quad)
</li>
<li><a href="https://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=GOOGLE%20I/O%20DEVELOPER%20CONF%202014%5ESFODT%60GIOGIOA%7CGIOGIOB%7CGIOGIOC%60299.00-339.00%60USD%60false%606/23/14%606/26/14%606/2/14&app=resvlink&stop_mobi=yes">Westin Market Street</a><br>
Group Code: 1406GOOGLE
</li>
<li><a href="https://gc.synxis.com/rez.aspx?Hotel=26753&Chain=10179&arrive=06/23/2014&depart=6/27/2014&adult=1&child=0&group=12340802075">Palomar San Francisco</a><br>
Group Code: GOIO
</li>
</ul>
</div>
<div flex?="{{!isPhoneSize}}">
<h4><core-icon icon="maps:place"></core-icon> Moscone Center West</h4>
<p>The <a href="https://www.moscone.com/directions/index.shtml">Moscone Center</a> is located at the corner of Fourth &amp; Howard streets, at 800 Howard St. San Francisco, CA 94103</p>
<p>Public transportation to the Moscone Center is accessible via:</p>
<ul>
<li><a href="https://www.bart.gov/">BART</a><br>
Subway linking San Francisco to Oakland and Berkeley</li>
<li><a href="https://www.sfmta.com/">MUNI Metro</a><br>
Citywide buses, trollies and cable cars</li>
<li><a href="http://www.caltrain.com/">Caltrain</a><br>
Regional rail system</li>
</ul>
</div>
</div>
</section>

<template id="template-content-container" ref="" bind></template>
</main>

<footer layout horizontal>
Expand Down

0 comments on commit 76429e8

Please sign in to comment.