MMM-cryptocurrency side by side top bar

[StacheEnthusiast]

Currently, the currencies are displaying vertically with lots of padding. How can I alter the css to have them displaying side by side in the top bar?

This is what it currently looks like.

And this is what I would like it to look like

Any help is greatly appreciated!

[StacheEnthusiast]

@StacheEnthusiast

Update: I have taken the cowards way out and trimmed the currencies and duplicated the modules config into different regions of the config.js like top_left, top_center, and top_right. This has solved the issue.

[ninjabreadman]

Hi @StacheEnthusiast, in getDom() at MMM-cryptocurrency.js:164 it creates the layout for the module in a table. It loops through, and for each currency creates a tr (table row) and td (table cell).

It looks a bit like this:

So I think if you take the tr creation outside of the loop, it should work:

getDom: function() {
    if (this.config.displayType == 'logo' || this.config.displayType == 'logoWithChanges') {
        this.folder = (this.config.coloredLogos ? 'colored/' : 'black-white/')
        return this.buildIconView(this.result, this.config.displayType)
    }
    var data = this.result

    var wrapper = document.createElement('table')
    wrapper.className = 'small mmm-cryptocurrency'

    var tableHeader = document.createElement('tr')
    tableHeader.className = 'header-row'

    var tableHeaderValues = [
        this.translate('CURRENCY'),
        this.translate('PRICE')
    ]
    if (this.config.headers.indexOf('change1h') > -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (1h)')
    }
    if (this.config.headers.indexOf('change24h') > -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (24h)')
    }
    if (this.config.headers.indexOf('change7d') > -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (7d)')
    }
    for (var i = 0; i < tableHeaderValues.length; i++) {
        var tableHeadSetup = document.createElement('th')
        tableHeadSetup.innerHTML = tableHeaderValues[i]
        tableHeader.appendChild(tableHeadSetup)
    }
    wrapper.appendChild(tableHeader)

    var trWrapper = document.createElement('tr') // moved from below
    trWrapper.className = 'currency' // moved from below

    for (i = 0; i < data.length; i++) {
        var currentCurrency = data[i]
//      var trWrapper = document.createElement('tr')
//      trWrapper.className = 'currency'
        var name
        if (this.config.displayLongNames) {
            name = currentCurrency.name
        } else {
            name = currentCurrency.symbol
        }

        var tdValues = [
            name,
            currentCurrency.price,
        ]
        if (this.config.headers.indexOf('change1h') > -1) {
            tdValues.push(currentCurrency.percent_change_1h + '%')
        }
        if (this.config.headers.indexOf('change24h') > -1) {
            tdValues.push(currentCurrency.percent_change_24h + '%')
        }
        if (this.config.headers.indexOf('change7d') > -1) {
            tdValues.push(currentCurrency.percent_change_7d + '%')
        }

        for (var j = 0; j < tdValues.length; j++) {
            var tdWrapper = document.createElement('td')
            var currValue = tdValues[j]
            // If I am showing value then set color
            if (currValue.includes('%')) {
                tdWrapper.style.color = this.colorizeChange(currValue.slice(0,-1))
            }
            tdWrapper.innerHTML = currValue
            trWrapper.appendChild(tdWrapper)
        }
//      wrapper.appendChild(trWrapper)
    }
    wrapper.appendChild(trWrapper) // moved from above
    return wrapper
},

I’ve not run this code, as I don’t use MMM-cryptocurrency, but I think it should work. Just be careful when modifying your MMM-cryptocurrency.js to only replace the getDom() function. I also don’t think this should break any of the module’s functionality or styling.

Worst case, you can always use git checkout MMM-cryptocurrency.js to revert to the original version.

[StacheEnthusiast]

@ninjabreadman
Wow, terrific answer and thank you. I will give this a shot and post what I come up with. My attempt at setting the tr widths from custom.css was getting no where.

[ninjabreadman]

@StacheEnthusiast You’re right. Tables don’t take styling very well; table rows (tr) insist on taking their own line, so there’s no easy way to move them beside each other. The proposed solution above should circumvent this, putting all the cells (td) into a single row.