Erratum bis (sorry..) :
.indicator-container {
display: flex;
flex-wrap:wrap;
margin-top: -14px;
margin-bottom: -26px;
--indicator-size:10px;
}
.indicator-item{
height:var(--indicator-size);
width:var(--indicator-size);
display:inline-block;
position:relative;
}
.indicator-item button, .indicator-item button * {
position:absolute;
width:100%!important;
height:100%!important;
padding:unset;
margin:unset;
left:0;
top:0;
}
Should I send further replies by private message to avoid spam ?
Le jeudi 12 août 2021 à 20:02:22 UTC+2, Télumire a écrit :
> Erratum : no need for the line-height:unset nor the inline-block for the
> button and its content :
>
> .indicator-container {
> display:block;
> margin-top: -14px;
> margin-bottom: -26px;
> }
>
> .indicator-item{
> height:40px;
> width:40px;
> display:inline-block;
> position:relative;
> }
>
> .indicator-item button, .indicator-item button * {
> width:100%!important;
> height:100%!important;
> padding:unset;
> margin:unset;
> left:0;
> top:0;
> }
>
> Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
>
>> Ok now I understand what you mean … This is because tiddly wiki wrap the
>> content in a <p> tag, which has a margin of 14px. So to fix that, since we
>> can't style an element based on it's content (at least not until the
>> pseudo-class :has is supported) nor give it a class (as far as I know), we
>> need to wrap the indicators in a container and use it to compensate with
>> negative margin.
>>
>> The code becomes :
>>
>> \whitespace trim
>> <div class="indicator-container">
>> <span class="indicator-item">
>> {{$:/core/ui/Buttons/edit}}
>> </span>
>> ..etc..
>> <span class="indicator-item">
>> {{$:/core/ui/Buttons/cancel}}
>> </span>
>> </div>
>>
>> And the css becomes
>>
>> .indicator-container {
>> display:block;
>> margin-top: -14px;
>> margin-bottom: -26px;
>> line-height:unset;
>> }
>>
>> .indicator-item{
>> height:40px;
>> width:40px;
>> display:inline-block;
>> position:relative;
>> }
>>
>> .indicator-item button, .indicator-item button * {
>> width:100%!important;
>> height:100%!important;
>> padding:unset;
>> margin:unset;
>> display:inline-block;
>> left:0;
>> top:0;
>> }
>> Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
>>
>>> Télumire
>>>
>>> I just tried this on tiddlywiki.com;
>>>
>>> Thanks, we are almost there.
>>>
>>> I set the width and height to 15px, look like I wanted then added
>>> list-before = $:/core/ui/SideBarSegments/tabs
>>>
>>> Once it moves above the tabs there is too much white space above and
>>> below
>>>
>>> [image: Snag_1f281978.png]
>>>
>>> Is there some way to remove or reduce this space top and bottom?
>>>
>>> Regards
>>> Tones
>>>
>>>
>>> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>>>
>>>> So if I understand correctly, you want to be able to give a custom
>>>> size to your icons/buttons and be able to have them next to each other ?
>>>>
>>>> Try this and tell me if that works :
>>>>
>>>> In the tiddler tagged with $:/tags/SideBarSegment :
>>>>
>>>> \whitespace trim
>>>> <span class="indicator">
>>>> {{button 1}}
>>>> </span>
>>>> ..etc..
>>>> <span class="indicator">
>>>> {{button n}}
>>>> </span>
>>>>
>>>> In a stylesheet tiddler :
>>>>
>>>> .indicator{
>>>> height:20px;
>>>> width:20px;
>>>> display:inline-block;
>>>> position:relative;
>>>> }
>>>>
>>>> .indicator button, .indicator button * {
>>>> width:100%!important;
>>>> height:100%!important;
>>>> padding:unset;
>>>> margin:unset;
>>>> display:inline-block;
>>>> position:absolute;
>>>> left:0;
>>>> top:0;
>>>> }
>>>> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>>>>
>>>>> Folks,
>>>>>
>>>>> I have a number of projects that could use icons placed in the
>>>>> sidebar, top menu and other places. They would indicate some status such
>>>>> as
>>>>> a green storage icon when the local storage is on and much more. I call
>>>>> these indicators, They may have tooltips or actions on click, with or
>>>>> without modifier keys.
>>>>>
>>>>> I have attempted to build a new element tagged $:/tags/SideBarSegment
>>>>> and list-before $:/core/ui/SideBarSegments/tabs
>>>>>
>>>>> The problem I have for for which I seek help is I am finding it
>>>>> difficult to reduce icons and buttons to a half height and not have
>>>>> unnecessary white space above and below the indicators. Margins, padding
>>>>> tweeks etc... have not succeeded. We may use existing buttons and create
>>>>> new ones, the idea is it provides additional place(s) for which we can
>>>>> display content via a tag, so if I publish an indicator and you do the
>>>>> same
>>>>> they can coexist.
>>>>>
>>>>> I would hope to publish this to set a de facto standard, say using the
>>>>> tag $:/tags/indicator so we can all add additional and conditional
>>>>> iconised
>>>>> information in the sideBar and elsewhere as desired.
>>>>>
>>>>> Can anyone help me build this with custom css to minimise its use of
>>>>> space? Ideally customisable.
>>>>>
>>>>> Regards
>>>>> Tones
>>>>>
>>>>
--
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/731e7ba2-f66b-4af2-8e42-d31971be2f24n%40googlegroups.com.
