Skip to content

Instantly share code, notes, and snippets.

@aaronmw

aaronmw/components.fb-page-section.js

Last active July 24, 2017 21:33
Show Gist options
  • Save aaronmw/8ad512fb1e3908aadf4f5c0fea37bbcd to your computer and use it in GitHub Desktop.
Save aaronmw/8ad512fb1e3908aadf4f5c0fea37bbcd to your computer and use it in GitHub Desktop.
Download ZIP
New Twiddle
Raw
components.fb-page-section.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['u-marginY--1']
});
Raw
components.fb-sticky.js
import Ember from 'ember';
import StickyContainer from 'ember-cli-sticky/components/sticky-container';
export default StickyContainer.extend({
type: 'header',
config: {
global: {
wrapperClassName: 'fb-sticky',
},
header: {
topSpacing: 0,
},
subheader: {
topSpacing: 57,
}
},
options: Ember.computed('type', function () {
return Ember.merge(this.get('config').global, this.get('config')[this.get('type')]);
})
});
Raw
controllers.application.js
import Ember from 'ember';
import scss from '../styles/app';
export default Ember.Controller.extend({
init() {
this._super(...arguments);
Sass.compile(scss, function(result) {
Ember.$('head').append(`<style>${result.text}</style>`);
});
},
appName: 'Ember Twiddle',
stickyOptions: {
wrapperClassName: 'page-section'
}
});
Raw
styles.app.js
export default `
$color--background: #FBFDFE;
$color--foreground: #062942;
$color--blue: #0D83DD;
$color--green: #85C525;
$color--yellow: #EDC02C;
$color--red: #FA405C;
$grid-unit: 20px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 18px;
font-family: Helvetica, serif;
}
body {
background: $color--background;
}
p + p {
margin-top: 10px;
}
.u-textAlign--right {
text-align: right;
}
.u-textAlign--left {
text-align: left;
}
.u-paddingX--half {
padding-left: $grid-unit / 2;
padding-right: $grid-unit / 2;
}
.u-paddingX--1 {
padding-left: $grid-unit;
padding-right: $grid-unit;
}
.u-paddingY--half {
padding-top: $grid-unit / 2;
padding-bottom: $grid-unit / 2;
}
.u-paddingY--1 {
padding-top: $grid-unit;
padding-bottom: $grid-unit;
}
.u-marginX--half {
margin-left: $grid-unit / 2;
margin-right: $grid-unit / 2;
}
.u-marginX--1 {
margin-left: $grid-unit;
margin-right: $grid-unit;
}
.u-marginY--half {
margin-top: $grid-unit / 2;
margin-bottom: $grid-unit / 2;
}
.u-marginY--1 {
margin-top: $grid-unit;
margin-bottom: $grid-unit;
}
.link {
color: $color--blue;
cursor: pointer;
}
.page {
width: 100vw;
}
$page-navigation-width: 150px;
.page-navigation {
position: fixed;
width: $page-navigation-width;
height: 100vh;
background: $color--blue;
}
.page-content {
width: 960px;
margin: 0 auto;
position: relative;
left: $page-navigation-width / 2;
}
.page-section {
.page-section + & {
margin-top: 40px;
}
}
.page-sectionTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: $grid-unit 0;
.is-sticky & {
margin: ($grid-unit / 2) 0 0 0;
}
}
.page-sectionTitleActions {
}
.search {
border: 2px solid rgba($color--foreground, 0.2);
border-radius: 1000px;
padding: 5px 10px;
width: 250px;
background: white;
}
.heading {
font-weight: 100;
}
.heading--1 {
font-size: 32px;
}
.heading--2 {
font-size: 24px;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid rgba($color--foreground, 0.2);
margin-bottom: 20px;
.is-sticky & {
padding: 10px 0;
margin: 0;
border: none;
transition: padding 0.2s ease-in-out;
}
}
.button {
cursor: pointer;
background: $color--green;
border-radius: 5px;
border: none;
color: white;
padding: 10px 20px;
font-weight: 100;
}
.entityTable {
width: 100%;
}
.entityTable-header {
}
.entityTable-body {
}
.fb-sticky {
&.is-sticky .sticky {
background-color: $color--background;
box-shadow: 0 4px 0 0 rgba($color--foreground, 0.2);
}
}
`;
Raw
templates.application.hbs
<div class="page">
<div class="page-navigation">
Nav here
</div>
<div class="page-content">
{{#fb-sticky type="header"}}
<div class="page-header">
<div class="page-headerTitle">
<h1 class="heading heading--1">Invoices</h1>
</div>
<div class="page-headerActions">
<span class="button">New Invoice</span>
</div>
</div>
{{/fb-sticky}}
{{outlet}}
{{#fb-page-section}}
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
<p>Testing</p>
{{/fb-page-section}}
<div class="page-section">
{{#fb-sticky type="header"}}
<div class="page-sectionTitle">
<h2 class="heading heading--2">All Invoices Here</h2>
<div class="page-sectionTitleActions">
<div class="search">Search...</div>
</div>
</div>
<table class="entityTable">
<thead class="entityTable-header">
<tr>
<th width="1">
<input type="checkbox">
</th>
<th class="u-paddingX--1 u-paddingY--half u-textAlign--left">
<a class="link">Column</a> /
<a class="link">Column</a>
</th>
<th class="u-paddingX--1 u-paddingY--half u-textAlign--right">
<a class="link">Column</a> /
<a class="link">Column</a>
</th>
<th class="u-paddingX--1 u-paddingY--half u-textAlign--right">
<a class="link">Column</a> /
<a class="link">Column</a>
</th>
<th class="u-paddingX--1 u-paddingY--half u-textAlign--right">
<a class="link">Column</a> /
<a class="link">Column</a>
</th>
</tr>
</thead>
</table>
{{/fb-sticky}}
<table class="entityTable">
<tbody class="entityTable-body">
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
<tr>
<td width="1"><input type="checkbox"></td>
<td class="u-paddingX--1 u-paddingY--half">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
<td class="u-paddingX--1 u-paddingY--half u-textAlign--right">Data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Raw
twiddle.json
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0",
"sass.js": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.3/sass.sync.min.js"
},
"addons": {
"ember-data": "2.12.1",
"ember-cli-sticky": "0.6.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment