Better highlight invisible pages in panel

Hey there,
I’ve set up a simple calendar for a client where he can add/edit events (as pages). By default the event is added as an invisible one, to make it possible for him to work iteratively (add description today and the image tomorrow or so). This was his decision during the development process but nowadays he is just confused why an event is not displayed when he has added it to the list… (I receive a support mail every 2-3 months that something must be broken but it isn’t). I have also added some kind of “info-text” to describe to process of making pages visible after creating them (screenshot german only) but it doesn’t seem to be obvious for him.

So of course I could just ignore invisibility of pages at all but maybe the process & state in the panel could become more intuitive as well. I have two suggestions:

  1. Write ‘invisible’ (maybe smaller and italic or so) instead of a minus “-” in the sidebar list of pages

  2. When adding a new subpage add a third button “Add and make visible”

Maybe someone has experienced similar problems or can provide an obvious workaround without compromising functionality :slight_smile:

Warm regards,
Dennis

1 Like

Suggestion 3 :wink:

There’s a plugin for ‘auto publish’, to set a page to visible when the page is created : https://github.com/groenewege/kirby-auto-publish . It works with 2.2, so you have to try if it works with 2.3 as well!

Cool, maybe I will use this for my client :slight_smile: But this still doesn’t help making the semantic distinction more obvious.
Maybe giving the successfully published (visible) pages another color like a subtle green could help as well.

You could try with a custom panel stylesheet: https://getkirby.com/docs/cheatsheet/options/panel-stylesheet. Problem is you can’t do this on a per template basis, but only for all sidebar pages.

An alternative would be to use a (hidden) field that injects some styles into the sidebar.

I like to use a custom panel stylesheet to make the invisible pages look faded:

/* List of Subpages */
.sidebar-list .invisible {
  opacity: 0.3;
}

.sidebar-list .invisible:hover,
.sidebar-list .invisible:active {
  opacity: 1;
}

You could customize my drafts widget to only show drafts of events:

This seems to be a nice addition to the core panel, of course if the contrast ratio is still accessible :slight_smile:

To be truly accessible for colour contrast, the opacity should be at least 54%, not 30%… so I should probably change that code!

… or maybe use a (red or orange) color instead?!

It would be nice if the sidebar could be targeted on a per page/per blueprint basis like the form …

1 Like