Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robbie van den Hoven 36 posts 181 karma points
    Mar 26, 2018 @ 14:20
    Robbie van den Hoven
    0

    Change width of editor pane / overlay

    Hi,

    Is there a valid way of making the editor pane (umb-overlay) wider/larger? Would be nice if it has a wider size, but less the size of the doctype/pane with the Stacked Content picker on it.

    I just want to 'override' the size of the pane of an Stacked Content editor, not all the overlays

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Mar 26, 2018 @ 14:35
    Lee Kelleher
    100

    Hi Robbie,

    You could try using a custom CSS rule?

    .inner-content-overlay .umb-overlay-right {
        width: 800px !important;
    }
    

    If you want to know about how to add this in the back-office, take a look at an article that Matt Brailsford wrote for 24days: https://24days.in/umbraco-cms/2015/umbraco-7-back-office-tweaks/


    I'd love the Stacked Content overlay width to be configurable, but requires some time & research to figure it out, (aka it's on my ever growing to-do list) ;-)

    Cheers,
    - Lee

  • Robbie van den Hoven 36 posts 181 karma points
    Mar 26, 2018 @ 14:59
    Robbie van den Hoven
    0

    Hi,

    A configurable width would be nice :-)

    for know I used:

    .stacked-content .umb-overlay-right { width: 800px; }

  • Chris Evans 137 posts 353 karma points c-trib
    Feb 20, 2019 @ 03:34
    Chris Evans
    0

    I second the configurable width idea - that would be amazing.

    Is there a github feature request / issue for this already, or a roadmap of upcoming features we could look at to see when interesting updates of this kind may be released?

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Feb 20, 2019 @ 11:57
    Lee Kelleher
    0

    We don't have any plans to add a configurable width option to the data-type itself, we did add a feature to v2.0.3 which adds extra CSS classes to the overlay modal.

    See here for further details: https://github.com/umco/umbraco-stacked-content/issues/61

    This means that you'd still need to add your own custom CSS rules, but it gives you control over having varying widths for different doctype/property aliases.

    Hope this helps?

    Cheers,
    - Lee

  • Chris Evans 137 posts 353 karma points c-trib
    Feb 20, 2019 @ 21:33
    Chris Evans
    0

    Thanks Lee - this is actually very useful, appreciate it!

  • M N 125 posts 212 karma points
    Nov 15, 2019 @ 21:40
    M N
    0

    Just switched over from Doc Type Grid editor to Stacked Content and thought I would share a complete example of our SCSS.. Kind of quick and dirty, didn't bother with any variables.

    1. Show buttons when you hover anywhere over a stacked item, not just the button hot zones
    2. Matched the purple buttons more closely to the add/paste buttons.
    3. Some padding/margin so we could separate the blocks more clearly.
    4. Bottom most buttons are visible all the time, and are a bit larger than the buttons inside actual stacked items
    5. Flyout Panel 800px - thanks :) good addition
    6. We're using umbracoNaviHide here, so we can disable stacked items. Styles are in there, but you will need to modify your Preview version of CSHTML to have something like

      < div class="@(!Model.IsVisible() ? "stack-disabled" : "" )">

      @Html.Raw(html)
      

      < /div> (sorry editor is failing hard)

    Our updated Stacked Content UI now looks like this (you can hover anywhere on the panel to get the buttons) -

    enter image description here

    And the SCSS

    .stacked-content {
        .umb-overlay-right {
            width: 800px;
        }
        // holds all individual stacked items
        .stack__wrapper {
            // contains all stacked items, buttons for add, delete, copy, etc.
            .stack {
                // alternate stacked item backgrounds. meh
                .stack__item:nth-child(even) {
                    background: #fff
                }
    
                .stack__item:nth-child(odd) {
                    background: #FFF
                }
                // individual stacked items!
                .stack__item {
                    margin-top: 25px;
                    padding: 20px;
                    transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1);
    
                    &:hover {
                        box-shadow: 0 0 5px #ccc;
                    }
                    // add / paste buttons
                    .stack__add-bar {
                        margin: 0;
                        height: 0;
                        position: relative;
                        top: -35px;
    
                        &.stack__add-bar--top {
                        }
    
    
    
                        .stack__add-button, .stack__paste-button {
                            transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
                        }
                    }
                    // preview and copy/delete buttons
                    .stack__preview-wrapper {
                        border: 1px solid #f8f8f8;
                        // preview holder
                        .stack__preview {
                            background: #fdfdfd;
                            min-height: 50px;
                            padding: 20px;
    
                            .stack-disabled {
                                position: relative;
    
    
                                &:before {
                                    content: "Disabled";
                                    position: absolute;
                                    top: -20px;
                                    left: -20px;
                                    color: white;
                                    padding: 4px 10px;
                                    background-color: #aa0000;
                                    border-radius: 2px;
                                    font-weight: bold;
                                    text-transform: uppercase;
                                    opacity: 1 !important;
                                }
    
                                * {
                                    opacity: .7;
                                }
                            }
                        }
                        // button holder
                        .stack__buttons {
                            //opacity: 1 !important;
                            position: absolute;
                            right: -34px;
                            top: -7px;
                            background: transparent;
                            color: white;
                            bottom: 0;
                            height: 0;
                            transition: all .2s cubic-bezier(0.39, 0.575, 0.565, 1);
    
                            &:after {
                                display: none;
                                opacity: 0;
                            }
    
                            .no-overflow {
                                .stack__button {
                                    display: block;
                                    margin-bottom: 3px;
                                }
                            }
                        }
                    }
                    // Show buttons on panel hover
                    &:hover {
                        .stack__add-button, .stack__paste-button {
                            opacity: 1 !important;
                        }
    
                        .stack__buttons {
                            opacity: 1 !important;
                        }
                    }
                }
            }
            // add / paste buttons at the bottom that are not attached to a
            .stack__add-bar.stack__add-bar--bottom {
                margin: 0;
                padding: 50px;
                margin-bottom: 20px;
                background: #fdfdfd;
                height: auto;
                margin-top: 15px;
    
                .stack__add-button {
                    opacity: 1 !important;
                    margin-right: 5px;
                }
    
                .stack__paste-button {
                    opacity: 1 !important;
                }
    
                .stack__add-button, .stack__paste-button {
                    padding: 7px 7px;
                }
            }
        }
    }
    

    Minified CSS

    .umb-nested-content__item .umb-nested-content__content .umb-nested-content__item .umb-nested-content__content{background:#f3f3f3}.stacked-content-label{color:#000;font-weight:700;font-size:16px;position:relative;width:355px;top:29px;padding-bottom:20px}.stacked-content .umb-overlay-right{width:800px}.stacked-content .stack__wrapper .stack .stack__item:nth-child(2n),.stacked-content .stack__wrapper .stack .stack__item:nth-child(odd){background:#fff}.stacked-content .stack__wrapper .stack .stack__item{margin-top:25px;padding:20px;transition:all .2s cubic-bezier(.39,.575,.565,1)}.stacked-content .stack__wrapper .stack .stack__item:hover{box-shadow:0 0 5px #ccc}.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar{margin:0;height:0;position:relative;top:-35px}.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar .stack__add-button,.stacked-content .stack__wrapper .stack .stack__item .stack__add-bar .stack__paste-button{transition:all .2s cubic-bezier(.39,.575,.565,1)!important}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper{border:1px solid #f8f8f8}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview{background:#fdfdfd;min-height:50px;padding:20px}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled{position:relative}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled:before{content:"Disabled";position:absolute;top:-20px;left:-20px;color:#fff;padding:4px 10px;background-color:#a00;border-radius:2px;font-weight:700;text-transform:uppercase;opacity:1!important}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__preview .stack-disabled *{opacity:.7}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons{position:absolute;right:-34px;top:-7px;background:transparent;color:#fff;bottom:0;height:0;transition:all .2s cubic-bezier(.39,.575,.565,1)}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons:after{display:none;opacity:0}.stacked-content .stack__wrapper .stack .stack__item .stack__preview-wrapper .stack__buttons .no-overflow .stack__button{display:block;margin-bottom:3px}.stacked-content .stack__wrapper .stack .stack__item:hover .stack__add-button,.stacked-content .stack__wrapper .stack .stack__item:hover .stack__buttons,.stacked-content .stack__wrapper .stack .stack__item:hover .stack__paste-button{opacity:1!important}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom{margin:0;padding:50px;margin-bottom:20px;background:#fdfdfd;height:auto;margin-top:15px}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__add-button{opacity:1!important;margin-right:5px}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__paste-button{opacity:1!important}.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__add-button,.stacked-content .stack__wrapper .stack__add-bar.stack__add-bar--bottom .stack__paste-button{padding:7px}
    

    /App_Plugins/StackedContent/package.manifest

    {
      "javascript": [
        "~/App_Plugins/StackedContent/js/stackedcontent.js"
      ],
      "css": [
        "~/App_Plugins/StackedContent/css/stackedcontent.css",
        "~/path-to-new-css/main.css"
      ]
    }
    

    Hope that helps anyone coming in cold :) Cheers

Please Sign in or register to post replies

Write your reply to:

Draft