MMM-cryptocurrency side by side top bar



  • 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.
    Current State

    And this is what I would like it to look like
    What I Would Like

    Any help is greatly appreciated!



  • @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.



  • 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:

    0_1520721637727_Screen Shot 2018-03-10 at 5.33.03 PM.png

    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.



  • @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.



  • @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.