span: class="d-none d-md-inline", “d-md-none” in translated strings

Hello,
I am trying to translate HyperKitty. Can somebody explain me in the strings:
<span class="d-none d-md-inline">Start a n</span><span class="d-md- none">N</span>ew thread
<span class="d-none d-md-inline">Manage s</span><span class="d-md- none">S</span>ubscription
what the purpose is of d-none, d-md-inline, d-md-none and how are these strings supposed to be translated?
Assuming they are Bootstrap-invention to present different text on differently-wide screens, I tried to make my browser narrower and wider, while https://lists.mailman3.org/archives/list/mailman-users@mailman3.org/ is loaded, and I see no big difference. The whole block “+Start a new thread” is replaced by “+ New”, without “ thread” afterwards. On wide screen the block is light-blue, on narrow screen it is greyed out. The “Manage subscription” disappears. I have to add, that I am not logged in.
Greetings Дилян

On 5/15/22 12:21, Дилян Палаузов wrote:
They are bootstrap classec and are not to be translated.
I'm not sure why you see that. Taking
<span class="d-none d-md-inline">Start a n</span><span
class="d-md-none">N</span>ew thread
as an example the whole point of the span tags is to render the initial
text as either Start a n
or N
depending on screen size and in either
case followed by ew thread
so that the entire rendered string becomes
either Start a new thread
or New thread
depending on screen size.
That's all you need to translate,
Depending on what the actual translations of Start a new thread
are
are New thread
you may be able to translate this similarly or you may
need to translate it more like
<span class="d-none d-md-inline">Start a new</span><span
class="d-md-none">New</span> thread
or even
<span class="d-none d-md-inline">Start a new thread</span><span
class="d-md-none">New thread</span>
-- Mark Sapiro <mark@msapiro.net> The highway is for gamblers, San Francisco Bay Area, California better use your sense - B. Dylan

Hello Mark,
the hyperkitty page for https://lists.mailman3.org/archives/list/mailman-users@mailman3.org/ has this form templates/hyperkitty/overwiev.html:
<!-- Overview page for large screens. --> <div class="d-none d-md-block"> <div class="list-actions"> {% if posting_enabled %} <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}" class="btn btn-outline-primary {% if not user.is_authenticated %} disabled" title="{% trans 'You must be logged-in to create a thread.' %}{% endif %}"> <i class="fa fa-plus"></i> {% trans '<span class="d-none d-md-inline">Start a n</span><span class="d-md-none">N</span>ew thread' %} </a> {% endif %} </br>
Now, class="d-none d-md-block" is display:block , when the viewport is at least 576px, otherwise it is display:none . Likewise
<span class="d-none d-md-inline">Start a n</span><span class="d-md- none">N</span>ew thread
class="d-none d-md-inline” is display:inline, when the width of the view port is at least 576px and display:none otherwise. Class="d-md- none" is only visible, when the width is at most 576px.
For screens, which are less than 576px wide, the whole block «<div class="d-none d-md-block">» is hidden, and «<span class="d-none d-md- inline">Start a n</span><span class="d-md-none">N</span>ew thread» is not displayed.
So, when is “<span class="d-md-none">N</span>” supposed to appear? It never appears.
Greetings Дилян
On Sun, 2022-05-15 at 18:22 -0700, Mark Sapiro wrote:

On 5/16/22 05:49, Дилян Палаузов wrote:
It doesn't appear because the templates were changed as part of the migration to bootstrap 4. However the string exists in two templates, templates/hyperkitty/overview.html and templates/hyperkitty/thread_list.html, and should be translated.
-- Mark Sapiro <mark@msapiro.net> The highway is for gamblers, San Francisco Bay Area, California better use your sense - B. Dylan

On May 15, 2022, at 2:41 PM, Дилян Палаузов <dpa-mailman@aegee.org> wrote:
what the purpose is of d-none, d-md-inline, d-md-none and how are these strings supposed to be translated?
This is cascading style sheets markup. The “class” attribute refers to one or style sets defined elsewhere and explicitly included in this document. You will need to look at the included or referenced style sheet information to get the full meaning of these class values.
Sent from my iPhone

On 5/15/22 12:21, Дилян Палаузов wrote:
They are bootstrap classec and are not to be translated.
I'm not sure why you see that. Taking
<span class="d-none d-md-inline">Start a n</span><span
class="d-md-none">N</span>ew thread
as an example the whole point of the span tags is to render the initial
text as either Start a n
or N
depending on screen size and in either
case followed by ew thread
so that the entire rendered string becomes
either Start a new thread
or New thread
depending on screen size.
That's all you need to translate,
Depending on what the actual translations of Start a new thread
are
are New thread
you may be able to translate this similarly or you may
need to translate it more like
<span class="d-none d-md-inline">Start a new</span><span
class="d-md-none">New</span> thread
or even
<span class="d-none d-md-inline">Start a new thread</span><span
class="d-md-none">New thread</span>
-- Mark Sapiro <mark@msapiro.net> The highway is for gamblers, San Francisco Bay Area, California better use your sense - B. Dylan

Hello Mark,
the hyperkitty page for https://lists.mailman3.org/archives/list/mailman-users@mailman3.org/ has this form templates/hyperkitty/overwiev.html:
<!-- Overview page for large screens. --> <div class="d-none d-md-block"> <div class="list-actions"> {% if posting_enabled %} <a href="{% url "hk_message_new" mlist_fqdn=mlist.name %}" class="btn btn-outline-primary {% if not user.is_authenticated %} disabled" title="{% trans 'You must be logged-in to create a thread.' %}{% endif %}"> <i class="fa fa-plus"></i> {% trans '<span class="d-none d-md-inline">Start a n</span><span class="d-md-none">N</span>ew thread' %} </a> {% endif %} </br>
Now, class="d-none d-md-block" is display:block , when the viewport is at least 576px, otherwise it is display:none . Likewise
<span class="d-none d-md-inline">Start a n</span><span class="d-md- none">N</span>ew thread
class="d-none d-md-inline” is display:inline, when the width of the view port is at least 576px and display:none otherwise. Class="d-md- none" is only visible, when the width is at most 576px.
For screens, which are less than 576px wide, the whole block «<div class="d-none d-md-block">» is hidden, and «<span class="d-none d-md- inline">Start a n</span><span class="d-md-none">N</span>ew thread» is not displayed.
So, when is “<span class="d-md-none">N</span>” supposed to appear? It never appears.
Greetings Дилян
On Sun, 2022-05-15 at 18:22 -0700, Mark Sapiro wrote:

On 5/16/22 05:49, Дилян Палаузов wrote:
It doesn't appear because the templates were changed as part of the migration to bootstrap 4. However the string exists in two templates, templates/hyperkitty/overview.html and templates/hyperkitty/thread_list.html, and should be translated.
-- Mark Sapiro <mark@msapiro.net> The highway is for gamblers, San Francisco Bay Area, California better use your sense - B. Dylan

On May 15, 2022, at 2:41 PM, Дилян Палаузов <dpa-mailman@aegee.org> wrote:
what the purpose is of d-none, d-md-inline, d-md-none and how are these strings supposed to be translated?
This is cascading style sheets markup. The “class” attribute refers to one or style sets defined elsewhere and explicitly included in this document. You will need to look at the included or referenced style sheet information to get the full meaning of these class values.
Sent from my iPhone
participants (3)
-
Lindsay Haisley
-
Mark Sapiro
-
Дилян Палаузов