3.2.x 3.2.x SnippetsMake pm and notifications responsive

Snippets
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4783
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: 357
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: 4783
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: 357
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.
User avatar

Sniper_E
VIP
VIP
Magic user status: Offline
Posts: 1031
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: 4783
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: 357
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: 4783
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: 357
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.
User avatar

Topic Author
martin
Admin
Admin
Magic user status: Offline
Posts: 4783
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: 4783
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: 357
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: 4783
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: 357
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: 4783
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: