mobile menu icons?

Topic: mobile menu icons? (Read 4407 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

mobile menu icons?

March 14, 2015, 02:56:12 am

Hi again,

I want to tweak my menu a little and want to show new entries in the mobilke view as well. Therefor I need to know:

1. What are the mobile icons made with? Is it:

Code: [Select]

				'data-icon' => '',

I tried to look here for more informations, but there is no such code as used in Subs.php anywhere.

2. What must I edit in Subs.php so that new menu entries will be shown in mobile view of the board?

Thank you!

Re: mobile menu icons?

Reply #1 – March 14, 2015, 02:22:36 pm

Look in the function setupMenuContext in Subs.php.

You will find lines like 'data-icon' => '& #xf015;' in the buttons array. That is the hex code for a font awesome character to use. You can find all those codes listed next to the icons here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Alternatively, you could do it all in the css but you will have to specify all the buttons ... so today we have:

Code: [Select]

	[data-icon]:before {
		font-family: 'FontAwesome';
		border: 3px solid #666;
		padding: 1px;
		margin: 2px;
		height: 1.15em;
		width: 1.15em;
		text-align: center;
		display: inline-block;
		border-radius: 4px;
		line-height: 1.2em;
		font-size: 2em;
		color: #555;
		content: attr(data-icon);
	}

That single blocks defines all of the mobile icons, the content is set from the data-icon attribute. You could replace that block with for example

Code: [Select]

	#button_home:before, #button_pm:before {
		font-family: 'FontAwesome';
		border: 3px solid #666;
		padding: 1px;
		margin: 2px;
		height: 1.15em;
		width: 1.15em;
		text-align: center;
		display: inline-block;
		border-radius: 4px;
		line-height: 1.2em;
		font-size: 2em;
		color: #555;
	}
	#button_home:before {
		content: '\f015';
	}
	#button_pm:before {
		content: '\f19c';
	}

for the home button, and the PM button as an example. You would have to add for all of the other buttons you want.

Re: mobile menu icons?

Reply #2 – March 14, 2015, 04:27:02 pm

I wonder if at some point we will be able to move that icons out of setupMenuContext and into the theme...

Re: mobile menu icons?

Reply #3 – March 14, 2015, 05:47:33 pm

May make sense for 1.1, I think what I posted above would work fine, and then simply remove the data_icon attribute from subs.

Re: mobile menu icons?

Reply #4 – March 15, 2015, 01:19:30 am

Thanks, @Spuds worked great!

Another question I have with this idea is that - remember I am absoluty not into coding - my menu button für drafts will not work for registered members. I have added this in Subs.php:

Code: [Select]

			// Eigener Button zu den Entwürfen.
			'drafts1' => array(
				'title' => 'Entwürfe',
				'href' => $scripturl . '?action=profile;area=showdrafts',
				'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']) && allowedTo('post_draft'),		
			),

But it doesn't work, the button is not shown. It only is when I use this:

Code: [Select]

			// Eigener Button zu den Entwürfen.
			'drafts1' => array(
				'title' => 'Entwürfe',
				'href' => $scripturl . '?action=profile;area=showdrafts',
				'show' => !$user_info['is_guest'],		
			),

I want to display the button only if the function is enabled und the user has the permission to use it. Can anyone see my error?

Re: mobile menu icons?

Reply #5 – March 15, 2015, 09:45:07 am

That looks fine to me ... not sure why its not working for you. I took you code and placed it in subs and the button was shown.

Re: mobile menu icons?

Reply #6 – March 15, 2015, 09:59:25 am

As a normal member? Logged in as administrator I see the button too. But not as normal member (which has the permission to use drafts).

Re: mobile menu icons?

Reply #7 – March 17, 2015, 02:36:22 am

Another small question. When I add a code like this into Subs.php:

Code: [Select]

		// Eigener Button für die Stromtankstellen-Karte.
			'tankstellen' => array(
				'title' => 'Stromtankstellen',
				'href' => 'http://elektro-piloten.de/karte.html',
				'show' => !$user_info['is_guest'],

			),

...to create a new button in the menu, is there something more I have to do? Maybe because of "tankstellen", does this need to be in any more files?

Re: mobile menu icons?

Reply #8 – March 17, 2015, 04:02:19 am

Nope.
The "tankstellen" (the key) is there to identify the button if you need to access it from other places.

Re: mobile menu icons?

Reply #9 – March 17, 2015, 04:16:58 am

Great, thanks! So the only problem is this:

Quote from: Jorin – March 15, 2015, 01:19:30 am...my menu button für drafts will not work for registered members.

[...]

I want to display the button only if the function is enabled und the user has the permission to use it. Can anyone see my error?

Re: mobile menu icons?

Reply #10 – March 17, 2015, 05:31:11 am

Can you attach the modified file that doesn't work?

Re: mobile menu icons?

Reply #11 – March 17, 2015, 05:49:22 am

Sure. This is the part that doesn't work:

Code: [Select]

			// Eigener Button zu den Entwürfen.
			'drafts1' => array(
				'title' => 'Entwürfe',
				'href' => $scripturl . '?action=profile;area=showdrafts',
/*				'show' => !$user_info['is_guest'],		*/
				'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']) && allowedTo('post_draft'),		
			),

It's line 3565.

Re: mobile menu icons?

Reply #12 – March 17, 2015, 06:17:10 am

"post_draft" is a board-level permission^[1], that means it will return a correct value only when inside a specific board.
So, the easy way out is to use simply:

Code: [Select]

			// Eigener Button zu den Entwürfen.
			'drafts1' => array(
				'title' => 'Entwürfe',
				'href' => $scripturl . '?action=profile;area=showdrafts',
				'show' => !empty($modSettings['drafts_enabled']) && !empty($modSettings['drafts_post_enabled']),
			),

¹And I wonder why it is board-level... would be easier make it forum-wide? I guess not many admins go and allow to save drafts in one board, but not in the other. Or is there a use-case that I missed?↵

Re: mobile menu icons?

Reply #13 – March 17, 2015, 06:21:12 am

Maybe boards for authors need the possibility to allow drafts in some boards and in some not?

Thanks for the support!

Re: mobile menu icons?

Reply #14 – March 18, 2015, 10:34:00 am

@Jorin, I encourage you to use a hook here instead of editing Subs.php directly. Future updates of Elk will surely break this.