3.2.x 3.2.x SnippetsMake pm and notifications responsive

Snippets
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Windows 10 Chrome

Make pm and notifications responsive

Post by 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.
Use this to install an ext on your board no more ftp or path making.
Path too install this ext is ext/boardtools/upload
Download is here Make it easy for us to solve your issues
User avatar

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by 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 %}
Forum voor NL Extensie vertalingen ---> https://www.supportforum.be
----------------------------------------------------------------------------
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Android Chrome

Re: Make pm and notifications responsive

Post by martin »

This is not needed in 3.2.1 they fixed it lol.

[ Post made via Android ] Image
User avatar

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by Solidjeuh »

martin wrote: Jul 18th, '17, 22:10 This is not needed in 3.2.1 they fixed it lol.

[ Post made via Android ] Image
Sure? I still see this on 3.2.1
Screenshot_20170719-014127.png
You do not have the required permissions to view the files attached to this post! Maybe your post count is too low.
User avatar

Sniper_E
VIP
VIP
Magic user status: Offline
Posts: 1122
Joined: Oct 14th, '14, 17:01
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by Sniper_E »

Solidjeuh wrote: Jul 18th, '17, 23:43Sure? I still see this on 3.2.1
I can confirm that. I still see that on 3.2.1
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by martin »

Yup me too I looked at wrong site :rolling:

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 phpBB syntax to template files using Twig syntax

[ Post made via Android ] Image
User avatar

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by Solidjeuh »

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

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by martin »

Solidjeuh wrote: Jul 19th, '17, 12:02 Is there anyway to make this as an extension?
I tried to make this myself, but failed terribly :rolling:

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

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by 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 :rolling:
2017-07-19 16 01 28.png
I would realy like to learn how to make extension, a little help would be great :oops:

It's just a test, I know css cannot be in the template :eusa_dance:
solidjeuh.zip
You do not have the required permissions to view the files attached to this post! Maybe your post count is too low.
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by martin »

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

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by 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
User avatar

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by Solidjeuh »

martin wrote: Jul 19th, '17, 16:16 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... :???:
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by martin »

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

Solidjeuh
Users
Users
Magic user status: Offline
Posts: 354
Joined: Dec 13th, '14, 01:40
    Windows 10 Firefox

Re: Make pm and notifications responsive

Post by Solidjeuh »

martin wrote: Jul 19th, '17, 16:26 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
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4935
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: Make pm and notifications responsive

Post by martin »

Will send you some files via pm here :tumbsyes: