silverstripe-cms
silverstripe-cms copied to clipboard
silverstripe
Add responsive padding to Site Tree
The site tree has quite minimal padding between its items, but now that most of the other CMS elements have had their padding increased, this makes the site tree look a bit cramped and out of place.
Current site tree in master:
I understand this can be useful for sites that have a lot of pages, or on smaller screens, but how about dealing with it the way Gmail does? By increasing the padding on larger screens:
@clarkepaul what's your take on this? It seems like we'd have to make this conditional based on the amount of pages, rather than the screen size?
I started doing increasing the space a while back but found it wasn't as straight forward as I thought with its intricacies like drag drop although back then there was a tree dragging bug so might be easier now (it also wasn't the issue I was supposed to be working on :/).
Tree items should ideally have enough space to be selected using touch devices. We increased the font size in later 3.x versions from 12px to 13ox which helped a bit, I would have preferred going up even more but a lot of field labels have limited space.
As for the collapsing tree for small screens, I'm not that confident on this approach as this is often the place where fingers are used rather than a mouse. I also think there is a different context for email where the most recent items are more important and you try to keep your unread emails to the first page so you can see them at a glance while I'm not confident this pattern applies to site trees for admins.
I'd love to see tree items have more space but with the condensed view I'd want to see a prototype and user testing as it becomes another thing to maintain. In the case, someone wants to take this on... I like the look when the padding is increased from 3px to 5 or 6px padding top and bottom on the links, but the line-height is the thing that really needs to change so it inherits text defaults which have 20px line-height (or whatever it will be in the future).
Design
Inspect: ~~https://invis.io/FDE58JD57#/260432480_Panels_-Pages-Tree_Fullscreen~~ ~~https://invis.io/E8E58KOZ4#/260432497_Panels-Pages-_Tree_Small_Panel~~
As part of this issue, we'd like to also relocate the drag handle to the left gutter of the panel so the gap between the expand arrow and page icon is closer. The overall height of a tree item will be increased to 28px based on our 4px grid.
FYI you'll notice these designs also incorporate the removal of the site-name with expand collapse menu at the top of the tree which means everything has moved slightly left allowing more space for page names (separate issue https://github.com/silverstripe/silverstripe-cms/issues/572 )
Looks great! @purplespider keen to contribute? :D @newleeland can provide you the exact spacings via Invision if you need them - we have a github.com/silverstripe/silverstripe-ux repo with the design source files for this stuff now
Looks great! @purplespider keen to contribute?
Keen, but I don't think it's an area I'm really able to assist with, I'm afraid. Never quite got to grips with adjusting the CMS frontend. Also, I remember when adjusting the sitetree padding in Dev tools, it seemed to cause side effects relating to the drag and drop, which is certainly not an area I can deal with. :(
@newleeland You didn't post any dimensions for the spacing, we will need to add those dimensions but I would suggest we update the Component design instead and provide a link to that here.
See the Site tree component for more complete designs (components/site tree): https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe#5b0214a076d0a60010d9b329