[ABD] [DEV] Button menu

[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

[dmzx]

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

[fabiomaticus]

When RC?

[dmzx]

When RC?

When more time available

[fabiomaticus]

it's Great but is not mobile responsive.

[fabiomaticus]

IHi don't fuction move button in ACP

[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.

[dmzx]

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.

[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.

[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]

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]

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}

[M.O.B.]

test forum 3.3

viewtopic.php?f=456&t=2528456

[warmweer]

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.

[Gumboots]

This is the extension topic.