diff --git a/client/src/components/infoview/infoview.css b/client/src/components/infoview/infoview.css index 1d533ad..c79440f 100644 --- a/client/src/components/infoview/infoview.css +++ b/client/src/components/infoview/infoview.css @@ -55,7 +55,7 @@ display: flex; } -.command-line button { +.command-line button, .undo-button { display: block; white-space: nowrap; flex: 0; @@ -153,19 +153,23 @@ flex: 1; } -.undo-button { - border: 1px solid #bbb; - display: block; - padding-left: .3rem; - padding-right: .5rem; - float: right; - border-radius: .5rem; +.exercise .command { + background-color: #bbb; + padding: .5em; + border-radius: .2em; + margin-top: 2rem; + display: flex; + flex-direction: row; +} + +.exercise .command-text { + flex: 1; background-color: #fff; - color: #888; + font-family: "Droid Sans Mono", "monospace", monospace; + font-size: 14px; + padding: 0.4em .6em 0; } -.undo-button:hover { - border: 1px solid #888; - background-color: #ffdcc7; - cursor: pointer; +.undo-button { + color: #888; } diff --git a/client/src/components/infoview/main.tsx b/client/src/components/infoview/main.tsx index 2fd15ca..1c6e83b 100644 --- a/client/src/components/infoview/main.tsx +++ b/client/src/components/infoview/main.tsx @@ -201,10 +201,10 @@ function Command({ command, deleteProof }: { command: string, deleteProof: any } // The first step will always have an empty command if (!command) { return <> } return
- {command} -
- -
+
{command}
+
} diff --git a/client/src/components/level.css b/client/src/components/level.css index 2cf436f..dd131ce 100644 --- a/client/src/components/level.css +++ b/client/src/components/level.css @@ -233,17 +233,6 @@ td code { padding: .5em; } -/* TODO: Create a nice style and move this to a better place */ - -.exercise .command { - /* background-color: rgb(167, 167, 167); */ - border: 1px solid #bbb; - background-color: #eee; - padding: .5rem; - border-radius: .5rem; - margin-top: 2rem; -} - .exercise .step { /* background-color: #e6f0f4; */ margin-top: 5px; diff --git a/client/src/components/welcome.css b/client/src/components/welcome.css index 59d66eb..595bed4 100644 --- a/client/src/components/welcome.css +++ b/client/src/components/welcome.css @@ -17,6 +17,7 @@ .welcome .column { height: 100%; overflow: auto; + scroll-behavior: smooth; } .welcome-text { diff --git a/client/src/components/welcome.tsx b/client/src/components/welcome.tsx index 09da58e..e0413ef 100644 --- a/client/src/components/welcome.tsx +++ b/client/src/components/welcome.tsx @@ -91,7 +91,9 @@ function Welcome() { let elems = Array.from(document.getElementsByClassName("playable-world")) if (elems.length) { // It seems that the last element is the one furthest up in the tree - let elem = elems.pop() + // TODO: I think they appear in random order. Check there position and select the lowest one + // of these positions to scroll to. + let elem = elems[0] console.debug(`scrolling to ${elem.textContent}`) elem.scrollIntoView({block: "center"}) }