Breadcrumbs interaction with extension

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Suggested Hosts
User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin » Sat Mar 28, 2015 1:40 pm

Arty wrote:And that screenshot is correct. Breadcrumbs behave that way on small devices, its not a JavaScript issue. That behavior is set in CSS.
And then, why do you get that screenshot above when you are resizing the window (narrowing), and when you reload the page once in this situation, breadcrumbs behave perfectly ok? Same window size...

There is a JS issue for sure...

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty » Sat Mar 28, 2015 2:41 pm

Found it. That's a different bug.

Possible fix: few lines below code that you've edited in forum_fn.js find this

Code: Select all

		// Function that checks breadcrumbs
		function check() {
			var height = $this.height(),
				width = $body.width();
replace with

Code: Select all

		function check() {
			var height = $this.height(),
				width;

			// Test max-width set in code for .navlinks above
			width = parseInt($this.css('max-width'));
			if (!width) {
 				width = $body.width();
			}
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin » Sat Mar 28, 2015 5:20 pm

Great, thanks, that's it!

Now, this hopefully completes the core fixes. Now, I would like to ask for advise on how to do things properly for extension authors in this context.

What I would like to achieve in the extension(s) is the following:
1) when there is no more space left in the nav-breadcrumbs ul, I would like to change the navbar search by a single icon - this is now happening when the responsive header kicks in, but I would like to have this even before - this is similar to the behaviour of the nav-main ul, that hides the labels when there is not enough space for them (I think this is the "compact" CSS class, but I see no CSS properties for it...)
2) similarly, if the above is done and still there is not enough space, I would like to narrow the g-search-box input element to smaller width, also similar to what is now happening on responsive browser widths

Would you please EXPLAIN how this can and should be done for extension authors? That is, how to identify when the space is exhausted in some div, and how to code for narrower alternatives. Personally, I would like to learn how this should be done, so that I can properly code these type of things in the future...

Thanks a lot for all your help!
-javiexin

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Breadcrumbs interaction with extension

Post by Arty » Sat Mar 28, 2015 6:07 pm

Add onresize event to check for breadcrumbs width and max-width. If breadcrumbs has class "wrapped" or breadcrumb's (max-width - width) < 10, add class to your item that causes it to become smaller. If your item already has that class, add another class that causes your item to become small icon.

You can find sample JavaScript in forum_fn.js code for breadcrumbs.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
javiexin
Code Contributor
Posts: 1157
Joined: Wed Oct 12, 2011 11:46 pm
Location: Madrid, Spain
Name: Javier
Contact:

Re: Breadcrumbs interaction with extension

Post by javiexin » Sat Mar 28, 2015 6:16 pm

Thanks a lot, I'll give it a try

Locked

Return to “[3.1.x] Styles Support & Discussion”