Télumire,
Hey thanks soo much, that is exactly what I needed.
I have adopted the final css as follows to get smaller icons that the
PageControls.
.indicator-container { display:block; margin-top: -15px; margin-bottom:
-22px; line-height:unset; } .indicator-item{ height:15px; width:15px;
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; }
I will shareback my indicators "bar" macro shortly
Regards
Tones
On Friday, 13 August 2021 at 04:16:44 UTC+10 Télumire wrote:
> 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/d1a50b0a-874f-48cd-b290-cdb543c023bdn%40googlegroups.com.
