[tw5] Re: [Proof of concept] Simple Tabs using fieldset
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 mwik...@gmail.com wrote:
>
>> Actually, it seems that is the non-deprecated equivalent to .
>> 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 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 cj.v...@gmail.com 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:
>
>
> <$list filter="$filter$ -[]">< labeltid:$state$>>
> **
> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
> mode="block"/>
> **
>
> \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 mwik...@gmail.com 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=<>/>
>>
>> \define selectedbuttonlabel() ''<$text text=<>/>''
>>
>> \define menubutton(labeltid:"")
>> <$button setTitle="$labeltid$" setTo=<>
>> class="tc-btn-invisible">
>> <$list filter="[compare:string:eq{$labeltid$}]"
>> emptyMessage=<>
>> variable=avoid_changing_currentTiddler><>
>>
>> \end
>>
>> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>>
>>
>> <$list filter="$filter$ -[]"><> labeltid:$state$>>
>>
>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>> mode="block"/>
>>
>>
>> \end
>>
>> Examples use to cut and paste into tiddlywiki.com to try it out.
>>
>> <>
>>
>> <>
>>
>>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/86548505-c283-463f-b317-4f59e3c0ac34n%40googlegroups.com.
[tw5] Re: [Proof of concept] Simple Tabs using fieldset
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 mwik...@gmail.com wrote:
> Actually, it seems that is the non-deprecated equivalent to . 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 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 cj.v...@gmail.com 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:
<$list filter="$filter$ -[]"><>>> labeltid:$state$>>
**
<$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
mode="block"/>
**
\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 mwik...@gmail.com 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=<>/>
>
> \define selectedbuttonlabel() ''<$text text=<>/>''
>
> \define menubutton(labeltid:"")
> <$button setTitle="$labeltid$" setTo=<>
> class="tc-btn-invisible">
> <$list filter="[compare:string:eq{$labeltid$}]"
> emptyMessage=<>
> variable=avoid_changing_currentTiddler><>
>
> \end
>
> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>
>
> <$list filter="$filter$ -[]">< labeltid:$state$>>
>
> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
> mode="block"/>
>
>
> \end
>
> Examples use to cut and paste into tiddlywiki.com to try it out.
>
> <>
>
> <>
>
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/27ca1be9-fd44-462d-8ac8-b62090b4f8efn%40googlegroups.com.
[tw5] Re: [Proof of concept] Simple Tabs using fieldset
Actually, it seems that is the non-deprecated equivalent to . 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 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 cj.v...@gmail.com 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:
>>>
>>>
>>> <$list filter="$filter$ -[]"><>> labeltid:$state$>>
>>> **
>>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>>> mode="block"/>
>>> **
>>>
>>> \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 mwik...@gmail.com 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=<>/>
\define selectedbuttonlabel() ''<$text text=<>/>''
\define menubutton(labeltid:"")
<$button setTitle="$labeltid$" setTo=<>
class="tc-btn-invisible">
<$list filter="[compare:string:eq{$labeltid$}]"
emptyMessage=<>
variable=avoid_changing_currentTiddler><>
\end
\define tabs-fieldset(filter:"" state:"$:/temp/state")
<$list filter="$filter$ -[]"><>>> labeltid:$state$>>
<$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
mode="block"/>
\end
Examples use to cut and paste into tiddlywiki.com to try it out.
<>
<>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/7c371307-bb5d-40b8-9ff0-1c5bc72f4c5bn%40googlegroups.com.
[tw5] Re: [Proof of concept] Simple Tabs using fieldset
Or you can wrap the legend in 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 cj.v...@gmail.com 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:
>>
>>
>> <$list filter="$filter$ -[]"><> labeltid:$state$>>
>> **
>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>> mode="block"/>
>> **
>>
>> \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 mwik...@gmail.com 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=<>/>
>>>
>>> \define selectedbuttonlabel() ''<$text text=<>/>''
>>>
>>> \define menubutton(labeltid:"")
>>> <$button setTitle="$labeltid$" setTo=<>
>>> class="tc-btn-invisible">
>>> <$list filter="[compare:string:eq{$labeltid$}]"
>>> emptyMessage=<>
>>> variable=avoid_changing_currentTiddler><>
>>>
>>> \end
>>>
>>> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>>>
>>>
>>> <$list filter="$filter$ -[]"><>> labeltid:$state$>>
>>>
>>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>>> mode="block"/>
>>>
>>>
>>> \end
>>>
>>> Examples use to cut and paste into tiddlywiki.com to try it out.
>>>
>>> <>
>>>
>>> <>
>>>
>>>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/debfb513-6f15-4e31-b9db-20e066477112n%40googlegroups.com.
[tw5] Re: [Proof of concept] Simple Tabs using fieldset
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:
>
>
> <$list filter="$filter$ -[]">< labeltid:$state$>>
> **
> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
> mode="block"/>
> **
>
> \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 mwik...@gmail.com 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=<>/>
>>
>> \define selectedbuttonlabel() ''<$text text=<>/>''
>>
>> \define menubutton(labeltid:"")
>> <$button setTitle="$labeltid$" setTo=<>
>> class="tc-btn-invisible">
>> <$list filter="[compare:string:eq{$labeltid$}]"
>> emptyMessage=<>
>> variable=avoid_changing_currentTiddler><>
>>
>> \end
>>
>> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>>
>>
>> <$list filter="$filter$ -[]"><> labeltid:$state$>>
>>
>> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
>> mode="block"/>
>>
>>
>> \end
>>
>> Examples use to cut and paste into tiddlywiki.com to try it out.
>>
>> <>
>>
>> <>
>>
>>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/a60832e0-8c4a-4c1d-a325-2eca841c4846n%40googlegroups.com.
[tw5] Re: [Proof of concept] Simple Tabs using fieldset
Not sure what it says about me: I find this way fun ! Thanks !
For the giggles, I made a small addition:
<$list filter="$filter$ -[]"><>
**
<$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
mode="block"/>
**
\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 mwik...@gmail.com 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=<>/>
>
> \define selectedbuttonlabel() ''<$text text=<>/>''
>
> \define menubutton(labeltid:"")
> <$button setTitle="$labeltid$" setTo=<>
> class="tc-btn-invisible">
> <$list filter="[compare:string:eq{$labeltid$}]"
> emptyMessage=<>
> variable=avoid_changing_currentTiddler><>
>
> \end
>
> \define tabs-fieldset(filter:"" state:"$:/temp/state")
>
>
> <$list filter="$filter$ -[]">< labeltid:$state$>>
>
> <$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}}
> mode="block"/>
>
>
> \end
>
> Examples use to cut and paste into tiddlywiki.com to try it out.
>
> <>
>
> <>
>
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/f05d744a-118a-44fc-86b6-c5a59f8786e4n%40googlegroups.com.
