Compact view option

Ideas & Features
1

I’d love a compact view style option for Fibery.

I’m very bad at css, but I’ve been tweaking things using Stylus to come up with my own best attempt. For anybody interested, here’s what I’ve got so far. Suggestions welcome.

.ProseMirror ul, li, p {
    line-height: 1.3 !important;
    margin-bottom: .1em !important;
}

.ProseMirror h1, h2, h3, h4 {
    line-height: 1.3 !important;
    margin-top: .5em !important;
    margin-bottom: .1em !important;
}

.enhance > .EntityNodeView {
    min-height: inherit;
    line-height: inherit;
    margin-bottom: inherit;
    background-color: rgba(134, 134, 134, .2) !important;
    padding: 2px 5px 2px 5px !important;
}

.core, .EntityLinkGroupItem {
    padding-top: 0px !important;
    margin-bottom: 0px !important;
}

.MenuItem {
    height: 25px !important;
}
2

Can you provide a little screenshot for those who don’t want to apply the CSS just to see the example? :wink:

1 Like
3

Sure. Compare the default style:

Screen Shot 2021-09-17 at 5.02.21 PM
Screen Shot 2021-09-17 at 5.02.21 PM944×372 88.2 KB

With my poor attempt at a compact style:

Screen Shot 2021-09-17 at 5.02.08 PM
Screen Shot 2021-09-17 at 5.02.08 PM959×317 77.9 KB

1 Like
4

Thanks @Travis.
I actually use 80% zoom with Fibery just to achieve something similar!

1 Like