Css for Repl #45
Css for Repl #45
Conversation
| @@ -80,12 +79,20 @@ export class PyRepl extends BaseEvalElement { | |||
| // } | |||
| // }) | |||
| ]; | |||
| const customTheme = EditorView.theme({ | |||
There was a problem hiding this comment.
Picky comment here.. Maybe we could move this config to the top of the file as a const for more exposure?
There was a problem hiding this comment.
this is to the top of the corresponding function, the linter took care of this one.
|
@princiya are you ready to merge this (after conflicts are resolved) or did you want to address anything else? |
|
@fpliger I will also address the repl2 component's styling in this PR itself. Thanks for the design suggestions. |
pyscriptjs/examples/repl2.html
Outdated
| @@ -10,6 +10,25 @@ | |||
| <link rel="stylesheet" href="../build/pyscript.css" /> | |||
|
|
|||
| <script defer src="../build/pyscript.js"></script> | |||
|
|
|||
| <style> | |||
| #output > div { | |||
There was a problem hiding this comment.
I did not find any other way to style the right output panel other than directly adding CSS here.
I tried to add CSS in interpreter.js in the write function, but that function (sometimes) also renders additional div element. That's why I chose to control the empty div elements via CSS
There was a problem hiding this comment.
How about we add the additional css to separate file? It'd make the example look cleaner
|
|
pyscriptjs/examples/repl2.html
Outdated
| @@ -10,6 +10,25 @@ | |||
| <link rel="stylesheet" href="../build/pyscript.css" /> | |||
|
|
|||
| <script defer src="../build/pyscript.js"></script> | |||
|
|
|||
| <style> | |||
| #output > div { | |||
There was a problem hiding this comment.
How about we add the additional css to separate file? It'd make the example look cleaner
pyscriptjs/src/components/pyrepl.ts
Outdated
| // add Editor to main PyScript div | ||
|
|
I am trying to remove the black dotted border that appears when repl is focused, but the styles come from Codemirror.net. I was able to extend the theme but not able to override the dotted outline, will try to figure out more and improve CSS for Repl2 next.