Showing sync status in mobile top bar?

❓Help
1

Is it possible to add custom CSS (or some other setting or “hack”) to get the sync status to show up on the top bar in the mobile app? Currently you have to click on the three dots and then look at the top item to see if it’s “Saved” or “Synced”, but I’d really like to be able to view this information without clicking into a menu.

Unfortunately the mobile app doesn’t sync once it goes out of focus or the screen is off, so I always need to check to make sure it’s “Synced” before closing it, so having this status front and center on the mobile app would be super useful.

I don’t have experience with CSS, and I’m not even sure it’s within the scope of what it can do, but if anyone knows of a way to use the custom CSS to add this functionality I would be extremely grateful!

2

Most definately.

This should cut it.

Drop this in your css:

    .is-mobile .header-sync-state.mod-synced, .is-mobile .header-sync-state.mod-saved, .is-mobile .header-sync-state.mod-sync-now {
display:block !important;
    }
3

Actually that doesn’t do the trick it seems. The class is called, .AppHeader-syncStatus. . I can’t get it to display on mobile.

I tried.

4

Okay, so I think I figured out a way to do this in CSS, but it will require a little bit of help from the Dynalist team @Erica @Shida .

I want to set the color of the “three dots” (.MobileHeader-option--moreOptions) to red if it’s “Saved” and green if it’s “Synced”. The issue is that this element is not related in a way to the “Saved”/“Synced” elements that will allow it to be conditionally selected based on the status (e.g. display Red if “Synced” is status="display: none;", otherwise display Green).

The super simple solution (although will require a small change on the Dynalist side) is to add an invisible element as an ancestor to .MobileHeader-option--moreOptions that sets an attribute that describes whether we’re currently “Saved” or “Synced”. Then I can use the CSS descendant selector to conditionally set the “three dots” to either red or green using something like the following:

/* Make three dots red by default */
.MobileHeader-option--moreOptions {
 color: #d62c2c;
}

/* Make three dots green if saved */
.MobileHeader-option[sync-state='saved'] .MobileHeader-option--moreOptions {
 color: #31a036;
}

If there’s a simpler way to do this (ideally one that doesn’t require a change on the Dynalist side) I would be eager to know.

Thanks!

Just realized that CSS may only be evaluated on initial page load…which would mean this solution would not work as it would depend on the changing status. Would the CSS for the three dots be reevaluated if this element changed (or would it be possible to make that happen?).

5

Thanks for looking into this Robert.

For now I just changed the font colors for “Saved”/“Synced” to make it stand out more, but I would really like a “zero-clicks” solution for checking the status on mobile.

Here’s my current CSS:

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

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

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

I figured out a solution!

I added CSS to always make the moreOptions menu visible, but removed all of the moreOption elements within the list unless .is-moreOptionsOpen is present. Then I made it so that by default all of the sync elements were visible unless explicitly [style*="display: none"] was present, and set the moreOptions style to be left aligned so I didn’t block the existing icons and made the background invisible so that only the text showed up. Per my original CSS posted in this thread I made the text red when not synced, and green when synced so it stands out more.

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

image
image468×937 59 KB

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

image
image468×937 58.9 KB

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

image
image468×937 66.7 KB

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;
}
7

Sorry we’re late! Looks like you figured it all out though :wink: @Jayden_Navarro