Need LeftBar in desktop mode and RightbottomBar in mobile mode

#1

@twMat
Previously I had modified the LeftBar plug in to create a RightbottomBar as shown in this wiki - https://right-bottombar.tiddlyhost.com/ . This RightbottomBar works both in desktop and mobile mode.

Now what I am trying to do is to use LeftBar in desktop mode and RightbottomBar in mobile mode (beacuse the rightbottom is the most accessible location in a mobile if you are righthanded). I tried to port the stylesheet used for RightbottomBar to the LeftBar, but the RightbottomBar was not getting activated. Always the LeftBar was only shown. Any ideas?

#2

Without having looked closer, are you using CSS media queries? I think that is the way to go.

#3

If you install the “Browser Sniff” plugin (from the TiddlyWiki Official Plugin Library), you can then use wikitext to apply conditional styles, like this:

\define mobileCSS()
...
\end

\define desktopCSS()
...
\end

<$let mobile={{{ [enlist[android ios windowsphone]addprefix[$:/info/browser/is/]get[text]match[yes]] ~[[no]] }}}>
<$list filter="[<mobile>match[yes]]" emptyMessage=<<desktopCSS>>><<mobileCSS>></$list>

enjoy,
-e

2 Likes
#4

Thank you @EricShulman . That was a easiest way to get what I wanted given that I already have a working CSS for LeftBar and RightbottomBar.

I had tried using media queries, but those needed much more work. So for the time being I am using Eric solution.

#5

@EricShulman Is there any way to recognise Android tablet in landscape mode. I want the styles for Android tablet in landscape mode to same as the desktop mode.

#6

I am not sure but you would be looking for the width and height to change? Its a simple ratio. Someone else will know the answer, I just thought I would mention this in case it helps.

#7

You can also use core macro like this in media query