[Theme] Moments: A little color won't hurt

1,130 views
Skip to first unread message

Riz

unread,
Nov 26, 2016, 12:05:54 PM11/26/16
to tiddl...@googlegroups.com
Moments is a beautiful free and responsive theme available for wordpress. This is an adaptation of the same for TW5 platform. All the design credits goes to the site and the original designer.

Screenshots: http://imgur.com/a/IgzJo

To see demo and download the plugin, go to: http://tesseractmoments.surge.sh/

If you cannot see the left sidebar as shown in the screenshots, try zooming out a bit.


Do let me know your inputs and feedbacks

Jan

unread,
Nov 26, 2016, 3:50:16 PM11/26/16
to tiddl...@googlegroups.com
Hi Riz!
This is your secound theme now which is absolutely sleek.
Bravo and Thanks a lot.
There's only tiny problems I remarked when testing: The Searchresults are a little in the way in mobile view. The fonts of the Selectionfields in the tools are invisible.
 Thanks again
Jan


PS: A big necessity for me would be a cool and clear theme for presentations - that means something for the Zoomin' StoryView with a switch forward and backward. Do you have any Ideas for that?
--
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/46e8bc61-34aa-494a-9266-3742fba19035%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Riz

unread,
Nov 26, 2016, 6:17:14 PM11/26/16
to TiddlyWiki

Hi Jan

Thank you!!


Searchresults are a little in the way in mobile view.
Can I trouble you for a screenshot? I had configured in such that under the breakpoint(960px), it would switch over to the classic sidebar (as shown in ghostwriter theme.). If it doesn't work, I might have to check my CSS.

This might be a good opportunity to ask this. As somebody suggested in the hangouts -do you think it will be good idea to get rid of drop dwons completely in the mobile view?The initial plan was to set it so that search will be triggered only when the search button is clicked and the results will be shown in a new tiddler. I was hesistant because it might confuse those who are expecting the familiar workflow.


Selectionfields in the tools are invisible.

Yeah -sorry, my fault. I intented to set shadows for them, but forgot to. I am setting out on a small journey right now, will get to it as soon as I get back at night.

  Clear theme for presentations

Assuming that you are already familiar with the  http://tiddlywiki.com/talkytalky/ I have always wanted to try twine, given that it gives output in TW format. May be it will work for you
 

BJ

unread,
Nov 27, 2016, 3:29:40 PM11/27/16
to TiddlyWiki
Looks very good!

there is a problem with you example wiki - when I look at the contents of your plugin (by clicking on it from the wiki's list of plugins), I see that a number of the plugins' tiddlers are overridden by non-shadow tiddlers - it would be good to be certain that your wiki is representative of your plugin in usage.

all the best

BJ

Sylvain Naudin

unread,
Nov 27, 2016, 3:57:01 PM11/27/16
to TiddlyWiki
Another great piece of work ! It look great :)

Congrats Riz !


Sylvain

Jan

unread,
Nov 27, 2016, 5:14:15 PM11/27/16
to tiddl...@googlegroups.com
Hi Riz,
You are right, the searchresults were a phantom produced by my Smartphonesimulator. Sorry for this hint, it was meant well...

TalkyTalky was the first theme I adapted for slides but it is not reponsive at all.
I would like to have something  very reduced with a good mechanism between screen-size font-size.

Yours Jan
--
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.

Riz

unread,
Nov 28, 2016, 12:32:52 AM11/28/16
to TiddlyWiki


Minor update: Toolbar checkboxes are given darker box shadows to enhance its visibility.


@BJ: Thank you!! I am glad that you are enjoying it. In my personal TWs I use a lot of your work.
As for the over-ridden ones - that won't be a problem. There are stylesheets where CSS values change as the user starts using the theme. Hence the overriding. It won't affect the theme, the over-ridden ones just reflect your usage and choices.


Riz

unread,
Nov 28, 2016, 12:33:14 AM11/28/16
to TiddlyWiki

@ Sylvain. Thanks. Always a pleasure to hear from you.

Riz

unread,
Nov 28, 2016, 12:49:21 AM11/28/16
to TiddlyWiki


Sorry for this hint, it was meant well

Not an issue at all.

As for presentation - only yesterday I read in TiddlyWikiDev forum that someone is trying to adapt reveal.js to TW5. If that happens, that will be a massive upgrade for TW as a presentation creater.

HC Haase

unread,
Nov 28, 2016, 4:59:00 AM11/28/16
to TiddlyWiki

again this looks really nice!

Personally I don’t like the sidebar (overlay and lack of overview) but I love the theme for the tiddlers. I am wondering if it is possible to copy only the body layout. maybe deleting all but

  • $:/tesseract/Moments/OutsideFonts and
  • $:/tesseract/Moments/Main

???

or if it can be achieved by modifying the layout values at the controlPanel > Appearance > Theme tweaks for e.g. the vanilla theme ??? or is there stuff going on that don’t have a value there??

Riz

unread,
Nov 28, 2016, 5:40:13 AM11/28/16
to TiddlyWiki


To copy the body layout you will be better off with the usual Inspect element mode. Few of the stylesheets depend on each other so deleting one by one could end up with having to put in more effort than it is worth.

When you say you want to remove sidebar, do you mean you do not want a sidebar at all or you want to combine the usual sidebar with the theme?

HC Haase

unread,
Nov 28, 2016, 6:43:43 AM11/28/16
to TiddlyWiki

thanks. I guess I will have to do some manual work then. :)

When you say you want to remove sidebar, do you mean you do not want a sidebar at all or you want to combine the usual sidebar with the theme?

I want to combine the usual sidebar with the theme!

Riz

unread,
Nov 28, 2016, 6:50:38 AM11/28/16
to TiddlyWiki

There are media-queries in place that hides the usual sidebar in the desktop view. The sidebar class in itself is modified to be hidden in the desktop in addition to the topbar menu which switches the sidebar. Once that is done you need to restructure tiddler frame and edit frame to act in accordance with the usual sidebar, as they are not. Also the topbar will have to be modified for the same. All these plus the necessary changes when you go below the media-breakpoint will get you what you want.

Jan

unread,
Nov 28, 2016, 3:30:31 PM11/28/16
to tiddl...@googlegroups.com
Hi Riz,
thanks for the information about reveal.js
I already had thought about a tool to export to impress.js File
Reveal.js looks more appropriate for TW because  supports more formats and the file would require less customisation like the spacial coordinates data necessary in impress.
But that's off topic now in your thread...

best wishes Jan
--
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.

Andreas Hahn

unread,
Nov 29, 2016, 12:27:52 PM11/29/16
to tiddl...@googlegroups.com

Hello Riz,

it is good to see someone working on new themes for TW, I myself tried it once, but I never got this far. I also really like the theme/UI you picked out, I think it can fit a wiki pretty nicely. There are two things I've noticed though:

  • I can't seem to find how to actually edit an entry .. or close it again for that matter. I might be blind though.
  • The "featured post" section might be useful on websites, within a wiki I could imagine that one could put something more useful there, i.e. tools or at least the contents of the "featured" entry, so that one could build something into there.

Other than that however, thanks for doing this, nice work!

/Andreas

Josiah

unread,
Nov 29, 2016, 1:41:43 PM11/29/16
to TiddlyWiki
Riz, out of his interest to play with TW flexibility, adapting Wordpress themes, is absolutely spot on IMO.

More than anything TW needs a nice looking theme that works on ALL devices, always, without hassle, without fail.

He is really helping bring that possible reality closer. Its still not quite 100% there but his work definitely edges incrementally towards that simple, elusive, inclusive aim.

Best wishes
Josiah

Riz

unread,
Nov 29, 2016, 9:50:24 PM11/29/16
to TiddlyWiki


Hi Andreas,



I can't seem to find how to actually edit an entry

The usual edit/close/more buttons are still there, they are just transparent untill you hover over the usual place in which they are housed. You can go to Control Panel > Appearance > Moments to change this setting to keep all buttons opaque or just the close button opaque.

 The "featured post" section might be useful on websites, within a wiki I could imagine that one could put something more useful there, i.e. tools or at least the contents of the "featured" entry, so that one could build something into there.

Yeah, it could be. However this was an attempt to create a blog out of TW5.  It is a theme intended for the public face of your TW5. With its easy static site generator and easier templating, TW5 could stand its ground against Hugo or Pelican.

Riz

unread,
Nov 29, 2016, 9:51:43 PM11/29/16
to TiddlyWiki
Thank you Josiah :-)

Måns

unread,
Dec 1, 2016, 3:57:19 AM12/1/16
to TiddlyWiki
Hi Riz

Thank you very much for sharing your adapted Wordpress theme here.
Great to have more options for choosing themes in a non-destructive way.

4 questions:

a) I changed the language to danish but the search input field (in the left sidebar) still shows "search" in english instead of the danish translation "søg". How do I change this?

b) The "tgc-leftmenu animated fadeIn" header "logo"(<h1 class="logo" style="color:#000;margin-top: 35px;"><span class="tc-inline-style" style="font-weight:900;paddding-top:35px;">Search</span></h1>) is "Search" (again in english). 
I found out that I could change the text in the tiddler: "$:/tesseract/Moments/SearchSidebarPopup".
Is there a way to make it change with the choosen language?

c) Every time you click a menu item or open a popup from the sidebar the wiki is marked as "dirty". 
I'd like to change this - as I keep forgetting if I made changes the the content - and I don't want the wiki to get "dirty" just by reading it. 
Is it possible to change this behaviour?

d) I'd like the slidein popup to close when you click outside it  - so you don't have to click the close button or the menu item once again to close it.
Is it possible to make it behave like this?

Thanks again.

Sincerely Måns Mårtensson

Ps: I'm using two of your themes here:

Den lørdag den 26. november 2016 kl. 18.05.54 UTC+1 skrev Riz:

Riz

unread,
Dec 1, 2016, 10:42:19 PM12/1/16
to tiddl...@googlegroups.com
Update

Done, done, done and done.

Thank you -for multiple reasons. First of all this is the first time I am actually seeing someone using the themes. The issues you raised were something I was having - not just for this theme but for all the other themes I have been working on. I was working around it with a few tricks. Yesterday when you posted I finally sat down to see if I can find a real solution -and et voila, it was there. Last, the piece of code you pointed reminded me that I forgot to include Ton Gerner in the Acknowledgements. The left sidebar is mostly derived from his work, and it is to show that I kept the class names as his original ones.


Find the update at: http://tesseractmoments.surge.sh/

Riz

unread,
Dec 2, 2016, 12:40:51 AM12/2/16
to TiddlyWiki


Also I see that in the ghostwriter theme the username fails to appear in your blog. Necessary corrections have been made and pagination has been added to the ghostwriter theme. In case you do not want pagination, it can be turned off from Control Panel > Appearance > Ghostwriter.

I hate to dig up the ghostwriter thread to post this, otherwise this info has been posted to relevant places.

Ákos Szederjei

unread,
Dec 2, 2016, 4:37:55 AM12/2/16
to tiddl...@googlegroups.com
It seems to me that I can not use the usual [[Link name|tab link]] syntax in
tabs. Is there a way to do that.

For example I would like to have a tab names "First" but the tiddler name is
"First Tab".

Thanks

Ákos

Måns

unread,
Dec 2, 2016, 6:17:26 AM12/2/16
to tiddl...@googlegroups.com
Hi Riz

:-) :-) :-) :-)

Thank you so very much!
I'm impressed that you were able to accommodate all four requests.

Now my contents popup ("Indhold" in danish) has centered text (middle aligned list items) .
I see that your original contents popup is aligned to the left and I don't see how mine is different from your's?
 
Can you tell why - just by looking at it? 

http://xn--mns-ula.dk/dansk/filosofi/#TableOfContents looks fine - it is when it is opened in a popup from the sidebar it gets centered..

Cheers Måns Mårtensson

Den fredag den 2. december 2016 kl. 04.42.19
 UTC+1 skrev Riz:

Måns

unread,
Dec 2, 2016, 9:12:35 AM12/2/16
to TiddlyWiki, ak...@szederjei.eu
Hi Riz

Thank you very much for noticing the absense of the author name..
Your theme adaptions for TiddlyWiki are very useful and pleasing to the eye.
I like your addition of the pagination too :-)

Great job!

Regards Måns Mårtensson  

Måns

unread,
Dec 2, 2016, 9:31:17 AM12/2/16
to TiddlyWiki
Hi Riz

Thank you very much for noticing the absense of the author name..
Your theme adaptions for TiddlyWiki are very useful and pleasing to the eye.
I like your addition of the pagination too :-)

Great job!

Regards Måns Mårtensson  

Riz

unread,
Dec 2, 2016, 10:24:28 AM12/2/16
to TiddlyWiki, ak...@szederjei.eu

Hi Mans,

I was inspecting your TW. The problem is there are few vestiges of old version of moments. I have tweaked the plugin so that this won't happen again. Here is what you got to do.

1. Drag and drop the plugin once more to your TW and install it.
2. Navigate to the plugin tiddler.
3. You will find that there are three overridden tiddlers - $:/tesseract/Moments/animate.css, $:/tesseract/Moments/Options and and $:/tesseract/Moments/Sub-CSS. Open these three tiddlers and delete them. Your issues must be resolved if my assumption is correct.

I am glad you liked it :-)

Riz

unread,
Dec 2, 2016, 10:30:17 AM12/2/16
to TiddlyWiki, ak...@szederjei.eu


Ákos Szederjei wrote:
It seems to me that I can not use the usual [[Link name|tab link]] syntax in tabs. Is there a way to do that.

For example I would like to have a tab names "First" but the tiddler name is "First Tab".



 Hmmm, I need some specification here. Are you talking about sidebar tabs? If yes, the way to achieve what you said is add the field named "caption" to your tiddler and specify value of the field as the tab name (eg: First).

Ákos Szederjei

unread,
Dec 2, 2016, 11:48:24 AM12/2/16
to tiddl...@googlegroups.com
No, not the sidebar. Where I have a Tab on the top and the box below is for
the text. Tabs like this one: http://tiddlywiki.com/#Community

The code is: <<tabs "Forums Latest Tutorials Resources Examples Articles
Meetups" "Latest">>

And the [[Tiddly Name|Latest]] syntax is not working.

Ákos
--
Ákos Szederjei

----
MBL: +36 30 2289393
EML: ak...@szederjei.eu
GPG: 0x08F75808

Måns

unread,
Dec 2, 2016, 12:00:12 PM12/2/16
to TiddlyWiki, ak...@szederjei.eu
Hi Riz

Thank you very much for looking into it. 
It worked perfectly to reinstall the theme and delete three of the tiddlers.

Thanks again, again and again :-)

Regards Måns Mårtensson

Riz

unread,
Dec 2, 2016, 1:14:48 PM12/2/16
to TiddlyWiki, ak...@szederjei.eu


Ákos Szederjei wrote:
No, not the sidebar.  Where I have a Tab on the top and the box below is for
the text.  Tabs like this one: http://tiddlywiki.com/#Community

The code is:  <<tabs "Forums Latest Tutorials Resources Examples Articles
Meetups" "Latest">>

And the [[Tiddly Name|Latest]] syntax is not working.

Ákos


I must be mistaking something here, but AFAIK, [[Tiddly Name|Latest]] is the syntax for Links. If you want a tab to show a different name than the heading, as I said in my previous comment, you can do it by creating and filling out the caption field in that tiddler. I have made no theme specific modification to this TW5 behaviour. Do try to fill the the caption of the tiddler titled "Latest" and let me know.

Ákos Szederjei

unread,
Dec 2, 2016, 4:26:00 PM12/2/16
to tiddl...@googlegroups.com
This works: <<tabs "Concept Latest Tutorials Resources Examples Articles
Meetups" "Latest">>

This does not: <<tabs "[[Concept|Character Concept]] Latest Tutorials
Resources Examples Articles Meetups" "Latest">>


Ákos

Rizwan Ishak

unread,
Dec 2, 2016, 11:40:00 PM12/2/16
to tiddl...@googlegroups.com
Yes I understand that. Did you try doing what I said?

  Original Message  
From:ak...@szederjei.eu
Sent:3 December 2016 2:55 AM
To:tiddl...@googlegroups.com
Reply to:tiddl...@googlegroups.com
Subject:Re: [tw] Re: tab naming question


Ákos

--
Ákos Szederjei

--

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/9961676.EEo5Peudyd%40michael-pc.

Hiru Yoru

unread,
Dec 3, 2016, 4:22:23 PM12/3/16
to TiddlyWiki
Riz,

The theme is excellent! Many compliments!

I have some feedback. I hope it is useful.

The way that a selected tab is denoted in the 'More' section results in little prongs above and below. Is that on purpose? Perhaps it is my browser, but it gives a sensation of the tab being square and round simultaneously, which is confusing to me.

I feel like the rounded quality of the tags and the search box gives a great continuity. Have you considered perhaps rounding the tabs like this?

This is what I mean:


I hope you don't mind my suggestion. I used the 'inspect' feature on Firefox to change some of the CSS in real-time. I made the radius for the tabs the same as the tags. I added 1em padding at the left so the text didn't get obscured. I changed the colors a bit and when making the 1px right border of the selected tab the same color as the background, it got rid of the prongs I mentioned.

Again, I hope you don't mind my humble suggestions. The theme is excellent. Thank you for sharing it with us!

Kind regards,
Hiru



On Friday, December 2, 2016 at 11:40:00 PM UTC-5, Riz wrote:
Yes I understand that. Did you try doing what I said?

  Original Message  
From...@szederjei.eu


Sent:3 December 2016 2:55 AM

Riz

unread,
Dec 3, 2016, 9:02:14 PM12/3/16
to TiddlyWiki



The way that a selected tab is denoted in the 'More' section results in little prongs above and below.
Can I ask for a screenshot of that? I have not modified the More Tab in any way. It is supposed to look as it always does - ie.


 

Hiru Yoru

unread,
Dec 4, 2016, 3:05:02 AM12/4/16
to TiddlyWiki
That is how it looks on mine. You don't see the little prongs? I studied art and graphic design so perhaps I have been trained to notice these things where others do not.

John Newell

unread,
Dec 4, 2016, 5:59:31 PM12/4/16
to TiddlyWiki
Hi Riz - Moments is Beautiful - congrats.

As a standalone website - it rocks.
If I want to HIDE the sidebar links "TOOLS" and "MORE" - how do I do that?
Before I test this TWtheme with the READONLY plugin : do you know if it applies successfully?

cheers and Kudos - "Ghostwriter" has been a favourite ghost theme of mine since it's availability early on with ghost.org
Great adaptation.

Riz

unread,
Dec 4, 2016, 8:17:10 PM12/4/16
to TiddlyWiki



If I want to HIDE the sidebar links "TOOLS" and "MORE" - how do I do that?

Usual TW5 way take off their tags.


Before I test this TWtheme with the READONLY plugin : do you know if it applies successfully?

Nope. I am curious although.

Thanks for the words. 

John Newell

unread,
Dec 4, 2016, 11:52:56 PM12/4/16
to TiddlyWiki
"Usual TW5 way take off their tags." -     oh, thanks - ( embarrassed for not thinking about that ! )
"Application of READ ONLY plugin to MOMENTS theme " - I will let you know once I have applied it - seems appropriate for website where logins and access is not needed by anyone other than author/editor

Eskha

unread,
Dec 6, 2016, 5:07:46 AM12/6/16
to TiddlyWiki
Hi Riz,

This is really a great theme for TW5.


May I propose an other way to display lists with the following CSS :


/* Simple Paragraph */

html .tc-tiddler-body p {
    margin: 0.8em 0em 0.2em 0em;
    padding: 0em 0em 0em 0em;
    text-indent: 2em;
    text-align: justify;
    text-justify: newspaper;
}


/* Unordered lists */

html .tc-tiddler-body ul {
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 3em;
    text-align: justify;
    text-justify: newspaper;
}

html .tc-tiddler-body ul ul {padding-left: 1.25em;}


/* Ordered lists */

html .tc-tiddler-body ol {
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 3em;
    text-align: justify;
    text-justify: newspaper
}

html .tc-tiddler-body ol {list-style-type:decimal;}
html .tc-tiddler-body ol ol {list-style-type:lower-alpha;}
html .tc-tiddler-body ol ol ol {list-style-type:lower-roman;}
html .tc-tiddler-body ol ol ol ol {list-style-type:decimal;}
html .tc-tiddler-body ol ol ol ol ol {list-style-type:lower-alpha;}
html .tc-tiddler-body ol ol ol ol ol ol {list-style-type:lower-roman;}
html .tc-tiddler-body ol ol ol ol ol ol ol {list-style-type:decimal;}

html .tc-tiddler-body ol ol {padding-left: 1.25em;}


/* All lists item */

html .tc-tiddler-body li {
    margin: 0.2em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    text-align: justify;
    text-justify: newspaper;
}


Therefore, this wiki text :

Lorem ipsum dolor sit amet. Aenean sagittis quam urna, sed fermentum lorem feugiat sit amet. Fusce fermentum consequat felis ac ullamcorper. Duis quis viverra ex. Integer suscipit ante magna, sed sagittis neque pellentesque at.

* consectetur adipiscing elit
** pellentesque sagittis
*** in nisl vitae condimentum
**** morbi viverra eros ligula
* Proin euismod consequat ante, eget auctor libero sagittis nec.


Integer et nunc viverra, pulvinar neque in, pellentesque arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras molestie massa dui, sed dictum mauris finibus vel. Ut erat leo, elementum non orci nec, fringilla bibendum magna.

# Mmaecenas ut purus
## non nibh ultricies sollicitudin
### nam elementum consectetur cursus.
# quisque accumsan pharetra velit vitae tempus.
# Nulla varius sagittis consequat. Etiam pellentesque iaculis sapien, in molestie sapien molestie quis. Cras sit amet porttitor tellus, vulputate rutrum urna. Cras ligula ligula, congue non auctor eu, lobortis finibus nunc.


will look like this:


instead of this:



Best regards.

Eskha
Auto Generated Inline Image 1
Auto Generated Inline Image 2

Riz

unread,
Dec 6, 2016, 11:00:00 PM12/6/16
to TiddlyWiki
Thank you Eskha.

Regarding lists -that is actually a valid suggestion. Such a tweak can be applied to the TW5 as a whole rather than a single theme. I had previously plans about setting up a blog dedicated to TW5 UI only. If I ever dust off that plan - may I include this in there with your name? If you have a public TW5, I will take a note to link to that.

PS:
 text-align: justify - how many browsers support that? 

Jan

unread,
Dec 7, 2016, 4:11:53 AM12/7/16
to tiddl...@googlegroups.com
Hi Riz,
great idea to summon up UI related topics in a blog. My Ideal would be a modular way to put themes together and I would love to have a section dealing with menus...
Yours Jan


PS: text-align: justify works throughout standart browsers.
--
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.

Danielo Rodríguez

unread,
Dec 7, 2016, 6:25:03 PM12/7/16
to TiddlyWiki
Very good job! Works almost perfect on mobile.
The only things I miss are:

Close the sidebar when I click on a link
I would like to have bigger buttons on the sidebar
I would prefer to have the search bar outside of the sidebar.

Thank you very much for for your work on theming and making them usable for mobile users, whose are usually leaved apart.

Riz

unread,
Dec 7, 2016, 11:39:12 PM12/7/16
to TiddlyWiki


On Thursday, 8 December 2016 04:55:03 UTC+5:30, Danielo Rodríguez wrote:
Very good job! Works almost perfect on mobile.

Thank you :-) 

Close the sidebar when I click on a link

I wanted this too. The hurdle is, most of the core tabs lists links. However I suspect that there could be a mechanism involving the LinkCatcher Widget. There was no examples given in the tiddlywiki.com, so I never figured out how to use it. In the end I doubt if it can be achieved without modifying all core tabs and creating a template for all user created tabs. I would be happy to be proven wrong.
 

I would like to have bigger buttons on the sidebar

This can be achieved as usual, I have not kept most of the tabs native -so something like
 .tc-sidebar-lists .tc-tab-buttons button {font-size:20px !important}
 will get you what you want.

 

I would prefer to have the search bar outside of the sidebar.

Where would you rather it be? Better, can you show a mobile website with searchboxes placed in a manner you would prefer?
 

Thank you very much for for your work on theming and making them usable for mobile users, whose are usually leaved apart.


I remember your rant sometime back!!

BJ

unread,
Dec 8, 2016, 5:10:10 PM12/8/16
to TiddlyWiki
to modify the mobile view:

modify $:/core/ui/SideBarLists
to include the link catcher:

<<qualify "$:/state/tab/sidebar">>
<$linkcatcher set="$:/state/sidebar" setTo="no" message="tm-navigate">
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" />
</$linkcatcher>
</div>


for the desktop view modify $:/tesseract/Moments/DesktopSidebarPopup:


\define sidebarbtnclose()
<$action-setfield $tiddler="$:/tesseract/Moments/DesktopSidebarPopup" display="hide"/>
<$action-setfield $tiddler="$:/tesseract/Moments/animate.css" titleiconindex="2"/>
\end
<$linkcatcher actions=<<sidebarbtnclose>> message="tm-navigate">

<$reveal type="match" state="$:/tesseract/Moments/DesktopSidebarPopup!!display" text="show" retain="yes">


all the best BJ

Riz

unread,
Dec 8, 2016, 10:44:28 PM12/8/16
to TiddlyWiki
Okey -so linkcatcher works like - if the message "tm-navigate" is generated by any of the child elements, perform these actions too in addition to navigation?

Thnaks BJ, that will help me a lot in my personal projects.

BJ

unread,
Dec 9, 2016, 4:26:24 AM12/9/16
to TiddlyWiki
In effect, yes. clicking on a link produces a tm-navigate message that travels to the root where it is processed by the NavigatorWidget. I have used the linkcatcher to intercept the message on the way to add so extra actions.

Danielo Rodríguez

unread,
Dec 9, 2016, 5:17:02 PM12/9/16
to TiddlyWiki
Riz, if you update your theme to include the closing sidebar don't forget to give us a shout!

Riz

unread,
Dec 9, 2016, 10:00:44 PM12/9/16
to TiddlyWiki


On Saturday, 10 December 2016 03:47:02 UTC+5:30, Danielo Rodríguez wrote:
Riz, if you update your theme to include the closing sidebar don't forget to give us a shout!

This might depend solely on the user how they want the mobile sidebar to be - some might want to add multiple items to storyriver before they close the sidebar, some might prefer as Danielo wanted it. For those who would like to close the sidebar once the link is clicked, they may drag and drop the attached JSON file to enable it. I have done nothing except copy and paste the solution given by BJ.

PS: The info has been updated on http://tesseractmoments.surge.sh/ too.
$__core_ui_SideBarLists.json

Eskha

unread,
Dec 13, 2016, 6:06:26 AM12/13/16
to TiddlyWiki
Hi Riz,

Sorry, for the late answer.

No problem for including this. (I dot not have online active TW).

For the "text-align : justify" the answer is not so easy. The property itself is well-supported (see: http://caniuse.com/#search=text-align).
However to have a good-looking display (without long river of blank space), it is helpfull to add hyphenation with:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
and this property is only supported by 33% of the browsers (http://caniuse.com/#feat=css-hyphens)

Best regards.

Eskha

Danielo Rodríguez

unread,
Dec 13, 2016, 1:45:44 PM12/13/16
to TiddlyWiki
Would you consider making a separate plugin just for the sidebar? I find it quite useful on mobile.

Regards

Riz

unread,
Dec 13, 2016, 9:04:42 PM12/13/16
to TiddlyWiki


Will do, in a couple of days.

Danielo Rodríguez

unread,
Dec 14, 2016, 3:26:00 AM12/14/16
to TiddlyWiki
No hurry.

I would like to include your plugin as part of the default edition of Noteself, which is becoming more and more mobile friendly every day.

Danielo Rodríguez

unread,
Dec 14, 2016, 3:27:48 AM12/14/16
to TiddlyWiki
As a suggestion, I would fill the rest of the screen (the one that is not part of the menu) with a black translucent div. That way you will be able to attach a click listener to it and close the menu in case the user clicks outside the menu.

Regards

Sylvain Naudin

unread,
Oct 9, 2017, 2:56:42 PM10/9/17
to TiddlyWiki
Hello Riz,

A french user has post on our french forum that Moments doesn't work well with TiddlyWiki 5.1.14.

Have you notice that and/or is there an available update ?


Cheers,
Sylvain

Arlen Beiler

unread,
Oct 9, 2017, 4:53:18 PM10/9/17
to TiddlyWiki
Wow, nothing like an old thread popping up in your inbox...and you're like "this is incredible!" Anyone have a link to his first theme? :D

--
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+unsubscribe@googlegroups.com.

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

Riz

unread,
Oct 9, 2017, 10:44:00 PM10/9/17
to TiddlyWiki
I ll check and get back to you. Any idea what is specifically the issue?

Riz

unread,
Oct 9, 2017, 10:47:49 PM10/9/17
to TiddlyWiki
@Arlen

Thanks for the kind words. You can find ghostwriter here-
https://tesseract-index.bitbucket.io/themes/ghostwriter.html

Sylvain Naudin

unread,
Oct 10, 2017, 5:08:56 AM10/10/17
to TiddlyWiki


Le mardi 10 octobre 2017 04:44:00 UTC+2, Riz a écrit :
I ll check and get back to you. Any idea what is specifically the issue?

You can check the screenshot on the post linked. It's a core update on $:/core/modules/widgets/keyboard.js, line 36, and about div to span.

Sylvain
Reply all
Reply to author
Forward
0 new messages