Custom CSS to show sync status on top bar in mobile app

[Jayden_Navarro]

Since the Dynalist app doesn’t automatically sync in the background (at least on Android), I always click the three dots and wait for the status to switch to “Synced” before I close the app or turn off my screen. Since I do this so frequently, I really wanted the status to always be visible in the main bar so I didn’t have to click into the menu to view the sync status.

I asked for help about this here (since I didn’t know anything about CSS), but I eventually decided to just give it a go myself and found a solution that seems to work well! If you’re not a fan of the red/green you can just remove the color: lines in the CSS and it will be the default grey.

You can view the last post in that linked thread for more details on how it works, but here’s what the app looks like with the custom CSS (source below):

Here is what it looks like when it is in “Saved” state (not synced):

Here is what it looks like when it is in “Synced” state:

Here is what the open menu looks like (notice that it removes the status from the left since it reformats the menu to be right aligned like normal):

Here is the custom CSS:

/* Make Save Now status red */
.MobileHeader-moreOption--saveNow {
    display: block !important;
    color: #d62c2c;
}

/* Make Saved status red */
.MobileHeader-moreOption--saved.is-disabled {
    display: block !important;
    color: #d62c2c;
}

/* Make Synced status green */
.MobileHeader-moreOption--synced.is-disabled {
    display: block !important;
    color: #31a036;
}

/* More-options container visible by default and centered left */
.MobileHeader-moreOptions {
    display: block;
    top: -1px;
    left: 40px;
    right: initial;
    background: initial;
    box-shadow: initial;
}

/* More-options container right aligned if visible */
.is-moreOptionsOpen .MobileHeader-moreOptions {
    top: 5px;
    left: initial;
    right: 5px;
    background: #fff;
    box-shadow: -2px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

/* Hide all more-option(s) by default */
.MobileHeader-moreOption {
    display: none !important;
}

/* Display all more-option(s) if visible */
.is-moreOptionsOpen .MobileHeader-moreOption {
    display: block !important;
}

/* Hide Save Now if hidden */
.MobileHeader-moreOption--saveNow[style*="display: none"] {
    display: none !important;
}

/* Hide Saved if hidden */
.MobileHeader-moreOption--saved[style*="display: none"] {
    display: none !important;
}

/* Hide Synced if hidden */
.MobileHeader-moreOption--synced[style*="display: none"] {
    display: none !important;
}

[Erica]

Woo! Looking cool

[Kenneth_Aar]

Very nice. Thank you