Navbar in responsive: PM and notifications text too long in other languages

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
Saint_hh
Registered User
Posts: 362
Joined: Thu Mar 31, 2005 5:16 pm
Location: Hamburg / Germany
Name: Kevin
Contact:

Navbar in responsive: PM and notifications text too long in other languages

Post by Saint_hh » Fri Jan 06, 2017 10:55 am

Hi,

I have a question regarding the navbar in responsive mode with, for example, smartphones.
In 3.1 it has looked like this - watch out for PM and notifications:
navbar_3.1.jpg
Now, with 3.2 it's like this:
navbar_3.2.jpg
The text for PM (Private Nachrichten) and notifications (Benachrichtigungen) is too long in German, I get an ugly line break.
And yes: it's the same in original prosilver.

Does anybody have an idea how to change it? Either changing in responsive mode the lang variable - e.g. from "Private Nachrichten" to "PN" or to remove the text completely, like it was in 3.1
Although I'd rather like to change the lang variable for the responsive mode.

Thanks a lot!

User avatar
Christian 2.0
Former Team Member
Posts: 4449
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Christian 2.0 » Fri Jan 06, 2017 5:43 pm

Hey Kevin :)

In navbar_header.html, find:

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:

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 -->
Then add this to the bottom of responsive.css:

Code: Select all

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


Let us know how you go :)

Saint_hh
Registered User
Posts: 362
Joined: Thu Mar 31, 2005 5:16 pm
Location: Hamburg / Germany
Name: Kevin
Contact:

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Saint_hh » Fri Jan 06, 2017 9:22 pm

Thank you very much, Christian!
Yes, this works already fine. :)
Only: on my tablet (iPad 9.7") the text is also gone. This would be fine to have it there, only on smaller devices, like smartphones, it should be gone, due to the space.
Thank you again!

User avatar
Talk19Zehn
Registered User
Posts: 277
Joined: Tue Aug 09, 2011 1:10 pm

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Talk19Zehn » Fri Jan 06, 2017 9:39 pm

Hi Kevin, another idea ... - *warrantless .. ;)

Change the original perhaps to ...

Code: Select all

      <!-- IF S_DISPLAY_PM -->
         <li class="rightside" data-skip-responsive="true">
            <a href="{U_PRIVATEMSGS}" title="{L_PRIVATE_MESSAGES}" role="menuitem">
               <i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span class="pm-text">{L_PRIVATE_MESSAGES}</span> <!-- IF PRIVATE_MESSAGE_COUNT --><strong class="badge">{PRIVATE_MESSAGE_COUNT}</strong><!-- ENDIF -->
            </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}" title="{L_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
               <i class="icon fa-bell fa-fw" aria-hidden="true"></i><span class="nf-text">{L_NOTIFICATIONS}</span> <!-- IF NOTIFICATIONS_COUNT --><strong class="badge">{NOTIFICATIONS_COUNT}</strong><!-- ENDIF -->
            </a>
            <!-- INCLUDE notification_dropdown.html -->
         </li>
      <!-- ENDIF -->

responsive.css ...

search

Code: Select all

   /* Navigation
   ----------------------------------------*/
   .headerbar + .navbar {
      margin-top: -5px;
   }
add after

Code: Select all

   /* PM + Notifications Text
   ----------------------------------------*/
   .pm-text, .nf-text {
      display: none;
   }
*We find this first aid, thought also - written by Kirk and Talk19Zehn --> Test(!) ... and it works
in the first test well.
Regards
.
Currently occasionally online .. ♪ ♫ Best regards
Respect and thanks going to Tim Berners-Lee :!:
Insights into my own works (styles) ... styleshow-ongray-design-de

User avatar
Christian 2.0
Former Team Member
Posts: 4449
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Christian 2.0 » Fri Jan 06, 2017 11:27 pm

Saint_hh wrote:
Fri Jan 06, 2017 9:22 pm
Thank you very much, Christian!
Yes, this works already fine. :)
Only: on my tablet (iPad 9.7") the text is also gone. This would be fine to have it there, only on smaller devices, like smartphones, it should be gone, due to the space.
Thank you again!
You're welcome :)

Simple fix for the iPad. In responsive.css, the code you added above:

Code: Select all

@media (min-width: 700px) {
Just increase 700px to around 1200px or another value that suits you. Essentially you just need to tell the media query when to start display the long words :)

Saint_hh
Registered User
Posts: 362
Joined: Thu Mar 31, 2005 5:16 pm
Location: Hamburg / Germany
Name: Kevin
Contact:

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Saint_hh » Sat Jan 07, 2017 11:04 am

Hi Christian,
Christian 2.0 wrote:
Fri Jan 06, 2017 11:27 pm
Just increase 700px to around 1200px or another value that suits you. Essentially you just need to tell the media query when to start display the long words :)
Unfortunately this doesn't effect the "words", it's only effecting the badge tag.
Means: if for example a 0 is displayed in front of the PN symbol.
As soon as responsive is detected, the "words" are gone. Regardless if I change it even to 2000px or more.

@Talk19Zehn:
your solution is looking good. Some tweaking needed, but seems to work.
Kids are back, have to postpone further testing, getting back asap. ;)

User avatar
Talk19Zehn
Registered User
Posts: 277
Joined: Tue Aug 09, 2011 1:10 pm

Re: Navbar in responsive: PM and notifications text too long in other languages

Post by Talk19Zehn » Sat Jan 07, 2017 5:41 pm

Yes, square brackets and color concepts can round off the concept. It was only the first test because the display in the standard layout breaks up the height. This was dissolved in 3.1 better .... - so I think.

Greetings to HH

Edit:
What improvements did you create additionally?
Currently occasionally online .. ♪ ♫ Best regards
Respect and thanks going to Tim Berners-Lee :!:
Insights into my own works (styles) ... styleshow-ongray-design-de

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: Hanakin, Mannix_ and 7 guests