Website:Spacing and collapsable options #156
Conversation
space the panes out a little, space the checkboxes, make them collapsable
| @@ -123,7 +123,7 @@ def print_headers(content_type: str) -> None: | |||
| </head> | |||
| """ | |||
| ) | |||
| print("<body><pre><plaintext>", end="") | |||
| print("<body><pre><plaintext>", end="") # assuming this is the result page, any chance of adding rough syntax highlighting? | |||
There was a problem hiding this comment.
It is, and yeah, that sounds like something we should do. Could probably use pygments
| box-sizing: border-box; | ||
| } | ||
| div{ | ||
| padding:16px |
There was a problem hiding this comment.
tabs -> spaces, and try to match existing style wrt spacing/semicolons:
div {
padding: 16px;
}
There was a problem hiding this comment.
This is a lot of padding on my small/zoomed in screen, and in "Output Sidebar" mode it makes the left hand sign misaligned from the right hand side.
Would increasing the 12px of padding on .main, .sidebar be enough to get the effect you're going for?
| height: 100%; | ||
| } | ||
| textarea, .sidebar iframe { | ||
| width: 100%;/*calc(100% - 16px);*/ |
There was a problem hiding this comment.
remove commented-out code
| flex:1;flex-basis: 250px; | ||
| } | ||
| .keyword{color:blue;} | ||
| .opperator{color:grey} |
| } | ||
| #options | ||
| { | ||
| overflow:scroll;box-shadow:none;background-color:inherit;display:flex;flex-wrap: wrap; flex:1; flex-basis: 300px; |
There was a problem hiding this comment.
At least on chrome, I couldn't get this div to overflow: the div would always expand to fit all of the contents.
I tried googling/playing around with some different properties, but couldn't get anything to work (other than specifying a height, which seems worse).
Does the div ever become scrollable on a different browser? Otherwise overflow: scroll can be removed?
There was a problem hiding this comment.
I was tetsing various ideas, I originally had a height but got rid of it.
the formatting is because of mixing manual typing with "F12 Dev Tools"
| MIPS assembly: | ||
| </div> | ||
| <div style="flex: 20;"> | ||
| <br> |
There was a problem hiding this comment.
I think <br> is considered a bit dated, and a wrapper div makes it easier to changing spacing in various ways, so I'd prefer keeping it the way it was.
Right now div also has the side-effect of creating a box with a box-shadow, but we can fix that by creating a class for it and not applying the class to this particular div.
| width: 100%;/*calc(100% - 16px);*/ | ||
| height: calc(100% - (1em + 16px)); | ||
| border: 1px solid #888; | ||
| m//argin: 8px ; |
There was a problem hiding this comment.
just a quickly removed attribute
| } | ||
| label | ||
| { | ||
| flex:1;flex-basis: 250px; |
There was a problem hiding this comment.
I think the flex: 1; here should be removed. As-is, if there are an unequal number of cells per row, the final row looks misaligned?
With flex: 1;
Without flex: 1;
There was a problem hiding this comment.
I actually have no idea how flex works, I just worked from examples in the page, but your second image is far better and the exact effect I was going for.
I was also trying to align the dropdowns but to no avail...
| box-sizing: border-box; | ||
| } | ||
| div{ | ||
| padding:16px |
There was a problem hiding this comment.
This is a lot of padding on my small/zoomed in screen, and in "Output Sidebar" mode it makes the left hand sign misaligned from the right hand side.
Would increasing the 12px of padding on .main, .sidebar be enough to get the effect you're going for?
| } | ||
| #options | ||
| { | ||
| overflow:scroll;box-shadow:none;background-color:inherit;display:flex;flex-wrap: wrap; flex:1; flex-basis: 300px; |
There was a problem hiding this comment.
At least on chrome, I couldn't get this div to overflow: the div would always expand to fit all of the contents.
I tried googling/playing around with some different properties, but couldn't get anything to work (other than specifying a height, which seems worse).
Does the div ever become scrollable on a different browser? Otherwise overflow: scroll can be removed?
Trevor89
changed the title
space the panes out a little, space the checkboxes, make them collapsable.