Skip to content

Fix: Mobile Responsiveness & Improve Layout Across Devices #345

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

Open
wants to merge 2 commits into
base: versions/3.0
Choose a base branch
from
Open

Fix: Mobile Responsiveness & Improve Layout Across Devices #345

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
da98765
did some changes in the file to improve the responsiveness of the site
ac-mmi Jan 4, 2025
23e5dd7
did some changes in the file to improve the responsiveness of the site
ac-mmi Jan 4, 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
5 changes: 3 additions & 2 deletions docs/guide/overview/what-is-nightwatch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ Nightwatch also can be integrated with cloud-based testing platforms like [Brows
### Supported browsers

WebDriver is implemented by all major browser vendors as a W3C compliant HTTP service.

<table class="table table-bordered table-striped">
<div style="overflow-x:auto">
<table class="table table-bordered table-striped w-100">
<thead>
<tr>
<th style="width: 200px;">Browser Driver</th>
Expand Down Expand Up @@ -84,6 +84,7 @@ WebDriver is implemented by all major browser vendors as a W3C compliant HTTP se

</tbody>
</table>
</div>

[1]: https://nodejs.org/
[2]: https://www.w3.org/TR/webdriver/
Expand Down
2 changes: 1 addition & 1 deletion public/css/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,4 +290,4 @@
width: auto;
}

}
}
4 changes: 2 additions & 2 deletions public/css/sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
}

.bs-sidebar .nav {
display: block;
display: block !important;
}

.doc-sidebar {
Expand All @@ -87,7 +87,7 @@
display: none;
}

@media only screen and (max-width: 767px) {
@media only screen and (max-width: 992px) {
.doc-sidebar {
border: none;
background: #f5f5f5;
Expand Down
15 changes: 11 additions & 4 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1272,16 +1272,16 @@ html {

#doc-sidebar-nav {
max-height: 100vh;
/* overflow-y: scroll; */
overflow-y: scroll;
}

@media only screen and (min-width: 768px) {
@media only screen and (min-width: 992px) {
#doc-sidebar-nav {
display: block !important;
display: block !important; /* Show sidebar as block */
}
}

@media only screen and (max-width: 768px) {
@media only screen and (max-width: 991px) {
#doc-sidebar-nav {
position: fixed;
top: 79px;
Expand All @@ -1291,7 +1291,9 @@ html {
width: 280px;
border-left: 1px solid #E1E6EE;
padding: 30px 15px 10px;
height: 100%;
max-height: calc(100vh - 79px);
overflow-y: auto;
}

#doc-sidebar-nav .nav.bs-sidenav li .btn {
Expand Down Expand Up @@ -3370,3 +3372,8 @@ p.bottom-text {
}

/* Footer section end */

/* added word break for links below full changelog heading*/
.list-group-item p:nth-last-of-type(2) {
word-break: break-word !important;
}
17 changes: 8 additions & 9 deletions src/includes/footer.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!-- Footer section start -->
<footer class="footer-landing" aria-label="Footer">
<div class="footer__wrapper">
<div class="footer__wrapper-inner">
<nav class="footer__wrapper-inner-menu" aria-label="Footer menu">
<div class="footer__wrapper container">
<div class="row justify-content-lg-between">
<nav class="footer__wrapper-inner-menu col-xl-8 pb-4 mb-lg-auto" aria-label="Footer menu">
<ul>
<li>
<span class="footer__wrapper-inner-menu-separator">Features</span>
Expand Down Expand Up @@ -46,8 +46,8 @@
</li>
</ul>
</nav>
<div class="footer__wrapper-inner-social">
<div class="footer__wrapper-inner-social-logo">
<div class="footer__wrapper-inner-social d-flex flex-column justify-content-center align-items-center col-xl-4">
<div class="footer__wrapper-inner-social-logo d-flex justify-content-center align-items-center">
<svg role="img" viewBox="0 0 279 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Nightwatch.js logo</title>
<path
Expand Down Expand Up @@ -149,16 +149,15 @@
fill="black" />
</svg>
</div>
<div class="footer__wrapper-inner-social-subscribe">
<h3 class="footer__wrapper-inner-social-subscribe-title">Subscribe to our newsletter</h3>
<div class="footer__wrapper-inner-social-subscribe d-flex flex-column justify-content-center align-items-center">
<h3 class="footer__wrapper-inner-social-subscribe-title mb-0 pb-1">Subscribe to our newsletter</h3>
<iframe
frameborder="0"
scrolling="no"
title="nightwatch-substack"
src="https://nightwatch.substack.com/embed"
loading="lazy"
height="160px"
style="position: relative;left: -11px;top: -20px;"></iframe>
></iframe>
</div>
<div class="footer__wrapper-inner-social-links">
<a href="https://github.com/nightwatchjs/nightwatch" target="_blank">
Expand Down
61 changes: 44 additions & 17 deletions src/includes/guide-sidebar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ const navItems = [
%>

<div class="clearfix">
<button class="btn btn-link d-md-none collapsed" type="button" data-bs-toggle="collapse"
<button class="btn btn-link d-lg-none collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#doc-sidebar-nav" aria-controls="doc-sidebar-nav" aria-expanded="false"
aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-border-width"
Expand Down Expand Up @@ -315,38 +315,65 @@ const navItems = [
</nav>

<script type="module">
import {onRender, onLeave} from 'postdoc/page';
import {onRender, onLeave} from 'postdoc/page';

onRender((url) => {
// Log the URL and activeLink for debugging
console.log('Current URL:', url.pathname);

onRender((url) => {
const activeLink = document.querySelector(`.nav .btn-toggle-nav a[href$="${url.pathname}"]`);
console.log('Active link:', activeLink); // Log the active link to see if it's found

// Log all collapses
document.querySelectorAll('.nav .collapse.show').forEach(function(collapse) {
collapse.classList.remove('show');
console.log('Collapsing:', collapse); // Log each collapse being closed

collapse.classList.remove('show');

const button = collapse.previousElementSibling;
if (button) {
const button = collapse.previousElementSibling;
if (button) {
button.classList.add('collapsed');
button.setAttribute('aria-expanded', 'false');
}
console.log('Button collapsed:', button); // Log the button being collapsed
}
});


if (activeLink) {
activeLink.classList.add('active');
activeLink.classList.add('active');
console.log('Active link marked as active:', activeLink); // Log when active link is marked

let parentElement = activeLink.parentElement;
while (parentElement) {
console.log('Parent element:', parentElement); // Log each parent element

let parentElement = activeLink.parentElement;
while (parentElement) {
if (parentElement.matches('.collapse')) {
parentElement.classList.add('show');
const parentButton = parentElement.previousElementSibling;
if (parentButton && parentButton.matches('button')) {
parentElement.classList.add('show');
const parentButton = parentElement.previousElementSibling;
if (parentButton && parentButton.matches('button')) {
parentButton.classList.remove('collapsed');
parentButton.setAttribute('aria-expanded', 'true');
}
console.log('Parent button expanded:', parentButton); // Log the parent button being expanded
}
}
parentElement = parentElement.parentElement; // Move up to the next parent element
}
}
}
}, {forPage: /(\/guide\/)/});
}, {forPage: /(\/guide\/)/});


</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log('DOM content loaded'); // This ensures the DOM is fully loaded

const sidebar = document.querySelector('#doc-sidebar-nav');
console.log('Sidebar found:', sidebar); // Logs if sidebar is found

if (sidebar) {
sidebar.classList.remove('show');
console.log('Sidebar hidden'); // Confirm sidebar is hidden
} else {
console.log('Sidebar element not found'); // This will log if the sidebar is not in the DOM
}
});
</script>
31 changes: 31 additions & 0 deletions src/includes/navbar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,3 +190,34 @@
</ul>
</div>
</nav>

<script>
document.getElementById("mobileMenuToggle").addEventListener("click", function() {
var mobileNav = document.querySelector(".mobile-navbar-content");
if (mobileNav.style.display === "none" || mobileNav.style.display === "") {
mobileNav.style.display = "block"; // Show the nav
} else {
mobileNav.style.display = "none"; // Hide the nav
}
});

document.addEventListener('DOMContentLoaded', function() {
// Check if the screen width is 991px or less
if (window.innerWidth <= 991) {
// Select the navbar and doc-sidebar elements
var navbar = document.querySelector('.navigation');
var doc_sidebar = document.querySelector('.doc-sidebar');
var doc_sidebar_nav = document.querySelector('#doc-sidebar-nav');

// Check if both elements exist before accessing their properties
if (navbar && doc_sidebar) {
// Adjust the top position of the doc-sidebar based on the navbar's height
doc_sidebar.style.top = navbar.clientHeight + 'px';
doc_sidebar_nav.style.top = navbar.clientHeight + 'px';
doc_sidebar_nav.style.maxHeight=(window.innerHeight -navbar.clientHeight) + 'px';
doc_sidebar_nav.style.height=(window.innerHeight -navbar.clientHeight) + 'px';
}
}
});

</script>
10 changes: 5 additions & 5 deletions src/pages/guide/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ const data = {
<div class="doc-container full-width top-border background">
<div class="clearfix">
<div class="row flex-xl-nowrap no-gutters">
<div class="col-md-3 col-xl-2 doc-sidebar bs-sidebar hidden-print" role="complementary">
<div class="col-lg-3 col-xl-2 doc-sidebar bs-sidebar hidden-print" role="complementary">
<%- guideSidebar() %>
</div>

<div class="col-md-9 col-xl-8 doc-main-body" role="main">
<div class="docs-section" data-page-uri="<%- page.url %>">
<div class="page-content"><%- pageContent %></div>
<div class="col-lg-9 col-xl-8 doc-main-body" role="main">
<div class="docs-section w-100" data-page-uri="<%- page.url %>">
<div class="page-content w-100"><%- pageContent %></div>
</div>
</div>

Expand All @@ -89,4 +89,4 @@ const data = {
<%- include("footer", data) %>
<%- include("scripts") %>
</body>
</html>
</html>