Testing new TW5 Theme: etch

[Bob Robison]

I've just discovered how to (mostly) get a TW5 tiddlywiki up on tiddlyspot, though I think I still have some issues to work out.  Anyway, I have been playing with creating a new theme -- mostly just to see how things work.  It is most assuredly not ready for prime-time, but if anyone wants to take a peek and see what they think, I would appreciate the feedback.  It is all part of the learning process.

You can see current state at:  http://tw5gray.tiddlyspot.com

bob

(grayeul)

[Ton Gerner]

Hi Bob,

I got an error when looking at your TiddlySpot site:

Syncer error: XMLHttpRequest error: 404

No idea why (I'am not a programmer).

Impressive what you have done with a theme so far. You did more than I did to create my 'Hidden sidebar' theme ;)

I do like the 'Close other tiddlers' button as well.

Personally - and for sure that is a matter of taste - I should use a bigger line height: it will be easier to read.

I will follow your progress since it is very interesting.

Cheers,

Ton

[ken robertson]

G'day Bob,
"Syncer error: Error: XMLHttpRequest error: 404"

That's possibly not a good thing.

-- 
Regards 
Ken 

--
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 http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

[Dylan Kinnett]

Bob,

This is off to a good start and I'm especially fond of the "close others" button.

To my eye, the line-height is a little small for legibility. I would try something more like this:

body.tw-body {line-height: 1.3em;}

[Tobias Beer]

Hi Bob,

I think your default line height doesn't make for a good reading experience.

body.tw-body {
   line-height: 0.94em;
}

Was that a design choice?

Tobias.

[Ton Gerner]

Hi Bob,

Do you mind if I use your 'close other tiddlers' icon?
I think it is expressing perfect the use.

Cheers,

Ton

[Bob Robison]

Feel free to use the icon.  As I mentioned, I basically stole the idea from @pmario http://pmario.tiddlyspace.com.  At some point I'll probably put in a pull-request to get this theme added to the main branch, if Jeremy thinks it is helpful -- but I need to work on it a bit more.

However -- I will say that the compressed line-height was intentional, as I like to cram a bunch of stuff onto the page at once.  I know this doesn't appeal to everyone, which is why I made the line-height one of the adjustable parameters in the ThemeTweaks tiddler.  But, I wanted to show what it looks like when it is fairly compressed. :)

bob

[Ton Gerner]

Thanks,

Ton

[David Gifford]

Hi Bob

How could I get just the stuff needed from Etch to widen the story river as the screen widens? I don't want the other color and text formatting changes. Could you either do a more limited version or send me the CSS, etc, to do it? I have a widescreen laptop and prefer the wide stuff, but I also publish my notes to the web so I can view them on my iPad, so a responsive story river fits my needs exactly. But I already have my stylesheet the way I want it. I tried adding Etch to my main TW5, and it messed up the edittemplate.

Blessings,

Dave

[Bob Robison]

Dave,

I think the following were the key CSS changes required to get the adaptive widening of the story-river.  I don't know what other consequences there may be, but hopefully if you just do the following you will get the change you are after:

1 - For story-river class:  remove width property, change position from relative to absolute, set right: to whatever width you want your sidebar to be (I used a reference to settings##sidewidth the way I did it in etch.

2 - For sidebar-header class:  Set width explicitly (again here I used settings##sidewidth parameter), remove padding (or adjust), and remove left position param.

3 - For tw-tiddler-frame class, just remove explicit width setting.

Hope that helps,

bob

[Ton Gerner]

Hi Dave,

Did you manage to automatically widen your story-river?
For me it was to difficult: it means a new theme (based on your own theme). So I left it for the moment.
I made a "non-programmers workaround".

If you can live with:

1) ticking a checkbox to switch widths.
2) only one - configurable -  wide tiddler width

there is an easy solution.

If you are interested, just let me know.

Cheers,

Ton

[David Gifford]

Hi Ton

I will try this but is on hold since I am really busy and since this would require some time to understand it, experiment with it, concentrate, and get it right. Maybe in January...

Dave

--
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/877B0x2ejfQ/unsubscribe.
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 http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
David Gifford
Christian Reformed World Missions, Mexico City

[Ton Gerner]

Hi Dave,

Try my workaround; it is easy to understand and is functional in a few minutes ;)

It is based on Jeremy's TaskManagementExample and switches the $:/tags/stylesheet tag.

I added a tab Styles to the SideBar.

Create a tiddler [[Styles]] tagged with $:/tags/SideBar which contains the following code:

<$list filter="[!has[draft.of]tag[stylewide]!tag[$:/tags/stylesheet]sort[created]]">

<$checkbox tag="$:/tags/stylesheet"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox>

</$list>

<$list filter="[!has[draft.of]tag[stylewide]tag[$:/tags/stylesheet]sort[created]]">

<$checkbox tag="$:/tags/stylesheet"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox>

</$list>

Create another tiddler [[Style 'wide']] tagged with 'stylewide' which contains":

```
@media (min-width: 770px) {
    .tw-tiddler-frame {
        width: 686px;  /* default 686 px; */
    }
}
.sidebar-header {
     left: 770px;  /* default 770px */
}
```

You can now adjust the width you want.
E.g. you want a 500px wider tiddler width:
- Set tw-tiddler-frame width to 1186px
- Shift the SideBar the same amount: left 1270px.

And there you are.
Ticking the checkbox Style 'wide' increases your tiddler width and your SideBar shifts with it.

Cheers,

Ton

[David Gifford]

ok, just that I would prefer it to be without checking a box, since it is not just for me but for others. So I may do your workaround soon, but eventually would like to be able to do the other. Blessings, Dave

[Julio Peña]

Hello Bob and all,

I like the "close others" mechanism a lot.
I have added the icon button successfully to my tiddlywiki.
For the functionality aspect...were would I look so that make my button work?


Thanks in advanced for the guidance.

Best regards,

Julio

[Ton Gerner]

Hi Julio,

Create a tiddler, e.g. [[$:/ui/ViewToolbar/close-others]] tagged with $:/tags/ViewToolbar which contains:

<$button message="tw-close-other-tiddlers" class="btn-invisible">{{$:/images/close-others-button}}</$button>

And you are there (it assumes your 'close other' image is in $:/images/close-others-button)..

Cheers,

Ton

[fedca...@googlemail.com]

Hi Bob,

thanks a lot for your work. It really helps me to properly use TiddlyWiki on my tablet.
Unfortunately I'm experiencing problems with the input field in edit mode.
It doesn't look as nice as on http://tw5gray.tiddlyspot.com
All I try to use is etch. So I drop the theme into a new (5.0.10) empty file.
Then I get a very narrow input field when editing.

Am I missing something? What else do I have to drop in?

I just downloaded the complete wiki from tiddlyspot and am removing the actual content so only the control stuff remains.
But that can't be the solution, is it?