Display3: A responsive three-column display case UI

philmasterplus · Jan 6, 2021

Display3 is a relay override for your display case page (displaycollection.php). It converts the single-column display case to a manageable, responsive three-column UI, just like your inventory. This also changes other people's display cases, too. No more scrolling hell!

This relay script does not affect the Display Case management pages (managecollection.php, managecollectionshelves.php). You can use it with other Display Case manager scripts, such as the Display Case organizer.

Installation

Enter the following in the gCLI:

Code:

svn checkout https://github.com/Loathing-Associates-Scripting-Society/display3/branches/release

P.S. I tested this against HolderOfSecrets's (#216194) display case. Check it out, but it will be slow.

fronobulax · Jan 6, 2021

Thanks.

I saw

Multiple matches for "fire flower"; using "[10462]fire flower". Clarify by using one of: (file:/D:/Dropbox/dist/relay/displaycollection.js#246)
"[2426]fire flower"
"[10462]fire flower"
Item descid mismatch for 'fire flower': expected 845086769, got 348302801
Multiple matches for "rock"; using "[8042]rock". Clarify by using one of: (file:/D:/Dropbox/dist/relay/displaycollection.js#246)
"[2108]rock"
"[8042]rock"
Item descid mismatch for 'rock': expected 683893245, got 807981274

which may be something you want to deal with. I know some scripts have eliminated the message but they are usually using an item name embedded in the script.

Also, I am admittedly notorious for using one screen on a laptop and wanting graphics to cater to my preferences. So I think three columns with a horizontal scrollbar is not actually any easier than one very long display that only needs to scroll in one dimension. If I go full screen it looks fine and doesn't scroll horizontally. So while this does what it intends to do, it is probably not something I will continue using

Thanks.

philmasterplus · Jan 6, 2021

fronobulax said:
Thanks.

I saw

Multiple matches for "fire flower"; using "[10462]fire flower". Clarify by using one of: (file:/D:/Dropbox/dist/relay/displaycollection.js#246)
"[2426]fire flower"
"[10462]fire flower"
Item descid mismatch for 'fire flower': expected 845086769, got 348302801
Multiple matches for "rock"; using "[8042]rock". Clarify by using one of: (file:/D:/Dropbox/dist/relay/displaycollection.js#246)
"[2108]rock"
"[8042]rock"
Item descid mismatch for 'rock': expected 683893245, got 807981274

which may be something you want to deal with. I know some scripts have eliminated the message but they are usually using an item name embedded in the script.

Also, I am admittedly notorious for using one screen on a laptop and wanting graphics to cater to my preferences. So I think three columns with a horizontal scrollbar is not actually any easier than one very long display that only needs to scroll in one dimension. If I go full screen it looks fine and doesn't scroll horizontally. So while this does what it intends to do, it is probably not something I will continue using

Thanks.

View attachment 10078

Thank you. I was considering making it responsive so that when the page shrinks, the tables auto-collapse to 2 columns, then 1 column.

I can't promise anything, but I'll post an update when I make progress.

matt.chugg · Jan 8, 2021

Had a look, works pretty well for me

2 col version is pretty simple fix, just add this to the css file, fiddle with the 800px for threshold

Code:

@media(max-width:800px) {
    .display3-shelf__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

This actually has me thinking, is there a method for KoLmafia to inject custom css into any page? like the way overrides work, but if css_{name} is found in the relay folder, add it to the page in the head tag - or a directory of "always include" css files for people to work on locally which is always included?

The part of me that likes to be challenged is considering a CSS only version of this

[/tangent]

philmasterplus · Jan 8, 2021

matt.chugg said:
Had a look, works pretty well for me

2 col version is pretty simple fix, just add this to the css file, fiddle with the 800px for threshold

Code:

@media(max-width:800px) { .display3-shelf__items { grid-template-columns: repeat(2, 1fr); } }

This actually has me thinking, is there a method for KoLmafia to inject custom css into any page? like the way overrides work, but if css_{name} is found in the relay folder, add it to the page in the head tag - or a directory of "always include" css files for people to work on locally which is always included?

The part of me that likes to be challenged is considering a CSS only version of this

[/tangent]

I don't know about a "universal" relay override, but it would require more than CSS to manipulate KoL's markup. 4-6 layers of nested tables and CENTERs...does not make a fun bed for styling. I'll be seriously impressed if you can hack it together with pure CSS.

matt.chugg · Jan 9, 2021

challenge accepted!

matt.chugg · Jan 9, 2021

In this example there is a relay override to inject stylesheet link, I also added a body class, technically I could compile the sass for multiple pages and inject the same stylesheet link, and give different body classes to different pages so one compiled css file could do many different pages individually.

Code:

buffer inject_css_link(buffer page) {
    page.replace_string("</head>",
         "<link rel=\"stylesheet\" href=\"/sassify/css/custom.css\" />");
    return page;
}

buffer inject_body_class(buffer page) {
    page.replace_string("<body>",
         "<body class=\"display\">");
    return page;
}

void main() {
   visit_url().inject_css_link().inject_body_class().write();
}

you're completly right that the KoL Markup is horrible to work with for styling, no ids or classn ames and horrible levels of embedding, it's hard to decide whether to be proud of this or horrified!

Code:

body.display {
    
    /* force all tables, cells and rows to act as divs */
    table, tbody, tr, td, center,span {
        display:block; width:100%; box-sizing: border-box;
    }
    
    /* correct centering on first item */
    table  table  table  {
        text-align: center;
        
        /* add better spacing between shelves */
        margin-bottom:10px;
        table {margin:0;}
        
        /* make shelf title padding nicer */
        > tbody > tr > td:first-child > b  {
            display:block; margin:0px auto; padding:6px;
        }
    }

    /* 
        SHELVES
        each shelf has an id starting with shelf.. 
        create flow layout for shelves with various sizes for thresholds
    */
    span[id^=shelf] {

        tbody {
             text-align: left;
        }
        /* each item is a tr with a table */
        tr {
            display:inline-block !important;
            @media (min-width:1800px) {
                width:20% !important;    
            }
            @media (min-width:1224px) AND (max-width:1799px) {
                width:25% !important;    
            }
            @media (min-width:1024px) AND (max-width:1223px) {
                width:33.33% !important;    
            }
            @media (min-width:800px) AND (max-width:1023px) {
                width:50% !important;    
            }
            // correct the image and text positions
            td {
                display:table-cell !important;
                &:first-child {width:30px !important;}
                &:nth-child(2) {text-align: left;}
            }
        }
        
        
    }
    
    
}

The SASS and Compiles CSS is in the zip file below

Apologies if this is threadjacking

I notice that KoLmafia inject it's own stylesheet in from the relay folder (basic.1.css) - I wonder if it would be possible to add functionalit to KoLMafia:

1: add a body class decorator to the relay processing to add classes to the body tag, this would allow people to customise basic.1.css (or an alternate that isn't overwritten when updated). This would allow people to use body.classname() css selectors in a single script

2: in the same was as file_name.ash is used to override a request, when mafia already adds basic.1.css is could look for requestname.css and add that too, people could then just cxreate their own css files (adding this to mafia instead of creating relay override for each page would mean people could still create their own relay overrides on top of css modification)

philmasterplus · Jan 28, 2021

Version 0.1.2 is now available. It brings several fixes and changes, including the ones reported in reply #2.

Collapse tables into 1-2 columns when the window becomes small (in v0.1.1)
Remove the "multiple matches for rock" warning messages (in v0.1.1)
Fix some parsing bugs
Correctly render very large shelves
Other fixes

To update, use:

Code:

svn update Loathing-Associates-Scripting-Society-display3-branches-release

Display3: A responsive three-column display case UI

philmasterplus

Active member

fronobulax

Developer

philmasterplus

Active member

matt.chugg

Moderator

philmasterplus

Active member

matt.chugg

Moderator

matt.chugg

Moderator

Attachments

philmasterplus

Active member