Skip to content
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.

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

Clickable items in navigation without drop-down #182

Closed
quimgil opened this issue Sep 7, 2014 · 9 comments

Comments

Projects
None yet
5 participants
@quimgil
Copy link

commented Sep 7, 2014

The drop-down items in the navigation bar are great, but is there a way to have plain clickable items, with no dropdowns, defined in MediaWiki:Sidebar or elsewhere? In the documentation I couldn't find any reference to this seemingly basic use case.

@Hutchy68

This comment has been minimized.

Copy link
Collaborator

commented Sep 7, 2014

is there a way to have plain clickable items, with no dropdowns, defined in MediaWiki:Sidebar or elsewhere?

Unfortunately - no.

The navbar is defined by MediaWiki:Sidebar and the headings on any wiki are not clickable in the sidebar on any skin. *edit-At least that I am aware of :) * Vector uses a js rewrite trick (fragile and sometimes CSS quirky) to hide the first top-level heading of the sidebar. Think that's with a display:none, which in Foreground will eliminate the top-level heading, but everything under it.

@quimgil

This comment has been minimized.

Copy link
Author

commented Sep 7, 2014

Fair enough. I have modified my MediaWiki:Sidebar instead.

@quimgil quimgil closed this Sep 7, 2014

@adrelanos

This comment has been minimized.

Copy link

commented Jul 3, 2018

The navbar is defined by MediaWiki:Sidebar and the headings on any wiki are not clickable in the sidebar on any skin. *edit-At least that I am aware of :)

Mediawiki skin strapping can have clickable sidebar links.

Example wiki? We are using strapping currently but moving to foreground soon. Therefore I am sharing a link with you from archive.org where you can see it:
https://web.archive.org/web/20180430153424/https://www.whonix.org/wiki/Documentation

Does that give any hint on how to implement this feature?

@gagarine

This comment has been minimized.

Copy link

commented Aug 1, 2018

Can we reopen this issue?

This is how they do it https://github.com/OSAS/strapping-mediawiki/blob/master/Strapping.skin.php#L425

They use a custom render function for navigation.

@Hutchy68

This comment has been minimized.

Copy link
Collaborator

commented Aug 1, 2018

Some of the bootstraps use a little trick with a single blank heading and then span out all the links under it. The proper thing to do is to go after the developers or submit your own patch to MW core to fix the issue or improve href=“#” headings.

@gagarine

This comment has been minimized.

Copy link

commented Aug 2, 2018

I don't think we should make the header clickable. I think we should render the menu without the header, it's what do the bootstrap theme. We can create an option $sideBarDropdown for that.

Then in the template we can render all menus in flat. I think it will fix most use case.

I'm talking about this piece of code:

	<ul id="top-bar-left" class="left">
	<li class="divider show-for-small"></li>
		<?php foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != wfMessage( 'toolbox' )->
text())  ) { ?>
	<li class="has-dropdown active"  id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip(
 $box['id'] ) ?>>
		<a href="#"><?php echo htmlspecialchars( $box['header'] ); ?></a>
			<?php if ( is_array( $box['content'] ) ) { ?>
				<ul class="dropdown">
					<?php foreach ( $box['content'] as $key => $item ) { echo $this->makeListItem( $key, $item ); } 
?>
				</ul>
					<?php } } ?>
			<?php } ?>
</ul>
@gagarine

This comment has been minimized.

Copy link

commented Aug 2, 2018

In fact, because skin extend BaseTemplate it's possible to do whatever needed.

class FooBarTemplate extends BaseTemplate {

I think this skin have very good UX idea, but perhaps it's easier to start it from scratch on bootstrap 4.

@Hutchy68

This comment has been minimized.

Copy link
Collaborator

commented Aug 2, 2018

The skin is based on foundation 5 and if anything the next iteration will be based on foundation 6.

@Hutchy68

This comment has been minimized.

Copy link
Collaborator

commented Nov 5, 2018

As per https://phabricator.whonix.org/T809 a client with no js will be able to click the top link of a dropdown and the dropdown will appear. However, the links in the dropdown are not clickable.

Suggestions of rendering all links in the top as bootstrap does with their custom override of links held in one MediaWiki:Sidebar column.

* Naviagtion
** Link 1 ....
** Link 2 ....
** Link 3 ....
** etc.....

The above might solve main navigation and limit the number of items in top bar for navigation. What it doesn't address is the dropdown of the toolbox (gear icon) and user (user icon). Those are still broken and hobble the website when the user doesn't have JS turned on. This is a know limitation of Zurb Foundation Framework because of the navbar js and css construction.

TL;DR

So what is causing this? JS not only allows the hover over to drop the dropdown, as far as I can tell it brings the dropdown element into "focus" which then allows the <a> elements in the dropdown to become clickable.

So how to fix it?

  • Total rewrite and do not use the navbar classes and js, but this would break mobile
  • Hidden secondary totally CSS dependent drop menu (I've already accomplished this for the menu actions button)
  • Other suggestions welcome as there is no CSS able to bring a classed or id'd item into focus like a textbox/textarea could be.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.