WonderCMS 3.5.0 released

[NorfolkGreg]

Thanks for all the effort you're putting into this.

Maybe there is something I've done to the GregChapman site that is upsetting things.

I'll do a fresh install of Wcms add the GregCustom theme, then your mod to the theme and see what I get and if it's different to what you see and report.

[NorfolkGreg]

Hi Wiz,

Here's my "real world" play with a fresh install displayed on my phone:
https://streamable.com/gjsko4

It has the same issues I found when installing your latest revised theme.php file on my GregChapman site.

Here's what I had written earlier about the symptoms, but before I saw your latest post and video.
---------------------------------------------------
Apart from the expected default button styling I get the largely same result as with the default 3.5.0 code in both portrait and landscape orientation. Tapping on the GAMES option takes you straight to the Games page. The dropdown does open but the link behind the button takes priority and changes page before you can tap on the sub-page options.

To overcome the immediate change of page you have to tap and hold the GAMES button but then you still have the context menu to clear before you can select either the TABLE or BOARD options.

Things are worse in portrait mode as the menu does not close when a new page is displayed and it has to be closed manually by clicking on the "hamburger" button. I think that means the W3Schools JavaScript that sets a flag to indicate a new page is being shown is being by-passed in some way.

On my desktop computer when the window is wider then things work just as I would expect, but in a narrow window (portrait mode) the menu still fails to close on reaching a new page.

[wiz]

Hi Greg.

I understand your issue and that it seems the same, however to me it seems like either a caching issue or something missing in your files.
It's either that or browser specific stuff. Please answer number 2 below.


1. Would you please send me your test web page URL, so I can check if there's anything. You can send it to: hi@wondercms.com and I can take a closer look. Since the exact same scenario works on my side.

2. Did you try this also in private mode or in another browser - to confirm they are not caching issues?

[NorfolkGreg]

URL sent.

Never used private mode in any browser.

On my Moto phone I see the same effect in both the Chrome browser and Samsung's "Internet" browser, which Ivinstalled

Same again on Chrome on my Chromebook, when using it's touch screen. I have Linux installed on that and find the Gnome browser "Web" also exhibits the same behaviour.

[wiz]

Let's try this approach again. In the URL you sent I see the theme did not produce buttons since it probably did not have the correct theme.php.
There is a possibility you maybe sent me the wrong URL.

1. Replace your whole theme.php content with this. This solution does not have JS as mentioned.

Code: Select all

<?php
// Define the helper function outside of the listener to avoid redeclaration
function hasVisibleSubpages($item) {
    foreach ($item->subpages as $subpage) {
        if ($subpage->visibility === 'show') {
            return true;
        }
    }
    return false;
}

global $Wcms;
$Wcms->addListener('renderPageNavMenuItem', function ($args) use ($Wcms) {
    // Ensure we have the required arguments
    list($output, $item, $parentSlug, $visibleSubpage) = array_pad($args, 4, null);

    // Check if this item has visible subpages
    $hasVisibleSubpages = hasVisibleSubpages($item);

    // If the item has subpages, create a button for the parent item (still a link)
    $navTag = $hasVisibleSubpages
        ? '<a class="nav-link" href="' . $Wcms->url($parentSlug) . '"><button class="nav-link-button">' . $item->name . '</button></a>'
        : '<a class="nav-link" href="' . $Wcms->url($parentSlug) . '">' . $item->name . '</a>';

    // Create the main list item
    $output = '<li class="nav-item ' . ($Wcms->currentPage === $item->slug ? 'active ' : '') . ($hasVisibleSubpages ? 'subpage-nav' : '') . '">'
            . $navTag;

    // Render subpages only if there are visible ones
    if ($hasVisibleSubpages) {
        $output .= '<ul class="subPageDropdown">';
        foreach ($item->subpages as $subpage) {
            if ($subpage->visibility === 'hide') {
                continue;
            }

            // If the subpage has its own visible subpages, treat it as a button
            $subpageHasVisibleSubpages = hasVisibleSubpages($subpage);

            // If the subpage has visible subpages, make it a button
            $subpageSlug = $parentSlug . '/' . $subpage->slug;
            $subpageTag = $subpageHasVisibleSubpages
                ? '<a class="nav-link" href="' . $Wcms->url($subpageSlug) . '"><button class="nav-link-button">' . $subpage->name . '</button></a>'
                : '<a class="nav-link" href="' . $Wcms->url($subpageSlug) . '">' . $subpage->name . '</a>';

            $output .= '<li class="nav-item ' . ($subpageHasVisibleSubpages ? 'subpage-nav' : '') . '">'
                     . $subpageTag
                     . '</li>';

            // If the subpage has its own visible subpages, render them
            if ($subpageHasVisibleSubpages) {
                $output .= '<ul class="subPageDropdown">';
                foreach ($subpage->subpages as $subsubpage) {
                    if ($subsubpage->visibility === 'hide') {
                        continue;
                    }
                    $subsubpageSlug = $subpageSlug . '/' . $subsubpage->slug;
                    $output .= '<li class="nav-item">'
                             . '<a class="nav-link" href="' . $Wcms->url($subsubpageSlug) . '">' . $subsubpage->name . '</a>'
                             . '</li>';
                }
                $output .= '</ul>';
            }
        }
        $output .= '</ul>';
    }

    $output .= '</li>';
    
    return [$output];
});
?>

<!DOCTYPE html>
<html lang="<?= $Wcms->getSiteLanguage() ?>">
<head>
	<!-- Encoding, browser compatibility, viewport -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<!-- Search Engine Optimization (SEO) -->
	<meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" >
	<meta name="description" content="<?= $Wcms->page('description') ?>">
	<meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
	<meta property="og:url" content="<?= $this->url() ?>" >
	<meta property="og:type" content="website" >
	<meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" >
	<link href="https://fonts.googleapis.com/css?family=Boogaloo|McLaren" rel="stylesheet">
	<meta property="og:title" content="<?= $Wcms->page('title') ?>" >

	<!-- Website and page title -->
	<title>
		<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>
	</title>

	<!-- Admin CSS -->
	<?= $Wcms->css() ?>
	<!-- Theme CSS -->
	<link rel="stylesheet" rel="preload" as="style" href="<?= $Wcms->asset('css/style.css') ?>">
</head>

<body>
	<div id="wrapper">

	<!-- Admin settings panel and alerts -->
	<?= $Wcms->settings() ?>
	<?= $Wcms->alerts() ?>

	<header>
		<h1>
			<em><?= $Wcms->get('config', 'siteTitle') ?></em><br>
			<?= $Wcms->page('title') ?>
		</h1>
		<h2><?= $Wcms->page('description') ?></h2>
	</header>

	<section id="topMenu">
		<div class="inner">
			<!-- Hamburger icon -->
			<input id="menuControl" type="checkbox">
			<label for="menuControl"></label>
			<nav>
				<ul class="menu">
					<!-- Menu -->
					<?= $Wcms->menu() ?>
				</ul>
			</nav>
		</div>
	</section>

	<section class="main">
		<?= $Wcms->page('content') ?>
	</section>

	<footer>
		<?= $Wcms->footer() ?>
	</footer>
	</div>

	<!-- Admin JavaScript. More JS libraries can be added below -->
	<?= $Wcms->js() ?>
	<script>
		function check() {
		document.getElementById("menuControl").checked = true;
		}
	</script>

</body>
</html>

2. In your style.css, paste this at the bottom of the file:

Code: Select all

/* Style buttons in the menu to match navigation items */
nav .nav-item button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--menutext);
    font-size: 1em;
    padding: 0;
}

And let's re-check I tested this on a few web browsers and mobile browsers.

[NorfolkGreg]

I responded by email last night but for further clarification it is only on mobile browsers that I see the problem and it would appear to be related to the issue identified here:
https://www.google.co.uk/search?q=does% ... uch+screen

As I mentioned earlier, before encountering Wcms I would turn to:
https://www.cssplay.co.uk/menus/
where this are a host of examples of CSS-only menu systems that work on touch screens. It's just that the code Wcms generates by default for site navigation relies on hover on links and that doesn't work well, if at all, on touch screens.