Skip to content

Fav icon fix | nav bar #110

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

Jump to bottom
Open
pradeepkumara wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fav icon fix | nav bar #110

pradeepkumara wants to merge 4 commits into from

Conversation

@pradeepkumara
Copy link

@pradeepkumara pradeepkumara commented Jan 6, 2025

Description

updated the nav bar and fav icon
Fixes # (issue)

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as
    expected)
  • Documentation (update or new)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can
reproduce. Please also list any relevant details for your test configuration

Testing Checklist

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from ... on the Pull Request

@github-actions
Copy link

github-actions bot commented Jan 6, 2025 •
edited
Loading

🐋 PR Preview!
Preview at https://thoth-tech.github.io/SplashkitOnline/pr-previews/110
for commit 0459c8c

WhyPenguins
WhyPenguins requested changes Jan 7, 2025
View reviewed changes
Copy link
Contributor

@WhyPenguins WhyPenguins left a comment

Choose a reason for hiding this comment

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

Hi @pradeepkumara ! This is a good start! I think there might have been some confusion though - the idea of this task was to update the main menu bar:
image
whereas it looks like you've changed the Run/Restart/Pause buttons.

Do you think you can change the focus to be on the main menu bar? Something kind of like this:
image

Code looks good for the most part, just make sure to write the code in the right files to help keep the codebase tidy.

Also similar to your other PRs, it'd be better if only the lines important for the PR were committed - formatting changes on other unrelated parts makes it more difficult to work out what parts of the PR are relevant/not 😋

Overall good work though, the drop-down menu works alright and also functions on mobile which is neat 😃

Browser_IDE/index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="stylesheet.css">

// adding fav icon
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

This shows up on the page - in html // aren't comments 😋
image

Copy link
Author

@pradeepkumara pradeepkumara Jan 8, 2025

Choose a reason for hiding this comment

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

hey, thank you for your all comments. i will sort them.

Browser_IDE/index.html Outdated
Comment on lines 38 to 131

<style>
/* Navbar Styling */
.navbar {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Dropdown Button Styling */
.dropdown {
position: relative;
display: none; /* Initially hidden */
}

.dropbtn {
background-color: darkgrey;
color: white;
padding: 10px 15px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
}

.dropbtn i {
margin-left: 5px;
}

.dropbtn:hover {
background-color: #0056b3;
}

/* Dropdown Content Styling */
.dropdown-content {
display: none;
position: absolute;
background-color: #404040;
color: white;
min-width: 150px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 4px;
padding: 5px 0;
}

.dropdown-content button {
background: none;
border: none;
color: white;
padding: 8px 12px;
text-align: left;
text-decoration: none;
display: block;
width: 100%;
cursor: pointer;
}

.dropdown-content button:hover {
background: white;
color: #404040;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Primary Button Styling */
.run-program {
color: white;
padding: 10px 15px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
margin-right: 10px;
}

.run-program i {
margin-right: 5px;
}

.run-program:hover {
background-color: #218838;
color: green;
}
</style>
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025

Choose a reason for hiding this comment

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

This should all be in stylesheet.css

Copy link
Author

@pradeepkumara pradeepkumara Jan 8, 2025

Choose a reason for hiding this comment

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

i have updated all the changes

Browser_IDE/index.html
<link rel="stylesheet" href="stylesheet.css">

// adding fav icon
<link rel="icon" href="https://thoth-tech.github.io/SplashkitOnline/favicon.ico" />
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025

Choose a reason for hiding this comment

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

This does work, but it'd be much better if it was still a relative path in case we change where we host SplashKit Online. <link rel="icon" href="favicon.ico"> works fine 😋

Browser_IDE/stylesheet.css
Comment on lines -60 to -62
button:hover:enabled {
background-color: #404040;
}
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025

Choose a reason for hiding this comment

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

This causes none of the other buttons in the IDE to highlight when hovered, would be better to leave this as-was.

Browser_IDE/index.html Outdated
Comment on lines 116 to 263
<button type="button" title="Expand Program" onclick="collapseProgramViewToggle()"><i class="bi bi-terminal"></i></button>
<button type="button" title="Expand Program" onclick="collapseProgramViewToggle()"><i
class="bi bi-terminal"></i></button>
<button id="collapsedRunProgram" type="button" class="run-program" title="Build and Run">
<i class="bi bi-gear-fill"></i>
<i class="bi bi-play-fill"></i>
</button>
<button type="button" id="collapsedRestartProgram" title="Restart" style="display:none"><i class="bi bi-arrow-repeat"></i></button>
<button type="button" id="collapsedContinueProgram" title="Continue" style="display:none"><i class="bi bi-play-fill"></i></button>
<button type="button" id="collapsedStopProgram" title="Pause" style="display:none"><i class="bi bi-pause-fill"></i></button>
<button type="button" id="collapsedRestartProgram" title="Restart" style="display:none"><i
class="bi bi-arrow-repeat"></i></button>
<button type="button" id="collapsedContinueProgram" title="Continue" style="display:none"><i
class="bi bi-play-fill"></i></button>
<button type="button" id="collapsedStopProgram" title="Pause" style="display:none"><i
class="bi bi-pause-fill"></i></button>
Copy link
Contributor

@WhyPenguins WhyPenguins Jan 7, 2025

Choose a reason for hiding this comment

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

Better not to change code that isn't related to the PR - I agree we can improve the formatting, but for now let's leave these parts as-is 😋 Same comments for a few areas above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@WhyPenguins WhyPenguins WhyPenguins requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pradeepkumara @WhyPenguins