From 447f821d3ca49cc96da59858dbf8d73d895e7060 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sun, 28 Jan 2018 14:01:06 +0000 Subject: Add flexbox layout with draggable resizing --- index.html | 21 +++++++++++++++------ renderer.js | 22 ++++++++++++++++++++-- style.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 88 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index cc12618..eac7bc9 100644 --- a/index.html +++ b/index.html @@ -9,15 +9,24 @@ - - +

+ + -

+ +

- 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' + } + } + }); + }) diff --git a/style.css b/style.css index c48a0ad..8b9ab29 100644 --- a/style.css +++ b/style.css @@ -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 -- cgit v1.2.3