Skip to content

Commit

Permalink
Merge pull request #542 from ember-learn/use-escard
Browse files Browse the repository at this point in the history
Use new EsCard and EsLinkCard components
  • Loading branch information
mansona authored Feb 4, 2020
2 parents c691602 + 2095e3c commit 4e11347
Show file tree
Hide file tree
Showing 18 changed files with 341 additions and 298 deletions.
66 changes: 27 additions & 39 deletions app/templates/community/meetups/assets.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -96,45 +96,33 @@
You may have noticed that some user groups (Salt Lake City, Munich, London, etc.) have their own custom Tomster and Zoey variants. These have been commissioned and licensed by the groups. They paid a small commission fee to have the character designed by one of the official designers, and we granted them a license to use that variant for non-commercial user group related purposes.
</p>

<ul class="list-unstyled grid lg:grid-3">
<EsCard
class="col-2-large text-center"
@alt=""
@image="/images/community/tomsters/Ember-Munich-Half-sm.png"
card-link vertical
>
<h4>
<a href="https://www.meetup.com/Ember-js-Munich/" rel="nofollow noopener" target="_blank">
Ember Munich
</a>
</h4>
</EsCard>

<EsCard
class="col-2-large text-center"
@alt=""
@image="/images/community/tomsters/Ember-Austin-Zoey-Half-sm.png"
card-link vertical
>
<h4>
<a href="https://www.meetup.com/Ember-ATX/" rel="nofollow noopener" target="_blank">
Ember Austin
</a>
</h4>
</EsCard>

<EsCard
class="col-2-large text-center"
@alt=""
@image="/images/community/tomsters/Ember-Vancouver-Half-sm.png"
card-link vertical
>
<h4>
<a href="https://www.meetup.com/Vancouver-Ember-js/" rel="nofollow noopener" target="_blank">
Ember Vancouver
</a>
</h4>
</EsCard>
<ul class="list-unstyled grid lg:grid-3 my-4">
<li>
<a href="https://www.meetup.com/Ember-js-Munich/" rel="nofollow noopener" target="_blank">
<div class="well well-1/1">
<img src="/images/community/tomsters/Ember-Munich-Half-sm.png" alt="" role="presentation">
</div>
Ember Munich
</a>
</li>

<li>
<a href="https://www.meetup.com/Ember-ATX/" rel="nofollow noopener" target="_blank">
<div class="well well-1/1">
<img src="/images/community/tomsters/Ember-Austin-Zoey-Half-sm.png" alt="" role="presentation">
</div>
Ember Austin
</a>
</li>

<li>
<a href="https://www.meetup.com/Vancouver-Ember-js/" rel="nofollow noopener" target="_blank">
<div class="well well-1/1">
<img src="/images/community/tomsters/Ember-Vancouver-Half-sm.png" alt="" role="presentation">
</div>
Ember Vancouver
</a>
</li>
</ul>

<p>
Expand Down
13 changes: 8 additions & 5 deletions app/templates/editions/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@

<h2>Editions</h2>
<ul class="grid lg:grid-3 unstyled-list">
<EsCard @image="/images/tomsters/octane.png" vertical full-image card-link class="lg:col-2">
<h3>
{{link-to "Octane (March 2019)" "editions.octane"}}
</h3>
</EsCard>
<li>
{{#link-to "editions.octane"}}
<div class="well p-5">
<img src="/images/tomsters/octane.png" alt="" role="presentation">
</div>
Octane (March 2019)
{{/link-to}}
</li>
</ul>
</section>
31 changes: 5 additions & 26 deletions app/templates/editions/octane.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,13 @@
With seamless interoperability for existing apps, teams can migrate at their own pace, while developers building new apps start out with the best that Ember has to offer.
</p>
<ul class="unstyled-list grid lg:grid-5">
<EsCard card-link>
<h3>
<a href="https://blog.emberjs.com/2019/12/20/octane-is-here.html">Read the announcement</a>
</h3>
</EsCard>
<EsCard card-link>
<h3>
<a href="https://guides.emberjs.com/release/getting-started/quick-start/">Try the new app Quick Start</a>
</h3>
</EsCard>
<EsCard card-link>
<h3>
<a href="https://guides.emberjs.com/release/tutorial/">Follow the Tutorial</a>
</h3>
</EsCard>
<EsCard card-link>
<h3>
<a href="https://guides.emberjs.com/release/">Read the Guides</a>
</h3>
</EsCard>
<EsCard card-link>
<h3>
<a href="https://guides.emberjs.com/release/upgrading/current-edition">Learn how to upgrade</a>
</h3>
</EsCard>
<EsLinkCard @href="https://blog.emberjs.com/2019/12/20/octane-is-here.html" @title="Read the announcement" />
<EsLinkCard @href="https://guides.emberjs.com/release/getting-started/quick-start/" @title="Try the new app Quick Start" />
<EsLinkCard @href="https://guides.emberjs.com/release/tutorial/" @title="Follow the Tutorial" />
<EsLinkCard @href="https://guides.emberjs.com/release/" @title="Read the Guides" />
<EsLinkCard @href="https://guides.emberjs.com/release/upgrading/current-edition" @title="Learn how to upgrade" />
</ul>


<h2>How you can help</h2>
<p>
Now that Octane is available, we ask developers of all experience levels to create their own blog posts, tutorials, and videos.
Expand Down
4 changes: 2 additions & 2 deletions app/templates/ember-community-survey-2017.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
Here is a flavor of what reasons participants gave for their scoring:
</p>

<ul class="list-unstyled scoring-list">
<ul class="list-unstyled scoring-list grid lg:grid-2">
<EsCard class="text-center my-2">
<h4>Score: 9</h4>
<aside class="quote">
Expand Down Expand Up @@ -154,7 +154,7 @@
commonly mentioned topics. Here they are with a selected quote.
</p>

<ul class="list-unstyled scoring-list">
<ul class="list-unstyled scoring-list grid lg:grid-2">
<EsCard class="text-center my-2">
<h4>Better Documentation, Examples and Guides</h4>
<aside class="quote">
Expand Down
76 changes: 51 additions & 25 deletions app/templates/index.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{{title "Ember.js - A framework for ambitious web developers" replace=true}}

<EsPageHeader
@headline="A framework for ambitious web developers"
@detail="Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device."
Expand Down Expand Up @@ -136,6 +137,7 @@
</div>
</div>
</section>

<section aria-labelledby="section-community" class="bg-muted bg-shape-swipe-top">
<div class="container">
<div class="layout text-light text-center">
Expand Down Expand Up @@ -172,18 +174,23 @@
</div>

<ul class="grid lg:grid-2 list-unstyled">
<EsCard class="lg:col-3" @image="/images/icons/discuss-logo.svg" card-link>
<h3>
<a href="http://discuss.emberjs.com">Discussion Forum</a>
</h3>
<EsLinkCard
class="lg:col-3"
@icon="discourse"
@title="Discussion Forum"
@href="http://discuss.emberjs.com"
>
<p>Post and search longer-form questions in our public forum.</p>
</EsCard>
<EsCard class="lg:col-3" @image="/images/icons/discord-logo.svg" card-link>
<h3>
<a href="https://discord.gg/emberjs">Discord community chat</a>
</h3>
</EsLinkCard>

<EsLinkCard
class="lg:col-3"
@icon="discord"
@title="Discord community chat"
@href="https://discord.gg/emberjs"
>
<p>Join our real-time chat server to connect with other developers and get answers.</p>
</EsCard>
</EsLinkCard>
</ul>

<p class="lg:col-4 lg:start-2 my-3 text-center">
Expand All @@ -192,54 +199,73 @@
</p>

<ul class="list-unstyled layout">
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/mic-icon.svg">
<EsCard
class="lg:col-2 text-center"
@icon="podcasts"
>
<h3>Podcasts</h3>

<ul class="list-unstyled">
<li><a href="https://emberweekend.com/episodes">Ember Weekly</a></li>
<li><a href="https://embermap.com/podcast">Ember Map Podcast</a></li>
</ul>
</EsCard>
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/book-icon.svg">

<EsCard
class="lg:col-2 text-center"
@icon="books"
>
<h3>Books</h3>

<ul class="list-unstyled">
<li><a href="https://www.balinterdi.com/rock-and-roll-with-emberjs/">Rock and Roll with Ember.js</a></li>
</ul>
</EsCard>
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/tv-icon.svg">

<EsCard
class="lg:col-2 text-center"
@icon="videos"
>
<h3>Videos</h3>

<ul class="list-unstyled">
<li><a href="https://embermap.com/">Ember Map</a></li>
</ul>
</EsCard>
</ul>
</div>
</section>

<section aria-labelledby="section-shipping" class="bg-dark bg-shape-boxes">
<div class="container">
<div class="layout mb-3">
<div class="lg:col-3">
<h2 class="text-xl" id="section-shipping">Ready to start shipping?</h2>
<p>If you're ready to dive in, the Quickstart is the fastest way to get going with Ember.js. Are you new to web development or a recent bootcamp grad? The Intro tutorial is a great place to start.</p>
<div class="mt-4">

<p class="mt-4">
<a href="https://guides.emberjs.com/release/getting-started/quick-start/" class="es-button">Quickstart</a>
<a href="https://github.com/emberjs" class="es-button-secondary ml-1">View on Github</a>
</div>
</p>
</div>
</div>

<ul class="grid lg:grid-2 mt-4 list-unstyled">
<EsCard @image="/images/home/guides.svg" class="bg-dark" card-link>
<h3>
<a href="https://guides.emberjs.com" class="text-md">Read the Guides</a>
</h3>
<EsLinkCard
@icon="guides"
@title="Read the Guides"
@href="https://guides.emberjs.com"
>
<p>If you're familiar with JavaScript and web application development, our Guides will teach you everything you need to know to get started building with Ember.</p>
</EsCard>
</EsLinkCard>

<EsCard @image="/images/home/blog.svg" class="bg-dark" card-link>
<h3>
<a href="https://blog.emberjs.com" class="text-md">Read Our Blog</a>
</h3>
<EsLinkCard
@icon="blog"
@title="Read Our Blog"
@href="https://blog.emberjs.com"
>
<p>Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.</p>
</EsCard>
</EsLinkCard>
</ul>
</div>
</section>
3 changes: 1 addition & 2 deletions app/templates/learn/examples.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
{{#each this.model as |showcase|}}
<EsCard
@alt=""
@image="/images/showcase/{{showcase.image.src}}"
full-image vertical
@image={{hash src=(concat "/images/showcase/" showcase.image.src)}}
>
<h2>{{showcase.name}}</h2>

Expand Down
Loading

0 comments on commit 4e11347

Please sign in to comment.