Bootstrap: breadcrumbs don't include links for parent projects

[bgeuken]

How to Reproduce

1. Go to a subproject, e.g. https://build.opensuse.org/project/show/devel:languages:ruby:extensions
2. Hover over the project link of the breadcrumb

=> In the old UI it contained links for each parent project. In the new UI it only links to the direct ancestor.

I am not saying that this has to be done via the breadcrumbs, but it was nice to have a fast way to get to parent project(s).

[coolo]

I was tempted to file the same issue - and refrained as I would take the opportunity to discuss alternatives to these breadcrumbs once the bootstrap port is done :)

[hennevogel]

We specifically avoided this implementation in the beginning to see if anybody 'needs' them...

[dmarcoux]

I find them useful, but I haven't really thought about other ways to achieve this.

[coolo]

I would make use of the navbar for navigation - but going from staging projects to the main project is daily routine for me.

[hellcp]

From IRC:
yes, not breadcrumbs most likely
something like pill nav might be better
even with some dropdowns in between
and scrollable for mobile view
or even as hidable list in mobile view

Rough drawing of the idea:

[hennevogel]

I think we should say goodbye to navigation through breadcrumbs. The breadcrumbs are to help orient people within the OBS. The can't be the only source of navigation.

I think we need a real menu. We have such a rich data set (watch list, VIP projects, projects the user is involved in, devel projects, special projects like maintenance or staging projects, projects the user has submitted to, whatever else you can cook up) which we can also extend (track project visits and yadda). I'm sure if we put some thought into it, we can come up with a real navigation 🤠

[hennevogel]

One pattern we could use is the "mega menu"

[hennevogel]

[hennevogel]

A.K.A. some real web development 🤣

[hellcp]

@hennevogel I don't really see a way to integrate this with OBS, what would be in such a menu? Realistically yes, the project do have a tree-like structure, but in the case of mega-menus showcased here, the branches are of max depth of 3, first level branches exists only as a label to second level branches. This is a good replacement for project#show view (because project#subprojects is whack and requires too much clicking through datatables), not for breadcrumbs :/

[coolo]

Why not drop tabs at the same time?

[Ana06]

what is the state of this? should we fix the breadcrumb in the meanwhile (while we discuss if we want to redesign this)?

[hellcp]

I would say pill nav in place of breadcrumbs would be a step in right direction instead, adding bells and whistles is secondary, the most important part is to actually have a working navigation between projects and subprojects.

[Ana06]

@openSUSE/open-build-service any opinions?

[hennevogel]

A working navigation between projects and subprojects on project_show_path sounds fine to me. Doesn't ave to be in the breadcrumbs, can be somewhere else.

[hellcp]

Did a small mockup, this time in bootstrap:

<div class="input-group">
	<div class="btn-group mr-3">
		<div class="btn-group">
			<a href="#" class="btn btn-dark">home</a>
			<button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
			<div class="dropdown-menu dropdown-menu-right">
				<div class="dropdown-item"/>
					<input class="form-control" placeholder="Search"/>
				</div>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="#">openSUSE</a>
				<a class="dropdown-item" href="#">Base</a>
			</div>
		</div>
		<a class="btn btn-dark disabled text-white">:</a>
		<div class="btn-group">
			<a href="#" class="btn btn-dark">hellcp</a>
			<button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
			<div class="dropdown-menu dropdown-menu-right">
				<div class="dropdown-item"/>
					<input class="form-control" placeholder="Search"/>
				</div>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="#">User1</a>
				<a class="dropdown-item" href="#">User2</a>
			</div>
		</div>
	</div>
	<div class="btn-group">
		<a href="#" class="btn btn-primary">branding-openSUSE</a>
		<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
		<div class="dropdown-menu dropdown-menu-right">
			<div class="dropdown-item"/>
				<input class="form-control" placeholder="Search"/>
			</div>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Package1</a>
			<a class="dropdown-item" href="#">Package2</a>
		</div>
	</div>
</div>

Indicating current view with primary button seems logical, and works well for both packages and projects, dropdowns would be a great way to switch between packages/projects within the same namespace.

[Conan-Kudo]

The absence of the breadcrumb navigation has turned out to be really painful for me in navigating in the OBS UI. There just isn't a good navigation pattern without it, and I'd rather the old navigation stuff be restored while this is being figured out instead of the current situation where we have nothing.

[vpereira]

The absence of the breadcrumb navigation has turned out to be really painful for me in navigating in the OBS UI. There just isn't a good navigation pattern without it, and I'd rather the old navigation stuff be restored while this is being figured out instead of the current situation where we have nothing.

We have definitely to revisit it again. After some iteration we couldn't find a way to do it in a proper way. The old solution was simply text matching, and in some cases linking to the wrong place, but most of the time leading the user to the right place.

Probably we improved the code base in detriment to usability.