lots more stuff
This commit is contained in:
parent
46c9f0a447
commit
c4f250573a
19 changed files with 7619 additions and 149 deletions
7
thinks/static/thinks/load-think-editor.mjs
Normal file
7
thinks/static/thinks/load-think-editor.mjs
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import './code-editor.mjs';
|
||||
|
||||
export default async function init_app() {
|
||||
const flags = JSON.parse(document.getElementById('think-editor-data').textContent);
|
||||
flags.csrf_token = document.getElementById('csrftoken')?.textContent || '';
|
||||
const app = Elm.App.init({node: document.body, flags});
|
||||
}
|
||||
201
thinks/static/thinks/think-editor.css
Normal file
201
thinks/static/thinks/think-editor.css
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
:root {
|
||||
--spacing: 1em;
|
||||
--half-spacing: calc(0.5 * var(--spacing));
|
||||
--double-spacing: calc(2 * var(--spacing));
|
||||
|
||||
--editor-size: 50%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: var(--half-spacing);
|
||||
|
||||
& > header {
|
||||
padding: var(--spacing);
|
||||
& h1 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
header {
|
||||
& #think-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#editor-size-input + output {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
.think-editor {
|
||||
display: flex;
|
||||
gap: var(--spacing);
|
||||
height: 100%;
|
||||
|
||||
& > #main-nav > nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing);
|
||||
|
||||
& #file-tree {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
& > li {
|
||||
margin-top: var(--half-spacing);
|
||||
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .dir {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .dir + .file {
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
& form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 6em;
|
||||
align-content: start;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& #make-log {
|
||||
& > pre {
|
||||
max-width: 20em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #log[open] {
|
||||
width: 80ch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
& #editor {
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
flex-basis: var(--editor-size);
|
||||
max-height: 85vh;
|
||||
|
||||
& #editor-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing);
|
||||
justify-content: space-between;
|
||||
|
||||
& > details {
|
||||
text-align: right;
|
||||
|
||||
& > summary {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& button {
|
||||
margin: var(--half-spacing) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #code-editor {
|
||||
display: block;
|
||||
max-width: 50vw;
|
||||
padding-bottom: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
& #preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&[open] {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: calc(100% - var(--editor-size));
|
||||
}
|
||||
|
||||
& > summary {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
& > iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&[closed] > iframe {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#file-form {
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (max-width: 100ch) {
|
||||
html {
|
||||
font-size: min(3vw, 16px);
|
||||
}
|
||||
.think-editor {
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
|
||||
& > * ~ * {
|
||||
border-top: medium solid #888;
|
||||
margin-top: var(--spacing);
|
||||
padding-top: var(--spacing);
|
||||
}
|
||||
|
||||
& nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& form {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& #file-tree {
|
||||
max-height: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
& #editor {
|
||||
overflow: auto;
|
||||
& #code-editor {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
& #preview {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
7074
thinks/static/thinks/think-editor.js
Normal file
7074
thinks/static/thinks/think-editor.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,31 +1,64 @@
|
|||
:root {
|
||||
--spacing: 1em;
|
||||
--half-spacing: calc(0.5 * var(--spacing));
|
||||
--double-spacing: calc(2 * var(--spacing));
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body > header {
|
||||
padding: var(--spacing);
|
||||
& h1 {
|
||||
margin: 0;
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
& > header {
|
||||
padding: var(--spacing);
|
||||
& h1 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.index {
|
||||
& #thinks-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing);
|
||||
font-size: 20px;
|
||||
|
||||
& > .think {
|
||||
& .readme {
|
||||
max-width: 80ch;
|
||||
white-space: pre-wrap;
|
||||
& main {
|
||||
padding: 0 var(--spacing);
|
||||
|
||||
& #templates-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--double-spacing);
|
||||
}
|
||||
|
||||
& #thinks-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--double-spacing);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
& details {
|
||||
&[open] > summary {
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
& .think {
|
||||
& time {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
& .readme {
|
||||
max-width: 80ch;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,6 +90,19 @@ body.thing-editor {
|
|||
& #file-tree {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
& > li {
|
||||
margin-top: var(--half-spacing);
|
||||
}
|
||||
|
||||
& .dir {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& .dir + .file {
|
||||
margin-top: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
& form {
|
||||
|
|
@ -65,6 +111,13 @@ body.thing-editor {
|
|||
align-content: start;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& #make-log {
|
||||
& > pre {
|
||||
max-width: 20em;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& #editor {
|
||||
|
|
@ -89,7 +142,9 @@ body.thing-editor {
|
|||
& #code-editor {
|
||||
display: block;
|
||||
max-width: 50vw;
|
||||
padding-bottom: 10em;
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& #preview {
|
||||
|
|
@ -101,12 +156,13 @@ body.thing-editor {
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#file-form {
|
||||
overflow: auto;
|
||||
/*! max-height: 100%; */
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (max-width: 100ch) {
|
||||
|
|
@ -116,17 +172,33 @@ body.thing-editor {
|
|||
body.thing-editor {
|
||||
& main {
|
||||
grid-template:
|
||||
"nav" min-content "editor" 40vh "preview";
|
||||
"nav" min-content "editor" 40vh "preview"
|
||||
;
|
||||
overflow: visible;
|
||||
|
||||
& nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& form {
|
||||
flex-grow: 1;
|
||||
|
||||
}
|
||||
|
||||
& #file-tree {
|
||||
max-height: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
& #editor {
|
||||
overflow: auto;
|
||||
& #code-editor {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
& #preview {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue