[RFC|Merged] Removal of imagesets

[brunoais]

Currently <img> tags are used in code for last post and newest post icons, like this:

Code: Select all

<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF -->

If imageset wouldn't exist anymore, that code could be changed to something like this:

Code: Select all

<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}" class="icon-newest">{L_NEWEST_POST}</a> <!-- ENDIF -->

and would require adding something like this to css:

Code: Select all

.icon-newest { 
    display: inline-block;
    background: url(newest.png) 0 50% no-repeat;
    width: 0; /* padding is used for width */
    height: 10px; /* image height */
    padding-left: 11px; /* offset text to hide it, equal to image width */
    overflow: hidden; /* hide text */
}

That would get rid of <img> tag and put meaningful text instead of it. After applying that css it would look the same as it used to.

Just one detail. Instead of using classes like @class="icon-newest", I believe we should use classes like @class="icon newest". Reason?
We, for any reason, may want to apply some specific style to all icons no matter which they are. Instead of repeating the styling for each style or use a huge list of ',,,,,' for each icon, we can just use the selector ".icon".
I don't know if this applies but imagine that you want all icons to be inline-blocks with overflow hidden. You may do something like this:

Code: Select all

.icon { 
    display: inline-block;
    overflow: hidden; /* hide text */
}

Or you could apply these two lines of code to every single icon. How may icons are there? Some, right? That's how many. Also, if we want to change this to all icons how do we do it? I think you got the picture. Please note that you can, however, create exceptions (by following the CSS hierarchy rules)

Code: Select all

.icon { 
    display: inline-block;
    overflow: hidden; /* hide text */
}
.icon.newest { 
    display: block;
}

This will make all icons inline-blocks with overflow hidden except the icon newest which is a block and not an inline-block.

Extra: With this we may be able to save some chunks of CSS code and bandwith

Here I'm talking about icons but this applies to anything we create with this way of thinking but that is away from the purpose of this RFC.

[Arty]

That is a good idea.

However, current version of class names is direct port from imageset and class names in this RFC should match old imageset names, so class names should not be changed. I think your idea should be added to [RFC] Clean up of prosilver code

[nextgen]

Still the possibility is working to make it bearable for other languages?

Example --> viewtopic.php?f=84&t=41543&start=40#p232955

Or trying to be handled differently?

[oddfish]

Nice work on these changes Arty.

Noticing the merge of #10378, should not all ./en buttons be changed over to ./ in colours.css and imageset.css to complete it?

[Arty]

No, those css entries are for global stylesheet.css, not en/stylesheet.css, so it should link to directory en/, not ./

[oddfish]

Ok thanks.

I would have thought to allow for whatever a user selects as their default language, would have set the image globally by default to the image language path ( ./theme/../*.img ) so no changes were required in any css?

[oddfish]

That too does not make logic.

A default board language may not be en so why would globally, en be set at all?

[nextgen]

Honestly I'm not convinced this change.
Has errors in other languages.

[Arty]

Take a look at very common situation: user has installed his language pack, but style does not have imageset for it.

In 3.0: edit, quote and other language specific images disappear
In 3.1: edit, quote and other language specific images fall back to English

That's why that change is there.

[nextgen]

happens to other languages?
as is the change to run the imageset?