[TW5] A start on a theme for mobile devices (and yet another task list idea)

[Jed Carty]

I started out by trying to make a new task list a few hours ago and ended up with what I am hoping to use for the basis of a theme for mobile devices. One day I may actually plan what I am going to do instead of just poking things until something interesting falls out.

I used the icon menus plugin I made to put everything from the normal sidebar into popups toggled by icons on the left side of the screen. There are icons along the right side that open up tiddlers for specific applications (at the moment a task list, a contacts database, bookmarks and a library tracker from my plugins). The icons can be moved around however you would like through the icon menu settings in the control panel.

The task list I made lets you add categories and subcategories to tasks. I that is probably the only part that is all that interesting there. I still need to add a search function and sorting.

At the last hangout someone (I think Eric. Thanks!) showed me how to make popups that don't go away if you click inside them, and how to set css dimensions based on viewing area size. Both of these are used a lot.

Here is the current demo. The only thing I have been able to test it on other than my desktop is my tablet, so I have no idea how it looks or if it is usable on phones or smaller tablets.

Does anyone have any suggestions/requests for what should be added? I have no idea what sort of configuration things people would want for this sort of thing.

[Måns]

Hej Jed

Great job - congratulations and thank you for sharing :-)

I have tested it with my LGg2 Android phone - on Chrome, Firefox (with TiddlyFox) and with AndTidWiki+.

It works very nicely on both both browsers - with AndTidWiki the TopBar is behaving as if it's a little delayed -  it is not imposing a problem for navigation though..

I prefer using the browsers because you can go fullscreen with them. It's not possible with AndTidWiki(+).

If I should use AndTidWiki I would hide the TopBar but then I would also use autosave changes - because the saveicon would be gone..

I was fiddling with the Icon Menu Settings - showing/hiding different menus to see how it would affect the screen estate - suddenly I felt trapped because hiding the Left Menu left me without any option to revert back to showing it - and the controls were gone :-)

Maybe the option for hiding the Left Menu should be a link to a tiddler instead - or it should automagically become a button/arrow on the right menu if the Left Menu is hidden? 

This is without doubt the most mobile friendly theme I've tried for TiddlyWiki so far (both TWC & TW5). With your theme and menu design it feels very natural to actually edit/write stuff in TW on a smartphone. Navigating your menus on a touch screen is a breeze :-D

Once again - GREAT JOB! 

Cheers Måns Mårtensson

[James Anderson]

Hello Jed 

I like your theme but some of the icons at the top do not display well on my HTC one in chrome:

I have done some work on getting my own theme working well on both large and small screens and it might be of interest to you ( see  welford.github.io ):

I added a slightly customized search to the top bar and have the results show overlayed on the main page. The search transcludes and links to my twexe tiddlers and displays them as buttons. Now that you have me thinking about it, it is probably a good idea to have buttons like add, save, controlpanel be transcluded in the search results too. 

This saves a load of screen space on smaller screens. Considering most of these buttons will not be used 90% of the time i don't think you need to have them always on screen.

James

[Jed Carty]

Thank you both for the feedback! It is very helpful.

I think I am going to remove the option to turn the menus on and off and just have the option to turn off the icons and turn the background transparent instead. And instead of having an option to remove the control panel icon I will just make it so that you can only change its location. I should probably modify a lot about the icon menus since it is a part of the theme instead of something added on top of the existing theme. And I will probably set things so that there is one of each icon and you decide which menu, if any, to put it on, instead of picking from all of the icons for each menu since with the smaller space you probably won't want any duplicates.

I think that the problems from the size of the top bar are because the title is too long. I don't think that there is a fix for that other than either removing the title from the bar (I will have an option for that) or having a shorter title.

And James,

Your theme looks good, I may have to shamelessly steal borrow some of the ideas. I really like your search. I will probably add that as an option on the top bar of mine.

Thanks again!

[James Anderson]

feel free to steal :)

I tried out transcluding buttons in the top search results -> http://welford.github.io/ 

[James Anderson]

The screen needs to be small enough so that the sidebar gets hidden for the  buttons to show in the search.

James

[Mat]

Jed - thank you! I would say mobile is likely the single most important type of theme we will have. I recall an interview with Googles Eric Shmidt where he was asked what areas he considered important for Google. He had only one answer: mobile! ...and that was something like ten years ago!!!

I hope it gets so polished as to include it in core. I don't know if you consider the palette and other "Jed specifics" necessary part of your actual theme, but I think that if there was a mobile vanilla or starlight theme, this would be the straightest road into core. Just guessing.

<:-)

[Jed Carty]

It is packaged as a theme now.

Some notable improvements:

The configuration is now much simpler than it was
You can define preset configurations that you can then change to using a button
There are two presets currently included with the theme, the default one and a version without the top menu.
There is a tool that (hopefully) makes it easy to create your own preset configurations

Mat,

While I agree that mobile devices are very important, I think that it is a bit ironic that a representative of google said that. As far as I can tell their design philosophy for mobile devices is to remove as much functionality as they can. This isn't just google, but they do seem to be the worst where every mobile option they have keeps losing functionality that the desktop versions have.
I am not consistent enough with colour schemes I like that I like to include any colors that aren't easy to change in anything that I make.

[David Gifford]

Hi Jed, just played with this on my ipad on Chrome. Nice and clean. I like the panels that open from the left. I could see myself using this more and more.

Heads up that on Chrome on iPad, when holding it so the screen is tall rather than wide, the left side of the tiddler slides under the left icons, whereas when holding it widescreen, the icons are to the left of the tiddlers, as desired.

Dave

[Måns]

Hi Jed

Thank you very much :-)

Just for you to enjoy (show that your work is used, apreciated and tinkered with) - I've setup my own little danish "mobile notes wiki" on tiddlyspot: http://mobilnoter.tiddlyspot.com/ 

My addition/contribution is a simple macro/system for creating and handling notes based on your BottomOfTiddlerMacro ... (a Danish variant taylored for notes)

I have not had the time to translate any of it into English yet - so you might get a little confused... - however I think you'll get the idea anyway :-) 

I've got the same problem with tiddler width as Dave describes on my Android mobile - it looks fine on my tablet (Also Android) when it is in landscape mode. When it is in "vertical mode" The title of the top tiddler is hidden by the top menu - even if I use the "Set Tiddler top position" button...

Cheers Måns Mårtensson

[Jed Carty]

The problem with the tiddlers changing shape when the screen is too small is something I had fixed before, I must have left that part out when I put everything together into a theme. I don't remember what fixed that, but it shouldn't be too hard to find. I will update the theme when I find it.

And Måns, I think this is the first time I have seen someone actually using something I have made. Seeing that has made me far happier than it probably should. Thanks!

[Jed Carty]

Ok, I found the problem and I don't know how to solve it. If you set the sidebar breakpoint to 0px in theme tweaks than it solves the problem, but when I put a tiddler in the theme to override the default value it isn't used. Importing the tiddlers individually works, but when they are packaged in the theme it doesn't work.

I have no idea what the solution for this is other than having to set the values manually, I could make a button or something to do it, but I would like for it to happen when you switch themes. Does anyone have a solution for this?

[Måns]

Hi Jed

>If you set the sidebar breakpoint to 0px in theme tweaks than it solves the problem,...

This actually solved both problems :-) (The top most tiddler's heading being covered by the Top Menu and the sidebar tools overlapping the tiddlers) 

Great!

Thank you very much!

Cheers Måns Mårtensson

[Jed Carty]

The problems should be fixed now, just import the newest version of the plugin either from the demo site, wiki reference wiki or through my plugin library. To use the plugin library just import this tiddler and you should be able to access it through the control panel the same way as the official library.

I changed names so everything is named consistently now and the plugin is no longer dependent on the vanilla theme so changes to that theme won't break anything. All of the configuration has been moved into the theme tweaks tab.

If there actually is interest in this going into the core (and perhaps even if it doesn't go to the core) it is going to need to support translations. I have no idea how that works, but there shouldn't be too many places where translation would be needed, only for a few of the icons and the new parts of theme tweaks tab.

[Diego Mesa]

This is great! Just wondering if you're still working on it?

[Jed Carty]

I forgot that this existed, so I haven't been working on it. I will add it to my new setup and hopefully it will get some attention.

[Jed Carty]

It turns out that I like using this theme now. I cleaned it up a tiny bit and put it on GitHub here https://github.com/OokTech/TW5-MobileTheme

I will hopefully have a demo for the theme put up sometime that has it packaged nicely in a tiddlywiki style for the single page version.