diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2709cc3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.sass-cache +node_modules/ +bower_components/ +public/ +tmp/ diff --git a/README.md b/README.md index 68087b2..33f4a3a 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,6 @@ COMMAND+ Arrow: change order ``` I'm writing this in all vanilla JS, trying not to use any backend code. -I'm using Google Drive Realtime API, and AWS SDK. + + +I'm using Google Drive Realtime API, and AWS SDK. \ No newline at end of file diff --git a/data/fonts/blenderpro/blenderpro-bold-webfont.eot b/assets/fonts/blenderpro/blenderpro-bold-webfont.eot similarity index 100% rename from data/fonts/blenderpro/blenderpro-bold-webfont.eot rename to assets/fonts/blenderpro/blenderpro-bold-webfont.eot diff --git a/data/fonts/blenderpro/blenderpro-bold-webfont.ttf b/assets/fonts/blenderpro/blenderpro-bold-webfont.ttf similarity index 100% rename from data/fonts/blenderpro/blenderpro-bold-webfont.ttf rename to assets/fonts/blenderpro/blenderpro-bold-webfont.ttf diff --git a/data/fonts/blenderpro/blenderpro-bold-webfont.woff b/assets/fonts/blenderpro/blenderpro-bold-webfont.woff similarity index 100% rename from data/fonts/blenderpro/blenderpro-bold-webfont.woff rename to assets/fonts/blenderpro/blenderpro-bold-webfont.woff diff --git a/data/fonts/blenderpro/blenderpro-book-webfont.eot b/assets/fonts/blenderpro/blenderpro-book-webfont.eot similarity index 100% rename from data/fonts/blenderpro/blenderpro-book-webfont.eot rename to assets/fonts/blenderpro/blenderpro-book-webfont.eot diff --git a/data/fonts/blenderpro/blenderpro-book-webfont.ttf b/assets/fonts/blenderpro/blenderpro-book-webfont.ttf similarity index 100% rename from data/fonts/blenderpro/blenderpro-book-webfont.ttf rename to assets/fonts/blenderpro/blenderpro-book-webfont.ttf diff --git a/data/fonts/blenderpro/blenderpro-book-webfont.woff b/assets/fonts/blenderpro/blenderpro-book-webfont.woff similarity index 100% rename from data/fonts/blenderpro/blenderpro-book-webfont.woff rename to assets/fonts/blenderpro/blenderpro-book-webfont.woff diff --git a/data/fonts/blenderpro/blenderpro-heavy-webfont.eot b/assets/fonts/blenderpro/blenderpro-heavy-webfont.eot similarity index 100% rename from data/fonts/blenderpro/blenderpro-heavy-webfont.eot rename to assets/fonts/blenderpro/blenderpro-heavy-webfont.eot diff --git a/data/fonts/blenderpro/blenderpro-heavy-webfont.ttf b/assets/fonts/blenderpro/blenderpro-heavy-webfont.ttf similarity index 100% rename from data/fonts/blenderpro/blenderpro-heavy-webfont.ttf rename to assets/fonts/blenderpro/blenderpro-heavy-webfont.ttf diff --git a/data/fonts/blenderpro/blenderpro-heavy-webfont.woff b/assets/fonts/blenderpro/blenderpro-heavy-webfont.woff similarity index 100% rename from data/fonts/blenderpro/blenderpro-heavy-webfont.woff rename to assets/fonts/blenderpro/blenderpro-heavy-webfont.woff diff --git a/data/fonts/blenderpro/blenderpro-medium-webfont.eot b/assets/fonts/blenderpro/blenderpro-medium-webfont.eot similarity index 100% rename from data/fonts/blenderpro/blenderpro-medium-webfont.eot rename to assets/fonts/blenderpro/blenderpro-medium-webfont.eot diff --git a/data/fonts/blenderpro/blenderpro-medium-webfont.ttf b/assets/fonts/blenderpro/blenderpro-medium-webfont.ttf similarity index 100% rename from data/fonts/blenderpro/blenderpro-medium-webfont.ttf rename to assets/fonts/blenderpro/blenderpro-medium-webfont.ttf diff --git a/data/fonts/blenderpro/blenderpro-medium-webfont.woff b/assets/fonts/blenderpro/blenderpro-medium-webfont.woff similarity index 100% rename from data/fonts/blenderpro/blenderpro-medium-webfont.woff rename to assets/fonts/blenderpro/blenderpro-medium-webfont.woff diff --git a/data/fonts/blenderpro/blenderpro-thin-webfont.eot b/assets/fonts/blenderpro/blenderpro-thin-webfont.eot similarity index 100% rename from data/fonts/blenderpro/blenderpro-thin-webfont.eot rename to assets/fonts/blenderpro/blenderpro-thin-webfont.eot diff --git a/data/fonts/blenderpro/blenderpro-thin-webfont.ttf b/assets/fonts/blenderpro/blenderpro-thin-webfont.ttf similarity index 100% rename from data/fonts/blenderpro/blenderpro-thin-webfont.ttf rename to assets/fonts/blenderpro/blenderpro-thin-webfont.ttf diff --git a/data/fonts/blenderpro/blenderpro-thin-webfont.woff b/assets/fonts/blenderpro/blenderpro-thin-webfont.woff similarity index 100% rename from data/fonts/blenderpro/blenderpro-thin-webfont.woff rename to assets/fonts/blenderpro/blenderpro-thin-webfont.woff diff --git a/data/fonts/courierprime/courier-prime.ttf b/assets/fonts/courierprime/courier-prime.ttf similarity index 100% rename from data/fonts/courierprime/courier-prime.ttf rename to assets/fonts/courierprime/courier-prime.ttf diff --git a/data/fonts/din/dinNextLTW04-Bold.eot b/assets/fonts/din/dinNextLTW04-Bold.eot similarity index 100% rename from data/fonts/din/dinNextLTW04-Bold.eot rename to assets/fonts/din/dinNextLTW04-Bold.eot diff --git a/data/fonts/din/dinNextLTW04-Bold.ttf b/assets/fonts/din/dinNextLTW04-Bold.ttf similarity index 100% rename from data/fonts/din/dinNextLTW04-Bold.ttf rename to assets/fonts/din/dinNextLTW04-Bold.ttf diff --git a/data/fonts/din/dinNextLTW04-Bold.woff b/assets/fonts/din/dinNextLTW04-Bold.woff similarity index 100% rename from data/fonts/din/dinNextLTW04-Bold.woff rename to assets/fonts/din/dinNextLTW04-Bold.woff diff --git a/data/fonts/din/dinNextLTW04-Light.eot b/assets/fonts/din/dinNextLTW04-Light.eot similarity index 100% rename from data/fonts/din/dinNextLTW04-Light.eot rename to assets/fonts/din/dinNextLTW04-Light.eot diff --git a/data/fonts/din/dinNextLTW04-Light.ttf b/assets/fonts/din/dinNextLTW04-Light.ttf similarity index 100% rename from data/fonts/din/dinNextLTW04-Light.ttf rename to assets/fonts/din/dinNextLTW04-Light.ttf diff --git a/data/fonts/din/dinNextLTW04-Light.woff b/assets/fonts/din/dinNextLTW04-Light.woff similarity index 100% rename from data/fonts/din/dinNextLTW04-Light.woff rename to assets/fonts/din/dinNextLTW04-Light.woff diff --git a/data/fonts/din/dinNextLTW04-Medium.eot b/assets/fonts/din/dinNextLTW04-Medium.eot similarity index 100% rename from data/fonts/din/dinNextLTW04-Medium.eot rename to assets/fonts/din/dinNextLTW04-Medium.eot diff --git a/data/fonts/din/dinNextLTW04-Medium.ttf b/assets/fonts/din/dinNextLTW04-Medium.ttf similarity index 100% rename from data/fonts/din/dinNextLTW04-Medium.ttf rename to assets/fonts/din/dinNextLTW04-Medium.ttf diff --git a/data/fonts/din/dinNextLTW04-Medium.woff b/assets/fonts/din/dinNextLTW04-Medium.woff similarity index 100% rename from data/fonts/din/dinNextLTW04-Medium.woff rename to assets/fonts/din/dinNextLTW04-Medium.woff diff --git a/data/fonts/din/dinNextLTW04-Regular.eot b/assets/fonts/din/dinNextLTW04-Regular.eot similarity index 100% rename from data/fonts/din/dinNextLTW04-Regular.eot rename to assets/fonts/din/dinNextLTW04-Regular.eot diff --git a/data/fonts/din/dinNextLTW04-Regular.ttf b/assets/fonts/din/dinNextLTW04-Regular.ttf similarity index 100% rename from data/fonts/din/dinNextLTW04-Regular.ttf rename to assets/fonts/din/dinNextLTW04-Regular.ttf diff --git a/data/fonts/din/dinNextLTW04-Regular.woff b/assets/fonts/din/dinNextLTW04-Regular.woff similarity index 100% rename from data/fonts/din/dinNextLTW04-Regular.woff rename to assets/fonts/din/dinNextLTW04-Regular.woff diff --git a/data/fonts/pcbvector/PCBVector-Regular.otf b/assets/fonts/pcbvector/PCBVector-Regular.otf similarity index 100% rename from data/fonts/pcbvector/PCBVector-Regular.otf rename to assets/fonts/pcbvector/PCBVector-Regular.otf diff --git a/data/fonts/proximanova/ProximaNova-Bold-webfont.woff b/assets/fonts/proximanova/ProximaNova-Bold-webfont.woff similarity index 100% rename from data/fonts/proximanova/ProximaNova-Bold-webfont.woff rename to assets/fonts/proximanova/ProximaNova-Bold-webfont.woff diff --git a/data/fonts/proximanova/ProximaNova-Light-webfont.woff b/assets/fonts/proximanova/ProximaNova-Light-webfont.woff similarity index 100% rename from data/fonts/proximanova/ProximaNova-Light-webfont.woff rename to assets/fonts/proximanova/ProximaNova-Light-webfont.woff diff --git a/data/fonts/proximanova/ProximaNova-Reg-webfont.woff b/assets/fonts/proximanova/ProximaNova-Reg-webfont.woff similarity index 100% rename from data/fonts/proximanova/ProximaNova-Reg-webfont.woff rename to assets/fonts/proximanova/ProximaNova-Reg-webfont.woff diff --git a/img/close.svg b/assets/img/close.svg similarity index 100% rename from img/close.svg rename to assets/img/close.svg diff --git a/img/outlinerlogo.png b/assets/img/outlinerlogo.png similarity index 100% rename from img/outlinerlogo.png rename to assets/img/outlinerlogo.png diff --git a/js/--mainboneyard.js b/assets/js/--mainboneyard.js similarity index 100% rename from js/--mainboneyard.js rename to assets/js/--mainboneyard.js diff --git a/js/awesomplete.js b/assets/js/awesomplete.js similarity index 100% rename from js/awesomplete.js rename to assets/js/awesomplete.js diff --git a/js/awesomplete.min.js b/assets/js/awesomplete.min.js similarity index 100% rename from js/awesomplete.min.js rename to assets/js/awesomplete.min.js diff --git a/js/awsuploader.js b/assets/js/awsuploader.js similarity index 100% rename from js/awsuploader.js rename to assets/js/awsuploader.js diff --git a/js/chatwindow.js b/assets/js/chatwindow.js similarity index 100% rename from js/chatwindow.js rename to assets/js/chatwindow.js diff --git a/js/circlebob.js b/assets/js/circlebob.js similarity index 100% rename from js/circlebob.js rename to assets/js/circlebob.js diff --git a/js/contextmenu.js b/assets/js/contextmenu.js similarity index 97% rename from js/contextmenu.js rename to assets/js/contextmenu.js index 9168dd5..00f10ea 100644 --- a/js/contextmenu.js +++ b/assets/js/contextmenu.js @@ -53,6 +53,7 @@ init(); $(document).on("contextmenu", function(e){ + console.log(visible) e.preventDefault(); if (visible == false) { var maxY = $(window).height() - 215; @@ -69,11 +70,15 @@ }); $(document).on("click", function(e){ + console.log("SUP") + if (visible && (e.button != 2)) { + + visible = false; $("#context-menu").toggleClass("hidden", true); setTimeout(function(){$("#context-menu").hide();}, 200); - setTimeout(function(){$("#context-menu").css("left", 10000);;}, 200); + setTimeout(function(){$("#context-menu").css("left", 10000);}, 200); } }); diff --git a/js/femalenames.js b/assets/js/femalenames.js similarity index 100% rename from js/femalenames.js rename to assets/js/femalenames.js diff --git a/js/gamepad.js b/assets/js/gamepad.js similarity index 100% rename from js/gamepad.js rename to assets/js/gamepad.js diff --git a/js/inspectorwindow.js b/assets/js/inspectorwindow.js similarity index 100% rename from js/inspectorwindow.js rename to assets/js/inspectorwindow.js diff --git a/js/jquery.min.js b/assets/js/jquery.min.js similarity index 100% rename from js/jquery.min.js rename to assets/js/jquery.min.js diff --git a/js/jspdf.min.js b/assets/js/jspdf.min.js similarity index 100% rename from js/jspdf.min.js rename to assets/js/jspdf.min.js diff --git a/js/jspdf.source.js b/assets/js/jspdf.source.js similarity index 100% rename from js/jspdf.source.js rename to assets/js/jspdf.source.js diff --git a/js/main.js b/assets/js/main.js similarity index 98% rename from js/main.js rename to assets/js/main.js index bd1a260..6100667 100755 --- a/js/main.js +++ b/assets/js/main.js @@ -165,6 +165,21 @@ Do beats have a type? Character or Plot? */ +import "./speech"; +import "./contextmenu"; +import "./awesomplete"; +import "./outlinerutils"; +import "./gamepad"; +import "./chatwindow"; +import "./inspectorwindow"; +import "./toolbarui"; +import "./scriptdoctor"; +import "./stats"; +import "./realtimeModel"; +import "./awsuploader"; +import "./circlebob"; +import "./namesdb"; + ;(function() { 'use strict'; @@ -213,6 +228,7 @@ var fieldList = ['title', 'synopsis', 'imageURL','setting','timeOfDay','text', 'tags', 'actors', 'duration', 'completion']; for (var i = 0; i < fieldList.length; i++) { + if (node[fieldList[i]] == "[]") { node[fieldList[i]] = ""; }; $("#inspector #" + fieldList[i] ).val(node[fieldList[i]]); } @@ -288,6 +304,10 @@ }); } + $("#" + nodeID).dblclick(function(event) { + inspectorWindow.toggle(true); + }); + $("#" + nodeID).on("mousedown", function(event) { $('input').blur() @@ -1153,4 +1173,4 @@ twoplus: function() { return 2+2; } }; -}).call(this); \ No newline at end of file +}).call(this); diff --git a/js/namesdb.js b/assets/js/namesdb.js similarity index 99% rename from js/namesdb.js rename to assets/js/namesdb.js index 153486c..3de2d99 100644 --- a/js/namesdb.js +++ b/assets/js/namesdb.js @@ -125,4 +125,4 @@ twoplus: function() { return 2+2; } }; -}).call(this); \ No newline at end of file +}).call(this); diff --git a/js/outlinerutils.js b/assets/js/outlinerutils.js similarity index 100% rename from js/outlinerutils.js rename to assets/js/outlinerutils.js diff --git a/js/realtimeModel.js b/assets/js/realtimeModel.js similarity index 99% rename from js/realtimeModel.js rename to assets/js/realtimeModel.js index 6cde92c..acfa566 100644 --- a/js/realtimeModel.js +++ b/assets/js/realtimeModel.js @@ -365,6 +365,7 @@ TODO for (var i = 0; i < nodes.length; i++) { if (typeof nodes[i][property] === 'string') { + if (nodes[i][property] == "[]") { nodes[i][property] = ""; }; if (isList) { var propertyItems = nodes[i][property].split(","); for (var z = 0; z < propertyItems.length; z++) { diff --git a/js/scriptdoctor.js b/assets/js/scriptdoctor.js similarity index 100% rename from js/scriptdoctor.js rename to assets/js/scriptdoctor.js diff --git a/js/speech.js b/assets/js/speech.js similarity index 100% rename from js/speech.js rename to assets/js/speech.js diff --git a/js/stats.js b/assets/js/stats.js similarity index 100% rename from js/stats.js rename to assets/js/stats.js diff --git a/js/tinycolor.js b/assets/js/tinycolor.js similarity index 99% rename from js/tinycolor.js rename to assets/js/tinycolor.js index 58754d5..4af951c 100644 --- a/js/tinycolor.js +++ b/assets/js/tinycolor.js @@ -1160,4 +1160,4 @@ else { window.tinycolor = tinycolor; } -})(); \ No newline at end of file +})(); diff --git a/js/toolbarui.js b/assets/js/toolbarui.js similarity index 100% rename from js/toolbarui.js rename to assets/js/toolbarui.js diff --git a/assets/scss/components/_auth-window.scss b/assets/scss/components/_auth-window.scss new file mode 100644 index 0000000..4b05435 --- /dev/null +++ b/assets/scss/components/_auth-window.scss @@ -0,0 +1,44 @@ +#auth_window { + position: absolute; + background-color: rgba(0,0,0,0.7); + width: 400px; + height: 400px; + z-index: 999; + border-radius: 12px; + top: 30%; + left: 50%; + margin-left: -200px; + color: #ddd; + padding: 30px; + box-sizing: border-box; +} + +#auth_window .logo { + width: 230px; + display: block; + margin-bottom: 20px; + -webkit-filter: drop-shadow(0px 2px 0px rgba(0,0,0,.5)); +} + +#auth_button { + font-family: 'proximanova'; + font-size: 20px; + font-weight: 100; + padding: 15px 20px; + border-radius: 6px; + border: 0; + display: block; + color: #fff; + background-color: #00aeef; + bottom: 30px; + right: 30px; + position: absolute; + box-shadow: 0px 0px 0px 4px #022a3d, 0px 0px 0px 7px rgba(255,255,255,0.4); + outline: 0; +} + +#auth_button:hover { + background-color: #2fb9f2; +} + + diff --git a/assets/scss/components/_base.scss b/assets/scss/components/_base.scss new file mode 100644 index 0000000..a920c8b --- /dev/null +++ b/assets/scss/components/_base.scss @@ -0,0 +1,11 @@ +@import "cards"; +@import "inspector"; +@import "toolbar"; +@import "canvas"; +@import "stats"; +@import "help"; +@import "filter"; +@import "circle-bob"; +@import "auth-window"; +@import "chat"; +@import "context-menu"; diff --git a/assets/scss/components/_canvas.scss b/assets/scss/components/_canvas.scss new file mode 100644 index 0000000..333c8a5 --- /dev/null +++ b/assets/scss/components/_canvas.scss @@ -0,0 +1,19 @@ +#canvas { + transform: translate3d(0,0,0) scale(.2); + transform-origin: top left; + transition: transform 150ms ease; + margin: 20px; + width: 0px; + height: 0px; + /* -webkit-perspective: 1000;*/ +} + +#canvas-container { + overflow: scroll; + width: 9000px; + height: 2000px; +} + +#canvas-container::-webkit-scrollbar { + display: none; +} diff --git a/assets/scss/components/_cards.scss b/assets/scss/components/_cards.scss new file mode 100644 index 0000000..e839aa1 --- /dev/null +++ b/assets/scss/components/_cards.scss @@ -0,0 +1,179 @@ +.card { + visibility: hidden; + background-color: #fff; + width: 200px; + border-radius: 3px; + display: block; + position: absolute; + padding: 10px; + /* margin-bottom: 10px; + margin-right: 10px; + */ + box-sizing: border-box; + transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease; + + box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.36); + /*z-index: 500;*/ +} + + +.card img { + width: 100%; + border: 1px solid rgba(0,0,0,0.2); + pointer-events: none; + min-height: 20px; +} + +.selected { + box-shadow: 0px 0px 0px 3px #0e76bc, 0px 0px 0px 5px rgba(255,255,255,0.4); + /*transition: none; + */z-index: 99; +} + +.card.dragged { + opacity: 0.5; + transform: translate3d(0,0,0) scale(1.1); + transition: transform 100ms ease-out, top 0s, left 0s; + cursor:move; +} + +.card .go-left { + position: relative; + float: left; + margin: 0; +} + +.card .go-right { + position: relative; + float: right; + margin: 0; +} + +.card div { + margin-bottom: 5px; +} + +.card div:nth-last-child(2) { + margin-bottom: 0px; +} + +.card div:last-child { + margin-top: 5px; + margin-bottom: 0px; +} + +.card div:first-child { + margin-top: 0px !important; +} + +.card.scene { + border-left: 5px #f66 solid; +} + +.card.beat { + border-left: 5px #aaa solid; + background-color: #ddd; +} + +.beats .beat { + border-left: 7px #bbb solid; + background-color: #ddd; + + width: 170px; + border-radius: 3px; + display: block; + position: relative; + padding: 5px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.beats .beat .title { + font-size: 12px; + line-height: 14px; +} + +.card.note { + border-left: 5px #88f solid; + background-color: #bbf; +} + +.card .image { + background-color: #999; + height: 100px; +} + +.card .title { + font-size: 20px; + font-weight: 700; + line-height: 1; + box-sizing: border-box; +} + +.card.beat .title { + font-size: 12px; + line-height: 14px; +} + +.card.note .title { + font-size: 10px; + font-weight: 400; + line-height: 12px; +} + +.card.dim { + opacity: 0.2; + transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease; +} + +.card .label-container { + position: absolute; + bottom: 17px; + right: 3px; + text-align: right; + height: 0px; +} + +.card .label-container div { + text-transform: capitalize; + color: rgba(0,0,0,0.6); + padding: 1px 3px 0px 3px; + display: inline-block; + font-size: 6px; + min-height: 10px; + border-radius: 2px; + margin-left: 2px; +} + +.card .synopsis { + font-size: 10px; + text-overflow: ellipsis; + line-height: 12px; + max-height: 36px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.card .setting { + text-transform: uppercase; + font-size: 8px; + float: left; + font-weight: 400; + opacity: 0.5; +} + +.card .time-of-day { + text-transform: uppercase; + font-size: 8px; + float: right; + font-weight: 400; +} + + +.card div:empty { + display: block; + height: auto; + min-width: 2px; +} diff --git a/assets/scss/components/_chat.scss b/assets/scss/components/_chat.scss new file mode 100644 index 0000000..c98edae --- /dev/null +++ b/assets/scss/components/_chat.scss @@ -0,0 +1,123 @@ +#chatwindow { + box-sizing: border-box; + font-size: 15px; + padding: 20px; + background-color: rgba(0,0,0,0.8); + display: block; + position: absolute; + width: 350px; + height: 450px; + z-index: 9999; + border-radius: 8px; + right: 30px; + top: 30px; + overflow: hidden; + transition: width 500ms ease, height 300ms ease, background-color 500ms ease, top 300ms ease, left 300ms ease, transform 100ms ease, opacity 100ms ease; +} + +#chatwindow.minimized { + overflow: hidden; + height: 40px; + width: 300px; + opacity: 0.4; + bottom: 12px; + padding: 10px; + background-color: rgba(0,0,0,0.3); + transition: width 500ms ease, height 300ms ease, background-color 500ms ease, top 500ms ease, left 500ms ease, opacity 100ms ease; +} + +#chatwindow.dragged { + transform: translate3d(0,0,0) scale(1.05); + transition: transform 100ms ease; +} + + +#chatoutput::-webkit-scrollbar { + display: none; +} + + +#chatoutput { + color: rgb(255,255,255); + height: 375px; + overflow-x: hidden; + overflow-y: scroll; + +/* -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text;*/ +} + +#chatwindow.minimized #chatoutput{ + height: 19px; +} + + +#chatoutput .screenname { + color: #777; + margin-right: 10px; + display: block; +} + +#chatoutput .text { + color: #ccc; + display: block; +} + +#chatwindow .minimizebutton { + display: block; + position: absolute; + background-color: rgba(255,255,255,0.0); + width: 30px; + height: 30px; + border-radius: 4px; + padding-left: 5px; + box-sizing: border-box; + right: 10px; + top: 10px; +} + +#chatwindow .minimizebutton:hover { + background-color: rgba(255,255,255,0.08); +} + +#chatwindow.minimized .minimizebutton{ + visibility: hidden; +} + +#chatwindow .minimizebutton span { + display: block; + position: absolute; + background-color: rgba(255,255,255,0.6); + width: 20px; + height: 4px; + border-radius: 4px; + box-sizing: border-box; + bottom: 5px; + left: 5px; +} + +#chatinput { + font-family: 'proximanova'; + color: rgb(255,255,255); + font-size: 15px; + display: block; + position: absolute; + bottom: 20px; + font-weight: 100; + width: 310px; + outline: 0; + padding-top: 10px; + border: 0; + border-top: 1px dotted rgba(255,255,255,0.2); + background: transparent; + box-sizing: border-box; + color: #eee; +} + +#chatwindow.minimized #chatinput { + visibility: hidden; +} diff --git a/assets/scss/components/_circle-bob.scss b/assets/scss/components/_circle-bob.scss new file mode 100644 index 0000000..9f3a9ac --- /dev/null +++ b/assets/scss/components/_circle-bob.scss @@ -0,0 +1,27 @@ +#circle-bob { + position: fixed; + border-radius: 50px; + background-color: rgba(255,255,255,0.5); + width: 100px; + height: 100px; + transform: translate3d(0,0,0) scale(.2); + transform-origin: middle; + /* animation-name: throb; + animation-duration: 1.9s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out;*/ + pointer-events:none; +} + +@keyframes throb { + 0% { + transform: translate3d(0,0,0) scale(1); + background-color: rgba(255,255,255,0.2); + + } + 100% { + transform: translate3d(0,0,0) scale(1.2); + background-color: rgba(255,255,255,0.3); + } +} diff --git a/assets/scss/components/_context-menu.scss b/assets/scss/components/_context-menu.scss new file mode 100644 index 0000000..d3f56a6 --- /dev/null +++ b/assets/scss/components/_context-menu.scss @@ -0,0 +1,47 @@ +#context-menu { + background-color: #eee; + border-radius: 5px; + position: absolute; + z-index: 999; + margin-top: 10px; + margin-left: 10px; + /*border: 1px solid rgba(0,0,0,0.3);*/ + box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1), 0px 2px 15px 0px rgba(0,0,0,0.3); + cursor: default; + transform: translate3d(0,0,0) scale(1); + transform-origin: top left; + opacity: 1; + transition: transform 100ms ease, opacity 100ms ease; + +} + +#context-menu.hidden { + transform: translate3d(0,0,0) scale(.9); + transform-origin: top left; + transition: transform 100ms ease, opacity 100ms ease; + opacity: 0; + display: block !important; +} + +#context-menu div { + color: #555; + font-size: 15px; + padding: 6px 15px; +} + +#context-menu div:first-child { + border-radius: 5px 5px 0 0; +} + +#context-menu div:last-child { + border-radius: 0 0 5px 5px; +} + +#context-menu div:hover { + background-color: rgba(0,0,0,0.07); +} + +#context-menu hr { + border: 0; + border-bottom: 1px dotted rgba(0,0,0,0.1); +} diff --git a/assets/scss/components/_filter.scss b/assets/scss/components/_filter.scss new file mode 100644 index 0000000..ae9641b --- /dev/null +++ b/assets/scss/components/_filter.scss @@ -0,0 +1,7 @@ +.filter-content .content-section h3 { + font-size: 20px; +} + +.filter-content .content-section span { + color: rgba(0,0,0,0.7); +} diff --git a/assets/scss/components/_help.scss b/assets/scss/components/_help.scss new file mode 100644 index 0000000..4040c45 --- /dev/null +++ b/assets/scss/components/_help.scss @@ -0,0 +1,31 @@ +#help { + position: absolute; + background-color: rgba(0,0,0,0.7); + width: 300px; + z-index: 999; + border-radius: 12px; + bottom: 60px; + right: 60px; + color: #ddd; + padding: 30px; + box-sizing: border-box; +} + +#help .key { + background-color: #ccc; + font-size: 22px; + color: #555; + border-radius: 5px; + padding: 8px 20px; + display: inline-block; + box-shadow: 0px 5px 0px 0px #888, 0px 5px 0px 3px #222;/*, 0px 5px 0px 6px #888;*/ + margin-left: 5px; + margin-right: 5px; + margin-bottom: 10px; +} + +#help span { + display: block; + margin-bottom: 5px; + margin-top: 10px; +} diff --git a/assets/scss/components/_inspector.scss b/assets/scss/components/_inspector.scss new file mode 100644 index 0000000..9255ca3 --- /dev/null +++ b/assets/scss/components/_inspector.scss @@ -0,0 +1,188 @@ +#inspector { + font-family: 'proximanova'; + right: 0px; + top: 0px; + bottom: 0px; + width: 450px; + height: auto; + z-index: 9999; + background-color: rgba(255,255,255,0.9); + display: block; + position: fixed; + padding: 0 20px; + box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3); + visibility: visible; +} + +#inspector .close-button { + display: inline-block; + position: absolute; + color: #aaa; + width: auto; + padding: 5px 5px; + border: 0px solid #aaa; + margin: 20px 0; + right: 20px; + top: 0px; + opacity: 0.3; +} + +#inspector .close-button:hover { + opacity: 0.5; +} + +#inspector ul.tabs { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + display: inline-block; + margin: 20px 0 20px 0; + width: 100%; + /*border-bottom: 1px solid #aaa;*/ +} + +#inspector .tabs li { + color: #aaa; + float: left; + width: auto; + padding: 10px 30px; + border: 1px solid #aaa; + border-right: 0; + cursor: default; + +} + +#inspector .tabs li:first-child { + border-radius: 5px 0 0 5px; +} + +#inspector .tabs li:last-child { + border-radius: 0 5px 5px 0; + border-right: 1px solid #aaa; +} + +#inspector .tabs li.select { + color: #fff; + background-color: rgba(0,0,0,0.2); +} + +#inspector .tabs li.select:hover { + color: #fff; + background-color: rgba(0,0,0,0.2); +} + +#inspector .tabs li:hover { + background-color: rgba(0,0,0,0.03); +} + + +#inspector h1 { + font-weight: 700; +} + +#inspector input, textarea { + font-family: 'proximanova'; + font-weight: 100; + display: block; + width: 450px; + outline: 0; + padding-bottom: 5px; + margin-bottom: 10px; + margin-right: 20px; + border: 0; + border-bottom: 1px dotted rgba(0,0,0,0.2); + background: transparent; + box-sizing: border-box; + font-size: 20px; + text-align: bottom; + color: #333; +} + +#inspector ::-webkit-input-placeholder { + color: rgba(0,0,0,0.3); +} + + +#inspector #title { + font-size: 28px; + font-weight: 700; + color: #333; +} + +#inspector #text { + font-family: 'courierprime'; + font-size: 12px; + font-weight: 100; + color: #333; +} + +#setting, #timeOfDay { + text-transform: uppercase; +} + +#inspector select { + font-family: 'proximanova'; + font-size: 16px; + font-weight: 300; + outline: 0; + border: 1px solid rgba(0,0,0,0.3); + background: transparent; + width: 150px; + padding: -30px; + margin-bottom: 20px; + height: 40px; + appearance: none; +/* background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; +*/} + +#inspector .filter-item { + font-size: 14px; + position: relative; + padding: 8px 10px; + display: block; + float: left; + border-radius: 4px; + border-bottom: 1px solid rgba(0,0,0,0.2); + margin-right: 8px; + margin-bottom: 8px; + text-transform: capitalize; + opacity: 0.4; + cursor: default; +} + +#inspector .filter-item:hover { + opacity: 0.8; +} + +#inspector .filter-item.selected { + opacity: 1; + box-shadow: 0px 0px 0px 3px #a0d3f0; +} + +#inspector .filter-item.not-selected { + opacity: 0.4; +} + + +#inspector .item-count { + color: rgba(0,0,0,0.6); + position: relative; + display: inline; + top: 0px; + font-size: 10px; + padding: 3px; + margin-left: 5px; + border-radius: 3px; +} + +#inspector .content-section { + display: block; + margin-bottom: 20px; + clear: both; +} + +#inspector .content-section h3 { + margin-bottom: 10px; +} diff --git a/assets/scss/components/_stats.scss b/assets/scss/components/_stats.scss new file mode 100644 index 0000000..1969876 --- /dev/null +++ b/assets/scss/components/_stats.scss @@ -0,0 +1,16 @@ +#stats { + font-size: 12px; + color: rgba(255,255,255,0.7); + text-shadow: 0px 1px 0px rgba(0,0,0,0.3); + position: fixed; + bottom: 0px; + right: 0px; + text-align: right; + padding: 20px; + z-index: 99999; +} + +#stats.black { + color: rgba(0,0,0,0.4); + text-shadow: none; +} diff --git a/assets/scss/components/_toolbar.scss b/assets/scss/components/_toolbar.scss new file mode 100644 index 0000000..db9297e --- /dev/null +++ b/assets/scss/components/_toolbar.scss @@ -0,0 +1,98 @@ +#toolbarbg { + display: block; + position: absolute; + background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0) 100%); + right: 0px; + bottom: 0px; + width: 100%; + height: 250px; + opacity: 0.3; + transition: opacity 500ms ease; + pointer-events: none; +} + +#toolbar { + color: #fff; + position: absolute; + display: block; + z-index: 999; + right: 0px; + bottom: 0px; + width: 100%; + height: 70px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#toolbar .logo { + width: 150px; + -webkit-filter: drop-shadow(0px 2px 0px rgba(0,0,0,.5)); + padding-left: 20px; + bottom: 20px; + position: absolute; + opacity: 0.3; + transition: opacity 2000ms ease; + +} + +#toolbar.active .logo { + opacity: 1; + transition: opacity 300ms ease; +} + +#toolbar .block { + display: block; + position: absolute; + transition: left 400ms ease; +} + + +#toolbar ul { + float: left; + display: block; + position: relative; + margin: 0px; + list-style: none; + margin-right: 10px; + margin-top: 17px; + visibility: visible; + opacity: 0; + transition: opacity 2000ms ease; +} + +#toolbar.active ul { + opacity: 1; + transition: opacity 200ms ease; +} + +#toolbar li { + float: left; +/* border: 4px none rgba(255,255,255,0.0); +*/ + font-size: 15px; + margin-right: 4px; + border-right: 0; + padding: 10px 5px; + opacity: 0.6; + text-shadow: 0px 1px 0px rgba(0,0,0,0.5); + +} + +#toolbar li:hover { + opacity: 1; + background-color: rgba(255,255,255,0.0); + cursor: default; +} + +#toolbar li:first-child { + border-radius: 8px 0 0 8px; +} + +#toolbar li:last-child { + border-radius: 0 8px 8px 0; +/* border-right: 2px solid rgba(255,255,255,0.4);*/ +} diff --git a/assets/scss/helpers/_base.scss b/assets/scss/helpers/_base.scss new file mode 100644 index 0000000..cd67cb9 --- /dev/null +++ b/assets/scss/helpers/_base.scss @@ -0,0 +1,34 @@ +:-webkit-full-screen { + background-color: #222; + background: linear-gradient(90deg, #0e76bc 0%, #00aeef 100%); + z-index: 2147483647; + background-attachment: fixed; +} + +.invisible { + display: none; +} + +.hidden { + display: none !important; +} + +.clear { + clear: both; + margin-bottom: 0px !important; + height: 0 !important; +} + +.center_relative { + display: block; + position: relative; + width: 100%; + height: 100%; +} + +#right-padding-hack { + display: block; + position: absolute; + width: 20px; + height: 10px; +} diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100755 index 0000000..5764ac6 --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,52 @@ +@import "vendor/base"; +@import "typography/base"; +@import "helpers/base"; +@import "components/base"; + +body { + padding: 0px; + margin: 0px; + font-family: 'proximanova'; + font-weight: 300; +} + +body { + /*background: #222;*/ + background: linear-gradient(90deg, #0e76bc 0%, #00aeef 100%); + background-attachment: fixed; +} + +body{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; +} + +.container { +/* border: 10px #f00 solid;*/ + display:block; + box-sizing: content-box; + width: 200px; + z-index: 500; +} + +.section { + position: absolute; + margin-bottom: 10px; + box-sizing: border-box; + border-radius: 1px; + width: 200px; + color: rgba(255,255,255,0.5); + font-size: 10px; + border-left: 0px rgba(255,255,255,0.3) solid; + border-bottom: 1px rgba(255,255,255,0.3) dotted; +/* padding-left: 5px; + padding-bottom: 5px; + padding-top: 5px;*/ + text-transform: uppercase; + transition: top 500ms ease, left 500ms ease; +} diff --git a/assets/scss/typography/_base.scss b/assets/scss/typography/_base.scss new file mode 100644 index 0000000..74190c8 --- /dev/null +++ b/assets/scss/typography/_base.scss @@ -0,0 +1,2 @@ +@import "fonts"; +@import "typography"; diff --git a/assets/scss/typography/_fonts.scss b/assets/scss/typography/_fonts.scss new file mode 100644 index 0000000..c084fce --- /dev/null +++ b/assets/scss/typography/_fonts.scss @@ -0,0 +1,23 @@ +@font-face { + font-family: 'proximanova'; + src: url('../fonts/proximanova/ProximaNova-Reg-webfont.woff') format('woff'); + /* Pretty Modern Browsers */ + font-weight: 400; } + +@font-face { + font-family: 'proximanova'; + src: url('../fonts/proximanova/ProximaNova-Light-webfont.woff') format('woff'); + /* Pretty Modern Browsers */ + font-weight: 300; } + +@font-face { + font-family: 'proximanova'; + src: url('../fonts/proximanova/ProximaNova-Bold-webfont.woff') format('woff'); + /* Pretty Modern Browsers */ + font-weight: 700; } + +@font-face { + font-family: 'courierprime'; + src: url('../fonts/courierprime/courier-prime.ttf') format('woff'); + /* Pretty Modern Browsers */ + font-weight: 200; } diff --git a/assets/scss/typography/_typography.scss b/assets/scss/typography/_typography.scss new file mode 100644 index 0000000..847eb67 --- /dev/null +++ b/assets/scss/typography/_typography.scss @@ -0,0 +1,38 @@ +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: 'proximanova'; + font-weight: 300; + line-height: 1.10; + font-size: 1.5em; + margin-top: 0; + margin-bottom: 1em; +} + +h2 { + display: block; /* Fallback for non-webkit */ + display: -webkit-box; + max-width: 400px; + //TODO the following lines had variables saved in a regular css file with actual variables. You can now actually use this of figure something out. + //height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ + margin: 0 auto; + //font-size: $font-size; + //line-height: $line-height; + //-webkit-line-clamp: $lines-to-show; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +[contenteditable="true"] { + outline: 0px; +} diff --git a/css/awesomplete.css b/assets/scss/vendor/_awesomeplete.scss similarity index 100% rename from css/awesomplete.css rename to assets/scss/vendor/_awesomeplete.scss diff --git a/assets/scss/vendor/_base.scss b/assets/scss/vendor/_base.scss new file mode 100644 index 0000000..86554bd --- /dev/null +++ b/assets/scss/vendor/_base.scss @@ -0,0 +1 @@ +@import "awesomeplete"; diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..cb6b00a --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "outliner", + "version": "0.0.0", + "homepage": "https://github.com/setpixel/outliner", + "authors": [ + "Charles " + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "devDependencies": { + "tinycolor": "~1.2.1", + "moment": "~2.10.6", + "html2canvas": "~0.4.1" + } +} diff --git a/build/gulpfile.js b/build/gulpfile.js new file mode 100644 index 0000000..c470de0 --- /dev/null +++ b/build/gulpfile.js @@ -0,0 +1,87 @@ +var gulp = require('gulp'); +var babelify = require('babelify'); +var browserify = require('browserify'); +var source = require('vinyl-source-stream'); +var browserSync = require('browser-sync').create(); +var parameters = require('../config/parameters.js'); +var gulpLoadPlugins = require('gulp-load-plugins'); +var $ = gulpLoadPlugins(); + +//browserSync.use(require('bs-snippet-injector'), { + //file: parameters.footer_path +//}); + +gulp.task('browser-sync', ['styles'], function() { + browserSync.init({ + port: 8000, + server: { + basedir: parameters.app_url + } + }); +}); + +gulp.task('move-assets', function() { + return gulp.src([parameters.app_path + '/assets/img/*', parameters.app_path + '/assets/fonts/*/**'], { + base: parameters.app_path + }) + .pipe(gulp.dest(parameters.web_path)); +}); + +gulp.task('lint', ['babel'], function() { + return gulp.src(parameters.tmp_path + '/js/' + parameters.app_main_file) + .pipe($.jshint()) + .pipe($.jshint.reporter('jshint-stylish')); +}); + +gulp.task('babel', function() { + return browserify({ + entries: parameters.assets_path + '/js/main.js', + debug: true + }) + .transform(babelify) + .bundle() + .pipe(source(parameters.app_main_file)) + .pipe(gulp.dest(parameters.tmp_path + '/js')); +}); + +gulp.task('vendor', function() { + return gulp.src(parameters.vendor_path + '/**/*.js') + .pipe($.concat(parameters.vendor_main_file)) + .pipe(gulp.dest(parameters.tmp_path + '/js')); +}); + +gulp.task('styles', function() { + return gulp.src(parameters.styles_main_file) + .pipe($.sass()) + .on('error', function(err) { + console.log(err.message); + this.emit('end'); + }) + .pipe($.autoprefixer({ + browsers: 'last 2 versions' + })) + .pipe($.minifyCss()) + .pipe(gulp.dest(parameters.web_path + '/assets/css')) + .pipe(browserSync.stream()); +}); + +gulp.task('minify', ['vendor', 'babel'], function() { + return gulp.src([parameters.tmp_path + '/js/vendor.js', parameters.tmp_path + '/js/main.js']) + .pipe($.sourcemaps.init()) + .pipe($.concat('app.min.js')) + // .pipe($.uglify()) + .pipe($.sourcemaps.write('.')) + .pipe(gulp.dest(parameters.web_path + '/assets/js')); +}); + +gulp.task('bs-reload', ['minify'], function() { + return browserSync.reload(); +}); + +gulp.task('watch', function() { + gulp.watch(parameters.assets_path + '/**/*.js', ['bs-reload']); + gulp.watch(parameters.assets_path + '/**/*.scss', ['styles']); + gulp.watch(parameters.app_path + '/**/*.html', ['bs-reload']); +}); + +gulp.task('default', ['move-assets', 'styles', 'minify', 'watch', 'browser-sync']); diff --git a/config/parameters.js b/config/parameters.js new file mode 100644 index 0000000..05ebc20 --- /dev/null +++ b/config/parameters.js @@ -0,0 +1,17 @@ +var app_path = '.'; + +var config = { + app_url: './', + app_path: app_path, + web_path: 'public', + vendor_path: 'vendor', + assets_path: app_path + '/assets', + footer_path: app_path + '/index.html', + app_main_file: 'main.js', + css_main_file: 'main.css', + styles_main_file: app_path + '/assets/scss/main.scss', + vendor_main_file: 'vendor.js', + tmp_path: 'tmp', +}; + +module.exports = config; diff --git a/css/main.css b/css/main.css deleted file mode 100755 index 2e69b74..0000000 --- a/css/main.css +++ /dev/null @@ -1,943 +0,0 @@ -@font-face { - font-family: 'proximanova'; - src: url('../data/fonts/proximanova/ProximaNova-Reg-webfont.woff') format('woff'); - /* Pretty Modern Browsers */ - font-weight: 400; } - -@font-face { - font-family: 'proximanova'; - src: url('../data/fonts/proximanova/ProximaNova-Light-webfont.woff') format('woff'); - /* Pretty Modern Browsers */ - font-weight: 300; } - -@font-face { - font-family: 'proximanova'; - src: url('../data/fonts/proximanova/ProximaNova-Bold-webfont.woff') format('woff'); - /* Pretty Modern Browsers */ - font-weight: 700; } - -@font-face { - font-family: 'courierprime'; - src: url('../data/fonts/courierprime/courier-prime.ttf') format('woff'); - /* Pretty Modern Browsers */ - font-weight: 200; } - -body { - padding: 0px; - margin: 0px; - font-family: 'proximanova'; - font-weight: 300; -} - -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-family: 'proximanova'; - font-weight: 300; - line-height: 1.10; - font-size: 1.5em; - margin-top: 0; - margin-bottom: 1em; -} - -:-webkit-full-screen { - background-color: #222; - background: linear-gradient(90deg, #0e76bc 0%, #00aeef 100%); - z-index: 2147483647; - background-attachment: fixed; -} - -body { - /*background: #222;*/ - background: linear-gradient(90deg, #0e76bc 0%, #00aeef 100%); - background-attachment: fixed; -} - -body{ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - overflow: hidden; -} - - -.invisible { - display: none; -} - -.center_relative { - display: block; - position: relative; - width: 100%; - height: 100%; -} - - -#canvas { - transform: translate3d(0,0,0) scale(.2); - transform-origin: top left; - transition: transform 150ms ease; - margin: 20px; - width: 0px; - height: 0px; - /* -webkit-perspective: 1000;*/ -} - - -.container { -/* border: 10px #f00 solid;*/ - display:block; - box-sizing: content-box; - width: 200px; - z-index: 500; -} - -.section { - position: absolute; - margin-bottom: 10px; - box-sizing: border-box; - border-radius: 1px; - width: 200px; - color: rgba(255,255,255,0.5); - font-size: 10px; - border-left: 0px rgba(255,255,255,0.3) solid; - border-bottom: 1px rgba(255,255,255,0.3) dotted; -/* padding-left: 5px; - padding-bottom: 5px; - padding-top: 5px;*/ - text-transform: uppercase; - transition: top 500ms ease, left 500ms ease; -} - -.card { - visibility: hidden; - background-color: #fff; - width: 200px; - border-radius: 3px; - display: block; - position: absolute; - padding: 10px; -/* margin-bottom: 10px; - margin-right: 10px; -*/ - box-sizing: border-box; - transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease; - - box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.36); - /*z-index: 500;*/ -} - - -.card img { - width: 100%; - border: 1px solid rgba(0,0,0,0.2); - pointer-events: none; - min-height: 20px; -} - -.selected { - box-shadow: 0px 0px 0px 3px #0e76bc, 0px 0px 0px 5px rgba(255,255,255,0.4); - /*transition: none; - */z-index: 99; -} - -.card.dragged { - opacity: 0.5; - transform: translate3d(0,0,0) scale(1.1); - transition: transform 100ms ease-out, top 0s, left 0s; - cursor:move; -} - -.card .go-left { - position: relative; - float: left; - margin: 0; -} - -.card .go-right { - position: relative; - float: right; - margin: 0; -} - -.card div { - margin-bottom: 5px; -} - -.card div:nth-last-child(2) { - margin-bottom: 0px; -} - -.card div:last-child { - margin-top: 5px; - margin-bottom: 0px; -} - -.card div:first-child { - margin-top: 0px !important; -} - -.card.scene { - border-left: 5px #f66 solid; -} - -.card.beat { - border-left: 5px #aaa solid; - background-color: #ddd; -} - -.beats .beat { - border-left: 7px #bbb solid; - background-color: #ddd; - - width: 170px; - border-radius: 3px; - display: block; - position: relative; - padding: 5px; - margin-bottom: 10px; - box-sizing: border-box; -} - -.beats .beat .title { - font-size: 12px; - line-height: 14px; -} - - - -.card.note { - border-left: 5px #88f solid; - background-color: #bbf; -} - -.card .image { - background-color: #999; - height: 100px; -} - -.card .title { - font-size: 20px; - font-weight: 700; - line-height: 1; - box-sizing: border-box; -} - -.card.beat .title { - font-size: 12px; - line-height: 14px; -} - -.card.note .title { - font-size: 10px; - font-weight: 400; - line-height: 12px; -} - - -[contenteditable="true"] { - outline: 0px; -} - -h2 { - display: block; /* Fallback for non-webkit */ - display: -webkit-box; - max-width: 400px; - height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ - margin: 0 auto; - font-size: $font-size; - line-height: $line-height; - -webkit-line-clamp: $lines-to-show; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} - -.card.dim { - opacity: 0.2; - transition: transform 200ms ease, top 200ms ease, left 200ms ease, opacity 200ms ease; -} - -.card .label-container { - position: absolute; - bottom: 17px; - right: 3px; - text-align: right; - height: 0px; -} - -.card .label-container div { - text-transform: capitalize; - color: rgba(0,0,0,0.6); - padding: 1px 3px 0px 3px; - display: inline-block; - font-size: 6px; - min-height: 10px; - border-radius: 2px; - margin-left: 2px; -} - - - -.card .synopsis { - font-size: 10px; - text-overflow: ellipsis; - line-height: 12px; - max-height: 36px; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; -} - -.card .setting { - text-transform: uppercase; - font-size: 8px; - float: left; - font-weight: 400; - opacity: 0.5; -} - -.card .time-of-day { - text-transform: uppercase; - font-size: 8px; - float: right; - font-weight: 400; -} - -.clear { - clear: both; - margin-bottom: 0px !important; - height: 0 !important; -} - - -.card div:empty { - display: block; - height: auto; - min-width: 2px; - -} - - -#inspector { - font-family: 'proximanova'; - right: 0px; - top: 0px; - bottom: 0px; - width: 450px; - height: auto; - z-index: 9999; - background-color: rgba(255,255,255,0.9); - display: block; - position: fixed; - padding: 0 20px; - box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3); - visibility: visible; -} - -#inspector .close-button { - display: inline-block; - position: absolute; - color: #aaa; - width: auto; - padding: 5px 5px; - border: 0px solid #aaa; - margin: 20px 0; - right: 20px; - top: 0px; - opacity: 0.3; -} - -#inspector .close-button:hover { - opacity: 0.5; -} - -#inspector ul.tabs { - position: relative; - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - display: inline-block; - margin: 20px 0 20px 0; - width: 100%; - /*border-bottom: 1px solid #aaa;*/ -} - -#inspector .tabs li { - color: #aaa; - float: left; - width: auto; - padding: 10px 30px; - border: 1px solid #aaa; - border-right: 0; - cursor: default; - -} - -#inspector .tabs li:first-child { - border-radius: 5px 0 0 5px; -} - -#inspector .tabs li:last-child { - border-radius: 0 5px 5px 0; - border-right: 1px solid #aaa; -} - -#inspector .tabs li.select { - color: #fff; - background-color: rgba(0,0,0,0.2); -} - -#inspector .tabs li.select:hover { - color: #fff; - background-color: rgba(0,0,0,0.2); -} - -#inspector .tabs li:hover { - background-color: rgba(0,0,0,0.03); -} - - -#inspector h1 { - font-weight: 700; -} - -#inspector input, textarea { - font-family: 'proximanova'; - font-weight: 100; - display: block; - width: 450px; - outline: 0; - padding-bottom: 5px; - margin-bottom: 10px; - margin-right: 20px; - border: 0; - border-bottom: 1px dotted rgba(0,0,0,0.2); - background: transparent; - box-sizing: border-box; - font-size: 20px; - text-align: bottom; - color: #333; -} - -#inspector ::-webkit-input-placeholder { - color: rgba(0,0,0,0.3); -} - - -#inspector #title { - font-size: 28px; - font-weight: 700; - color: #333; -} - -#inspector #text { - font-family: 'courierprime'; - font-size: 12px; - font-weight: 100; - color: #333; -} - -#setting, #timeOfDay { - text-transform: uppercase; -} - -#inspector select { - font-family: 'proximanova'; - font-size: 16px; - font-weight: 300; - outline: 0; - border: 1px solid rgba(0,0,0,0.3); - background: transparent; - width: 150px; - padding: -30px; - margin-bottom: 20px; - height: 40px; - appearance: none; -/* background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; -*/} - -#inspector .filter-item { - font-size: 14px; - position: relative; - padding: 8px 10px; - display: block; - float: left; - border-radius: 4px; - border-bottom: 1px solid rgba(0,0,0,0.2); - margin-right: 8px; - margin-bottom: 8px; - text-transform: capitalize; - opacity: 0.4; - cursor: default; -} - -#inspector .filter-item:hover { - opacity: 0.8; -} - -#inspector .filter-item.selected { - opacity: 1; - box-shadow: 0px 0px 0px 3px #a0d3f0; -} - -#inspector .filter-item.not-selected { - opacity: 0.4; -} - - -#inspector .item-count { - color: rgba(0,0,0,0.6); - position: relative; - display: inline; - top: 0px; - font-size: 10px; - padding: 3px; - margin-left: 5px; - border-radius: 3px; -} - -#inspector .content-section { - display: block; - margin-bottom: 20px; - clear: both; -} - -#inspector .content-section h3 { - margin-bottom: 10px; -} - - -#toolbarbg { - display: block; - position: absolute; - background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0) 100%); - right: 0px; - bottom: 0px; - width: 100%; - height: 250px; - opacity: 0.3; - transition: opacity 500ms ease; - pointer-events: none; -} - -#toolbar { - color: #fff; - position: absolute; - display: block; - z-index: 999; - right: 0px; - bottom: 0px; - width: 100%; - height: 70px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#toolbar .logo { - width: 150px; - -webkit-filter: drop-shadow(0px 2px 0px rgba(0,0,0,.5)); - padding-left: 20px; - bottom: 20px; - position: absolute; - opacity: 0.3; - transition: opacity 2000ms ease; - -} - -#toolbar.active .logo { - opacity: 1; - transition: opacity 300ms ease; -} - -#toolbar .block { - display: block; - position: absolute; - transition: left 400ms ease; -} - - -#toolbar ul { - float: left; - display: block; - position: relative; - margin: 0px; - list-style: none; - margin-right: 10px; - margin-top: 17px; - visibility: visible; - opacity: 0; - transition: opacity 2000ms ease; -} - -#toolbar.active ul { - opacity: 1; - transition: opacity 200ms ease; -} - -#toolbar li { - float: left; -/* border: 4px none rgba(255,255,255,0.0); -*/ - font-size: 15px; - margin-right: 4px; - border-right: 0; - padding: 10px 5px; - opacity: 0.6; - text-shadow: 0px 1px 0px rgba(0,0,0,0.5); - -} - -#toolbar li:hover { - opacity: 1; - background-color: rgba(255,255,255,0.0); - cursor: default; -} - -#toolbar li:first-child { - border-radius: 8px 0 0 8px; -} - -#toolbar li:last-child { - border-radius: 0 8px 8px 0; -/* border-right: 2px solid rgba(255,255,255,0.4);*/ -} - -#circle-bob { - position: fixed; - border-radius: 50px; - background-color: rgba(255,255,255,0.5); - width: 100px; - height: 100px; - transform: translate3d(0,0,0) scale(.2); - transform-origin: middle; -/* animation-name: throb; - animation-duration: 1.9s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out;*/ - pointer-events:none; -} - -@keyframes throb { - 0% { - transform: translate3d(0,0,0) scale(1); - background-color: rgba(255,255,255,0.2); - -} - 100% { - transform: translate3d(0,0,0) scale(1.2); - background-color: rgba(255,255,255,0.3); -} -} - -#canvas-container { - overflow: scroll; - width: 9000px; - height: 2000px; -} - -#canvas-container::-webkit-scrollbar { - display: none; -} - -#right-padding-hack { - display: block; - position: absolute; - width: 20px; - height: 10px; -} - -.hidden { - display: none !important; -} - -#stats { - font-size: 12px; - color: rgba(255,255,255,0.7); - text-shadow: 0px 1px 0px rgba(0,0,0,0.3); - position: fixed; - bottom: 0px; - right: 0px; - text-align: right; - padding: 20px; - z-index: 99999; -} - -#stats.black { - color: rgba(0,0,0,0.4); - text-shadow: none; -} - -#help { - position: absolute; - background-color: rgba(0,0,0,0.7); - width: 300px; - z-index: 999; - border-radius: 12px; - bottom: 60px; - right: 60px; - color: #ddd; - padding: 30px; - box-sizing: border-box; -} - -#help .key { - background-color: #ccc; - font-size: 22px; - color: #555; - border-radius: 5px; - padding: 8px 20px; - display: inline-block; - box-shadow: 0px 5px 0px 0px #888, 0px 5px 0px 3px #222;/*, 0px 5px 0px 6px #888;*/ - margin-left: 5px; - margin-right: 5px; - margin-bottom: 10px; -} - -#help span { - display: block; - margin-bottom: 5px; - margin-top: 10px; -} - -#auth_window { - position: absolute; - background-color: rgba(0,0,0,0.7); - width: 400px; - height: 400px; - z-index: 999; - border-radius: 12px; - top: 30%; - left: 50%; - margin-left: -200px; - color: #ddd; - padding: 30px; - box-sizing: border-box; -} - -#auth_window .logo { - width: 230px; - display: block; - margin-bottom: 20px; - -webkit-filter: drop-shadow(0px 2px 0px rgba(0,0,0,.5)); -} - -#auth_button { - font-family: 'proximanova'; - font-size: 20px; - font-weight: 100; - padding: 15px 20px; - border-radius: 6px; - border: 0; - display: block; - color: #fff; - background-color: #00aeef; - bottom: 30px; - right: 30px; - position: absolute; - box-shadow: 0px 0px 0px 4px #022a3d, 0px 0px 0px 7px rgba(255,255,255,0.4); - outline: 0; -} - -#auth_button:hover { - background-color: #2fb9f2; -} - -#chatwindow { - box-sizing: border-box; - font-size: 15px; - padding: 20px; - background-color: rgba(0,0,0,0.8); - display: block; - position: absolute; - width: 350px; - height: 450px; - z-index: 9999; - border-radius: 8px; - right: 30px; - top: 30px; - overflow: hidden; - transition: width 500ms ease, height 300ms ease, background-color 500ms ease, top 300ms ease, left 300ms ease, transform 100ms ease, opacity 100ms ease; -} - -#chatwindow.minimized { - overflow: hidden; - height: 40px; - width: 300px; - opacity: 0.4; - bottom: 12px; - padding: 10px; - background-color: rgba(0,0,0,0.3); - transition: width 500ms ease, height 300ms ease, background-color 500ms ease, top 500ms ease, left 500ms ease, opacity 100ms ease; -} - -#chatwindow.dragged { - transform: translate3d(0,0,0) scale(1.05); - transition: transform 100ms ease; -} - - -#chatoutput::-webkit-scrollbar { - display: none; -} - - -#chatoutput { - color: rgb(255,255,255); - height: 375px; - overflow-x: hidden; - overflow-y: scroll; - -/* -webkit-touch-callout: text; - -webkit-user-select: text; - -khtml-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text;*/ -} - -#chatwindow.minimized #chatoutput{ - height: 19px; -} - - -#chatoutput .screenname { - color: #777; - margin-right: 10px; - display: block; -} - -#chatoutput .text { - color: #ccc; - display: block; -} - -#chatwindow .minimizebutton { - display: block; - position: absolute; - background-color: rgba(255,255,255,0.0); - width: 30px; - height: 30px; - border-radius: 4px; - padding-left: 5px; - box-sizing: border-box; - right: 10px; - top: 10px; -} - -#chatwindow .minimizebutton:hover { - background-color: rgba(255,255,255,0.08); -} - -#chatwindow.minimized .minimizebutton{ - visibility: hidden; -} - -#chatwindow .minimizebutton span { - display: block; - position: absolute; - background-color: rgba(255,255,255,0.6); - width: 20px; - height: 4px; - border-radius: 4px; - box-sizing: border-box; - bottom: 5px; - left: 5px; -} - -#chatinput { - font-family: 'proximanova'; - color: rgb(255,255,255); - font-size: 15px; - display: block; - position: absolute; - bottom: 20px; - font-weight: 100; - width: 310px; - outline: 0; - padding-top: 10px; - border: 0; - border-top: 1px dotted rgba(255,255,255,0.2); - background: transparent; - box-sizing: border-box; - color: #eee; -} - -#chatwindow.minimized #chatinput { - visibility: hidden; -} - -#context-menu { - background-color: #eee; - border-radius: 5px; - position: absolute; - z-index: 999; - margin-top: 10px; - margin-left: 10px; - /*border: 1px solid rgba(0,0,0,0.3);*/ - box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1), 0px 2px 15px 0px rgba(0,0,0,0.3); - cursor: default; - transform: translate3d(0,0,0) scale(1); - transform-origin: top left; - opacity: 1; - transition: transform 100ms ease, opacity 100ms ease; - -} - -#context-menu.hidden { - transform: translate3d(0,0,0) scale(.9); - transform-origin: top left; - transition: transform 100ms ease, opacity 100ms ease; - opacity: 0; - display: block !important; -} - -#context-menu div { - color: #555; - font-size: 15px; - padding: 6px 15px; -} - -#context-menu div:first-child { - border-radius: 5px 5px 0 0; -} - -#context-menu div:last-child { - border-radius: 0 0 5px 5px; -} - -#context-menu div:hover { - background-color: rgba(0,0,0,0.07); -} - -#context-menu hr { - border: 0; - border-bottom: 1px dotted rgba(0,0,0,0.1); -} - -.filter-content .content-section h3 { - font-size: 20px; -} - -.filter-content .content-section span { - color: rgba(0,0,0,0.7); -} \ No newline at end of file diff --git a/data/outline.json b/data/outline.json deleted file mode 100644 index 3c77f5a..0000000 --- a/data/outline.json +++ /dev/null @@ -1,118 +0,0 @@ -[ - { - "id": 10002, - "order": 0, - "type": "section", - "title": "Act 1." - }, - { - "id": 1435457197493, - "order": 1, - "type": "beat", - "title": "This is a new beat." - }, - { - "id": 10001, - "order": 2, - "type": "scene", - "title": "Ethan working in apartment", - "synopsis": "There is some stuff that happens and stuff. Theres also some other stuff. Isn't that fun and other stuff. There is some stuff that happens and.", - "image": false, - "setting": "Ethan's apartment", - "timeOfDay": "Evening", - "text": "This is some long text", - "time": 0, - "tags": [ - "flight", - "comedy" - ], - "actors": [ - "Ethan", - "Lucas" - ], - "beats": [ - { - "order": 0, - "title": "This is a beat", - "synopsis": "This is a synopsis of a beat." - }, - { - "order": 1, - "title": "Beat 2" - }, - { - "order": 2, - "title": "Beat 3" - } - ] - }, - { - "id": 10003, - "order": 3, - "type": "beat", - "title": "Ethan working in apartment", - "synopsis": "There is some stuff that happens and stuff. Theres also some other stuff. Isn't that fun and other stuff. There is some stuff that happens and." - }, - { - "id": 10004, - "order": 4, - "type": "beat", - "title": "Bomb happens." - }, - { - "id": 10005, - "order": 5, - "type": "note", - "title": "This is a note. I hope you like it. dskjafh skdfhkaj sdhfkja hsdkjfha ksdfh aksjdfh." - }, - { - "id": 10006, - "order": 6, - "type": "scene", - "title": "Some other shit happens.", - "synopsis": "There is some stuff that happens and stuff. Theres also some other stuff. Isn't that fun and other stuff. There is some stuff that happens and." - }, - { - "id": 10007, - "order": 7, - "type": "scene", - "title": "Working together for the first time." - }, - { - "id": 10008, - "order": 8, - "type": "section", - "title": "Act 2." - }, - { - "id": 10009, - "order": 9, - "type": "scene", - "title": "They fly off the roof." - }, - { - "id": 10014, - "order": 10, - "type": "beat", - "title": "Bomb happens." - }, - { - "id": 1023004, - "order": 11, - "type": "beat", - "title": "Bomb happens." - }, - { - "id": 10234026, - "order": 12, - "type": "scene", - "title": "Some other shit happens.", - "synopsis": "There is some stuff that happens and stuff. Theres also some other stuff. Isn't that fun and other stuff. There is some stuff that happens and." - }, - { - "id": 10234234307, - "order": 13, - "type": "scene", - "title": "Working together for the first time." - } -] \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..b4dc74c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1 @@ +require('./build/gulpfile.js'); diff --git a/index.html b/index.html index 5ff5dfd..0a900bb 100755 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ - - + @@ -14,23 +13,7 @@ - - - - - - - - - - - - - - - - - +