Skip to content

Commit

Permalink
Fix the styling, again
Browse files Browse the repository at this point in the history
  • Loading branch information
@gingershaped
gingershaped committed Sep 16, 2024
1 parent 19a6498 commit 9b1a4da
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 76 deletions.
2 changes: 1 addition & 1 deletion src/latest/scripts/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const EXTENSIONS = [
"&": { height: "100%" },
"&.cm-focused": { outline: "none" },
".cm-scroller": {overflow: "auto"},
".cm-panels": {"z-index": "0 !important"},
".cm-tooltip": {"z-index": "300 !important"},
}),
];
const util = new UtilWorker();
Expand Down
148 changes: 73 additions & 75 deletions src/latest/scripts/Theseus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,81 +167,79 @@ function Theseus() {
}
}} inputs={inputs} setShowFlagsDialog={setShowFlagsDialog} setShowSettingsDialog={setShowSettingsDialog} setShowShareDialog={setShowShareDialog} setShowInputDialog={setShowInputDialog} setShowElementOffcanvas={setShowElementOffcanvas}
/>
<Container fluid className="flex-grow-1">
<Row className="h-100">
<Col lg="6" className="g-0 d-flex flex-column">
<Suspense
fallback={
<div className="d-flex justify-content-center py-4 m-2">
<Spinner animation="border" className="" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
}
>
<Editor ratio="20%" code={header} setCode={setHeader} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
Header
</Editor>
<Editor ratio="60%" code={code} setCode={setCode} theme={theme} literate={literate} claimFocus={setLastFocusedEditor} autoFocus>
<div className="d-flex align-items-center">
{bytecount}
{literate ? (
<Button variant="link" size="sm" className="ms-auto p-0" onClick={literateToSbcs}>
literate to sbcs
</Button>
) : null}
</div>
</Editor>
<Editor ratio="20%" code={footer} setCode={setFooter} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
Footer
</Editor>
</Suspense>
</Col>
<Col lg="6" className="g-0 vstack">
<Tab.Container
defaultActiveKey="terminal"
>
<Nav variant="pills" className="align-items-end m-2">
<Nav.Item>
<Nav.Link eventKey="terminal">Terminal</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="html">HTML</Nav.Link>
</Nav.Item>
<div className="ms-auto me-1">
<CopyButton title="Copy output" generate={() => runnerRef.current?.getOutput() ?? ""} />
</div>
</Nav>
<Tab.Content className="flex-grow-1 bg-body-tertiary">
<Tab.Pane eventKey="terminal" className="h-100 position-relative">
<Suspense
fallback={
<div className="d-flex justify-content-center pt-2 h-100 terminal-placeholder">
<Spinner animation="border" className="" role="status" variant="light">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
}
>
<VyTerminal
ref={runnerRef}
code={header + code + footer}
flags={[...serializeFlags(elementData.flagDefs, flags)]}
inputs={inputs.map((i) => i.value)}
timeout={timeout != null ? timeout * 1000 : null}
onStart={() => setState("running")}
onFinish={() => setState("idle")}
/>
</Suspense>
</Tab.Pane>
<Tab.Pane eventKey="html">
<HtmlView getOutput={runnerRef.current?.getOutput} />
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</Col>
</Row>
</Container>
<main>
<div>
<Suspense
fallback={
<div className="d-flex justify-content-center py-4 m-2">
<Spinner animation="border" className="" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
}
>
<Editor ratio="20%" code={header} setCode={setHeader} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
Header
</Editor>
<Editor ratio="60%" code={code} setCode={setCode} theme={theme} literate={literate} claimFocus={setLastFocusedEditor} autoFocus>
<div className="d-flex align-items-center">
{bytecount}
{literate ? (
<Button variant="link" size="sm" className="ms-auto p-0" onClick={literateToSbcs}>
literate to sbcs
</Button>
) : null}
</div>
</Editor>
<Editor ratio="20%" code={footer} setCode={setFooter} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
Footer
</Editor>
</Suspense>
</div>
<div className="vstack">
<Tab.Container
defaultActiveKey="terminal"
>
<Nav variant="pills" className="align-items-end m-2">
<Nav.Item>
<Nav.Link eventKey="terminal">Terminal</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="html">HTML</Nav.Link>
</Nav.Item>
<div className="ms-auto me-1">
<CopyButton title="Copy output" generate={() => runnerRef.current?.getOutput() ?? ""} />
</div>
</Nav>
<Tab.Content className="flex-grow-1 bg-body-tertiary">
<Tab.Pane eventKey="terminal" className="h-100 position-relative">
<Suspense
fallback={
<div className="d-flex justify-content-center pt-2 h-100 terminal-placeholder">
<Spinner animation="border" className="" role="status" variant="light">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
}
>
<VyTerminal
ref={runnerRef}
code={header + code + footer}
flags={[...serializeFlags(elementData.flagDefs, flags)]}
inputs={inputs.map((i) => i.value)}
timeout={timeout != null ? timeout * 1000 : null}
onStart={() => setState("running")}
onFinish={() => setState("idle")}
/>
</Suspense>
</Tab.Pane>
<Tab.Pane eventKey="html">
<HtmlView getOutput={runnerRef.current?.getOutput} />
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
</main>
</>;
}

Expand Down
16 changes: 16 additions & 0 deletions src/latest/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,22 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

main {
display: flex;
flex-direction: row;
@include media-breakpoint-down(md) {
flex-direction: column;
> div {
height: 50%;
}
}
> div {
flex-basis: 50%;
}
width: 100%;
height: 100%;
}

code.code-pill {
border-radius: $border-radius-sm;
background-color: shade-color($code-color, 80%);
Expand Down

0 comments on commit 9b1a4da

Please sign in to comment.