Problem: Toggle Sidebar- When unvisible, then the tiddlers don't get wider

[Surya]

Hello @all,

I write a new Wiki, which I want to use on my laptop and on my tablet.

I know, there are some plugins for better use on mobiles. But I prefer not to install more Plugins for not to slow down the wiki.

I made two stylesheets- one for using the wiki on my laptop and one for using the wiki on my tablet.

For toggling these two stylesheets by adding/removing the tag "$:/tags/Stylesheet" I made a button (which contains 4 buttons- I would like to have only one button for toggling- for this question I'll open another thread).

I have now a problem with these two stylesheets: When toggling the sidebar with the >>, the tiddlers should get very wide (almost 100% wide) and the sidebar should be unvisible.

But the tiddlers do not get wider (the sidebar gets unvisible).

This happens on my laptop using the "Desktop"-Stylesheet. And it happens on my tablet using the "mobil"-Stylesheet.

It doesn't happen, when I use the "mobil"-Stylesheet on my Laptop- then the tiddlers get wide.

I think, I made a mistake in the Stylesheets.

The Stylesheet for the Laptop is:

.tc-page-controls { margin-top: 1px; font-size: 1.5em; }

.tc-story-river {
    position: relative;
    left: -35px;
    top: -35px;
    .tc-story-river {
    width: calc(100% - -35px);
}
    padding: 42px 42px 42px 42px;
}

.tc-sidebar-scrollable {
    position: fixed;
    top: - 75px;
    left: 900px;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0 -42px;
    padding: 71px 0 28px 42px;
}

html .tc-rightmenu {
    display: block;
    padding: 40px 0px 0px 0px;
    position: fixed;
    right: 13px;
    top: -50px;
    width: 20px;
    z-index: 98;
    color: #000000;
    font-size: 17px;
    opacity: 1;
}

.tc-site-title {
        font-weight: 500;
        font-size: 1.5em;
        line-height: 1.2em;
        margin: -55px 0px -10px;}

.tc-site-subtitle {
        margin: 3px 0px -10px;
}

.tc-titlebar {
        font-size: 20px;
        margin: 0px 0px -9px 0px;}

button, input, optgroup, select, textarea {
        margin: 0px 0px -10px 0px;}

.tc-tags-wrapper {
    margin: 3px 0px 4px;}

.tc-sidebar-lists .tc-tab-buttons {
        margin-bottom: -2px;}

.tc-tab-buttons {
    font-size: 0.85em;
    padding-top: 0.2em;
    margin-bottom: -2px;}

.tc-sidebar-lists a.tc-tiddlylink {
    font-size: 0.9em;}

.tc-tiddler-frame {
        width: 885px;
        padding: 1px 5px 0px 10px;
        border: 4px solid yellow;
        border-radius: 1em;
     -moz-border-radius: 1em;
     webkit-border-radius: 1em;}

.tc-tiddler-title {
        font-size: 10px;  
        line-height: 0.5em;}

.tc-subtitle {
    font-size: 0.1em;
}

.tc-tiddler-info {
    margin: 0 -5px 0 -5px;
    line-height: 1.4;
    font-size: 1.1em;
}

.tc-tags-wrapper {
        margin: 1px 0px 1px px;}

.tc-btn-invisible {
        margin: 0px -5px 1px 0px;}

.tc-topbar-left {
        left: 2px;
        top: 1px;}

.tc-topbar-right {
    top: 45px;
    right: 30px;}

.tc-topbar button {
        padding: 5px;}

.tc-tab-buttons button {
    padding: 6px 5px;}

.tc-tab-content.tc-vertical {
    display: inline-block;
    vertical-align: top;
    padding-top: 0px;
    padding-left: 5px;
    border-left: 1px solid #CCC;
    flex: 1 0 70%;}

.tc-tab-content {
    margin-top: 4px;}

.lefttable { margin-left:auto; margin-right:0; float:left }

and the on for the tablet is:

.tc-page-controls { margin-top: 1px; font-size: 1.5em; }

.tc-story-river {
    position: relative;
    left: -35px;
    top: -45px;
    .tc-story-river {
    width: calc(100% - -35px);
}
    padding: 42px 42px 42px 42px;
}

.tc-sidebar-scrollable {
    position: fixed;
    top: - 75px;
    left: 280px;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0 -42px;
    padding: 71px 0 28px 42px;
}

html .tc-rightmenu {
    display: block;
    padding: 40px 0px 0px 0px;
    position: fixed;
    right: 13px;
    top: -50px;
    width: 20px;
    z-index: 98;
    color: #000000;
    font-size: 17px;
    opacity: 1;
}

.tc-site-title {
        font-weight: 500;
        font-size: 1.5em;
        line-height: 1.2em;
        margin: 6px 0px -10px;}

.tc-site-subtitle {
        margin: 3px 0px -10px;}

.tc-titlebar {
        font-size: 20px;
        margin: 0px 0px -9px 0px;}

button, input, optgroup, select, textarea {
        margin: 0px 0px -10px 0px;}

.tc-tags-wrapper {
    margin: 3px 0px 4px;}

.tc-sidebar-lists .tc-tab-buttons {
        margin-bottom: -2px;}

.tc-tab-buttons {
    font-size: 0.85em;
    padding-top: 0.2em;
    margin-bottom: -2px;}

.tc-sidebar-lists a.tc-tiddlylink {
    font-size: 0.9em;}

.tc-tiddler-frame {
        padding: 1px 5px 0px 10px;
        border:2px solid yellow;
        border-radius: 1em;
     -moz-border-radius: 1em;
     webkit-border-radius: 1em;}

.tc-tiddler-title {
        font-size: 10px;  
        line-height: 0.5em;}

.tc-tags-wrapper {
        margin: 1px 0px 1px px;}

.tc-btn-invisible {
        margin: 0px -5px 1px 0px;}

.tc-topbar-left {
        left: 2px;
        top: 1px;}

.tc-topbar-right {
    top: 45px;
    right: 30px;}

.tc-topbar button {
        padding: 5px;}

.tc-tab-buttons button {
    padding: 6px 5px;}

.tc-tab-content.tc-vertical {
    display: inline-block;
    vertical-align: top;
    padding-top: 0px;
    padding-left: 5px;
    border-left: 1px solid #CCC;
    flex: 1 0 70%;}

.tc-tab-content {
    margin-top: 4px;}

.lefttable { margin-left:auto; margin-right:0; float:left }

Could you please have look at them and find the mistake?

You can test and play with them at http://suryas-testwiki.tiddlyspot.com/

Thanks a lot for your help :-)

Surya

[Birthe C]

Hi Surya,

Look in control panel, theme tweaks, it does not match your stylesheets - or the look in your wiki.

Birthe

[Surya]

Hi Birthe :-)

That's true. But I think, in no way the Stylesheets would match the Theme Tweaks in the Control Panel, because I made/need 2 Stylesheets to toggle the view on Desktop/mobile.

So, how to solve it?

Or is that -my plan- just not possible?

[Surya]

Maybe there is a possibility to write the view settings into the Theme Tweaks in the Control Panel with a Button to click on?

[TonyM]

Surya,

First Control Panel > Info > Advanced > Stylesheets allows to you order your style sheets with drag and drop.

Can I suggest one of your underlying ideas is not correct!

But I prefer not to install more Plugins for not to slow down the wiki.

This is rarely if ever true in my view. There are particular cases where installing a large number of unnecessary plugins may do this, but I suggest installing any plugin that has what you need and if this causes a problem remove it.

Plugins can save you a lot more time than a bespoke solution with save you, and rarely, if ever, bloat a wiki on their own.

Regards

Tony

[Birthe C]

Writing your stylesheets, consider using the

@media (max-width: 960px) and @media (min-width: 960px)....use what you need. That to avoid conflicting settings in your stylesheets.

You have defined .tc-tiddlerframe to an exact width, so that hiding the sidebar will not widen your tiddlers to mention an example. Deleting you setting changes it from about 885px...to a little more than 225px. The last one you defined for your other stylesheet...but it is also in the tweaks tab.

I think all these confusion has made it necessary for you to create even more conflicting settings.

Your stylesheets send me down memory lane, remembering an earlier TW of mine, that ended in the hell hole for a longer while...from exactly the same reasons.

 

Birthe

[Birthe C]

Hi Surya,

For the sidebar toggle you could try:

<<if-no-sidebar "

.tc-story-river {
    width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
}

.tc-tiddler-frame {
    width: 100%;
}
">>

Birthe

mandag den 7. oktober 2019 kl. 21.51.07 UTC+2 skrev Surya:

[Surya]

Sorry for my late reply.

Since day before yesterday I have been studying the plugins/eucaly/flexwidth and searching for the sand grain in the big hill for my wished solution.

I have been sure, that it is possible. Especially since I have seen that plugin. I would use it, but unfortunately it doesn't fit my needs and I don't know enough how to tweak it.

I almost gave up and almost decided, that half of the functionality is also okay for me.

Now I saw your replies.

For the first replies are not easy for me. But your last one, Birthe, I could just test very fast.

And: That's it!! :-)))

Thanks a lot!

I send you the sun to Denmark :-)

Surya