Better highlight invisible pages in panel

Kirby 2 Suggestions šŸ’”
1

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.

Hint Text.png1622Ɨ368 48.8 KB

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

    1 - Sidebar List with visible and invisible pages.png858Ɨ322 31.6 KB

  2. When adding a new subpage add a third button ā€œAdd and make visibleā€

    2 - Add Button.png1044Ɨ202 14.2 KB

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

Warm regards,
Dennis

1 Like
2

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!

3

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.

4

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.

5

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

6

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

7

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

8

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

9

ā€¦ or maybe use a (red or orange) color instead?!

10

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

1 Like