app.css

/*
Copyright 2019 Chris Pearson

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/* TODO
 * - when the grid overflows, it should have its own scrollbar,
 *   not use the whole page's
 * - the grid and text area should reach down to the bottom of the page
 *   - currently this is a fixed em number
 * - move text in append cells to theme?
*/

html {
    font-family: sans-serif, monospace;
    font-size: 12px;
    height: 100%;
}

body {
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#header {
    /* Retained in case we add a status bar */
    padding-top: 0.83em;
    padding-bottom: 0.83em;
    padding-right: 8px;
    font-family: Calibri;
}

#row-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    box-sizing: border-box;
}

#spreadsheet {
    margin-top: 4px;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0.5em;
    margin-right: 0.5em;
    overflow-y: auto;
}

#formula-bar {
    width: 100%;
    margin-bottom: 0.5em;
    font-family: Consolas, monospace;
    resize: vertical;
    min-height: 1.2em;
    height: 1.2em;
}

#grid-container {
    flex-grow: 1;
    overflow-y: auto;
    margin-right: 0.5em;
}

#grid {
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    outline: none; /* removes the border if focused */
}

#grid td {
    min-width: 1.2em;
    height: 1.2em;
    padding: 3px;
    
    /* experimenting with big values */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8em;
}

#grid td.occupied {
    /* background-color: rgb(245, 245, 245); */
    min-width: 8em;
}

/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof */
#grid td.append:before {
    content: "NEW ROW"; /* "↓" */
}

#grid td.add_key:before {
    content: "Add key"
}

#grid td.add_col:before {
    content: "NEW COL"; /* content: "→" */
}

/* Code editor */

#code-editor {
    width: 70em;
    flex-direction: column;
}

.CodeMirror {
    flex-grow: 1;
    font-family: Consolas, monospace;
}

.CodeMirror-scroll {
    /* http://stackoverflow.com/questions/30098071/codemirror-autoresize-upto-a-given-number-of-lines */
    /* max-height: 100%; */
}

/* Status bar */

#status-bar {
    font-size: 11px;
    padding: 4px;
}

#status-bar > dl {
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
}

#status-bar > dl > dd {
    -webkit-margin-start: 0px;
    margin-left: 0px;
    display: inline;
}