Skip to content

UI improvements #11

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
simosathan9 merged 2 commits into from
Mar 9, 2025
Merged

UI improvements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
372d73c
Improve mobile layout and visibility by adjusting button displays and…
simosathan9 Mar 9, 2025
40c3fef
Minor change
simosathan9 Mar 9, 2025
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
11 changes: 10 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@
// User is authenticated
document.getElementById('logoutButton').style.display =
'inline-block';
document.getElementById('loginButton').style.display = 'none'; // Hide login button
document.getElementById('registerButton').style.display = 'none'; // Hide register button
document
.getElementById('logoutButton')
.addEventListener('click', () => {
Expand All @@ -144,12 +146,19 @@
document.getElementById('helloMessage').style.display = 'flex';
document.getElementById('registerButton').style.display =
'inline-block';
document.getElementById('loginButton').style.display =
'inline-block';
document.getElementById('logoutButton').style.display = 'none';
document
.getElementById('registerButton')
.addEventListener('click', () => {
window.location.href = '/register'; // Redirect to register page
});
document.getElementById('logoutButton').style.display = 'none';
document
.getElementById('loginButton')
.addEventListener('click', () => {
window.location.href = '/login'; // Redirect to the login page
});
}
})
.catch((error) => {
Expand Down
117 changes: 53 additions & 64 deletions public/css/styledark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Prevent overall page scrolling */
overflow: hidden;
}

body {
background-color: #1e1e1e; /* Dark background for the entire page */
background-color: #1e1e1e;
font-family: sans-serif;
display: flex;
flex-direction: column;
color: rgb(208, 208, 208); /* Light text color for contrast */
color: rgb(208, 208, 208);
}

/* Navbar */
Expand All @@ -28,9 +28,9 @@ body {
align-items: center;
height: auto;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Darker shadow for depth */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
flex-wrap: wrap;
background-color: #333; /* Dark background for navbar */
background-color: #333;
}

#helloMessage {
Expand Down Expand Up @@ -233,93 +233,82 @@ body {
}

/* Media Queries for Mobile Devices */
/* Mobile Navbar Adjustments */
@media (max-width: 768px) {
#navbar {
flex-direction: column; /* Stack navbar items vertically */
height: auto;
flex-direction: row; /* Keep row layout */
flex-wrap: nowrap; /* Prevent wrapping */
overflow-x: auto; /* Add horizontal scroll */
padding: 5px;
}

#helloMessage,
#buttonContainer {
width: 100%; /* Full width for stacked layout */
justify-content: center; /* Center items */
margin-bottom: 5px; /* Add spacing between stacked items */
width: auto; /* Allow shrinking */
margin-bottom: 0;
}
}

#blocklyArea {
height: calc(100vh - 180px); /* Adjust height for stacked navbar */
}
/* Blockly Area Height Adjustments */
#blocklyArea {
flex: 1;
width: 100%;
overflow: auto;
position: relative;
background-color: #252526;
}

.icon-button,
.icon-dropdown {
font-size: 12px; /* Smaller font size for mobile */
padding: 4px 6px; /* Adjust padding for smaller screens */
margin: 2px; /* Reduce margin for better spacing */
@media (max-width: 768px) {
#blocklyArea {
height: calc(100vh - 160px); /* Adjusted height calculation */
}
}

/* Tablet Minimap Adjustments */
@media (max-width: 1024px) {
.blockly-minimap {
width: 100px; /* Smaller minimap for mobile */
height: 75px; /* Smaller minimap for mobile */
top: 5px; /* Adjust position for mobile */
left: 5px; /* Adjust position for mobile */
}

#resultsWrapper {
max-height: 150px; /* Reduce height for smaller screens */
padding: 8px; /* Reduce padding for smaller screens */
}

#resultsArea {
padding: 8px 35px 8px 8px; /* Adjust padding for smaller screens */
font-size: 12px; /* Smaller font size for mobile */
width: 120px;
height: 80px;
top: 8px;
left: 8px;
}
}

#copyButton {
right: 8px; /* Adjust position for smaller screens */
padding: 4px; /* Smaller padding for mobile */
/* Mobile Toolbox Adjustments */
@media (max-width: 768px) {
.blocklyToolboxDiv {
width: 40px; /* Match light theme's mobile toolbox width */
}
}

@media (max-width: 480px) {
#blocklyArea {
height: calc(
100vh - 200px
); /* Further adjust height for very small screens */
.blocklyToolboxDiv {
width: 35px; /* Match light theme's very small screen adjustment */
}
}

/* Button and Dropdown Mobile Sizing */
@media (max-width: 768px) {
.icon-button,
.icon-dropdown {
font-size: 10px; /* Even smaller font size for very small screens */
padding: 3px 5px; /* Adjust padding for very small screens */
}

.blockly-minimap {
display: none; /* Hide minimap on very small screens */
}

#resultsWrapper {
max-height: 120px; /* Further reduce height for very small screens */
padding: 6px; /* Further reduce padding for very small screens */
}

#resultsArea {
padding: 6px 30px 6px 6px; /* Further adjust padding for very small screens */
font-size: 11px; /* Even smaller font size for very small screens */
font-size: 12px;
padding: 4px 6px;
margin: 2px;
}

#copyButton {
right: 6px; /* Further adjust position for very small screens */
padding: 3px; /* Even smaller padding for very small screens */
.icon-button i {
font-size: 14px; /* Match light theme's mobile icon size */
}
}

#toggleResultsButton {
display: none; /* Hide by default */
}
@media (max-width: 480px) {
.icon-button,
.icon-dropdown {
font-size: 10px;
padding: 3px 5px;
}

@media (max-width: 768px) {
#toggleResultsButton {
display: inline-block; /* Show on mobile */
.icon-button i {
font-size: 12px;
}
}
122 changes: 81 additions & 41 deletions public/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,12 +166,93 @@ body {
top: 5px; /* Adjust position for mobile */
left: 5px; /* Adjust position for mobile */
}

/* Navbar adjustments for mobile */
#navbar {
flex-direction: row; /* Keep buttons in a single line */
height: auto;
padding: 5px;
flex-wrap: nowrap; /* Prevent wrapping */
overflow-x: auto; /* Enable horizontal scrolling if needed */
}

#helloMessage,
#buttonContainer {
width: auto; /* Allow buttons to shrink */
justify-content: flex-start; /* Align buttons to the left */
margin-bottom: 0; /* Remove margin */
}

/* Button adjustments for mobile */
.icon-button,
.icon-dropdown {
font-size: 12px; /* Smaller font size */
padding: 4px 6px; /* Smaller padding */
margin: 2px; /* Smaller margin */
white-space: nowrap; /* Prevent text wrapping */
}

/* Adjust icon size for mobile */
.icon-button i {
font-size: 14px; /* Smaller icon size */
}

/* Toolbox adjustments for mobile */
.blocklyToolboxDiv {
width: 40px; /* Smaller toolbox width */
}

.blocklyTreeRow {
padding: 2px; /* Smaller padding for toolbox items */
margin-bottom: 0.3em; /* Smaller margin */
}

.blocklyTreeLabel {
display: none; /* Hide labels on mobile */
}

.blocklyTreeRow::after {
content: attr(data-tooltip); /* Show tooltip on hover */
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}

.blocklyTreeRow:hover::after {
visibility: visible;
opacity: 1;
}
}

/* Media Queries for Very Small Screens */
@media (max-width: 480px) {
.blockly-minimap {
display: none; /* Hide minimap on very small screens */
}

/* Further reduce button size for very small screens */
.icon-button,
.icon-dropdown {
font-size: 10px; /* Even smaller font size */
padding: 3px 5px; /* Even smaller padding */
}

/* Adjust icon size for very small screens */
.icon-button i {
font-size: 12px; /* Even smaller icon size */
}

/* Further reduce toolbox width for very small screens */
.blocklyToolboxDiv {
width: 35px; /* Even smaller toolbox width */
}
}

/* Button Hover States */
Expand Down Expand Up @@ -248,47 +329,6 @@ body {
}
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
#navbar {
flex-direction: column;
height: auto;
padding: 5px;
}

#helloMessage,
#buttonContainer {
width: 100%;
justify-content: center;
margin-bottom: 5px;
}

#blocklyArea {
height: calc(100vh - 180px); /* Adjust height for stacked navbar */
}

.icon-button,
.icon-dropdown {
font-size: 12px;
padding: 4px 6px;
margin: 2px;
}
}

@media (max-width: 480px) {
#blocklyArea {
height: calc(
100vh - 200px
); /* Further adjust height for very small screens */
}

.icon-button,
.icon-dropdown {
font-size: 10px;
padding: 3px 5px;
}
}

#toggleResultsButton {
display: none; /* Hide by default */
}
Expand Down
2 changes: 1 addition & 1 deletion views/homePage.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
// Check screen size on load
function checkScreenSize() {
if (window.innerWidth <= 768) {
loadStylesheet("/css/mobile.css");
loadStylesheet("/css/mobileHomePage.css");

// Show the mobile alert if user is on a mobile device and has not dismissed the alert
if (!sessionStorage.getItem("mobileAlertDismissed")) {
Expand Down