Jumpbox Reposition and Redesign

[profKroy]

I've been doing a bit of detective work and I'm looking for any insight with regard to the jumpbox functionality. The jumpbox is currently positioned at the bottom of the page, viewtopic_body.html. I see the "include," and I have traced it back to the function:

Code: Select all

make_jumpbox(append_sid("{$phpbb_root_path}viewforum.$phpEx"), $forum_id); 

..on viewtopic.php.

What would work for my board, and my students, is if I could just take the jumpbox, without the corresponding "< Return to..." link that is left-aligned, and place the jumpbox in the row that also contains the "Post Reply" button. So it would look something like:

I could abandon the "< Return to..." link, as it seems unnecessary, in favor of just being able to place "<!-- INCLUDE jumpbox.html -->" where I'd like it to be. Currently, the "include" spans the width of the page, causing layout issues.

Is there something I can look into further, in terms of an easy modification, that would get me a little closer to having a little more flexibility with the jumpbox? Insight always appreciated.

[Mannix_]

Copy the code responsible for the jumpbox dropdown from jumpbox.html file and place it after those buttons in viewforum_body.html. Then wrap that code in jumpbox.html in something like this

Code: Select all

{% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}

so it doesn't show up at the bottom.

[profKroy]

Copy the code responsible for the jumpbox dropdown from jumpbox.html file and place it after those buttons in viewforum_body.html. Then wrap that code in jumpbox.html in something like this

Code: Select all

{% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}

so it doesn't show up at the bottom.

Thanks for that. I'm 99% there. I had initially overlooked the jumpbox.html as it wasn't in the template directory of the style I'm using. It was being referenced from the prosilver style.

Question though. I'm trying to position the dropdown relative to the "Jump to" button (now positioned in the menu as illustrated above), so that when I expand and contract the browser window the menu will stay positioned under the button. The challenge for me seems to be that other drop down menus in the layout are being styles by the same css in common.css.

I wouldn't even mind, if it's an easy solution, if the drop down for "Jump to" was simply positioned prominently in the center of the screen, almost like a modal.

Is there a CSS declaration and/or DIV that I can key in on to make either solution happen? As always, insight appreciated. Thank you.

[Mannix_]

You can add your own class and use it for styling.

[eeji]

I have moved the jumpbox in my "Stasis Leak" style into the right hand side of the breadcrumbs. You can get a demo and download it here if you would like to see how I did it: http://phpbbstyles.oo.gd/demo.php?style=35

[profKroy]

The following is just a document of my process and the solutions that worked for me for a style I use called Milk. This is mainly a document, as inevitably I'll have to do it again at some point as style/phpbb updates overwrite these changes.

The modified files:
...in styles/myInstalledStyle/template/
common.css
view_topic.html
viewforum_body.html

...in styles/prosilver/template/
jumpbox.html, unmodified but used to generate
a new file I created called, jumpboxREVISED.html

From jumpboxREVISED.html, I removed several of the if/else statements (that are in jumpbox.html) and omitted the link that normally accompanies the dropdown menu, positioned at the bottom of view_topic.html and viewforum_body.html. I also contained the markup/code in a new <div> so I could control the positioning of the jumpbox button and the dropdown menu (dropdown-container) together. In this file I also modified this line:

Code: Select all

<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">

to...

Code: Select all

<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-down<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">

Because the jumpbox menu was initially styled to be positioned above the "Jump to" button when it opens, this line needed to be changed, changing "dropdown-up" to "dropdown-down." This is what I ended up with.

Code: Select all

/* Added "newMenu" div. The declaration for it is located in common.css  */
<div class="newMenu">
	<!-- IF S_DISPLAY_JUMPBOX -->
	<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-down<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
			<span title="<!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF -->" class="button button-secondary dropdown-trigger dropdown-select">
				<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
				<span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span>
			</span>
		<div class="dropdown">
			<div class="pointer"><div class="pointer-inner"></div></div>
			<ul class="dropdown-contents">
				<!-- BEGIN jumpbox_forums -->
				<!-- IF jumpbox_forums.FORUM_ID neq -1 -->
				<li><a href="{jumpbox_forums.LINK}" class="<!-- IF jumpbox_forums.level -->jumpbox-sub-link<!-- ELSEIF jumpbox_forums.S_IS_CAT -->jumpbox-cat-link<!-- ELSE -->jumpbox-forum-link<!-- ENDIF -->"><!-- BEGIN level --><span class="spacer"></span><!-- END level --> <span><!-- IF jumpbox_forums.level --><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->&#8626;<!-- ELSE -->&#8627;<!-- ENDIF --> &nbsp;<!-- ENDIF --> {jumpbox_forums.FORUM_NAME}</span></a></li>
				<!-- ENDIF -->
				<!-- END jumpbox_forums -->
			</ul>
		</div>
	</div>

	<!-- ELSE -->
	<br /><br />
	<!-- ENDIF -->
</div>

I added the new include to view_topic.html and viewforum_body.html, here:

view_topic.html

Code: Select all

	
	<!-- IF (S_NUM_POSTS > 1 or .pagination) and not S_IS_BOT  -->
		<form method="post" action="{S_TOPIC_ACTION}">
		<!-- INCLUDE display_options.html -->
		</form>
	<!-- ENDIF -->
	<!-- INCLUDE jumpboxREVISED.html -->

viewforum_body.html
NOTE: For viewforum_body.html I added the include following the <div class="search-box"></div>.

Code: Select all

	
	<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
				<button class="button button-search" type="submit" title="{L_SEARCH}">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</button>
				<a href="{{ U_SEARCH_FORUM }}" class="button button-search-end" title="{L_SEARCH_ADV}">
					<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
				</a>
				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->
	<!-- INCLUDE jumpboxREVISED.html -->
	

On common.css, in the Milk style folder "theme," I added the following declaration:

Code: Select all

.newMenu {
	display:relative;
	float:left;
	vertical-align: top;
}

With this solution, I'm not 100% that the code referenced in a prior post, i.e. {% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}, is absolutely necessary given the include is not referencing jumpbox.html but I may be overlooking its specific purpose.


The final result:

Thank you for the hints and help!

[Mannix_]

With this solution, I'm not 100% that the code referenced in a prior post, i.e. {% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}, is absolutely necessary given the include is not referencing jumpbox.html but I may be overlooking its specific purpose.

No you don't need that anymore since you decided to create new file with the jumpbox. I see you went the longer way but I'm glad it worked out

[profKroy]

With this solution, I'm not 100% that the code referenced in a prior post, i.e. {% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}, is absolutely necessary given the include is not referencing jumpbox.html but I may be overlooking its specific purpose.

No you don't need that anymore since you decided to create new file with the jumpbox. I see you went the longer way but I'm glad it worked out

Thanks for the feedback and pointing me in the right direction. If you don't mind me asking, where could I have simplified or gone down a shorter path to get the same result?

EDIT: I probably misunderstood what you were saying. Yes, I added that extra step which took a little longer to complete. It seemed like creating a new file would give me a little more flexibility. Thanks again for your help.

[Mannix_]

I got the same result by changing

Code: Select all

<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">

into

Code: Select all

<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control {% if S_VIEWTOPIC or S_VIEWFORUM %}dropdown-topics dropdown-down{% endif %}" id="jumpbox">

and adding this css

Code: Select all

.dropdown-topics {
    float: left;
    margin: 0;
}
}

There is one issue tho. When the button is pushed to the next line on smaller screens the dropdown becomes tiny. You have the same issue

[profKroy]

Ahh, that makes since, I think. A little more efficient. So, I need to better understand....TWIG?

[Mannix_]

Ahh, that makes since, I think. A little more efficient. So, I need to better understand....TWIG?

I used twig yes but you could also use phpbb template syntax and do something like this <!-- IF S_VIEWTOPIC or S_VIEWFORUM --> dropdown-topics dropdown-down <!-- ENDIF -->

[profKroy]

Yes, interesting. I think if I had better knowledge of the TWIG relationships and references, it would enhance my ability to find more elegant solutions and make mods. A beginner level blueprint to better frame the available documentation would be extremely helpful.