[DEV] Button menu

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Anti-Spam Guide
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
Theriddler1
Registered User
Posts: 449
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [DEV] Button menu

Post by Theriddler1 »

A user here asked for the changed menu based on this menu that i use

Here it is with a hamburger menu for tablet and foon

download
Theriddler - Former Moderator @ phpBB.nl | phpBBservice.nl Team-member
Image My Extensions | buy me a beer Image
User avatar
dmzx
Registered User
Posts: 829
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx »

Theriddler1 wrote:
Sun Sep 24, 2017 6:45 am
A user here asked for the changed menu based on this menu that i use

Here it is with a hamburger menu for tablet and foon

download
:?:
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com
fabiomaticus
Registered User
Posts: 134
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus »

When RC?
User avatar
dmzx
Registered User
Posts: 829
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx »

fabiomaticus wrote:
Wed Oct 18, 2017 8:10 am
When RC?
When more time available ;)
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com
fabiomaticus
Registered User
Posts: 134
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus »

it's Great but is not mobile responsive.
fabiomaticus
Registered User
Posts: 134
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus »

IHi don't fuction move button in ACP
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots »

This still works perfectly on 3.2.8, as far as basic functionality goes.

Only real drawbacks are a/ it doesn't fit that well with a range of styles and b/ not responsive.

I'm thinking I'll hack my copy to make it suit what I want. Ditch the colour variables and spans, and do all the styling with CSS additions to a handy sheet in each style. Probably also throw in a conversion to hamburger at <1024px wide, with a flexible height wrapper over that width (just in case it still wants to break to two lines). And some basic finishing touches like transitions on the drops, etc.

This can all be done with CSS. The javascript can go. That was only necessary for drops back in IE6 days.
User avatar
dmzx
Registered User
Posts: 829
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx »

Gumboots wrote:
Sun Oct 13, 2019 12:49 am
This still works perfectly on 3.2.8, as far as basic functionality goes.

Only real drawbacks are a/ it doesn't fit that well with a range of styles and b/ not responsive.

I'm thinking I'll hack my copy to make it suit what I want. Ditch the colour variables and spans, and do all the styling with CSS additions to a handy sheet in each style. Probably also throw in a conversion to hamburger at <1024px wide, with a flexible height wrapper over that width (just in case it still wants to break to two lines). And some basic finishing touches like transitions on the drops, etc.

This can all be done with CSS. The javascript can go. That was only necessary for drops back in IE6 days.
If you have your code you can share or pm so we can take a look to add it. Or pull request on github.
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots »

Haven't done any code yet, but you'll be welcome to take a look once I get around to it. It may not suit everyone though. It's generally pretty easy to write code for your own purposes. It's rather more complicated when you're trying write an extension to cover all bases, with every possible combination of style and newbie administrator. You'll invariably have to compromise on the presentation to some extent.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots »

Played around with it. This is still a bit rough and ready, as I was just winging it in a hurry, but should give the general idea. I styled it up for Aero, just because we have Aero running anyway, but the same basic structure should work with anything else. We obviously have Prosilver too, although personally I don't like it much, so I'll sort out something for that too.

Learned something while doing this. The way phpBB handles this sort of customisation is cleverer than I expected. Ends up being a bit bloated in terms of number of files floating around, but is versatile and pretty much idiot-proof nonetheless. But, for your purposes you wouldn't be able to cater for a large range of styles to this degree. It'd end up bloating your extension beyond all reason, as I'm sure you're aware.

The good news is that the basics can be done in a more flexible manner than they currently are, and then if anyone wants to get persnickety about detailing for their favourite style it's just a simple "drop in some extra folders and tweak some CSS".

For this WIP I emptied overall_header_stylesheets_after. I hacked overall_header_navbar_before to this:

Code: Select all

<!-- IF .buttons -->
<div id="menu">
	<input type="checkbox" id="button_menu_checkbox" class="toggle_check" />
	<div class="inner">
		<label for="button_menu_checkbox" class="hamburger">Menu toggle</label>
		<ul>
		<!-- BEGIN buttons -->
			<li>
				<a href="{buttons.URL}"<!-- IF buttons.EXTERNAL --> target="_blank" rel="noopener"<!-- ENDIF -->>{buttons.NAME}</a>
				<!-- IF .buttons.sub -->
				<ul>
					<!-- BEGIN sub --><li><a href="{sub.URL}"<!-- IF sub.EXTERNAL --> target="_blank" rel="noopener"<!-- ENDIF -->>{sub.NAME}</a></li><!-- END sub -->
				</ul>
				<!-- ENDIF -->
			</li>
		<!-- END buttons -->
		</ul>
		<!-- IF S_DISPLAY_SEARCH and S_MENU_SEARCH -->
		<div id="top-search" style="<!-- IF S_MENU_ALIGN == 'right' -->float: left;<!-- ELSE -->float: right;<!-- ENDIF -->">
			<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="menu_search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
			</form>
		</div>
		<!-- ENDIF -->
	</div>
</div>
<!-- ENDIF -->
And buttonmenu.css is currently this:

Code: Select all

#menu {
	position: relative;
	margin: 1em 0;
	padding: 5px;
	background: none;
	border-radius: 7px;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	box-shadow: 1px 1px 8px #555;
}

#menu .inner {
/*	padding: 5px 9px 9px;*/
/*	color: #fff;*/
	font-size: 1.4em;
	line-height: 2em;
/*	background: #d9eaf1;*/
/*	border: 1px solid #566877;*/

	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	background: #0b0b0e url(images/header_black.png) 100% 0 no-repeat;
} 

#menu #top-search {
	position: absolute;
	top: 6px;
	right: 6px;
}

#menu .menu_search {
	width: 115px;
	padding: 4px 8px;
	background: #0008;
	color: #fff;
	font-size: 1em;
	line-height: 2em;
	border: 1px solid;
	border-width: 0 0 0 1px;
	border-color: #fff8;
}

#menu>.inner>ul {
	list-style: none;
	margin: 0 134px 0 0;
	padding: 0 4px;
}

#menu>.inner>ul>li {
	display: inline-block;
	position: relative;
	padding: 4px 0;
}

#menu a {
	display: block;
	padding: 0 8px;
	color: #fff;
	text-shadow: 0 0 1px #000;
	white-space: nowrap;
}
#menu>.inner>ul>li>a {
	border: 1px solid #0000;
	border-radius: 4px;
}
#menu>.inner>ul>li:hover>a, #menu>.inner>ul>li>a:hover {
	background: #0b0b0e url(images/header_black.png) 100% 50% no-repeat;
	border-color: #999;
}

#menu ul ul {
	position: absolute;
	top: 100%;
	left: -120vw;
	z-index: 4;
	background: #21212a;
	padding: 4px 0 8px;
	list-style: none;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	border: 3px solid;
	border-color: #aaa;
	border-radius: 0 8px;
	box-shadow: 1px 2px 3px #000a;
	opacity: .7;
	transition: all .1ms step-end .3s, opacity .3s linear;
}

#menu li:hover ul {
	left: 0;
	opacity: 1;
	transition: left .1ms step-end .1s;
}

#menu ul ul li {
	min-width: 150px;
	margin: 4px 0;
}

#menu ul ul li a {
	border: solid #0000;
	border-width: 2px 0;
	text-shadow: 0 0 1px #000;
}

#menu ul ul li a:hover {
	background: #0b0b0e url(images/header_black.png) 50% 50% no-repeat;
	border-color: #999;
}

/* Tricky stuff. */
.toggle_check, .hamburger {
	display: none;
}

/* 896px at standard browser settings. */
@media screen and (max-width: 56em) {
	.toggle_check {
		display: block;
		position: absolute;
		left: -50vw;
	}
	.hamburger {
		display: block;
		width: 36px;
		height: 6px;
		margin: 8px 4px;
		padding: 4px 0;
		overflow: hidden;
		white-space: nowrap;
		border: solid #ccc;
		border-width: 5px 0;
		border-radius: 2px;
	}
	.hamburger::before {
		display: block;
		content: "";
		border-top: 6px solid #ccc;
	}
	#menu>.inner>ul {
		display: none;
	margin: 0;
	}
	#menu>.inner>ul>li {
		display: block;
		max-width: 280px;
	}
	#menu>.toggle_check:checked + .inner>ul {
		display: block;
	}
	#menu li:hover ul {
		left: 100px;
	}
}


/* Not sure about this crap yet. */
.headerbar #search-box {
	display: none !important;
}

.navbar #search-box{
	box-shadow:none;
}
For this stunt the buttonmenu/styles/prosilver directory was copied, and the copy renamed to buttonmenu/styles/aero before going nuts with the chainsaw. I don't know if that's the approved phpBB procedure, but it works. Screenshots attached.

Big_screen.jpg
Medium_screen.jpg
Small_screen.jpg
Driver80
Registered User
Posts: 51
Joined: Fri Jan 03, 2020 8:35 pm

Re: [DEV] Button menu

Post by Driver80 »

tell me how to disable-remove the Search from this panel? so as not to take up too much space.
If I just delete the search block from the file "overall_header_navbar_before"
then the search does not appear in the "Prosilver header"
Cubguy501
Registered User
Posts: 137
Joined: Mon Feb 07, 2011 8:39 pm

Re: [DEV] Button menu

Post by Cubguy501 »

Tried this on my test forum 3.3 and get the following error

Code: Select all

phpBB encountered an error building the container due to an installed extension. For this reason, all extensions have been temporarily disabled. Please try purging your forum cache. All extensions will automatically be re-enabled once the container error is resolved. If this error continues, please visit phpBB.com for support.


Exception: The file "/homepages/26/d340719664/htdocs/snazoo/ext/dmzx/buttonmenu/config/services.yml" does not contain valid YAML: The reserved indicator "@" cannot start a plain scalar; you need to quote the scalar at line 7 (near "- @service_container").

#0 /homepages/26/d340719664/htdocs/snazoo/vendor/symfony/dependency-injection/Loader/YamlFileLoader.php(117): Symfony\Component\DependencyInjection\Loader\YamlFileLoader->loadFile('/homepages/26/d...')
#1 /homepages/26/d340719664/htdocs/snazoo/phpbb/extension/di/extension_base.php(99): Symfony\Component\DependencyInjection\Loader\YamlFileLoader->load('services.yml')
#2 /homepages/26/d340719664/htdocs/snazoo/phpbb/extension/di/extension_base.php(63): phpbb\extension\di\extension_base->load_services(Object(Symfony\Component\DependencyInjection\Compiler\MergeExtensionConfigurationContainerBuilder))
#3 /homepages/26/d340719664/htdocs/snazoo/vendor/symfony/dependency-injection/Compiler/MergeExtensionConfigurationPass.php(71): phpbb\extension\di\extension_base->load(Array, Object(Symfony\Component\DependencyInjection\Compiler\MergeExtensionConfigurationContainerBuilder))
#4 /homepages/26/d340719664/htdocs/snazoo/vendor/symfony/http-kernel/DependencyInjection/MergeExtensionConfigurationPass.php(39): Symfony\Component\DependencyInjection\Compiler\MergeExtensionConfigurationPass->process(Object(Symfony\Component\DependencyInjection\ContainerBuilder))
#5 /homepages/26/d340719664/htdocs/snazoo/vendor/symfony/dependency-injection/Compiler/Compiler.php(140): Symfony\Component\HttpKernel\DependencyInjection\MergeExtensionConfigurationPass->process(Object(Symfony\Component\DependencyInjection\ContainerBuilder))
#6 /homepages/26/d340719664/htdocs/snazoo/vendor/symfony/dependency-injection/ContainerBuilder.php(789): Symfony\Component\DependencyInjection\Compiler\Compiler->compile(Object(Symfony\Component\DependencyInjection\ContainerBuilder))
#7 /homepages/26/d340719664/htdocs/snazoo/phpbb/di/container_builder.php(203): Symfony\Component\DependencyInjection\ContainerBuilder->compile()
#8 /homepages/26/d340719664/htdocs/snazoo/common.php(115): phpbb\di\container_builder->get_container()
#9 /homepages/26/d340719664/htdocs/snazoo/adm/index.php(23): require('/homepages/26/d...')
#10 {main}
User avatar
M.O.B.
Registered User
Posts: 942
Joined: Tue Jan 04, 2005 1:07 am
Location: San Diego CA USA
Contact:

Re: [DEV] Button menu

Post by M.O.B. »

Cubguy501 wrote:
Mon Mar 02, 2020 9:20 pm
test forum 3.3
viewtopic.php?f=456&t=2528456
Image
User avatar
warmweer
Jr. Extension Validator
Posts: 5325
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Bel ... gium

Re: [DEV] Button menu

Post by warmweer »

Cubguy501 wrote:
Mon Mar 02, 2020 9:20 pm
Tried this on my test forum 3.3 and get the following error

Code: Select all

Exception: The file "/homepages/26/d340719664/htdocs/snazoo/ext/dmzx/buttonmenu/config/services.yml" does not contain valid YAML: The reserved indicator "@" cannot start a plain scalar; you need to quote the scalar at line 7 (near "- @service_container").
The version of the extension dmzx/buttonmenu you're using is not compatible with phpBB3.3. Check the extension topic, perhaps there's an updated version available or instructions on how to make it compatible.
Spelling is freeware, which means you can use it for free.
On the other hand, it is not open source, which means you cannot change it or publish it in a modified form.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots »

This is the extension topic. :D
Post Reply

Return to “Extensions in Development”