css for loading circle

pull/116/head
Jon Eugster 1 year ago
parent 6437013479
commit 42eaedda70

@ -413,10 +413,14 @@ export function CommandLineInterface(props: { world: string, level: number, data
return <div className="commandline-interface">
<div className="content" ref={proofPanelRef}>
<div className="tmp-pusher"></div>
<div className="tmp-pusher">
{!proof.length &&
<CircularProgress />
}
</div>
<ExerciseStatement data={props.data} />
{proof.length ?
<>
<div className='proof'>
{proof.map((step, i) => {
if (i == proof.length - 1 && lastStepErrors) {
// if the last command contains an error, we only display the errors but not the
@ -474,8 +478,8 @@ export function CommandLineInterface(props: { world: string, level: number, data
}
</div>
}
</>
: <CircularProgress />}
</div> : <></>
}
</div>
<CommandLine proofPanelRef={proofPanelRef} hidden={!withErr && proof[proof.length - 1]?.goals.length == 0}/>
</div>

@ -237,7 +237,7 @@ td code {
.commandline-interface .content {
flex: 1 1 auto;
overflow-y: scroll;
padding: .5em;
padding: 0;
}
.exercise .step {
@ -319,10 +319,17 @@ td code {
}
.tmp-pusher {
align-items: center;
display: flex;
justify-content: center;
}
.commandline-interface .content {
background-color: #eee;
margin-left: -0.5em;
margin-right: -0.5em;
margin-top: -0.5em;
}
.commandline-interface .proof {
background-color: #fff;
}
.toggle-width {

@ -109,6 +109,7 @@ function Welcome() {
)}
</>
:
<Split className="welcome" minSize={0} snapOffset={200} sizes={[40, 35, 25]}>
<IntroductionPanel introduction={gameInfo.data?.introduction} />
<WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />

@ -1 +1 @@
{"version": 4, "packagesDir": "lake-packages", "packages": []}
{"version": 5, "packagesDir": "lake-packages", "packages": []}

Loading…
Cancel
Save