Skip to content

Instantly share code, notes, and snippets.

@bstro

bstro/controllers.application.js

Last active January 31, 2018 21:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bstro/aeae75c871ed73a6469e508cc1746e1d to your computer and use it in GitHub Desktop.
Save bstro/aeae75c871ed73a6469e508cc1746e1d to your computer and use it in GitHub Desktop.
Download ZIP
New Twiddle
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
Raw
styles.app.css
.grid {
display: grid;
}
.sticky { position: sticky; }
.sticky-xs-l { left: 0; }
.sticky-xs-t { top: 0; }
.sticky-xs-b { bottom: 0; }
.grid div[data-column='1'] { grid-column-start: 1 }
.grid div[data-row="1"] { grid-row-start: 1 }
.grid div[title]:before {
content: attr(title);
display: block;
writing-mode: vertical-lr;
transform: rotate(180deg);
white-space: nowrap;
text-align: justify;
height: 100%;
}
/
html, body {
padding: 0;
margin: 0;
}
.wrapper {
width: 1024px;
}
.footer {
background-color:yellow;
}
.grid div { background-color: white }
.grid div[data-column='1'] { background-color: red }
.grid div[data-row='1'] { background-color: white }
//
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
Raw
templates.application.hbs
<div class="wrapper">
<div class="grid">
<div data-column="1" data-row="1" class="sticky sticky-xs-t sticky-xs-l bg-gray-200 z-index-2">foo</div>
<div data-column="2" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Using and Developing Models"></div>
<div data-column="3" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Planning Investigations"></div>
<div data-column="4" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Analyzing Data"></div>
<div data-column="5" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Using Evidence in Explanations"></div>
<div data-column="6" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Supporting Arguments"></div>
<div data-column="7" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Obtaining Information"></div>
<div data-column="8" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Communicating Scientific Information"></div>
<div data-column="9" data-row="1" class="sticky sticky-xs-t bg-gray-200 z-index-1" title="LM Lorem Ipsum Dolor Sit Amet">●</div>
<div data-column="1" data-row="2" class="sticky sticky-xs-l bg-gray-100">Danielle Garcia</div>
<div data-column="2" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="2">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="3" class="sticky sticky-xs-l bg-gray-100">Ava Calafiore Helena</div>
<div data-column="2" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="3">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="4" class="sticky sticky-xs-l bg-gray-100">Henry Gammell</div>
<div data-column="2" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="4">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="5" class="sticky sticky-xs-l bg-gray-100">Zizou Desai</div>
<div data-column="2" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="5">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="6" class="sticky sticky-xs-l bg-gray-100">Alexia Stratton</div>
<div data-column="2" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="6">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="7" class="sticky sticky-xs-l bg-gray-100">Jack Mahoney</div>
<div data-column="2" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="7">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="8" class="sticky sticky-xs-l bg-gray-100">Macy Bargen</div>
<div data-column="2" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="8">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="9" class="sticky sticky-xs-l bg-gray-100">Max Kadner</div>
<div data-column="2" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="9">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="10" class="sticky sticky-xs-l bg-gray-100">Maximillian Bethel</div>
<div data-column="2" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="10">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="11" class="sticky sticky-xs-l bg-gray-100">Sean Gallagher</div>
<div data-column="2" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="11">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="12" class="sticky sticky-xs-l bg-gray-100">Grace Michel</div>
<div data-column="2" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="12">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="13" class="sticky sticky-xs-l bg-gray-100">Bill Brasky</div>
<div data-column="2" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="13">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="14" class="sticky sticky-xs-l bg-gray-100">Ryan Bram</div>
<div data-column="2" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="14">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="15" class="sticky sticky-xs-l bg-gray-100">Cameron Pratt</div>
<div data-column="2" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="15">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="16" class="sticky sticky-xs-l bg-gray-100">Miles Feegel</div>
<div data-column="2" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="16">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="17" class="sticky sticky-xs-l bg-gray-100">August Wright</div>
<div data-column="2" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="17">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="18" class="sticky sticky-xs-l bg-gray-100">Anna Waterman</div>
<div data-column="2" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="18">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="19" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="19">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="20" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="20">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="21" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="21">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="22" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="22">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="23" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="23">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="24" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="24">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="25" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="25">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="26" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="26">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="27" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="27">lorem ipsum dolor sit amet</div>
<div data-column="1" data-row="28" class="sticky sticky-xs-l bg-gray-100">sticky</div>
<div data-column="2" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="3" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="4" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="5" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="6" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="7" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="8" data-row="28">lorem ipsum dolor sit amet</div>
<div data-column="9" data-row="28">lorem ipsum dolor sit amet</div>
</div>
<div class="footer sticky sticky-xs-b">
sticky
</div>
</div>
Raw
twiddle.json
{
"version": "0.13.0",
"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.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-data": "2.16.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment