Pre-plugin experiment to get magazine-layout / bootstrap-grid . (Work in progress)

[Jan]

 Hello Community,
based on Mat's idea I have made an experiment with a responsive bootstrap grid . The intention is to give an overview when starting TiddlyWiki. When pressing the read more button you open the chosen story in the normal Layout. The basic design derives from here:  https://codepen.io/Everybodyknows/pen/RwNyeoo
I want to share this proof of concept to have your feedback before turning it into a plugin.
So I hope you  already enjoy.

https://szenio.de/Grid/

• It gives a good overview at startup... and then returns to an efficient workspace.
• It opens configurable stories in the storyriver
• It can be configured with a control-panel (which still has some design-problems ;-)
• You can easily define synopsis for the grid

To make it really good there are some things I would like to add especially in formatting the articles. So I'd be happy to hear your ideas for a smoother look.

Alternative Stylesheets are very welcome.

Best wishes Jan

[Mat]

Cool stuff!

There are, at least on my screen, a few things that need attention. Here are some:

• The text spills out beyond the tiddler edges. One approach would be to simply cut the overflow (overflow-x:hidden;)
• Clicking "Article with images" opens page with three tiddlers: "Article" "with" "images".
  
• The images in "Article with imges" do seem to resize but the Easter Bunny doesn't. Maybe because of the link there.
  
• When I click on an article, there's that single tiddler showing but it appears to be a static tiddler because the toolbar is not there. ...aha, it is hidden! IMO, for the sake of a demo it probably makes sense to keep non-demo-specific matters stick to default TW behaviour or there's risk testers misunderstand it :-) 

Keep up the great work! BTW you might be interested in the instruction videos and talks given by CSS superstar Jen Simmons.

<:-)

[Julio Peña]

Hello Jan,

I'm sure there are way better elegant solutions out there.

Take a look at my site to see how I have mine:

http://jpentw5.tiddlyspot.com/

Find my grid framework: $:/.jp/css/framework/grid

Maybe it can help you pick up any ideas(?).

Regards,

Julio

[Jan]

Hi Mat,

Thanks, I am trying to track down the bugs.
* The Title-with-spaces-bug is killed, they open correct now.
* I thought I had overcome the overflow-problems. For my Firefox its okay. What do you use to reproduce this?

* The controlpanel is a little better but still way from perfect.
* For the Hover-Toolbar: Its no bug, its a feature... but you are right its distracting.

Thanks and I hope you keep helping.
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2d082ecc-1835-49d5-b22c-4d8664e57ec0%40googlegroups.com.

[TiddlyTweeter]

Hi Jan

I see the "overflow" problem on Chrome (latest). On Firefox the wrapping is fine.

Nice work!

TT

[TiddlyTweeter]

Jan wrote:

... So I'd be happy to hear your ideas for a smoother look.

Hi Jan, small point. I'd change the way the outer borders are done. At the moment the far left and right look cramped.

This image should make the issue clearer--its just aesthetics.

Nice work!

Best wishes

TT 

[Mat]

I'm on Win Chrome

It looks like this currently:

<:-)

[Jan]

Thanks Mat and Josiah,
it seems tp be the word-break property. Firefox seems to have a different default there than chrome and Edge.
word-break: break-word cures this for crome, but I need a trick for the Microsoft world. Break-all would work there but the price is too high.
I also neet a trick for text-justify which seems to suffer from similar comatibility problems.

So thanks for now, I will have to come back on this.

Best wishes
Jan


It is a drag that browser-issues keep on hasseling the Internet.

--
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/f6fdaf1d-ecd7-4e61-a04a-82af90eb2774%40googlegroups.com.