Skip to content

Instantly share code, notes, and snippets.

@shuuki

shuuki/OMAR COOKIN.markdown

Last active August 29, 2015 14:24
Show Gist options
  • Save shuuki/b21508e58f292f765b17 to your computer and use it in GitHub Desktop.
Save shuuki/b21508e58f292f765b17 to your computer and use it in GitHub Desktop.
Download ZIP
OMAR COOKIN
Raw
index.html
// top of the universe
.container-fluid.workspace.heightfix
.row
// main space for spreadsheet
.col-xs-6.col-sm-7.col-md-8.main
.table-container.heightfix
#table
// sidebar space for inspector
// toggle .inverted class depending on context
.col-xs-6.col-sm-5.col-md-4.inspector.inverted.heightfix
// controls to dismiss or confirm changes
span.btn.btn-transparent.sticky.icon-x
// selection title and type
h3 Selection
small Existing
// selection info
select(id="prop-info").interactive
option(value="string") Number
option(value="string") String
option(value="string") Date/Time
option(value="string") Timeseries
option(value="string") Location
option(value="string") Relation
// space for preview graph
.preview
p: small Histogram for Numbers, Date/Time
p: small Tag Cloud for Strings, Locations
p: small Line chart for Timeseries
// health stats
.health
.label.label-success 6897 Valid
.label.label-warning 45 No value
.label.label-danger 125 Not a Number
// validation rules
.rules
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
p.interactive Validation Rule
span.btn.icon-close.pull-right
span.label.label-default.pull-right 8 matches
hr
h2 Next steps as fixed top navbar?
br
.container-fluid
.row.inverted
.col-xs-8
.context
h4 Next Steps
p Looks like you need to teach Datavore some more about your data.
a(href="#") Add More Context
span.icon-arrow_forward
.actions
.btn.btn-info Done? Load Data.
.col-xs-4
.context
h1
span.icon-omar
span 82%
.progress
.progress-bar.progress-bar-success(style="width: 82%")
hr
h2 Initial State before data is introduced
br
.container-fluid
.row
.col-xs-6.col-xs-offset-3
.btn.btn-default.btn-block
h1.icon-open_in_browser
p: b Load to Begin
hr
h2 User introduces a file
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector
h3.interactive cars2.csv
.btn.btn-transparent.pull-right
span.icon-file_upload
.statistics
.label.label-default Row Count or Sample Size
.label.label-default Strings: 10 of 40
.label.label-default Numbers: 10 of 40
.label.label-default Dates: 10 of 40
.label.label-default Locations: 10 of 40
.context
h4 Context
p: input(type="text" placeholder="What does this sheet contain?").interactive
.actions
.btn.btn-info.btn-block Create New Concept
hr
h2 User has selected the Sheet Concept
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector
h3.interactive cars2.csv
.btn.pull-right
span.icon-file_upload
.statistics
.label.label-default Row Count or Sample Size
.label.label-default Strings: 10 of 40
.label.label-default Numbers: 10 of 40
.label.label-default Dates: 10 of 40
.label.label-default Locations: 10 of 40
.context
h4 Context
h3.interactive Cars
small Concept
span.btn.icon-close.pull-right
.property
p: b Property Location
.btn-group
button.btn.btn-info Headers
button.btn.btn-default Columns
.history
h4 History
ul.list-group
li.list-group-item
.label.label-warning Uploaded file
small cars2.csv (128Mb)
li.list-group-item
.label.label-success Engine-type detected
small at $C
li.list-group-item
.label.label-success Manufacturer detected
small at $A
li.list-group-item
.label.label-success MPG^2
small Calculated by A x B x C
hr
h2 Loader Inspector States
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Peak RPM
select(id="prop-info").interactive
option(value="string") Number
option(value="string") String
option(value="string") Date/Time
option(value="string") Timeseries
option(value="string") Location
option(value="string") Relation
.rules
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
.preview
p: small Histogram for Numbers, Date/Time
p: small Tag Cloud for Strings, Locations
p: small Line chart for Timeseries
.health
.label.label-success 6897 Valid
.label.label-warning 45 No value
.label.label-danger 125 Not a Number
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Revenue
select(id="prop-info").interactive
option(value="string") Timeseries
option(value="string") String
option(value="string") Date/Time
option(value="string") Number
option(value="string") Location
option(value="string") Relation
p.interactive Location Time
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Revenue
select(id="prop-info").interactive
option(value="string") Timeseries
option(value="string") String
option(value="string") Date/Time
option(value="string") Number
option(value="string") Location
option(value="string") Relation
p Time: $A2
p.interactive value @ time ($A@$A1)
span.btn.icon-close.pull-right
span.label.label-default.pull-right 8 matches
.preview
p: small Histogram for Numbers, Date/Time
p: small Tag Cloud for Strings, Locations
p: small Line chart for Timeseries
.health
.label.label-success 6897 Valid
.label.label-warning 45 No value
.label.label-danger 125 Not a Number
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Make
select(id="prop-info").interactive
option(value="string") Relation
option(value="string") String
option(value="string") Date/Time
option(value="string") Timeseries
option(value="string") Location
option(value="string") Number
p: input(type="text" placeholder="Search Type").interactive
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Make
select(id="prop-info").interactive
option(value="string") Relation
option(value="string") String
option(value="string") Date/Time
option(value="string") Timeseries
option(value="string") Location
option(value="string") Number
p: input(type="text" placeholder="Search Type" value="Car Manufacturer").interactive
.actions
.btn.btn-info.btn-block Create New Concept
br
.container-fluid
.row
.col-xs-6.col-sm-5.col-md-4.inspector.inverted
span.btn.sticky.icon-x
h3 Make
select(id="prop-info").interactive
option(value="string") Relation
option(value="string") String
option(value="string") Date/Time
option(value="string") Timeseries
option(value="string") Location
option(value="string") Number
p.interactive Car Manufacturer
.rules
p.interactive Validation Rule
span.btn.btn-transparent.icon-close.pull-right
span.label.label-default.pull-right 8 matches
.health
.label.label-default 386 matches (15 distinct)
.label.label-warning 45 No value
.label.label-danger 15 No matches
.label.label-info 125 Have suggestions
.suggestions
h4 Suggestions
div Audi ==
span.interactive Audi Motors
span.btn.btn-default.btn-xs.pull-right No
span.btn.btn-default.btn-xs.pull-right Yes
ui
li Audi Car Company
li A new company
br
div ToyCar ==
span.interactive Toyota Motors
span.btn.btn-default.btn-xs.pull-right No
span.btn.btn-default.btn-xs.pull-right Yes
br
div Audi ==
span.interactive <no match>
span.btn.btn-default.btn-xs.pull-right Create
br
.actions
.btn.btn-info.btn-block Create All Car Manufactures
Raw
OMAR COOKIN.markdown
Raw
script.js
// quick and dirty 100% height fix
// very buggy with the table
$(document).ready(function() {
$('.heightfix').height($(window).height());
});
// demo table
var container = document.getElementById('table');
var hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(500, 30),
colHeaders: true,
rowHeaders: true,
currentColClassName: 'currentCol',
maxRows: 10
});
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/uilang.js"></script>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Raw
style.css
// custom icon library, copy styles off icomoon for production
@import url(http://i.icomoon.io/public/188ac2dd2d/DV/style.css);
// to do: choose a nice default datavore font
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
// give me that smooth font action
body {
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
// fatten up headers
h1,
h2,
h3,
h4 {
font-weight: bold;
}
// make bootstrap rows work for child positioning
.row {
position: relative;
}
// special class to make high contrast alternate UI blocks
.inverted {
background-color: @dv-dark;
border: none;
color: @dv-light;
a {
text-decoration: underline;
color: @dv-light;
}
}
// give interactive elements an overall style convention
.interactive {
background: transparent;
border: 0;
border-bottom: 2px solid @dv-blue;
&.completed {
border-bottom-color: @dv-dark;
}
// fix labels to full height inside interactive elements
.label {
line-height: 2;
}
}
// make text inputs roomier
input[type=text],
p.interactive {
line-height: 2;
width: 100%;
}
// reset bootstrap visible border radii
.btn,
.btn-group,
.progress,
.list-group,
.list-group-item,
.label {
border-radius: 0;
}
// replace bootstrap info button with datavore blue
.btn-info {
background-color: @dv-blue;
border: 1px solid @dv-blue;
}
// add extra button class for tranparent input controls
.btn-transparent {
background: transparent;
}
// stripped down selector
// to do: need to add back in some icons
select {
border: 0;
border-radius: 0;
font-size: 1em;
margin: 0;
line-height: 2;
padding: 0;
width: 100%;
-webkit-appearance: none;
&:focus {
outline: none;
}
}
// tighten bootstrap's list group element
.list-group-item {
padding: 0.3em 0;
border: 0;
}
// omare the datavore
.progress .icon-omar {
font-size: 3em;
color: @dv-dark;
text-align: right;
}
// make a button stick to the top left corner
.sticky {
display: inline-block;
position: absolute;
top: 0;
left: 0;
transform: translateX(0%);
z-index: 1;
}
// screenspace for the UI
.workspace {
// nothing needed here yet
}
// main table layout
.main {
padding: 0;
}
// inner table element
.table-container {
overflow: scroll;
width: 100%;
// kludgy height hack for codepen only
height: 600px;
}
// sidebar inspector
// to do: sheetwide metrics/donut graph?
.inspector {
overflow-x: none;
overflow-y: auto;
padding-top: 1em;
}
// selection preview graphic container
.preview {
background-color: @dv-blue;
padding: 1em;
margin: 1em 0;
}
// health display container
.health {
margin: 0;
text-align: right;
}
// other sidebar container elements
.actions,
.context,
.history,
.property,
.rules,
.suggestions {
margin: 2em 0;
}
.statistics {
margin: 1em 0;
}
// space out laels in statistics
.statistics .label {
margin-right: 0.5em;
&::last-of-type {
margin: 0;
}
}
// some datavore colors
@dv-sky: #8ea7af;
@dv-blue: #48789c;
@dv-dark: #29292a;
// to do: add hex codes for standard bootstrap conventions
@dv-light: #e5e0d5;
@dv-gold: #c69154;
@dv-mud: #86704a;
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://handsontable.com/dist/handsontable.full.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment