neues leeres Projekt aufgesetzt und Grundstruktur implementiert

app/components/jumbo.hbs

@@ -0,0 +1,3 @@
+<div class="jumbo">
+  {{yield}}
+</div>

app/components/nav-bar.hbs

@@ -0,0 +1,16 @@
+<nav class="menu">
+  <LinkTo @route="index" class="menu-index">
+    <h1>EinkaufsZettel</h1>
+  </LinkTo>
+  <div class="links">
+    <LinkTo @route="zettel" class="menu-zettel">
+      Zettel
+    </LinkTo>
+    <LinkTo @route="produkte" class="menu-produkte">
+      Produkte
+    </LinkTo>
+    <LinkTo @route="rezepte" class="menu-rezepte">
+      Rezepte
+    </LinkTo>
+  </div>
+</nav>

app/router.js

@@ -7,4 +7,7 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
+  this.route('rezepte');
+  this.route('zettel');
+  this.route('produkte');
 });

app/styles/app.css

@@ -0,0 +1,468 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic);
+
+/**
+ * Base Elements
+ */
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+div,
+span,
+a,
+button {
+  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}
+
+body {
+  background: #f3f3f3;
+}
+
+a {
+  color: #016aba;
+  text-decoration: none;
+}
+
+button {
+  font-size: 100%;
+}
+
+p {
+  line-height: 1.5;
+  margin-bottom: 15px;
+}
+
+/**
+ * Button
+ */
+
+.button {
+  padding: 10px 30px 10px;
+  text-decoration: none;
+  color: #fff;
+  background: #016aba;
+  border-radius: 5px;
+  border: none;
+  font-size: 20px;
+  font-weight: bold;
+  opacity: 0.9;
+  display: inline-block;
+}
+
+.button:hover {
+  opacity: 1;
+}
+/**
+ * Body Container
+ */
+
+.container {
+  max-width: 1024px;
+  min-height: 100vh;
+  background: #f9f9f9;
+  margin: 0 auto;
+}
+/**
+ * Top Navigation
+ */
+
+.menu {
+  height: 4em;
+  background-color: #677ae4;
+  background-color: #05526A;
+  background-color: #e46855;
+}
+
+.menu h1 {
+  position: relative;
+  padding: 5px 0 0 8px;
+  color: #f9f9f9;
+  font-size: 1.8em;
+  font-style: italic;
+}
+
+.menu a,
+.menu .links {
+  display: inline-block;
+}
+
+.menu a {
+  text-decoration: none;
+  padding: 0 15px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.menu a:hover,
+.menu a.active {
+  opacity: 1;
+}
+
+.menu .links {
+  padding: 0 21px;
+}
+
+.menu .links a {
+  position: relative;
+  bottom: 5px;
+}
+
+.zettel label span {
+  font-size: 140%;
+  margin: 50px auto 20px;
+  display: block;
+  text-align: center;
+  font-style: italic;
+}
+
+.zettel input {
+  padding: 11px;
+  font-size: 18px;
+  width: 500px;
+  margin: 20px auto 50px;
+  background-color: rgba(255, 255, 255, 0.75);
+  border: solid 1px lightgray;
+  display: block;
+}
+
+.menu input:focus {
+  background-color: #f9f9f9;
+  outline: none;
+}
+
+.menu button {
+  margin-right: 15px;
+  position: relative;
+  top: -1px;
+  left: -5px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  background-color: #262626;
+  cursor: pointer;
+  opacity: 1;
+}
+
+.menu button:hover {
+  background-color: #111;
+  opacity: 1;
+}
+
+.menu .results {
+  display: none;
+  position: absolute;
+  width: 215px;
+  top: 54px;
+  left: 10px;
+  background-color: #f6f6f6;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.results {
+  margin-top: -10px;
+}
+
+.results li {
+  list-style: none;
+  padding: 10px 15px;
+}
+
+.menu .results li:hover {
+  background: #f3f3f3;
+}
+/**
+ * Content Area
+ */
+
+.body {
+  padding: 15px;
+}
+/**
+ * Similar to Jumbotron
+ */
+
+.jumbo {
+  padding: 50px;
+  background: #f6f6f6;
+}
+
+.jumbo:hover {
+  background-color: #f3f3f3;
+}
+
+.jumbo h2 {
+  font-size: 3.2em;
+  margin-top: -25px;
+}
+
+.jumbo p,
+.jumbo address {
+  margin-bottom: 25px;
+}
+
+.jumbo img {
+  height: 200px;
+  position: relative;
+  top: -25px;
+  right: -20px;
+}
+
+/**
+ * Individual zettel Listing
+ */
+
+.zettel {
+  margin-top: 15px;
+  background-color: #f6f6f6;
+  padding: 20px 25px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.zettel:hover {
+  background-color: #f3f3f3;
+}
+
+.zettel img {
+  border-radius: 5px;
+}
+
+.zettel .image {
+  flex-grow: 0;
+  flex-basis: 150px;
+  margin: 20px 25px;
+  text-align: center;
+}
+
+.zettel button.image {
+  position: relative;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  z-index: 1;
+}
+
+.zettel button.image:focus {
+  outline: none;
+}
+
+.zettel button.image:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  margin: -20px;
+  padding: 20px;
+  border-radius: 5px;
+  background: #016aba;
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.zettel button.image:focus:after, .zettel button.image:hover:after {
+  opacity: 0.1;
+}
+
+.zettel .image img {
+  max-width: 100%;
+}
+
+.zettel .image.large {
+  margin: 30px 25px 50px 25px;
+  flex-basis: 100%;
+}
+
+.zettel .image small {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: -15px;
+  text-align: center;
+  color: #016aba;
+
+  /* This is needed to fix a safari clipping issue */
+  position: relative;
+}
+
+.zettel .image.large small {
+  margin-top: 10px;
+  margin-bottom: 0px;
+  font-size: 110%;
+}
+
+.zettel .details {
+  flex-basis: 50%;
+  flex-grow: 2;
+  display: flex;
+  height: 150px;
+  margin: 20px 25px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-content: space-around;
+}
+
+.zettel h3 {
+  flex-basis: 100%;
+}
+
+.zettel h3 a {
+  display: inline;
+}
+
+.zettel .detail {
+  flex-basis: 50%;
+  font-weight: 300;
+  font-style: italic;
+  white-space: nowrap;
+}
+
+.zettel .detail span {
+  font-weight: 400;
+  font-style: normal;
+}
+
+.zettel .map {
+  flex-grow: 0;
+  flex-basis: 150px;
+  font-size: 0;
+  margin: 0px 25px;
+}
+
+.zettel .map img {
+  width: 150px;
+  height: 150px;
+}
+
+.zettel.detailed {
+  background: none;
+  align-items: flex-start;
+}
+
+.zettel.detailed .image {
+  flex-basis: 320px;
+}
+
+.zettel.detailed .image.large {
+  margin: 30px 25px 50px 25px;
+  flex-basis: 100%;
+}
+
+.zettel.detailed .details {
+  height: auto;
+}
+
+.zettel.detailed h3 {
+  font-size: 200%;
+  margin-bottom: 10px;
+}
+
+.zettel.detailed .detail {
+  margin: 5px 0px;
+  flex-basis: 100%;
+  flex-shrink: 2;
+}
+
+.zettel.detailed .description {
+  white-space: normal;
+  flex-basis: 100%;
+  flex-shrink: 1;
+}
+
+.zettel.detailed .map {
+  flex-basis: 100%;
+  margin: 50px 25px 25px 25px;
+}
+
+.zettel.detailed .map img {
+  width: 100%;
+  height: auto;
+}
+
+@media only screen and (max-width: 919px) {
+  .zettel.detailed .image, .zettel.detailed .image.large {
+    margin: 30px 25px 25px 25px;
+    flex-basis: 100%;
+    cursor: default;
+  }
+
+  .zettel.detailed .image:hover {
+    flex-basis: 100%;
+    cursor: default;
+  }
+
+  .zettel.detailed .image small {
+    display: none;
+  }
+
+  .zettel.detailed button.image:hover:after {
+    opacity: 0;
+  }
+
+  .zettel.detailed button.image:focus:after {
+    opacity: 0.1;
+  }
+
+  .zettel.detailed .map {
+    margin-top: 25px;
+  }
+}
+
+/**
+ * Utilities
+ */
+
+.light {
+  font-weight: 300;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.hidden {
+  display: none;
+}
+
+.relative {
+  position: relative;
+}
+
+.tomster {
+  background: url(../assets/images/teaching-tomster.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 200px;
+  width: 200px;
+
+  position: relative;
+  top: -25px;
+}
+
+.screen-reader{
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}
+

app/templates/application.hbs

@@ -1,5 +1,6 @@
-{{!-- The following component displays Ember's default welcome message. --}}
+<div class="container">
-<WelcomePage />
+  <NavBar />
-{{!-- Feel free to remove this! --}}
+  <div class="body">
-
     {{outlet}}
+  </div>
+</div>

app/templates/index.hbs

@@ -0,0 +1,11 @@
+<Jumbo>
+  <h2>Willkommen!</h2>
+  <p>Hier kannst du eigenen online Einkaufszettel anlegen und mit deiner Familie und deinen Freunden teilen!</p>
+  <p>Einfach die benötigten Produkte oder ganze Rezepte auswählen und deinen Zettel automatisch zusammenstellen lassen! </p>
+  <LinkTo @route="zettel" class="button">Alle Zettel</LinkTo>
+</Jumbo>
+
+<div class="zettel">
+    {{yield}}
+</div>
+  

app/templates/produkte.hbs

@@ -0,0 +1,9 @@
+<Jumbo>
+  <h2>Produkte</h2>
+  <p>Hier kannst du aus deinen Produkten wählen oder neue Produkte hinzufügen!</p>
+  <LinkTo @route="produkte" class="button">Produkte bearbeiten</LinkTo>
+</Jumbo>
+
+<div class="zettel">
+    {{yield}}
+</div>

app/templates/rezepte.hbs

@@ -0,0 +1,10 @@
+<Jumbo>
+  <h2>Rezepte</h2>
+  <p>Hier kannst du aus deinen Rezepten wählen oder neue Rezepte hinzufügen!</p>
+  <LinkTo @route="rezepte" class="button">Rezepte bearbeiten</LinkTo>
+</Jumbo>
+
+<div class="zettel">
+    {{yield}}
+</div>
+  

app/templates/zettel.hbs

@@ -0,0 +1,10 @@
+<Jumbo>
+  <h2>deine Zettel</h2>
+  <p>Hier kannst du aus deinen aktuellen Zetteln wählen oder deine Zettel aktualisieren!</p>
+  <LinkTo @route="zettel" class="button">Zettel aktualisieren</LinkTo>
+</Jumbo>
+
+<div class="zettel">
+    {{yield}}
+</div>
+  

tests/acceptance/einkaufszettel-test.js

@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { click, visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | einkaufszettel', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /einkaufszettel', async function(assert) {
+    await visit('/');
+    
+    assert.equal(currentURL(), '/');
+    assert.dom('nav').exists();
+    assert.dom('nav a.menu-index').hasText('EinkaufsZettel')
+    assert.dom('nav a.menu-zettel').hasText('Zettel');
+    assert.dom('nav a.menu-produkte').hasText('Produkte');
+    assert.dom('nav a.menu-rezepte').hasText('Rezepte');
+
+  });
+
+  test('navigating using the nav-bar', async function(assert) {
+    await visit('/');
+
+    assert.dom('nav').exists();
+    assert.dom('nav a.menu-index').hasText('EinkaufsZettel')
+    assert.dom('nav a.menu-zettel').hasText('Zettel');
+    assert.dom('nav a.menu-produkte').hasText('Produkte');
+    assert.dom('nav a.menu-rezepte').hasText('Rezepte');
+
+    await click('nav a.menu-zettel');
+    assert.equal(currentURL(), '/zettel');
+
+    await click('nav a.menu-produkte');
+    assert.equal(currentURL(), '/produkte');
+
+    await click('nav a.menu-rezepte');
+    assert.equal(currentURL(), '/rezepte');
+
+    await click('nav a.menu-index');
+    assert.equal(currentURL(), '/');
+  });
+
+  test('visiting /zettel', async function(assert) {
+    await visit('/zettel');
+
+    assert.dom('nav').exists();
+    assert.dom('nav a.menu-index').hasText('EinkaufsZettel')
+    assert.dom('nav a.menu-zettel').hasText('Zettel');
+    assert.dom('nav a.menu-produkte').hasText('Produkte');
+    assert.dom('nav a.menu-rezepte').hasText('Rezepte');
+
+    assert.dom('.jumbo a.h2').hasText('deine Zettel');
+    assert.dom('.jumbo a.button').hasText('Zettel aktualisieren');
+    await click('.jumbo a.button');
+
+    assert.equal(currentURL(), '/zettel');
+  });
+
+});

tests/integration/components/jumbo-test.js

@@ -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 | jumbo', 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`<Jumbo />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Jumbo>
+        template block text
+      </Jumbo>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/produkte-test.js

@@ -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 | produkte', 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`<Produkte />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Produkte>
+        template block text
+      </Produkte>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/rezepte-test.js

@@ -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 | rezepte', 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`<Rezepte />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Rezepte>
+        template block text
+      </Rezepte>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/zettel-test.js

@@ -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 | zettel', 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`<Zettel />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Zettel>
+        template block text
+      </Zettel>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});