Slide 5
Slide 5 text
!!"
* 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;
line-height: 1.5;
}
body {
background: #f3f3f3;
}
a {
color: #016aba;
text-decoration: none;
}
app/styles/app.css
Slide 7
Slide 7 text
app/templates/index.hbs
"#div>
Welcome to Super Rentals!"#h2>
We hope you find exactly what you're looking for in a place to stay."#p> About Us"#a> "#div>
Slide 8
Slide 8 text
app/components/nav-bar.hbs
app/templates/index.hbs
"#div>
Welcome to Super Rentals!"#h2>
We hope you find exactly what you're looking for in a place to stay."#p> About Us"#a> "#div>
Slide 10
Slide 10 text
"#div>
Welcome to Super Rentals!"#h2>
We hope you find exactly what you're looking for in a place to stay."#p> About Us"#a> "#div>
Slide 11
Slide 11 text
app/components/rental.hbs
"#li>
app/templates/index.hbs
View Larger"#small>
"#button>
Grand Old Mansion"#a>"#h3>
Grand Old Mansion"#a>"#h3>
Owner"&/span> Veruca Salt"#div>
Type"&/span> Standalone"#div>
Location"&/span> San Francisco"#div>
Type"&/span> Standalone"#div>
Location"&/span> San Francisco"#div>
Slide 12
Slide 12 text
app/components/rental.hbs
View Larger"#small>
"#button>
Slide 14
Slide 14 text
Slide 16
Slide 16 text
Slide 29
Slide 29 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class RentalImageComponent extends Component {
@tracked isLarge = false;
toggleSize() {
this.isLarge = !this.isLarge;
}
}
app/components/rental/image.js
{{#if this.isLarge}}
![]()
View Smaller"#small>
"#div>
{{else}}
![]()
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
Slide 30
Slide 30 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class RentalImageComponent extends Component {
@tracked isLarge = false;
toggleSize() {
this.isLarge = !this.isLarge;
}
}
app/components/rental/image.js
{{#if this.isLarge}}
![]()
View Smaller"#small>
"#div>
{{else}}
![]()
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
Slide 33
Slide 33 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
app/components/rental/image.js
{{#if this.isLarge}}
View Smaller"#small>
"#div>
{{else}}
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
Slide 34
Slide 34 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
app/components/rental/image.js
{{#if this.isLarge}}
View Smaller"#small>
"#div>
{{else}}
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
Slide 35
Slide 35 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
app/components/rental/image.js
{{#if this.isLarge}}
View Smaller"#small>
"#div>
{{else}}
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
SuperRentals"#h1>"#a>
SuperRentals"#h1>"#a>
About"#a>
Contact"#a>
"#div>
"#nav>
"#div>
Welcome to Super Rentals!"#h2>
We hope you find exactly what you're looking for in a place
About Us"#a>
"#div>
Where would you like to stay?"#span>
"#label>
-
"#button>
Grand Old Mans
Owner"&/span> Veruca Sa
Type"&/span> Standalone"
export default class RentalImageComponent extends Component {
@tracked isLarge = false;
this.isLarge = !this.isLarge;
}
}
toggleSize() {
>
>
{{on "click" this.toggleSize}}
{{on "click" this.toggleSize}}
@action
import { action } from '@ember/object';
"#div>
Welcome to Super Rentals!"#h2>
We hope you find exactly what you're looking for in a place About Us"#a> "#div>
Where would you like to stay?"#span>
"#label>
-
Grand Old Mans
Owner"&/span> Veruca SaType"&/span> Standalone" export default class RentalImageComponent extends Component { @tracked isLarge = false; this.isLarge = !this.isLarge; } } toggleSize() { > > {{on "click" this.toggleSize}} {{on "click" this.toggleSize}} @action import { action } from '@ember/object';
Slide 36
Slide 36 text
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class RentalImageComponent extends Component {
@tracked isLarge = false;
@action toggleSize() {
this.isLarge = !this.isLarge;
}
}
app/components/rental/image.js
{{#if this.isLarge}}
![]()
View Smaller"#small>
"#div>
{{else}}
![]()
View Larger"#small>
"#div>
{{/if}}
app/components/rental/image.hbs
{{on "click" this.toggleSize}}
{{on "click" this.toggleSize}}
Slide 37
Slide 37 text
"#div>
Where would you like to stay?"#span>
"#label>
Slide 38
Slide 38 text
"#div>
Where would you like to stay?"#span>
Slide 39
Slide 39 text
"#div>
Where would you like to stay?"#span>
- autofocus
Slide 40
Slide 40 text
"#div>
Where would you like to stay?"#span>
- {{autofocus}} import Modifier from 'ember-modifier'; export default class AutofocusModifier extends Modifier { didInstall() { this.element.focus(); if (document.activeElement !== this.element) { !$ Make the element focusable then try again. this.element.setAttribute('tabindex', -1); this.element.focus(); } } } app/modifiers/autofocus.js
Slide 41
Slide 41 text
{{!!% uses @ember/render-modifiers addon !%}}
Slide 42
Slide 42 text
{{!!% uses @ember/render-modifiers addon !%}}
({ radius: Math.random() * 12 + 4 })),
root = nodes[0],
color = d3.scale.category10();
root.radius = 0;
root.fixed = true;
let force = d3.layout.force()
.gravity(0.05)
.charge(function(d, i) { return i ? 0 : -2000; })
.nodes(nodes)
.size([width, height]);
force.start();