MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 15:56, 30 Jul 2010 by kalida
User:dev > Specs > Popup CSS Unification
Page Notifications Off

Popup CSS Unification

    Introduction

    We need a common CSS strategy for popup dialogs being used in the product, including location/positioning of buttons, form elements, handling overflows, etc.

    References

    See bug http://bugs.developer.mindtouch.com/view.php?id=8435

    Status

    Implemented in 10.0.1

    Functional Specification

    Use Cases

    Have common styles for all special page popups

    The programmer should have a way to specify a special page form to be consistent with the rest of the site.

    Assign item to be a "footer" element from within the content area

    The programmer can choose a "footer" element to appear in a consistent manner among all popups.

    Have common styles for all footer elements

    Footer elements should have padding that matches the rest of the form (click for full screen):
     
    cssSpec.png
     
    Requirements: 
     
    1. Inner padding for primary content (pink, above) should be framed by the footer border
    2. Padding within the footer area should match padding for content area
    3. Footer itself should be positioned away from edges of the <body> to match the padding in the inner content area.

    Have common styles for all messaging elements

    Screenshot for error messages:
    sample-error.png
     
    Requirements
    1. Error message overlay window to avoid pushing down content

    Have common styles for forms

    Using DekiForm methods will automatically use the correct styles for popups if they are marked with "special-page-form".

    <form class="special-page-form">
    <!-- render form elements -->
</form>

     

    To have a button appear right-aligned in the footer, use

    <div id="footer">
    <div class="buttons-bottom">
        <?php echo DekiForm::singleInput('button', ...); ?>
    </div>
</div>

    Technical Specification

    CSS details

    General framework for popup

    <html>
<head>
    <!-- default css and javascript -->
</head>

<body id="SpecialPagePopup" class="page-special-popup">
    <!-- message html: MTMessage (id: MTMessage) & FlashMessage (ul class="flashMsg") -->

    <div id="container">
        <div id="container-wrap">
            <!-- main body, form rendering, etc. -->
            <form class="special-page-form">
                ... 
            </form>

            <!-- footer element will be absolutely positioned on bottom, no matter where it appears -->
            <div id="footer">
                <!-- footer buttons, etc. -->
            </div>    
        </div>
    </div>
</body>
</html>
    A form with the class "special-page-form" will receive the common styling.
    Tag page
    What links here

    Files 2

    Attach file or image
    FileVersionSizeModified 
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by