gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Recipe items

Browse source
This commit is contained in:
Ava Gaiety Wroten 2019-12-21 16:13:14 -06:00
parent 31f220f78c
commit 0c5a350425
4 changed files with 69 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/components/recipe-list.hbs
View file

@ -1,21 +1,20 @@
<SortableGroup
@model={{this.items}}
@onChange={{action this.reorderItems}}
as |group|>
{{#each group.model as |meal|}}
<group.item
@model={{meal}}
as |item|>
<item.handle>
<RecipePreview @meal={{meal}} />
</item.handle>
</group.item>
{{/each}}
</SortableGroup>
<button <button
{{on "click" this.addRecipe}} {{on "click" this.addRecipe}}
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"> class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
Button Button
</button> </button>
<SortableGroup
@model={{this.items}}
@onChange={{action this.reorderItems}}
as |group|>
{{#each group.model as |modelItem|}}
<group.item
@model={{modelItem}}
as |item|>
<item.handle>
<span class="handle">&varr;</span>
{{modelItem.strMeal}}
</item.handle>
</group.item>
{{/each}}
</SortableGroup>

19
app/components/recipe-preview.hbs Normal file
View file

@ -0,0 +1,19 @@
<div class="max-w-sm w-full lg:max-w-full lg:flex">
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover text-center overflow-hidden"
style="background-image: url('{{@meal.strMealThumb}}')">
</div>
<div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<div class="text-gray-900 font-bold text-xl mb-2">
{{@meal.strMeal}}
</div>
<p class="text-gray-700 text-base">
Lorem...
</p>
</div>
<div>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#{{@meal.strCategory}}</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#{{@meal.strArea}}</span>
</div>
</div>
</div>

10
app/templates/application.hbs
View file

@ -1,5 +1,11 @@
<HeaderNav /> <HeaderNav />
<main class="container mx-auto"> <div class="flex mb-4">
<div class="w-1/4">
<RecipeList /> <RecipeList />
</main> </div>
<div class="w-3/4">
Content goes here.
{{outlet}}
</div>
</div>

26
tests/integration/components/recipe-preview-test.js Normal file
View file

@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | recipe-preview', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
await render(hbs`<RecipePreview />`);
assert.equal(this.element.textContent.trim(), '');
// Template block usage:
await render(hbs`
<RecipePreview>
template block text
</RecipePreview>
`);
assert.equal(this.element.textContent.trim(), 'template block text');
});
});