Skip to content

Fixed button positions in all browsers #282

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Oct 24, 2019
Merged

Fixed button positions in all browsers #282

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
900f106
Fixed button positions in all browsers
microbit-henry Oct 23, 2019
27f06f2
Fixed conflicts
microbit-henry Oct 24, 2019
d784c30
Simplified windows line-height change
microbit-henry Oct 24, 2019
97c8778
Changed styling from js to css
microbit-henry Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions python-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1618,6 +1618,10 @@ function web_editor(config) {
// Join up the buttons in the user interface with some functions for
// handling what to do when they're clicked.
function setupButtons() {
if(navigator.platform.match('Win') !== null){
$(".roundsymbol").addClass("windowsroundsymbol");
$("#small-icons .status-icon").css("line-height","2.2rem");
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is this something that could be done in CSS only? I'd rather only have JS doing this kind of thing as a last resort.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It doesnt look like I can do this exact thing in CSS.
Screenshot 2019-10-24 11 05 50
I can spend some time looking into a different solution to just changing line height in different browsers if you want?

Copy link
Collaborator

Choose a reason for hiding this comment

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

So in what situation exactly do we need this change? Right now this would affect all browsers not on Windows?

$("#command-download").click(function () {
doDownload();
});
Expand Down
9 changes: 5 additions & 4 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,18 +292,19 @@ html[data-useragent*='MSIE 10.0'] #small-icons .status-icon {
}

@-moz-document url-prefix() {
.roundsymbol {
.windowsroundsymbol{
line-height: 3.7rem;
}
#small-icons .status-icon {
line-height: 2.15rem;
}
}

html[data-useragent*='MSIE 10.0'] .roundsymbol {
line-height: 3.7rem;
}

html[data-useragent*='rv:11.0'] .roundsymbol {
line-height: 3.7rem;
}

.roundbutton:focus, .roundbutton:active {
background-image: url("../img/triangle2.svg");
}
Expand Down