diff --git a/static/application.css b/static/application.css index 01316b7..5f710a7 100644 --- a/static/application.css +++ b/static/application.css @@ -1,16 +1,22 @@ +html, body { + height: 100%; + width: 100%; +} + body { background: #0c0c0c; - padding: 20px 50px; - margin: 0px; + margin: 0; + font-family: sans-serif; + overflow-x: hidden; + overflow-y: auto; } /* textarea */ textarea { - background: transparent; + background: #0c0c0c; border: 0px; color: #fff; - padding: 0px; width: 100%; height: 100%; font-family: monospace; @@ -19,33 +25,36 @@ textarea { font-size: 13px; margin-top: 0; margin-bottom: 0; + padding: 20px 20px 80px 0; +} + +.logo a:hover svg path { + fill: #fff; } /* the line numbers */ #linenos { - color: #7d7d7d; + color: #7d7d7d; z-index: -1000; - position: absolute; - top: 20px; - left: 0px; - width: 30px; /* 30 to get 20 away from box */ font-size: 13px; font-family: monospace; text-align: right; user-select: none; + padding: 20px 20px 80px 20px; + flex-shrink: 0; } /* code box when locked */ #box { - padding: 0px; + padding: 20px 20px 20px 0; margin: 0px; width: 100%; border: 0px; outline: none; font-size: 13px; - overflow: inherit; + overflow: auto; } #box code { @@ -56,124 +65,100 @@ textarea { /* key */ #key { - position: fixed; - top: 0px; - right: 0px; z-index: +1000; /* watch out */ } -#box1 { - padding: 5px; - text-align: center; - background: #00222b; +button { + font-size: 14px; + color: #929EA4; + background: transparent; + outline: none; + border: none; + padding: 4px 10px; + cursor: not-allowed; } -#box2 { - background: #242424; - font-size: 0px; - padding: 0px 5px; -} - -#box1 a.logo, #box1 a.logo:visited { - display: inline-block; - background: url(logo.png); - width: 126px; - height: 42px; -} - -#box1 a.logo:hover { - background-position: 0 bottom; -} - -#box2 .function { - background: url(function-icons.png); - width: 32px; - height: 37px; - display: inline-block; - position: relative; -} - -#box2 .link embed { - vertical-align: bottom; /* fix for zeroClipboard style */ -} - -#box2 .function.enabled:hover { - cursor: hand; +button.enabled { + color: #FFF; cursor: pointer; } -#pointer { +.button-wrap .label { + display: none; + position: absolute; + top: -36px; + left: 50%; + margin-left: -46px; + text-align: center; + background: #222222; + color: #fff; + padding: 8px; + border-radius: 3px; + font-size: 12px; + width: 76px; +} + +.button-wrap .label.label--small { + margin-left: -30px; + width: 44px; +} + +.button-wrap:hover .label { display: block; - height: 5px; - width: 10px; - background: url(hover-dropdown-tip.png); - bottom: 0px; - position: absolute; - margin: auto; - left: 0px; - right: 0px; } -#box3, #messages li { - background: #242424; - font-family: Helvetica, sans-serif; - font-size: 12px; - line-height: 14px; - padding: 10px 15px; - user-select: none; +.menu { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: #222222; } -#box3 .label, #messages li { - color: #fff; - font-weight: bold; +.menu-actions { + display: flex; } -#box3 .shortcut { - color: #c4dce3; - font-weight: normal; -} - -#box2 .function.save { background-position: -5px top; } -#box2 .function.enabled.save { background-position: -5px center; } -#box2 .function.enabled.save:hover { background-position: -5px bottom; } - -#box2 .function.new { background-position: -42px top; } -#box2 .function.enabled.new { background-position: -42px center; } -#box2 .function.enabled.new:hover { background-position: -42px bottom; } - -#box2 .function.duplicate { background-position: -79px top; } -#box2 .function.enabled.duplicate { background-position: -79px center; } -#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; } - -#box2 .function.raw { background-position: -116px top; } -#box2 .function.enabled.raw { background-position: -116px center; } -#box2 .function.enabled.raw:hover { background-position: -116px bottom; } - -#box2 .function.twitter { background-position: -153px top; } -#box2 .function.enabled.twitter { background-position: -153px center; } -#box2 .function.enabled.twitter:hover { background-position: -153px bottom; } -#box2 .button-picture{ border-width: 0; font-size: inherit; } - #messages { - position:fixed; - top:0px; - right:138px; - margin:0; - padding:0; - width:400px; + position: fixed; + top: 0px; + right: 138px; + margin: 0; + padding: 0; + width: 400px; } #messages li { - background:rgba(23,62,72,0.8); - margin:0 auto; - list-style:none; + background: #222222; + margin: 0 auto; + list-style: none; } #messages li.error { - background:rgba(102,8,0,0.8); + background: rgba(102,8,0,0.8); +} + +@media only screen and (max-width: 600px) { + .logo, .label { + display: none !important; + } + .menu { + padding: 24px 12px !important; + } + .menu-actions { + width: 100%; + } + .menu-actions button { + padding-left: 0; + padding-right: 0; + } + .menu-actions .button-wrap { + flex: auto; + text-align: center; + } } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#414141} ::-webkit-scrollbar-thumb:hover{background:#969696} -::-webkit-scrollbar-track{background:#242424} +::-webkit-scrollbar-track{background:#242424} \ No newline at end of file diff --git a/static/application.js b/static/application.js index 370bc74..5f99ada 100644 --- a/static/application.js +++ b/static/application.js @@ -2,9 +2,8 @@ ///// represents a single document -var haste_document = function(app) { +var haste_document = function() { this.locked = false; - this.app = app; }; // Escapes HTML tag characters @@ -19,7 +18,7 @@ haste_document.prototype.htmlEscape = function(s) { // Get this document from the server and lock it here haste_document.prototype.load = function(key, callback, lang) { var _this = this; - $.ajax(_this.app.baseUrl + 'documents/' + key, { + $.ajax('/documents/' + key, { type: 'get', dataType: 'json', success: function(res) { @@ -61,7 +60,7 @@ haste_document.prototype.save = function(data, callback) { } this.data = data; var _this = this; - $.ajax(_this.app.baseUrl + 'documents', { + $.ajax('/documents', { type: 'post', data: data, dataType: 'json', @@ -102,8 +101,7 @@ var haste = function(appName, options) { // If twitter is disabled, hide the button if (!options.twitter) { $('#box2 .twitter').hide(); - }; - this.baseUrl = options.baseUrl || '/'; + } }; // Set the page title - include the appName @@ -150,9 +148,9 @@ haste.prototype.configureKey = function(enable) { // and set up for a new one haste.prototype.newDocument = function(hideHistory) { this.$box.hide(); - this.doc = new haste_document(this); + this.doc = new haste_document(); if (!hideHistory) { - window.history.pushState(null, this.appName, this.baseUrl); + window.history.pushState(null, this.appName, '/'); } this.setTitle(); this.lightKey(); @@ -211,7 +209,7 @@ haste.prototype.loadDocument = function(key) { var parts = key.split('.', 2); // Ask for what we want var _this = this; - _this.doc = new haste_document(this); + _this.doc = new haste_document(); _this.doc.load(parts[0], function(ret) { if (ret) { _this.$code.html(ret.value); @@ -246,7 +244,7 @@ haste.prototype.lockDocument = function() { else if (ret) { _this.$code.html(ret.value); _this.setTitle(ret.key); - var file = _this.baseUrl + ret.key; + var file = '/' + ret.key; if (ret.language) { file += '.' + _this.lookupExtensionByType(ret.language); } @@ -305,7 +303,7 @@ haste.prototype.configureButtons = function() { }, shortcutDescription: 'control + shift + r', action: function() { - window.location.href = _this.baseUrl + 'raw/' + _this.doc.key; + window.location.href = '/raw/' + _this.doc.key; } }, { diff --git a/static/application.min.js b/static/application.min.js index 77e24f1..512d158 100644 --- a/static/application.min.js +++ b/static/application.min.js @@ -1 +1 @@ -var haste_document=function(t){this.locked=!1,this.app=t};haste_document.prototype.htmlEscape=function(t){return t.replace(/&/g,"&").replace(/>/g,">").replace(/'+t+"");$("#messages").prepend(o),setTimeout(function(){o.slideUp("fast",function(){$(this).remove()})},3e3)},haste.prototype.lightKey=function(){this.configureKey(["new","save"])},haste.prototype.fullKey=function(){this.configureKey(["new","duplicate","twitter","raw"])},haste.prototype.configureKey=function(t){var e,o=0;$("#box2 .function").each(function(){for(e=$(this),o=0;o";$("#linenos").html(e)},haste.prototype.removeLineNumbers=function(){$("#linenos").html(">")},haste.prototype.loadDocument=function(t){var e=t.split(".",2),o=this;o.doc=new haste_document(this),o.doc.load(e[0],function(t){t?(o.$code.html(t.value),o.setTitle(t.key),o.fullKey(),o.$textarea.val("").hide(),o.$box.show().focus(),o.addLineNumbers(t.lineCount)):o.newDocument()},this.lookupTypeByExtension(e[1]))},haste.prototype.duplicateDocument=function(){if(this.doc.locked){var t=this.doc.data;this.newDocument(),this.$textarea.val(t)}},haste.prototype.lockDocument=function(){var t=this;this.doc.save(this.$textarea.val(),function(e,o){if(e)t.showMessage(e.message,"error");else if(o){t.$code.html(o.value),t.setTitle(o.key);var n=t.baseUrl+o.key;o.language&&(n+="."+t.lookupExtensionByType(o.language)),window.history.pushState(null,t.appName+"-"+o.key,n),t.fullKey(),t.$textarea.val("").hide(),t.$box.show().focus(),t.addLineNumbers(o.lineCount)}})},haste.prototype.configureButtons=function(){var t=this;this.buttons=[{$where:$("#box2 .save"),label:"Save",shortcutDescription:"control + s",shortcut:function(t){return t.ctrlKey&&83===t.keyCode},action:function(){""!==t.$textarea.val().replace(/^\s+|\s+$/g,"")&&t.lockDocument()}},{$where:$("#box2 .new"),label:"New",shortcut:function(t){return t.ctrlKey&&78===t.keyCode},shortcutDescription:"control + n",action:function(){t.newDocument(!t.doc.key)}},{$where:$("#box2 .duplicate"),label:"Duplicate & Edit",shortcut:function(e){return t.doc.locked&&e.ctrlKey&&68===e.keyCode},shortcutDescription:"control + d",action:function(){t.duplicateDocument()}},{$where:$("#box2 .raw"),label:"Just Text",shortcut:function(t){return t.ctrlKey&&t.shiftKey&&82===t.keyCode},shortcutDescription:"control + shift + r",action:function(){window.location.href=t.baseUrl+"raw/"+t.doc.key}},{$where:$("#box2 .twitter"),label:"Twitter",shortcut:function(e){return t.options.twitter&&t.doc.locked&&e.shiftKey&&e.ctrlKey&&84==e.keyCode},shortcutDescription:"control + shift + t",action:function(){window.open("https://twitter.com/share?url="+encodeURI(window.location.href))}}];for(var e=0;e/g,">").replace(/'+t+"");$("#messages").prepend(o),setTimeout(function(){o.slideUp("fast",function(){$(this).remove()})},3e3)},haste.prototype.lightKey=function(){this.configureKey(["new","save"])},haste.prototype.fullKey=function(){this.configureKey(["new","duplicate","twitter","raw"])},haste.prototype.configureKey=function(t){var e,o=0;$("#box2 .function").each(function(){for(e=$(this),o=0;o";$("#linenos").html(e)},haste.prototype.removeLineNumbers=function(){$("#linenos").html(">")},haste.prototype.loadDocument=function(t){var e=t.split(".",2),o=this;o.doc=new haste_document,o.doc.load(e[0],function(t){t?(o.$code.html(t.value),o.setTitle(t.key),o.fullKey(),o.$textarea.val("").hide(),o.$box.show().focus(),o.addLineNumbers(t.lineCount)):o.newDocument()},this.lookupTypeByExtension(e[1]))},haste.prototype.duplicateDocument=function(){if(this.doc.locked){var t=this.doc.data;this.newDocument(),this.$textarea.val(t)}},haste.prototype.lockDocument=function(){var t=this;this.doc.save(this.$textarea.val(),function(e,o){if(e)t.showMessage(e.message,"error");else if(o){t.$code.html(o.value),t.setTitle(o.key);var n="/"+o.key;o.language&&(n+="."+t.lookupExtensionByType(o.language)),window.history.pushState(null,t.appName+"-"+o.key,n),t.fullKey(),t.$textarea.val("").hide(),t.$box.show().focus(),t.addLineNumbers(o.lineCount)}})},haste.prototype.configureButtons=function(){var t=this;this.buttons=[{$where:$("#box2 .save"),label:"Save",shortcutDescription:"control + s",shortcut:function(t){return t.ctrlKey&&83===t.keyCode},action:function(){""!==t.$textarea.val().replace(/^\s+|\s+$/g,"")&&t.lockDocument()}},{$where:$("#box2 .new"),label:"New",shortcut:function(t){return t.ctrlKey&&78===t.keyCode},shortcutDescription:"control + n",action:function(){t.newDocument(!t.doc.key)}},{$where:$("#box2 .duplicate"),label:"Duplicate & Edit",shortcut:function(e){return t.doc.locked&&e.ctrlKey&&68===e.keyCode},shortcutDescription:"control + d",action:function(){t.duplicateDocument()}},{$where:$("#box2 .raw"),label:"Just Text",shortcut:function(t){return t.ctrlKey&&t.shiftKey&&82===t.keyCode},shortcutDescription:"control + shift + r",action:function(){window.location.href="/raw/"+t.doc.key}},{$where:$("#box2 .twitter"),label:"Twitter",shortcut:function(e){return t.options.twitter&&t.doc.locked&&e.shiftKey&&e.ctrlKey&&84==e.keyCode},shortcutDescription:"control + shift + t",action:function(){window.open("https://twitter.com/share?url="+encodeURI(window.location.href))}}];for(var e=0;e hastebin + @@ -17,9 +19,9 @@ var app = null; // Handle pops var handlePop = function(evt) { - var path = evt.target.location.href; - if (path === app.baseUrl) { app.newDocument(true); } - else { app.loadDocument(path.split('/').slice(-1)[0]); } + var path = evt.target.location.pathname; + if (path === '/') { app.newDocument(true); } + else { app.loadDocument(path.substring(1, path.length)); } }; // Set up the pop state to handle loads, skipping the first load // to make chrome behave like others: @@ -31,9 +33,7 @@ }, 1000); // Construct app and load initial path $(function() { - var baseUrl = window.location.href.split('/'); - baseUrl = baseUrl.slice(0, baseUrl.length - 1).join('/') + '/'; - app = new haste('hastebin', { twitter: false, baseUrl: baseUrl }); + app = new haste('hastebin', { twitter: false }); handlePop({ target: window }); }); @@ -43,28 +43,56 @@
    -
    - - -
    - - - - - +
    +
    +
    + +
    - -
    - - - diff --git a/static/logo.png b/static/logo.png deleted file mode 100644 index a03ce90..0000000 Binary files a/static/logo.png and /dev/null differ