Item15134: NatSkin Matter Theme looses the login and user menu on small screens

This can be observed on https://blog.foswiki.org. As screen shrinks horizontally, elements disappear from of the page. The first removed is the right bar. The Login is removed along with it. For logged in users, the User name is removed along with the right bar. The + New link jumps down next to the Like and More links.

The result is that users are unable to log in following a link when visiting Foswiki on a cell phone or other small device.

This was confirmed by MichaelDaum in IRC chat.

MichaelDaum   which phone is it?
foswiki_irc   Pixel 4A5GÂ  But same behavior on chrome / firefox / etc on laptop.  As screen gets narrower, when right bar flips to the hamburg icon, the login goes away
I can manually access login. Problem is the link on the top of the page can't be found, and typing urls is a pain.
with customato the user / login link survives the narrow screen'   [17:33]
MichaelDaum   ah now I see   [17:35]
foswiki_irc   yeah.  I can get around it  but my users have a harder time.
...
MichaelDaum   the curren matter css switches off the user actiosn at the top below 1024 pix. ... which removes any login yadda whatsoever
foswiki_irc   yeah. The login should probably remain a high priority element   [17:40]
MichaelDaum   the login action should be sitting next to "Share"   [17:40]
foswiki_irc   Yeah that would make sense.   [17:41]
MichaelDaum   like "New" is relocated
... once you managed to login ;)

-- GeorgeClark - 23 May 2022

Hotfix:

diff --git a/data/System/SiteTopicActions.txt b/data/System/SiteTopicActions.txt
index 1fc99de..a66f168 100644
--- a/data/System/SiteTopicActions.txt
+++ b/data/System/SiteTopicActions.txt
@@ -11,7 +11,7 @@ Default %TOPIC% component. Please do __not__ modify. Use [[%USERSWEB%.%TOPIC%]]

 %STARTSECTION{"mega"}%%USERACTIONS{
-  guest="$action(share, SocialSharePluginEnabled)"
+  guest="$login$action(share, SocialSharePluginEnabled)"
   restrictedactions="attach,delete,diff,edit,edit_form,edit_raw,edit_settings,harvest,managetags,more,move,raw,restore,translatetopic"
   format="$new$edit$menu"
   history="<div class='natHistoryTopicActions'>$edit$raw$print$view$history$first$prev$next$last$action(close)</div>"
diff --git a/pub/System/MatterTheme/matter.uncompressed.css b/pub/System/MatterTheme/matter.uncompressed.css
index 11bddb0..7a5ae48 100644
--- a/pub/System/MatterTheme/matter.uncompressed.css
+++ b/pub/System/MatterTheme/matter.uncompressed.css
@@ -1038,9 +1038,14 @@ h2 a,
 
 
 /* topic actions */
-.natMainHeaderContents .natNewAction {
+.natMainHeaderContents .natNewAction,
+.natMainHeaderContents .natLoginAction {
   display:none;
 }
+.natBodyTopBarOff .natMainHeaderContents .natNewAction,
+.natBodyTopBarOff .natMainHeaderContents .natLoginAction {
+  display:inline;
+}
 
 /* typography */
 .natBottomBar h3,
@@ -1931,7 +1936,6 @@ a.jqButton.jqButtonDisabled {
     margin-right:0;
     margin-left:0;
   }
-  .natUserAction .natTopicActionShortLabel,
   .natSideBar,
   .natLangSwitcher {
     display:none;
@@ -1969,7 +1973,8 @@ a.jqButton.jqButtonDisabled {
   .natTopBar .natWebMenu {
     display:block;
   }
-  .natMainHeaderContents .natNewAction {
+  .natMainHeaderContents .natNewAction,
+  .natMainHeaderContents .natLoginAction {
     display:inline;
   }
   .natTopicActions .natTopicAction,

This blends in the login action similar to the new action depending on the viewport width. Applied to https://blog.foswiki.org for testing.

-- Main.MichaelDaum - 23 May 2022

Commenting is disabled while not logged in