[Mobile] Make Sync icon always visible

Feature requests
, ,
27

The CSS snippet is super useful! Have you been able to work out why the icon occasionally gets layered on top of the menu icon? That’s happening on my iPhone and is a bit annoying. It’s otherwise pretty perfect.

28

It seems to happen sometimes after I open the sidebar, so it may be related to the part that moves the menu aside. It’s definitely annoying but because it’s easy to fix I haven’t put much effort into figuring out exactly what triggers it. (Figuring out a proper fix is likely beyond me, so I’d need good info to bring to someone who could potentially fix it.)

29

I think I fixed it! The original code was just applying when the “drawer” was closed. Adding the code below also applies it when the drawer is open so the icon stays in place. The problem was the icon was disappearing which reverted the other icons back to their original positions. I prefer having it always visible, which this accomplishes.

Also, I love Obsidian. Being able to edit the CCS and have that be a built in feature is just awesome. The mobile app is doing exactly what I need now. Thanks for getting the ball rolling on this one!

Note: I did tweak the top px spacing on mine compared with your CSS above so make sure yours matches up, otherwise it’ll wiggle.

/* 
Display sync icon on mobile while drawer is open. Numbers may need adjusting depending on device.
*/

:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}

:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}

:is(.is-mobile) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}

:is(.is-phone) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}
30

OK, so it looks like you changed every instance of

.workspace:not(:has(.workspace-drawer-backdrop))

to

.workspace:has(.workspace-drawer-backdrop)

Is that right, and is that everything?

31

Yup! That’s the only change. You’ll need both the “not” version and the “has” version included in the CSS to make it apply with the drawer open and closed.

1 Like
32

Ah, that would explain why replacing it broke things.

33

Having both fixes the prior breakage, but the sidebar flies across the screen when I open it.

34

Edit: Looks like this is causing an issue with pulling out the right drawer, so still not perfect! Will keep messing around with it and let you know if I solve it. Maybe somebody else can chime in with a fix as well.

Weird! Here’s my full CSS file which is working well on my iPhone:

/* 
Display sync icon on mobile while drawer is closed. Numbers may need adjusting depending on device.
*/

:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}

:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}

:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}

:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}


/* 
Display sync icon on mobile while drawer is open. Numbers may need adjusting depending on device. 
*/

:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}

:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}

:is(.is-mobile) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}

:is(.is-phone) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}


/* 
Move 3-dot menu to make room for Sync icon. 
*/

:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 32px;
}

:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 27px;
}
1 Like
35

Here’s my latest code which fixes the error pulling out the right drawer. It’s working as expected on my iPhone.

This version does not display the sync icon when the right drawer is pulled out - it’s as if the icon fully moves to the main screen. The only minor bug is the icon flickers when sliding the right drawer out of view. I don’t use the right drawer much on mobile so this isn’t a big issue for me.

I’m also not using the animation CSS because I find it can be a bit annoying if I’m taking notes somewhere I don’t have cell service. So if you want that it would need to be added separately.

/* 
Always display sync icon on mobile and move 3-dot menu to make room. 
Numbers may need adjusting depending on device.
*/

:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}

:is(.is-mobile, .is-phone) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}

:is(.is-mobile) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}

:is(.is-phone) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}

:is(.is-mobile) .view-actions {
padding-right: 32px;
}

:is(.is-phone) .view-actions {
padding-right: 28px;
}
36

Sync icon rotation is now a default feature! (As of at least 1.14.16.) Discord

1 Like
37

What is sync icon rotation? Is that just the icon rotating while syncing is occurring?

38

Correct.

2 Likes
39

Yes. The post I replied to shared a CSS snippet that enables it, but it’s not needed anymore because it’s a core feature now.

1 Like
40

Ah, I see. Thanks!

41

Hey there, just wanted to thank you for the snippet, works like a charm on Android pixel 7 and loving it ! It was missing a lot.

2 Likes
42

Thanks for the awesome snippet. I was struggling with partial syncs when I close the app too quickly on IOS, this will for sure help.

.sync-status-icon.mod-working svg {
    color: #FF8C00;
}

Adding this to the snippet will make the sync icon orange instead of blue to make it stand out more.

1 Like
43

Use Case or Problem

Whenever I open my phone with Obsidian Sync, my rule is: ‘Don’t touch anything until the sync is completed.’ This is because I frequently encounter conflicts during syncing, resulting in content loss. For reference, see this discussion:
This morning, my daily note was overwritten due to an Obsidian sync issue.

Proposed Solution

I propose making the sync status visible on the iOS app, similar to how it is displayed on the macOS app (refer to the screenshot below).

image

Current Workaround (Optional)

The existing workaround is cumbersome and involves six steps:

  1. Tap the UI button to open the left panel.
  2. Tap the UI button to access settings.
  3. Scroll down in the settings menu.
  4. Select the ‘Sync’ option.
  5. Scroll down to the ‘Sync Activity View’ button.
  6. Wait to see ‘Fully Synced’ displayed in the logs.
44

Greatly appreciated! Thanks for making this snippet available <3

45

Hello Cawlin,
I am really new to Obsidian and would also like to make sure I am always syncing my Notes. Making the Sync icon always visible would be really nice, but I don’t know how to add this CSS Snippet to my iPhone. Also I didn’t find any Tutorial. I am sorry to bother you, but could you maybe help out :smiley: ?

46

Here’s how to add snippets in general: CSS snippets - Obsidian Help

On iPhone the Files app doesn’t show hidden folders, so you’ll need to use either the CSS Editor plugin or one of the apps mentioned in [Mobile] IOS : App to work with hidden folder.