A Tiddler cover the whole story-river

[Mohammad]

What is the simplest CSS setting to cover the whole story-river by a tiddler!

For troubleshooting purpose, I have added colored border to story river and tiddler here!
This is not work for me as I expected.

To give a try

• go to https://tiddlywiki.com/prerelease/
• create a tiddler
• tagged it with $:/tags/Stylesheet
• save
• Go to different story view and see how it works.

body.tc-body .tc-story-river{
border:1px solid #f00;
padding-left:0;
margin-left:0;
padding-top:0;
margin-top:0;
padding-bottom:0;
margin-bottom:0;

padding:20px;
width:100%
margin:0 auto;

height:90vh;
overflow-y:hidden;

}

body.tc-body .tc-story-river .tc-tiddler-frame{
border:2px solid blue;
margin:0;
height:100%;
width:100%;

[PMario]

Hi,

IMO have a look at CSS 100vh;    Which is 100% vertical height.

-m

[Mohammad]

Hi Mario,

 It does not work!

Of course the issue is that, it is not clear which selector should be modified

story-river,

tc-tiddler-frame

tc-tiddler-view-frame

tc-tiddler-body

--Mohammad

[PMario]

On Tuesday, January 21, 2020 at 4:10:54 PM UTC+1, Mohammad wrote:

Hi Mario,

 It does not work!

Of course the issue is that, it is not clear which selector should be modified

Hi,

Are you familiar with the browser dev-tools. Especially the "Inspector" tab? ... If yes you can use it. We need to do the same thing to find out, how CSS styles are applied.

If not, you should try to have a closer look. It will help a lot.

2 starting links:

 - https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

 - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

-mario

[Mohammad]

Thanks Mario!

On Tuesday, January 21, 2020 at 9:49:12 PM UTC+3:30, PMario wrote:

On Tuesday, January 21, 2020 at 4:10:54 PM UTC+1, Mohammad wrote:

Hi Mario,

 It does not work!

Of course the issue is that, it is not clear which selector should be modified

Hi,

Are you familiar with the browser dev-tools. Especially the "Inspector" tab? ... If yes you can use it. We need to do the same thing to find out, how CSS styles are applied.

Yes, I use it a lot! 

If not, you should try to have a closer look. It will help a lot.

Well, this is kind of reverse engineering! 

2 starting links:

 - https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

 - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

I will have a look to see how more effectively I can use these stuffs. 

-mario

Cheers

Mohammad 

[PMario]

On Tuesday, January 21, 2020 at 7:29:15 PM UTC+1, Mohammad wrote:

...

Well, this is kind of reverse engineering! 

You are absolutely right. ... But TW has an "organically" grown UI, which was mainly driven by user demand. 

At the very early (alpha) days TW suffered from so-called "divitis". .. That means way too many nested div-elements. ... The whole system was in constant flux.

We reduced most of the redundant stuff, but some "wrappers" have escaped and made it to the V 5.1.0. Since 5.1.0 backwards compatibility is one of TWs major goals. Which is good, but also causes some headache in combination with the existing CSS.

Some "wrappers" are still there. eg: If a tiddler designed for the sidebar is shown in the main story river, it looks and sometimes behaves different. That's the way it is.

That's why, browser dev-tools are our best friends ;)

BUT all in all, we have a functional, stable and mainly backwards compatible UI. That's worth something q:-)

have fun!

mario

[PMario]

On Tuesday, January 21, 2020 at 10:29:39 PM UTC+1, PMario wrote:

...

BUT all in all, we have a functional, stable and mainly backwards compatible UI. That's worth something q:-)

I forgot 1 thing. Our UI is "ultra customizable" by users, which i think is unique on the market.

-m

[Mohammad]

Hi Mario

 Thank you very much for all your clarifications!

This make things more understandable.

I will dive and try to find how a tiddler can occupy the whole screen in solo story view!

I did the same when I developed Tiddlyshow which uses zoomin 

have fun!

mario

Cheers

Mohammad 

[Jeremy Ruston]

Hi Mohammad

It seems that in presentation mode you’re using CSS to expand tiddlers in the story river so that they fill the whole browser window. The complications you’re running into are perhaps primarily because the story river CSS is subtly different in zoomin story view, but in general because it is fiddly to try to change the story river mechanism to do something that it wasn’t designed for.

I wonder if it might be worth exploring a different approach: decoupling the slide display mechanism from the story river mechanism. You could have a $:/tags/PageTemplate tiddler that displays when the presentation mode is engaged, and uses CSS to make itself cover the window. Then, rather than a story list, you can make your own navigation mechanism using a single tiddler to identify the title of the currently viewed slide. Modifying that single tiddler will be simpler than modifying the story river.

Users would still be able to display individual slides as separate tiddlers in the story river if they needed to see them side by side etc.

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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3fed0076-9aca-4425-8ab3-a9cd00db29d3%40googlegroups.com.

[Mohammad]

Hi Jeremy,

 Many thanks. Yes I stucked with the my algorithm!

So, I need someone tackles this from another angle.

On Wednesday, January 22, 2020 at 11:54:50 AM UTC+3:30, Jeremy Ruston wrote:

Hi Mohammad

It seems that in presentation mode you’re using CSS to expand tiddlers in the story river so that they fill the whole browser window. The complications you’re running into are perhaps primarily because the story river CSS is subtly different in zoomin story view, but in general because it is fiddly to try to change the story river mechanism to do something that it wasn’t designed for.

Good to know this! and I did not now they are different. I thought they dynamically set when you switch from a storyview to another storyview.

I wonder if it might be worth exploring a different approach: decoupling the slide display mechanism from the story river mechanism. You could have a $:/tags/PageTemplate tiddler that displays when the presentation mode is engaged, and uses CSS to make itself cover the window. Then, rather than a story list, you can make your own navigation mechanism using a single tiddler to identify the title of the currently viewed slide. Modifying that single tiddler will be simpler than modifying the story river.

I absolutely go through this and will share my results. By the way I also had a look at Tiddlywiki TalkyTalky of yours! 

Users would still be able to display individual slides as separate tiddlers in the story river if they needed to see them side by side etc.

Best wishes

Jeremy.

Thank you Jeremy!

Wish all the best

Mohammad 

On 22 Jan 2020, at 03:24, Mohammad <mohamma...@gmail.com> wrote:

Hi Mario

 Thank you very much for all your clarifications!

This make things more understandable.

On Wednesday, January 22, 2020 at 12:59:39 AM UTC+3:30, PMario wrote:

On Tuesday, January 21, 2020 at 7:29:15 PM UTC+1, Mohammad wrote:

...

Well, this is kind of reverse engineering! 

You are absolutely right. ... But TW has an "organically" grown UI, which was mainly driven by user demand.  

At the very early (alpha) days TW suffered from so-called "divitis". .. That means way too many nested div-elements. ... The whole system was in constant flux. 

We reduced most of the redundant stuff, but some "wrappers" have escaped and made it to the V 5.1.0. Since 5.1.0 backwards compatibility is one of TWs major goals. Which is good, but also causes some headache in combination with the existing CSS. 

Some "wrappers" are still there. eg: If a tiddler designed for the sidebar is shown in the main story river, it looks and sometimes behaves different. That's the way it is. 

That's why, browser dev-tools are our best friends ;)

BUT all in all, we have a functional, stable and mainly backwards compatible UI. That's worth something q:-)

I will dive and try to find how a tiddler can occupy the whole screen in solo story view!

I did the same when I developed Tiddlyshow which uses zoomin 

have fun!

mario

Cheers

Mohammad 

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

[Mat]

Mohammad, you may want to check out my old PPTW (PowerPoint-TiddlyWiki) which does this.

<:-)

[Mohammad]

Hi Mat,

 It is a simple and yer very smart solution to create PPT using Tiddlywiki!

I will go through it and will have return to you! 

Does it use its own navigation?

--Mohammad

[Mat]

Mohammad wrote:

Does it use its own navigation?

If I understand you question right - yes, as you can see it features left/right arrows to flip to previous/next slide.

If I recall, it is not a very complex plugin/creation so it should not be very difficult to figure out how it works, including where to apply the styling.

<:-)

[Mohammad]

Thanks Mat!