Presenting my simple mobile layout...

[JD]

Hello everyone :)

I've been lurking here for quite a while now, and only joined after finally having the guts to share with you my TW5 customization, demoed here:

http://j.d.simplemobile.tiddlyspot.com/

It's a mobile layout based on the looks of modern Android Chrome, which is what I usually browse with at night or during commute. 

I know nothing beyond HTML and CSS, and as such, those are the only things I used with the layout. If there are better ways to go about what I've at the demo site, please let me know so I can update the affected tiddlers, and for my own improvement :)

I'm actually kinda proud of it, please take a look around. 

[Ste Wilson]

Very cool. Me likely.
Like the dark theme too. I shall steal :)
Thank you.

[@TiddlyTweeter]

A neat design that works for me on PC (narrowed) & Android phone.

Good stuff!

Josiah

[Måns]

Hi JD

Very beautiful and very practical. 

Thank you very much for sharing it!!

Works great on an iPad mini and a very small iPhone 5 too :-)

I've put it into use here already: ACPAD Studies

It might be nice if it was bundled like a plugin and could be toggled on/off in the plugin's controlpanel?

Just a thought..

Cheers Måns Mårtensson

[Duarte Farrajota Ramos]

Hey man this is actually pretty good, much more functional on mobile than the default vanilla theme solution!

I've got a long trip coming up, gonna do a lot of tiddlywiki-ing on the move in a mobile in the coming weeks, this just came up with the most perfect timing!

Many thanks for sharing, definitely gonna give it a try.

[JD]

Wow, thanks for the feedback, everyone! If you come across problems with the layout, please let me know :)

Also, as Måns suggested, I will bundle this into a plugin tonight after work (that's probably 10 hours from now)... I didn't do that beforehand because, well, I didn't know how yet. I will read about Tinka plugin tonight :)

[Mark S.]

Hi JD,

It's a very attractive layout.

My problem, as with all mobile layouts, is that it doesn't play nice if you try to enlarge it.

If you zoom the text, the text goes offscreen and you now have to scroll horizontal.

If you increase the tiddler body font size and line height (which is a real pain, BTW), the tiddlers will be larger but not the edit text. The edit text is unfortunately tied to the font size.

If you increase the font size, the icons on your bottom tool bar also increase. On mine, I can then no longer edit text and see it at the same time because the icons sit on top of the keyboard and block the text. (font size 26)

I guess what I need is a way to increase edit font size without increasing icons and other text. Why the edit text font size was tied to the main font-size and not the tiddler font size is a mystery.

Thanks!
Mark

[Riz]

Excellent work. Simple, stays out of the way and gets job done.

Feature req: Can we have an option to display sidebar by swiping from edges?

[Duarte Farrajota Ramos]

Feature req: Can we have an option to display sidebar by swiping from edges?

I'd second that very much, although I am assuming this is not trivial to implement. 

[JD]

Oh my, yes, I also found that frustrating (font sizing), especially since I'm still in the process of learning these scripts. I tried playing with it at first, enlargening fonts and stuff, but then I got used to the small font and forgot about what I originally wanted. Now that I'm reminded, however, I might get back to playing with it after the long Halloween vacation. 

Before hard-writing the font size into the CSS, however, I would first like to play around and find a way to make that user-adjustable. This is something I've wanted for so long: an easy way to adjust these four things:  view mode tiddler title, view mode tiddler body, edit mode tiddler title, and edit mode tiddler body (all independent from each other and everything else, i.e., they won't affect icon sizes). I guess I have to learn more about tiddler fields and their manipulation via transclusion. Again, all of those are after Halloween. Thanks for the idea!

[JD]

I also want that! Right now, however, it seems like something that needs Javascript (swiping, gestures). Before I give in to my curiosity and learn that script, too, I first would like to exhaust all basic possibilities (with regards to styling and such). 

I'm inspired by Mat's Leftbar (http://leftbar.tiddlyspot.com/), where you can hover on the left edge of the window and the Leftbar menu will appear. On mobile, it goes by clicking on the left edge. The Leftbar plugin works with the mobile layout so while I still haven't integrated it cleanly yet, please try it out. However, I found that for the two to work properly, I had to first close the Leftbar menu via the hamburger button while in desktop layout, before entering the mobile layout (the hamburger button is drawn below the mobile searchbar and is unclickable). Or just have the top bar turned off completely (doable via the control panel tab)

I'll play with this idea after Halloween. Cheers!

[JD]

Hello again, everyone. JD here.

I've packaged the mobile layout into a plugin that can be turned on or off at the Control Panel. 

The demo site is now updated here: http://j.d.simplemobile.tiddlyspot.com/  

Also, I'm very sorry to report this, but I spotted a few mistakes during pre-packing review!!! (Also cleaned the tiddlers up a bit)

• $:/plugins/jd/mob/pagecontrols
• There were missing ending brackets for the filters for Top Right Bar and Top Left Bar buttons (!!)
• Updated this to also show buttons tagged with $:/jd/tags/mobbutton
• $:/plugins/jd/mob/button/lists
  
• Now tagged with $:/jd/tags/mobbutton so it would show up at the Bottombar without needing a span class
• $:/plugins/jd/mob/Stylesheet/main
  
• Updated to remove now-unused span class
• $:/plugins/jd/mob/Stylesheet/scrollhide
  
• Corrected @media class 
• $:/plugins/jd/mob/Stylesheet/scrollshow
  
• Same as above
• $:/plugins/jd/mob/Stylesheet/searchfixed
  
• Same as above

Sorry guys, apparently I had a lot of brain farts. 

Future plans:

• Adjustable font sizes for view title, view body, edit title, and edit body (without affecting icon sizes)
• Option for topbar with control buttons, including search and lists menu buttons
• Option to hide bottombar (in lieu of above)

Wishlist

(Unlikely to happen soon if I have to learn javascript for it)

• Swipe from edge for sidebar lists
• Topbar search hiding on scroll down, showing again on slight scroll up (like with modern mobile browsers)

So far, that's all. I shall now return to lurking. :)

On Sunday, October 29, 2017 at 11:04:06 PM UTC+9, JD wrote:

[Duarte Farrajota Ramos]

That sounds lovely, especially the wishlist part :)

Great work, this will make my trip a lot more pleasant, many thanks

[Dave Gifford - http://www.giffmex.org/]

Nice!

[@TiddlyTweeter]

Ciao JD

That work is seriously good because its mobile-centric. Current default TW CSS is currently "mid-space", half-way between "universal" and "desktop" -- tablet okay, mobile-phone not always so optimal. 

I have a few comments (including opinions on design) that I hope may be useful.

 JD - Adjustable font sizes for view title, view body, edit title, and edit body (without affecting icon sizes)

Yes. I think its a serious issue. Having desktop font sizing in mobile is a turn-off.

Some weeks ago I asked in Google Groups about a button that could TOGGLE between different CSS. This is a good example of where an up-front button is preferable to having to wade into special settings files. Given that "mobiles" come in variant screen sizes & resolutions easy, upfront, basic font setting is important.

 JD - Topbar search hiding on scroll down, showing again on slight scroll up (like with modern mobile browsers)

If you can't find a way to do exactly like you want an alternative is to reduce the search bar to just a line of 4 or 5 pixels (using CSS) the drops down on hover.

JD - Swipe from edge for sidebar lists

Not quite sure you will understand me when I say: though the principle of this is really good there is an underlying quite complex issue. The issue being that mobiles are NOT desktops. Its not just about design, its also about "semantics". Mobiles are fundamentally limited in what can be shown on-screen at the same time and that CHANGES visual semantics.

So, IMO, this aspect is not so much about gizmos as understanding what is the MINIMAL info an overlaid menu should show? Obviously you don't wanna get into controlling folk's menu (sidebar) content, but the scope of WHAT is in the "sidebar" (on mobile its "full-screen") kinda matters.

All that said. A really great step for TW IMO.

Very best wishes
Josiah

[JD]

Thanks for the idea on the topbar search, I will definitely give it a try. Also, I've already begun work on the easy font-sizing, you can see it at the demo site ("inspect" on Chrome is quite marvelous in that it allows me to easily find the specific parts of the html that I would like to play with). 

On the sidebar. I agree with you, like all of TW5, it is used differently by everyone. In its default state, it's comprised of the Title, Subtitle, Page Controls, Searchbar, and Tabs. Now, as I can't live without the Page Controls, Searchbar, and Tabs part of it, those are the only things I've included in the mobile layout, highlighted them, even. I can't, however, imagine that solves it for everyone, so I included the search options, and am planning to include bottombar options as well. 

Now, after receiving the idea for a swipe-activated sidebar, and already having search and controls fixed elsewhere, I only thought of the swipe-activated sidebar as containing the Tabs in its default state. That's because I wish only to manipulate the position/visibility of default elements, and not to add or subtract functions from them (besides completely hiding the Title and Subtitle). 

The option to further simplify/mobilize can be had. However, unless I make each change optionable, I don't think it will sit well with everybody. I might play with further ideas after the long holidays. Thanks for the food for thought!

[Jed Carty]

While they are designed for very different things, and I am no longer trying to make this work with mobile devices because I gave up on using them, you may be able to take some of how I made my theme customisable and either pull out some code to use or just for inspiration. http://ooktech.com/jed/ExampleWikis/MobileTheme/

I need to get a better name since now it has almost nothing to do with mobile anything.

[JD]

Wow, thanks for letting me bite through this! I've seen this floating around during my forum searches, and playing with it was what actually made me realize the hackability of TW5. My only gripe was that it wasn't adaptive to screen width, which is what I've done with my rather spartan layout. I'm mostly mobile, but I've been using my laptop a lot lately, so adaptive layouting is quite important to me.

I'd like to ask how you managed to keep the title of the first tiddler in the story visible? With mine, the first tiddler in the story scrolls way up the top, as if there's no topbar there. 

Thanks again!

[Ste Wilson]

Don't know if it's in anyway helpful but is Riz's side bar worth a look?
https://tesseract-index.bitbucket.io/sidebarplus/

[JD]

Oh man, the link is returning an empty page with "File not found" for me :( But I've seen Riz's Ghost Writer before and it looks amazing! I've always thought it was above my skill level, though. 

If it's alright with Riz, I'd like to read through it, learn some and borrow code and stuff :)

[Ste Wilson]

How odd.
You can find it here
https://tesseract-index.bitbucket.io along with the rest of riz's amazingness.

[JD]

Hello again, everyone, I've upgraded this plugin to 1.0.0 I've completed my personal Future plans, but my Wishlist (gesture-related things) remains unrealized. 

http://j.d.simplemobile.tiddlyspot.com/

I'm going to slow down the development of this plugin because it is now exactly what I need it to be. I'll just update if I encounter bugs or if anybody needs me to. Suggestions and ideas, however, are always welcome. 

(I feel like I had nice timing: tiddlyspot worked again, and TW itself was upgraded to 5.1.15)

Many thanks to Riz and Jed Carty for inspiring me!

Changelog:

• Abandoned custom lists, reverted to core lists
• Added topbar and bottombar options (with preset combinations)
• topbar: combined searchbar, or titlebar, or controls area, or hidden
• bottombar: controls area, or hidden
• Added ability to adjust font sizes and button sizes
• Added 'delete' filter button to combined searchbar
• Introduced simple searchbar available as a button only at topbar controls area and titlebar
• Added ability to use an experiment on the story river so the first tiddler in the story river won't scroll past the topbar (just a stylesheet option)
• Overhauled the config tiddler
• Cleaned up code and tiddler names
• Checked compatibility with TW5.1.15

I've attached version 0.9.9 to this post for backup

On Sunday, October 29, 2017 at 11:04:06 PM UTC+9, JD wrote:

[Stephen Wilson]

Hi JD, 

Just giving this a test.  Thoughts so far...it plays nicely with Riz's sidebar, which is good :)

The default (I.e. what I see after dragging the plugin and refreshing) on mobile the initial refresh shoes a search for themes.  Closing it and resaving on mobile seems to get rid of this. 

[JD]

Hey, thanks for the feedback! Yes, I  wanted to use Riz's sidebar with this, but it seems I forgot to add " !important" to the "top" parameter of tc-sidebar-scrollable... I'll have this fixed by 1.0.1, which is probably tomorrow. Another: the search results of the simple-search is drawn behind the sidebar and vertical tab buttons. 

Regarding the search-for-themes bug, I want to replicate the issue to see what tiddler needs fixing, can I ask what edition you loaded the plugin into?  Loading it into Tiddlywiki.com and Tiddlywiki.com/empty.html isn't showing that search-for-themes bug for me. Thanks!

[Ste Wilson]

I've not upgraded that one yet so it's 5.1.14

[Mark S.]

Hello JD,

It's looking very nice!

On my aging tablet, there seems to be a bug. I have it on the highest font level. When I press the "full-screen" button, the scrolling works great and I no longer have that annoying flicker at the top as the url bar scrolls down. BUT -- I can't change back by hitting the full-screen button again. All the buttons on the bottom seem to be turned off except save and new tiddler. If I save and then scroll down a little a blank opens at the top of the screen and then I can activate the full-screen button.

Is there any possibility you could add one more level of font-increase? (He says groping around the desk for a pair of glasses that was just there a minute ago...)

Thanks!
Mark

[JD]

Seems like there might be a missing syntax in a tiddler somewhere, i'll check each of them again! Any idea on the bug origin? 

[JD]

Sure, I'll add another font-increase level for 1.0.1 :)

For the meantime, is 'Customize fonts and heights' not working properly in your browser? I've only ever tested this plugin on Chrome and IE so I've no idea if other browsers have compatibility issues

Also, I'll look into that fullscreen bug. I tried replicating that problem on Chrome for Android and yep, there's a bug! This might be due to a missing syntax in a plugin tiddler somewhere... 

[Mark S.]

Oh! I see. I didn't realize I needed to regenerate a table to get custom values. The custom values can be plugged in without increasing the icon size (I think). So that's great!

Thanks!
Mark

[Abraham Samma]

Wow, where has this been all my life? Kudos JD. Your plugin is IMHO the best thing that can happen to TW5!

[FFT]

After installing this, on mobile, my site goes to the sidebar instead of showing my default tiddler. Is there something I'm missing?

[Mark S.]

If there's a little double arrow >> in the lower right hand side then click on it to see your tiddlers.

[FFT]

Is there a way to have it default to showing my tiddlers instead of it currently defaulting to showing the sidebar?

[FFT]

I found a solution:

https://tobibeer.github.io/tb5/#Hiding%20The%20Sidebar%20On%20Startup

[JD]

Hey, thanks! :)

[JD]

Yeah, this plugin just reacts to the screen being narrowed and doesn't really set visibility-tiddlers. Thanks for the tb5 link!

On Saturday, November 18, 2017 at 11:08:38 AM UTC+9, FFT wrote:

I found two solutions:

1. "Create a tiddler called $:/state/sidebar and give it the text "no". Or just save the wiki while the sidebar is hidden" : https://groups.google.com/d/msg/Tiddlywiki/bkdncOadqZg/mAoUbLrSHLUJ 
2. Full-proof method: https://tobibeer.github.io/tb5/#Hiding%20The%20Sidebar%20On%20Startup
   

[JD]

Hi, I've upgraded this plugin to 1.0.2, what is possibly the last update for a long while (I will now return to my lair and focus on using / discovering TW5.)

http://j.d.simplemobile.tiddlyspot.com/

Thanks, everyone, for welcoming my stuff :)

Changelog:

• Added Larger, Largest, and Smallest options to font sizes
• Added Mobbuttons option to topbar and bottombar
• Added options to topbar and bottombar configurations
• Added button to config modal (can be turned on or off)
• Cleaned up config tiddler
• Cleaned up code and other bugfixes

Versions 0.9.9 and 1.0.0 are attached to my previous announcer post (for backup)

Version 1.0.2 is attached to this post

[Diego Mesa]

Hey JD,

Thanks for this! On my TW, Im not sure why, but this is causing strange rendering where basically my sidebar isn't behaving well and ends up taking over everything. 

[Mark S.]

On a small screen, if you have the double chevron clicked, that is what happens. Just click the double chevron again (lower right corner) to restore.

Apologies if this is not the problem you are describing.

-- Mark

[Diego Mesa]

Thanks Mark - I did notice that, and I saw the tb5 link above to auto-hide the sidebar as well. 

My problem is that there seems to be 3 sidebar states: 

1. The default sidebar when my window is normal size

2. The mobile sidebar created by this plugin

3. A strange "middle state" that is white that appears for a very small margin.

The behavior can be seen in this gif:

https://media.giphy.com/media/3osBLlm8SRZydLLnIA/giphy.gif

An interesting (though nonrelated?) issue I'm having is that I use a window manager (lua script running in hammerspoon) to automatically resize my windows. When I resize my TW browser window, the theme does not update. I have to manually wiggle the window size to get the new layout to "kick in". 

[JD]

Oh my. That small, white one is totally new to me, I can only guess where that came from. If it's not too bothersome, can you post another gif where there are also open tiddlers in the story river, empty, or drafts? I'd like to know how open tiddlers look like when this problem occurs.

To clarify, the plugin doesn't create a separate sidebar, it just styles the current one via a stylesheet tiddler... So i'm guessing this is a bug in the plugin stylesheet, or maybe it has something to do with what your browser considers a mobile layout and what is actually set in the Sidebar Breakpoint of your TW5. 

...And now I'm thinking, it might be better to hide the core sidebar and create a completely new one instead (although this seems inefficient and unwise)...

If there are other ideas for the root cause of the problem, and perhaps an idea for a solution, let me know :)

In Japan, we call this "saihatsu boushi"

[JD]

Hello, I tried slowly resizing my browser window, and yep, there seems to be a completely different "Sidebar break point" or something. 

Interesting to note that I tried doing this on tiddlywiki.com itself and tiddlywiki.com/empty.html without installing the plugin. This problem seems to be a core one (I noticed that at this strange, middle ground, the Vanilla theme isn't applied, evidenced by the tiddler drop shadows disappearing)

I wonder what this middle breakpoint is, and how to properly style it.

If there are ideas, please let me know :)

On Wednesday, November 29, 2017 at 4:58:55 AM UTC+9, Diego Mesa wrote:

[Abraham Samma]

Hi JD,

I was wondering if your plugin's latest version solves a problem that I've experienced when using TW via the mobile browser (chrome). Trying to write something in the editor on mobile usually brings up a javascript error (setting data to null). Is this experienced by others or is it just me?

Regards

[Abraham Samma]

Update: wrt my previous question, this problem seems to be more due to the Codemirror plugin and not due to TW5's editor per se.

On Sat, Dec 2, 2017 at 8:50 PM, Abraham Samma <sammadi...@gmail.com> wrote:

Hi JD,

I was wondering if your plugin's latest version solves a problem that I've experienced when using TW via the mobile browser (chrome). Trying to write something in the editor on mobile usually brings up a javascript error (setting data to null). Is this experienced by others or is it just me?

Regards.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/VgSNYadXg10/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/21b36023-782b-4b4b-ba91-889f43c6b100%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Jeremy Ruston]

Hi Abraham

I was wondering if your plugin's latest version solves a problem that I've experienced when using TW via the mobile browser (chrome). Trying to write something in the editor on mobile usually brings up a javascript error (setting data to null). Is this experienced by others or is it just me?

I've just run into this issue as well. It's pretty disconcerting: on Chrome iOS, clicking in the tiddler editor textarea for the text field of a tiddler triggers a JavaScript error every time.

The good news is that you can work around it by disabling the rich editor toolbar in Control Panel settings.

The bad news is that I have been unable to find a way to debug it. You can attach an iOS device to a Mac via USB to remotely debug pages in Mobile Safari, but the problem does not occur in Mobile Safari.

That in itself is pretty weird, and highlights something that not everybody realises: not all WebViews on iOS are the same. Over the life of iOS there have been two different architectures for embedding webviews within an app, with different characteristics (the newer approach is generally much more secure but often less convenient for developers). I strongly suspect that Chrome is still using the older approach in order to be able to offer their signature features like automatic translation.

One can notice the difference with sites like https://federatial.com — the funky scroll effect doesn't work in browsers that use the older embedding engine. 

For me personally, all of this is a compelling reason to use Safari as my primary browser on iOS.

Anyhow, the situation is currently that I cannot find a way to debug the problem, even to find out the line number of the error. Any help with this is of course much appreciated.

Best wishes

Jeremy

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAK5bROjM83bb2v%2BDePwtqrcdSvcQavrcAVOdyuV_KTTYdQJgyw%40mail.gmail.com.

[Abraham Samma]

That's useful information. Thanks for the the heads up. Unfortunately I don't have a single device near me running iOS so I can't help there lol.

Someone with iPhone, help please?

Hi Abraham

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/21b36023-782b-4b4b-ba91-889f43c6b100%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[HC Haase]

HI JD

Thank you for a great layout.. it really makes TW5 usable on mobile. But

I think I found a bug.

--BUG--

in firefox 59.0.2 and in vivaldi (chromium)

When I press the print button in TW (or ctrl+p for the browser print), the mobile layout with the the sidebar covering the screen/paper is printed. i.e not content is visible.

I would expect the desktop layout of TW to be printed.

------

[Danielo Rodríguez]

Hello JD,

Very impressive work ! I just tried on my laptop with the mobile simulation, but it is looking very very good.

Maybe I miss some more heavy customization on the sidebar, but the overall is very pleasant. I would also see some more buttons at the bottom. To be honest, I don't see myself changing the theme very often, but maybe closing all the tiddlers or seeing my favorite ones is something I'll want to do more often.

Apart from those, the best mobile theme I tried. I tried doing it myself several times, so I know how hard it can be.

Regarding the sidebar sliding, I made a plugin a while ago. It´s working quite fine, but it's par of NS android app internals. I can offer you some support on that regard if you want, or maybe try to release the plugin separately.

Regards

[JD]

Hey HC,

I just updated the plugin, it should now respond properly to the print command. The bug was a missing "@media print" rule to the story river. 

Thanks for the feedback, and sorry for the late reply. I just came back from a long vacation.

[JD]

Hi Danielo,

Thanks for the feedback! 

Yep, aside from adding a separate topbar and bottombar, and re-positioning the sidebar so it shows only the lists part, not much has been customized. I didn't want to take away from the Vanilla experience, seeing as it's near-perfect for my use-case (my Material theme however, is nearest to how I actually want the mobile sidebar). 

About the bottombar buttons, does setting visibility in ControlPanel > Appearance > Toolbars > PageToolbar not work for you? Or maybe I misunderstood what you meant?

As for the sidebar sliding, I applied BTC's Hammer Widgets to my Material Theme for a swipable sidebar, but haven't applied it to this plugin yet. Maybe you can walk me down your plugin's path so we can see the many ways we make the sidebar swipable? 

[HC Haase]

HI JD

 This is still an amazing layout, but found another minor print BUG ( maybe I am the only person doing the strange printing activity).

BUG

when printing, the text size as set in "Fonts and heights presets" is used.

I would expect the native TW print layout to be used.

when you have bigger text to work better on mobile (e.g. the medium setting) you get print appropriate for people with weak sight (except headings that looks strangely small in comparison).