Lotro-Wiki.com talk:System Tools

From Lotro-Wiki.com
Jump to navigation Jump to search

Template Documentation

Hi all! I created a Documentation page for Template:Deed - please take a look and feedback/improve. Thanks! Sethladan 03:45, 6 December 2010 (EST)

Table striping

The current implementation of "table striping" breaks down in two scenarios:

  1. When the table is resorted, the background colors aren't updated.
  2. In the presence of "rowspan" tags (see below).

To fix these, I think we will have to use JavaScript instead of the built-in ".odd" and ".even" features of CSS. However, first we need to decide upon the "striping" algorithm itself.

Option 0 (existing implementation)

The problem with the existing implementation is shown below. Column 3 is striped correctly. But Columns 2 and 1 are colored to match the first corresponding cell in Column 3. This causes consecutive rows in Columns 1 and 2 to have the same color. This is a problem, for example, because it may not be obvious whether "Data L" belongs to "Data J" or "Data N".

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data G
Data H
Data IData JData K
Data L
Data MData NData O

Option 1

One potential "striping" algorithm is shown here. All of the columns are treated independently; all of the columns are vertically striped. This can cause oddities, such as "Data M" and "Data N" not being the same color as "Data O".

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data G
Data H
Data IData JData K
Data L
Data MData NData O

Option 2

Another potential "striping" algorithm. Only Column 1 is striped. Then the colors are continued horizontally to the corresponding cells in Columns 2 and 3.

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data G
Data H
Data IData JData K
Data L
Data MData NData O

The above looks nice and works well when the "rowspans" are on the left, but it wouldn't work well for something like the following. (I have no idea how prevalent this is on the site.)

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data GData H
Data IData J

--Thurallor (talk) 20:54, 3 October 2020 (UTC)

Discussion

Thanks for looking into this! "In the beginning.." we never really used sorting, not sure if it just wasn't available at the time or if we were just newbs back then. In any case visually I like Option 2 myself keeping all the congruent data together highlighted. Rogue (talk) 15:02, 4 October 2020 (UTC)

I also like Option 2. I think in the case of no overlapping rowspans, the color of a cell should dictate the color for all rows that cell is a member of.

I don't think we'll need to support overlapping rowspans, but this is the problem they cause: (rowspans >1 highlighted)

Column 1Column 2Column 3
Data AData BData C
Data EData F
Data GData I

The above approaches would fail to color this table sensibly, but I think that's OK. The specific case that brought this up was multiple instances of the same NPC in Belfalas Category:Cape of Belfalas Homesteads NPCs, where the rowspan in the first column *should* dominate the coloring of all rows in that rowspan, and where a mixing of rowspans like this would not make sense. --B414213562 (talk) 16:00, 4 October 2020 (UTC)

Thanks, I tried to make a table with overlapping rowspans like that, but couldn't get it to work. xD I think it's exceedingly rare or nonexistent on the site. In any case it's not difficult to search the site and manually check the results. --Thurallor (talk) 19:08, 4 October 2020 (UTC)
I also like option 2 and agree that overlapping rowspans is probably not an issue. One other thing to keep in mind is that I use the class "altRowsPad" pretty extensively in tables so as to not have to manually set the table width and make it more friendly for different screen sizes, resolutions, and monitor orientations, so whatever solution you implement for altRowsMed please copy to altRowsPad as well. --Gaerlin (talk) 03:43, 6 October 2020 (UTC)

Option 3.1

If more than two colors are an option, you could color sub-rows differently:

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data G
Data H
Data IData JData K
Data L
Data MData NData O

Option 3.2

I don't personally like that. A variation would be to provide a visual separator within solid rows:

Column 1Column 2Column 3
Data AData BData C
Data DData E1Data F
Data E2Data G
Data E3Data H
Data IData J1Data K
Data J2Data L
Data MData NData O

--B414213562 (talk) 16:23, 4 October 2020 (UTC)

Option 4

Another alternative would be to eliminate the striping and use a different visual mechanism for delineating the cells. Here I've used a diagonal gradient in the backgrounds:

Column 1Column 2Column 3
Data AData BData C
Data DData EData F
Data G
Data H
Data IData JData K
Data L
Data MData NData O

This option would be the easiest to implement. But some people might not like the somewhat "3D" appearance. --Thurallor (talk) 19:08, 4 October 2020 (UTC)

More Discussion

I like the gradient as long as there's a way to opt-in to this / opt-in to the old striping style. I don't know that I'd want to see it applied to every table regardless of whether it's needed. --B414213562 (talk) 21:35, 4 October 2020 (UTC)

Ooooooh to option 4. Nice looking. Personally I think that would eliminate the separation issue as it deviates just enough. Rogue (talk) 19:51, 4 October 2020 (UTC)

I really like option 4 as well visually, however it's a little hard to see. Could it be made slightly darker? Rubyctook (talk) 19:05, 6 October 2020 (UTC)
It certainly could, but I think the ideal darkness depends on the brightness/contrast of one's screen hardware and settings. As suggested by B414213562, Option 4 could be implemented as a skin option, in addition to Option 2 for the main skin(s). --Thurallor (talk) 19:23, 6 October 2020 (UTC)

Implementation

I've made a simple function to apply striping to a table (using a generalized form of the Option 2 algorithm). Here's an example table (borders are shown for clarity):

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Data 7
Data 8
Data 9 Data 10 Data 11
Data 12
Data 13 Data 14 Data 15
Data 16 Data 17
Data 18 Data 19 Data 20
Data 21 Data 22
Data 23 Data 24
Data 25 Data 26 Data 27

To try it out, you can paste following into the JavaScript console. (In Chrome, press Ctrl+Shift+I to open the developer tools. Then select the "Console" tab, and paste the following and press ENTER.) 

for (table of document.getElementsByTagName("table")) {
    if (table.className.match("(^| )altRows(Med|Pad)( |$)")) {
        var rowHeight = 1;
        var dark = true;
        for (row of table.getElementsByTagName("tr")) {
            for (cell of row.getElementsByTagName("td")) {
                if (dark) {
                    cell.setAttribute("style", "background-color:#EEEEFF");
                } else {
                    cell.setAttribute("style", "background-color:white");
                }
                cellHeight = cell.getAttribute("rowspan") || 1;
                if (rowHeight < cellHeight) {
                    rowHeight = cellHeight;
                }
            }
            rowHeight = rowHeight - 1;
            if (rowHeight == 0) {
                dark = !dark;
            }
        }
    }
}

Note that Data 18 - Data 24 are all considered one row, because of the overlapping rowspans. I don't think that actually ever happens on the site, but this is how it will be treated, if it does.

Now to figure out how to integrate into the site's skins and javascript files. --Thurallor (talk) 23:17, 13 October 2020 (UTC)

With Drono's help, this has now been added to MediaWiki:Common.js and should now work for all tables on the site with any of the "altRows..." classes. (That includes the example above, so the table in this section is now striped intelligently.) --Thurallor (talk) 17:40, 14 October 2020 (UTC)
To see the how the Cape of Belfalas Homesteads NPCs table would have looked with the new algorithm (before Rubyctook reformatted it with <br> tags instead of rowspans), see here. --Thurallor (talk) 17:47, 14 October 2020 (UTC)
To see the new table-striping in action on a sortable table, see Legacy Cost Progression. --Thurallor (talk) 00:59, 15 October 2020 (UTC)
Retrieved from "https://lotro-wiki.com/w/index.php?title=Lotro-Wiki.com_talk:System_Tools&oldid=1203354"