diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2018-01-28 14:01:06 +0000 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2018-01-28 14:01:06 +0000 |
| commit | 447f821d3ca49cc96da59858dbf8d73d895e7060 (patch) | |
| tree | 7649085f6232462f9622e1cb0fddb9935c63bf61 | |
| parent | 8e831bf7f734b47fe084ee9851ab4772cbb20d2d (diff) | |
| download | sql-plus-plus-447f821d3ca49cc96da59858dbf8d73d895e7060.tar.xz sql-plus-plus-447f821d3ca49cc96da59858dbf8d73d895e7060.zip | |
Add flexbox layout with draggable resizing
| -rw-r--r-- | index.html | 21 | ||||
| -rw-r--r-- | renderer.js | 22 | ||||
| -rw-r--r-- | style.css | 55 |
3 files changed, 88 insertions, 10 deletions
@@ -9,15 +9,24 @@ <link rel="stylesheet" type="text/css" href="./table-style.css"></link> </head> <body> - - <input id="run-query" type="button" value="Run"></input> + <div class="flex-wrapper"> + <div class="row header"> + <input id="run-query" type="button" value="Run"></input> + </div> + - <div id="editor"></div> + <div class="row content"> + <div id="editor" class="editor-row split-row"></div> + + <div class="results-row split-row"> + <table id="result-table" width="100%"></table> + </div> + </div> - <div class="results"> - <table id="result-table" width="100%"></table> + <div class="row footer"> + some status + </div> </div> - <script> require("./renderer.js"); </script> diff --git a/renderer.js b/renderer.js index a59b714..113119f 100644 --- a/renderer.js +++ b/renderer.js @@ -3,9 +3,10 @@ const cm = require("codemirror"); const { Pool } = require("pg"); require('datatables')(window, $); require("codemirror/mode/sql/sql"); +const Split = require("split.js"); const editorContext = cm(document.getElementById("editor"), { - value: "select *\nfrom foo", + value: "select *\nfrom information_schema.tables", mode: "text/x-sql", lineNumbers: true }); @@ -36,7 +37,7 @@ function displayResults(results) { dataTable.destroy(); _resultsTable().empty(); } - + dataTable = _resultsTable().DataTable({ paging: false, destroy: true, @@ -60,5 +61,22 @@ function _resultsTable() { $(document).ready(function () { $('#run-query').click(runQuery); + + Split(['.editor-row', '.results-row'], { + sizes: [50, 50], + direction: 'vertical', + gutterSize: 10, + elementStyle: function (dimension, size, gutterSize) { + return { + 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' + } + }, + gutterStyle: function (dimension, gutterSize) { + return { + 'flex-basis': gutterSize + 'px' + } + } + }); + }) @@ -1,3 +1,54 @@ -.results { - overflow: scroll +html, +body { + height: 100%; + margin: 0 +} + +.flex-wrapper { + display: flex; + flex-flow: column; + height: 100%; +} + +.flex-wrapper .row.header { + flex: 0 1 auto; + background-color: #505050; + color: white; +} + +.flex-wrapper .row.content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + height: 100%; +} + +.flex-wrapper .row.footer { + flex: 0 1 20px; + background-color: #505050; + color: white; +} + +.flex-wrapper .row .split-row { + overflow: auto; +} + +.gutter { + background-color: #505050; + background-repeat: no-repeat; + background-position: 50%; +} + +.gutter.gutter-vertical { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); + cursor: ns-resize; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: ew-resize; +} + +.CodeMirror { + height: 100%; }
\ No newline at end of file |