Thanks Mat. I'll try these class changes out but CSS is not my forté so
most of my development there will be cargo-cultish.
Initially, I was thinking of adding *>Menu selection<* "brackets" and
figure out how to add the first entry to the state tracking tiddler if it
didn't exist so that the menu wasn't initially blank. That might help the
concept be more intuitive.
WIP,
/Mike
On Tuesday, June 15, 2021 at 1:57:53 PM UTC-3 Mat wrote:
> I've previously only seen one "headline" when using fieldsets. IMO, when
> using them as tabs there's need for a more visual distinction that default
> so maybe something like;
>
> fieldset > legend > samp > button {
> background:#f0f0f0 !important;
> padding:0 5px !important;
> }
>
> Possibly also
>
> fieldset > legend {
> outline:1px solid silver !important
> }
>
> Note that the above will style *all* fieldsets so maybe you'll want to add
> a special enwrapping class for this concept of yours.
>
> <:-)
>
> On Tuesday, June 15, 2021 at 4:39:24 PM UTC+2 [email protected] wrote:
>
>> Actually, it seems that <samp> is the non-deprecated equivalent to <tt>.
>> I switched to that.
>>
>> /Mike
>>
>> On Tuesday, June 15, 2021 at 11:27:10 AM UTC-3 Michael Wiktowy wrote:
>>
>>> Or you can wrap the legend in <tt> tags to really give that TUI feel. : ]
>>>
>>> I stuck it up here to share:
>>> https://sextant.space/#tabs-fieldset
>>>
>>> /Mike
>>>
>>> On Saturday, June 12, 2021 at 12:12:06 AM UTC-3 [email protected] wrote:
>>>
>>>> Or maybe I'm thinking of something else. Not sure. Showing my age
>>>> more ...
>>>>
>>>> On Saturday, June 12, 2021 at 12:09:56 AM UTC-3 Charlie Veniot wrote:
>>>>
>>>>> Not sure what it says about me: I find this way fun ! Thanks !
>>>>>
>>>>> For the giggles, I made a small addition:
>>>>>
>>>>> <fieldset style="display: block;">
>>>>> <legend><$list filter="$filter$ -[<currentTiddler>]"><<menubutton
>>>>> labeltid:$state$>></$list> </legend>
>>>>> *<div style="height:400px;overflow:scroll;" >*
>>>>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>>>>> mode="block"/> </$tiddler>
>>>>> *</div>*
>>>>> </fieldset>
>>>>> \end
>>>>>
>>>>> Now I find this feels like fixed-size "screens", and I'm having major
>>>>> flashbacks to dBase IV and Clipper. Ugh, I'm showing my age ...
>>>>>
>>>>> On Friday, June 11, 2021 at 11:53:13 PM UTC-3 [email protected] wrote:
>>>>>
>>>>>> Greetings,
>>>>>>
>>>>>> I saw use of the fieldset html tag in another message thread here the
>>>>>> other day and thought that it would be a neat way to implement a simple
>>>>>> minimalistic "tabs" option.
>>>>>>
>>>>>> So I hacked it together (see below).
>>>>>>
>>>>>> It is best with no more than a few menu options but it will wrap in a
>>>>>> usable fashion with more. One might be able to modify it to only display
>>>>>> a
>>>>>> fixed number of options or width and put some scrolling in with some
>>>>>> list
>>>>>> filter or CSS trickery but I am not planning to tackle that soon. Just
>>>>>> wanted to throw out a proof of concept.
>>>>>>
>>>>>> It has hints of old-school BBS text menus of yesteryear /
>>>>>> terminal-based GUIs.
>>>>>>
>>>>>> Enjoy.
>>>>>>
>>>>>> /Mike
>>>>>>
>>>>>> \define buttonlabel() <$text text=<<currentTiddler>>/>
>>>>>>
>>>>>> \define selectedbuttonlabel() ''<$text text=<<currentTiddler>>/>''
>>>>>>
>>>>>> \define menubutton(labeltid:"")
>>>>>> <$button setTitle="$labeltid$" setTo=<<currentTiddler>>
>>>>>> class="tc-btn-invisible">
>>>>>> <$list filter="[<currentTiddler>compare:string:eq{$labeltid$}]"
>>>>>> emptyMessage=<<buttonlabel>>
>>>>>> variable=avoid_changing_currentTiddler><<selectedbuttonlabel>></$list>
>>>>>> </$button>
>>>>>> \end
>>>>>>
>>>>>> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>>>>>>
>>>>>> <fieldset style="display: block;">
>>>>>> <legend><$list filter="$filter$ -[<currentTiddler>]"><<menubutton
>>>>>> labeltid:$state$>></$list> </legend>
>>>>>>
>>>>>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>>>>>> mode="block"/> </$tiddler>
>>>>>>
>>>>>> </fieldset>
>>>>>> \end
>>>>>>
>>>>>> Examples use to cut and paste into tiddlywiki.com to try it out.
>>>>>>
>>>>>> <<tabs-fieldset filter:"[tag[Videos]]">>
>>>>>>
>>>>>> <<tabs-fieldset filter:"[tag[Videos]]" state:"$:/temp/altstate">>
>>>>>>
>>>>>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/86548505-c283-463f-b317-4f59e3c0ac34n%40googlegroups.com.
