Simple Machines Community Forum

SMF Support => SMF 2.0.x Support => Topic started by: aegersz on October 20, 2019, 01:40:14 AM

Title: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 20, 2019, 01:40:14 AM
... when [br] is added.

[list] [li][b]x[/b][/li] [li]y[/li] [/list]
[list type=decimal] [li]x[/li] [li][b]y[/b][/li] [/list]:


The above worked here.

[list] [li][b]x[/b][/li][/list] [br] [list][li]y[/li] [/list]
[list type=decimal] [li]x[/li][/list] [br] [list][li][b]y[/b][/li] [/list]


 
 
see how this failed (not as bad as mine) as it forgot the numerics.

it has been problematic on my installation; it has been adding $ signs and extra [/list] upon preview.

I keep on setting it straight but it still keeps messing up. I am bolding some text.

Can you please think of what's going on ?

... and is there a simple way to just add the [li] and [/li] codes, please ?
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: GL700Wing on October 20, 2019, 09:56:40 AM
Quote from: aegersz on October 20, 2019, 01:40:14 AM
... when [br] is added.

...

Can you please think of what's going on ?

... and is there a simple way to just add the [li] and [/li] codes, please ?

The line break [br] is breaking the [/list] [list] code.

[list] [li][b]x[/b][/li][/list] [br] [list][li]y[/li] [/list]
[list type=decimal] [li]x[/li][/list] [br] [list][li][b]y[/b][/li] [/list]




If you want to add space after each line within a list you can install the BBCode with style (https://custom.simplemachines.org/mods/index.php?mod=2505) mod and use an inline style for each [li] - example:

[list] [li style="padding-bottom:1em"][b]x[/b][/li] [li style="padding-bottom:1em"]y[/li] [/list]
[list type=decimal] [li style="padding-bottom:1em"]x[/li] [li style="padding-bottom:1em"][b]y[/b][/li] [/list]

However, as manually adding style="padding-bottom:1em" to every [li] could become very tedious you could add two new BBCodes for creating padded ordered/unordered lists.

In ./Sources/Subs-Editor.php
Find:
'description' => $txt['list_ordered']
),

Add After:
array(
'image' => 'list',
'code' => 'list',
'before' => '[list]\n[li style="padding-bottom:1em"]',
'after' => '[/li]\n[li style="padding-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_unordered_padded']
),
array(
'image' => 'orderlist',
'code' => 'orderlist',
'before' => '[list type=decimal]\n[li style="padding-bottom:1em"]',
'after' => '[/li]\n[li style="padding-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_ordered_padded']
),


In ./Themes/default/languages/Post.english.php
Find:
$txt['list_ordered'] = 'Insert Ordered List';
Add After:
$txt['list_unordered_padded'] = 'Insert Unordered List with Padding';
$txt['list_ordered_padded'] = 'Insert Ordered List with Padding';


Important Note: These two new BBCodes would have the same icons as the default Ordered List/Unordered List BBCodes so you would have to hover over the icon to see the description - the two new BBCodes have 'with Padding' added to their description.




The attached image shows your lists with and without the BBCode with style (https://custom.simplemachines.org/mods/index.php?mod=2505) mod and inline style.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 20, 2019, 10:39:57 AM
Just use actual line breaks rather than br bbcode:


[list][li][b]x[/b][/li][/list]
[list][li]y[/li] [/list]

[list type=decimal][li]x[/li][/list]
[list][li][b]y[/b][/li] [/list]



Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: GL700Wing on October 20, 2019, 05:27:17 PM
Quote from: Arantor on October 20, 2019, 10:39:57 AM
Just use actual line breaks rather than br bbcode:


[list][li][b]x[/b][/li][/list]
[list][li]y[/li] [/list]

[list type=decimal][li]x[/li][/list]
[list][li][b]y[/b][/li] [/list]


  • x
  • y

  • x
  • y

My understanding is that the OP wants a blank line (or equivalent) between each list element and they were hoping [br] would do that. 

Unfortunately the processing of the [li][/li] code removes multiple line breaks which means:
[list type=decimal][li]x[/li]

[li][b]y[/b][/li][/list]

Is effectively - and ends up looking - the same as:
[list type=decimal][li]x[/li][li][b]y[/b][/li][/list]
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 20, 2019, 07:06:19 PM
Figures it would break. It's not valid HTML to insert anything between li's, so I'd expect it to make a mess.
That mod would be the way to do it, or the proposed new arrays (which could also be a mod). Styling li's is fine. Everyone does that. :)

If you wanted a slightly cleaner solution, you could just increase line-height on the parent ol or ul.

Quote
Important Note: These two new BBCodes would have the same icons as the default Ordered List/Unordered List BBCodes so you would have to hover over the icon to see the description - the two new BBCodes have 'with Padding' added to their description.

You could make new icons easily enough. ;)
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 20, 2019, 07:39:57 PM
Thanks for all your input as there are issues.

Ideally,  i'd like to mark a bunch of lines seperated by a blank line and then hit the magic button to do it all as simple as marking text for bolding.

SMF 3.0 maybe ?

It would come in SO handy as the current offering is unsatisfactory.

But again, thanks for your help and i will look at at doing it in two steps: mark the line with "li" etc. and then mark the block with "list".
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 20, 2019, 08:14:30 PM
I agree the handling of lists in 2.0.x is not great. I'm not sure what the best solution is, but it's not the current one. :D

I suppose you could have a line-height button. 2.0.x already has the .doubleheight class, which has a line-height of 2em. Not that it really gets used enough to be worth a class, but it seemed like a good idea at the time. But you could do something similar with a BBC button if anyone thought it was worth it.

Example: Have button > sets line-height > input box to enter number of em > enter 99 (em line-height) > hey presto, big gaps between li's.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 20, 2019, 08:48:32 PM
All i need is the [li] line of text [/li] button and the same for the parent: "list" ... "/list".

Any volunteers  ;) ?

Might try dougies BBCodes Manager mod
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: GL700Wing on October 20, 2019, 09:52:14 PM
QuoteYou could make new icons easily enough. ;)
Done - just too tired to follow through in the early hours of this morning ;)

The icons need to be copied to ./images/bbc/ and the code in ./Sources/Subs-Editor.php changed to the following:
array(
'image' => 'list_padded',
'code' => 'list',
'before' => '[list]\n[li style="padding-bottom:1em"]',
'after' => '[/li]\n[li style="padding-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_unordered_padded']
),
array(
'image' => 'orderlist_padded',
'code' => 'orderlist',
'before' => '[list type=decimal]\n[li style="padding-bottom:1em"]',
'after' => '[/li]\n[li style="padding-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_ordered_padded']
),

Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 20, 2019, 10:14:36 PM
Might be a good idea to use margin instead of padding. Just in case some nutter decides to throw extra styling at .bbc_list and ends up with something that looks weird with a padded li.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: GL700Wing on October 20, 2019, 10:43:25 PM
Quote from: Antechinus on October 20, 2019, 10:14:36 PM
Might be a good idea to use margin instead of padding. Just in case some nutter decides to throw extra styling at .bbc_list and ends up with something that looks weird with a padded li.
Thanks for the feedback - done!

In ./Sources/Subs-Editor.php
array(
'image' => 'list_padded',
'code' => 'list',
'before' => '[list]\n[li style="margin-bottom:1em"]',
'after' => '[/li]\n[li style="margin-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_unordered_padded']
),
array(
'image' => 'orderlist_padded',
'code' => 'orderlist',
'before' => '[list type=decimal]\n[li style="margin-bottom:1em"]',
'after' => '[/li]\n[li style="margin-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_ordered_padded']
),
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 01:19:00 AM
i made those changes but it's not what I had hoped for ALTHOUGH the padding works well so big thanks there.

I simply want to wrap the li tags to any line that i mark/highlight and then once that is done, I want to mark/highlight the lot to wrap the list tags to complete the list.

I am not so bothered about the padding.

so:

a
ab
abc
abcd

needs to look like:


i simply would like a (li etc.)button that wrapped the codes around each line and then finally, i can just hit another button (list etc.)after marking the whole bunch of lines.

The above example would involve 5 steps: markup each line (4 times/4 lines) and then markup the lot.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 02:05:32 AM
it's ok, i have made the changes myself based on your input and kept the ones for line spacing too (only my bit shown):

                        array(
                                'image' => 'li',
                                'code' => 'li',
                                'before' => '[li]',
                                'after' => '[/li]',
                                'description' => $txt['bbc_li']
                        ),
                        array(
                                'image' => 'list',
                                'code' => 'list',
                                'before' => '[list]',
                                'after' => '[/list]',
                                'description' => $txt['list_unordered']
                        ),
                        array(
                                'image' => 'orderlist',
                                'code' => 'orderlist',
                                'before' => '[list type=decimal]',
                                'after' => '[/list]',
                                'description' => $txt['list_ordered']
                        ),
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 02:39:48 AM
i HAD TO REPOST - SMF gave me a 500 error when i tried to attach a png screenshot.

see: https://www.simplemachines.org/community/index.php?topic=570184.msg4035152#msg4035152

In ./Sources/Subs-Editor.php

                        array(
                                'image' => 'li',
                                'code' => 'li',
                                'before' => '[li]',
                                'after' => '[/li]',
                                'description' => $txt['bbc_li']
                        ),
                        array(
                                'image' => 'list',
                                'code' => 'list',
                                'before' => '[list]',
                                'after' => '[/list]',
                                'description' => $txt['list_unordered']
                        ),
                        array(
                                'image' => 'orderlist',
                                'code' => 'orderlist',
                                'before' => '[list type=decimal]',
                                'after' => '[/list]',
                                'description' => $txt['list_ordered']
                        ),


The "li.gif" icon need to be copied to ./Themes/default/images/bbc
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 02:43:18 AM
Quote from: aegersz on October 21, 2019, 01:19:00 AM
i made those changes but it's not what I had hoped for ALTHOUGH the padding works well so big thanks there.

I simply want to wrap the li tags to any line that i mark/highlight and then once that is done, I want to mark/highlight the lot to wrap the list tags to complete the list.

I am not so bothered about the padding.

so:

a
ab
abc
abcd

needs to look like:


  • a
  • ab
  • abc
  • abcd

i simply would like a (li etc.)button that wrapped the codes around each line and then finally, i can just hit another button (list etc.)after marking the whole bunch of lines.

The above example would involve 5 steps: markup each line (4 times/4 lines) and then markup the lot.

see: https://www.simplemachines.org/community/index.php?topic=570184.msg4035152#msg4035152

In ./Sources/Subs-Editor.php

                        array(
                                'image' => 'li',
                                'code' => 'li',
                                'before' => '[li]',
                                'after' => '[/li]',
                                'description' => $txt['bbc_li']
                        ),
                        array(
                                'image' => 'list',
                                'code' => 'list',
                                'before' => '[list]',
                                'after' => '[/list]',
                                'description' => $txt['list_unordered']
                        ),
                        array(
                                'image' => 'orderlist',
                                'code' => 'orderlist',
                                'before' => '[list type=decimal]',
                                'after' => '[/list]',
                                'description' => $txt['list_ordered']
                        ),


The "li.gif" icon need to be copied to ./Themes/default/images/bbc
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 21, 2019, 02:44:23 AM
Really not sure how this helps. SMF defaults to a list with two items to show you how to correctly fill in a list... this just makes it so much easier to write bad markup.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 21, 2019, 02:46:31 AM
Quote from: GL700Wing on October 20, 2019, 10:43:25 PM
Quote from: Antechinus on October 20, 2019, 10:14:36 PM
Might be a good idea to use margin instead of padding. Just in case some nutter decides to throw extra styling at .bbc_list and ends up with something that looks weird with a padded li.
Thanks for the feedback - done!

In ./Sources/Subs-Editor.php
array(
'image' => 'list_padded',
'code' => 'list',
'before' => '[list]\n[li style="margin-bottom:1em"]',
'after' => '[/li]\n[li style="margin-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_unordered_padded']
),
array(
'image' => 'orderlist_padded',
'code' => 'orderlist',
'before' => '[list type=decimal]\n[li style="margin-bottom:1em"]',
'after' => '[/li]\n[li style="margin-bottom:1em"][/li]\n[/list]',
'description' => $txt['list_ordered_padded']
),


Surprised that works, the bbc fixer-upper in preparsecode doesn't like that kind of thing.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 03:17:42 AM
Why so ?

I just markup each line then markup the entire block ?

Anyway, it works for me and i am happy that i got the support to point me in the right direction.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 21, 2019, 03:30:25 AM
I quite like the idea. The default SMF "example" is fiddly to fill out, and generally a PITA.

The catch is obviously that this new method does leave open the possibility that muppets (oh si, the universe has a plethora) will post without bothering  to do all the tags correctly. In fact it's not a possibility. It's as certain as death and tax evasion. So, it would probably need some safeguard for general use (auto wrapping in a ul tag if no parent tag found is one obvious thought).
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 21, 2019, 03:34:58 AM
Quote from: Antechinus on October 21, 2019, 03:30:25 AM
I quite like the idea. The default SMF "example" is fiddly to fill out, and generally a PITA.

The catch is obviously that this new method does leave open the possibility that muppets (oh si, the universe has a plethora) will post without bothering  to do all the tags correctly. In fact it's not a possibility. It's as certain as death and tax evasion. So, it would probably need some safeguard for general use (auto wrapping in a ul tag if no parent tag found is one obvious thought).

SMF will do this. In fact, SMF's protection against bad and outright invalid markup is what gave the OP grief originally. If the markup is right (no br jammed in anywhere), it all works as expected.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 04:20:05 PM
Quote from: Antechinus on October 21, 2019, 03:30:25 AM
I quite like the idea. The default SMF "example" is fiddly to fill out, and generally a PITA.

Absolutely. I just had to use my method only moments ago and it saved a lot of grief.

I urge Simple Machines to replace the existing one with mine so I can become famous  ;)
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 21, 2019, 04:21:24 PM
I urge nothing of the sort, given that while the current one might be a PITA, going this way will actually lead to more confusing behaviour in future.

Especially with the much more better WYSIWYG editor in 2.1.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 04:24:21 PM
I have yet to see version 2.1 - do you have a running version somewhere that I can "play" with ?
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Arantor on October 21, 2019, 04:36:31 PM
Quote from: aegersz on October 21, 2019, 04:24:21 PM
I have yet to see version 2.1 - do you have a running version somewhere that I can "play" with ?

No. I am actively not developing on 2.1, but on my own very specialised branch of 2.1 that I guarantee will not be of use to you.

But since 2.1 is available on GitHub in it's not-yet-RC3 format, there's nothing stopping you giving it a test drive.
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 04:41:08 PM
thanks
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 21, 2019, 06:31:29 PM
Bookmark this link: https://www.simplemachines.org/community/index.php?topic=558451.0

It's the best place to get the latest builds. ;)
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 09:00:36 PM
Done !

The only reason I have not yet looked into it is because I have made so many local modifications, not to mention over 140 packaged mods !

What if i like it ?  ;) :P

Thanks again.
Title: Re: added padding support
Post by: aegersz on October 21, 2019, 09:37:51 PM
I added padding to the line, if anybody wants it.

                        array(
                                'image' => 'li_padded',
                                'code' => 'li_padded',
                                'before' => '[li style="padding-bottom:1em"]',
                                'after' => '[/li]',
                                'description' => $txt['bbc_li_padded']
                        ),
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 09:41:47 PM
My editor:
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: Antechinus on October 21, 2019, 10:40:04 PM
Not enough buttons. :P
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 21, 2019, 11:27:29 PM
Indeed  ;D !

Guess which 2 non-vanilla buttons gets the busiest workout ...
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 23, 2019, 12:43:42 AM
Wiki (via it's mod) and HTML
Title: Re: [list] [li]x[/li] [li]y[/li] [/list] adding $ signs and extra [/list] codes ...
Post by: aegersz on October 28, 2019, 03:46:37 PM
... whoops, I forgot - to see the button hover functions:

in ./Themes/default/languages/Post.english.php:

after:
$txt['bbc_quote'] = 'Insert Quote';

add:
$txt['bbc_li'] = 'Insert List Item';
$txt['bbc_li_padded'] = 'Insert List Item with Padding';