3.2.x 3.2.x Snippets ⇒ Make pm and notifications responsive

[martin]

Phpbb messed up on 3.2 on mobiles you get text for pm and notification this makes the navbar ugly the fix is below.

Open styles/prosilver/template/navbar_header.html

Find This may be a partial find and not the whole line

Code: Select all

		<!-- IF S_DISPLAY_PM -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_PRIVATEMSGS}" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>{L_PRIVATE_MESSAGES} <!-- IF PRIVATE_MESSAGE_COUNT --><strong class="badge">{PRIVATE_MESSAGE_COUNT}</strong><!-- ENDIF --></span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF S_NOTIFICATIONS_DISPLAY -->
			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} <!-- IF NOTIFICATIONS_COUNT --><strong class="badge">{NOTIFICATIONS_COUNT}</strong><!-- ENDIF --></span>
				</a>
				<!-- INCLUDE notification_dropdown.html -->
			</li>
		<!-- ENDIF -->

Replace with Replace the preceding lines with the following

Code: Select all

		<!-- IF S_DISPLAY_PM -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_PRIVATEMSGS}" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span><span class="responsive-hide">{L_PRIVATE_MESSAGES}</span> <strong class="navbar_counter<!-- IF PRIVATE_MESSAGE_COUNT --> badge<!-- ENDIF -->">{PRIVATE_MESSAGE_COUNT}</strong></span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF S_NOTIFICATIONS_DISPLAY -->
			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span><span class="responsive-hide">{L_NOTIFICATIONS}</span> <strong class="navbar_counter<!-- IF NOTIFICATIONS_COUNT --> badge<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong></span>
				</a>
				<!-- INCLUDE notification_dropdown.html -->
			</li>
		<!-- ENDIF -->

Open styles/prosilver/theme/responsive.css
Add to the bottom of the file

Code: Select all

@media (min-width: 700px) {
	.navbar_counter { display: none; }
	.navbar_counter.badge {display: block;}
}

Demo: see my site on mobile.

[Solidjeuh]

Html code converted to twig syntrax

Code: Select all

		{% if S_DISPLAY_PM %}
			<li class="rightside" data-skip-responsive="true">
				<a href="{{ U_PRIVATEMSGS }}" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span><span class="responsive-hide">{{ lang('PRIVATE_MESSAGES') }}</span> <strong class="navbar_counter{% if PRIVATE_MESSAGE_COUNT %} badge{% endif %}">{{ PRIVATE_MESSAGE_COUNT }}</strong></span>
				</a>
			</li>
		{% endif %}
		{% if S_NOTIFICATIONS_DISPLAY %}
			<li class="dropdown-container dropdown-{{ S_CONTENT_FLOW_END }} rightside" data-skip-responsive="true">
				<a href="{{ U_VIEW_ALL_NOTIFICATIONS }}" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span><span class="responsive-hide">{{ lang('NOTIFICATIONS') }}</span> <strong class="navbar_counter{% if NOTIFICATIONS_COUNT %} badge{% endif %}">{{ NOTIFICATIONS_COUNT }}</strong></span>
				</a>
				{% INCLUDE 'notification_dropdown.html' %}
			</li>
		{% endif %}

[martin]

This is not needed in 3.2.1 they fixed it lol.

[ Post made via Android ]

[Solidjeuh]

This is not needed in 3.2.1 they fixed it lol.

[ Post made via Android ]

Sure? I still see this on 3.2.1

Screenshot_20170719-014127.png

[Sniper_E]

Sure? I still see this on 3.2.1

I can confirm that. I still see that on 3.2.1

[martin]

Yup me too I looked at wrong site

Nice twig converter here and works well https://www.phpbb.com/community/viewtop ... &t=2429096

Posted the complete template folder if any one wants them here viewtopic.php?f=64&t=2783#p17376

[ Post made via Android ]

[Solidjeuh]

Is there anyway to make this as an extension?
I tried to make this myself, but failed terribly

[martin]

Is there anyway to make this as an extension?
I tried to make this myself, but failed terribly

See here its an ext https://www.phpbb.com/community/viewtop ... &t=2429096

[Solidjeuh]

I created a little extension to make pm & notification responsive.
But how can I make my code overide the phpbb core code?

because now I see it 2 times lol

2017-07-19 16 01 28.png

I would realy like to learn how to make extension, a little help would be great

It's just a test, I know css cannot be in the template

solidjeuh.zip

[martin]

You can block the html using css that way only one lot will show il post your files

[martin]

Just set up a new board 3.2.1 and notifications and pm's are responsive by default now you must be using an updated on your board.

see here http://www.martins.homelinux.net/testin ... /index.php

user name testing
password testingme

[Solidjeuh]

Just set up a new board 3.2.1 and notifications and pm's are responsive by default now you must be using an updated on your board.

see here http://www.martins.homelinux.net/testin ... /index.php

user name testing
password testingme

I'm using the standard phpBB 3.2.1 prosilver now, and it's not responsive.
That's strange...

[martin]

I did notice it only kicks in at last minute unlike the rest of the responsive stuff.

[Solidjeuh]

I did notice it only kicks in at last minute unlike the rest of the responsive stuff.

See: https://www.froddelpower.be

Nick: Testaccount
Pasw: Testaccount

[martin]

Will send you some files via pm here