Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website:Spacing and collapsable options #156

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Website:Spacing and collapsable options #156

wants to merge 1 commit into from

Conversation

Trevor89
Copy link

space the panes out a little, space the checkboxes, make them collapsable.

space the panes out a little, space the checkboxes, make them collapsable
Copy link
Collaborator

@simonlindholm simonlindholm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commenting only on code aspects here, since design isn't really my area. Hoping others can weigh in on that

@@ -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?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is, and yeah, that sounds like something we should do. Could probably use pygments

box-sizing: border-box;
}
div{
padding:16px
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabs -> spaces, and try to match existing style wrt spacing/semicolons:

div {
    padding: 16px;
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

2021-10-22-125204_1919x1015_scrot

height: 100%;
}
textarea, .sidebar iframe {
width: 100%;/*calc(100% - 16px);*/
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove commented-out code

flex:1;flex-basis: 250px;
}
.keyword{color:blue;}
.opperator{color:grey}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused

}
#options
{
overflow:scroll;box-shadow:none;background-color:inherit;display:flex;flex-wrap: wrap; flex:1; flex-basis: 300px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

line-wrap this

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

@zbanks zbanks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new look is great, it's so much easier to distinguish the options!

width: 100%;/*calc(100% - 16px);*/
height: calc(100% - (1em + 16px));
border: 1px solid #888;
m//argin: 8px ;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a quickly removed attribute

}
label
{
flex:1;flex-basis: 250px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
2021-10-22-124133_861x160_scrot

Without flex: 1;
2021-10-22-123805_819x229_scrot

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

2021-10-22-125204_1919x1015_scrot

}
#options
{
overflow:scroll;box-shadow:none;background-color:inherit;display:flex;flex-wrap: wrap; flex:1; flex-basis: 300px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Trevor89 changed the title Spacing and collapsable options Website:Spacing and collapsable options Oct 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants