# --
# AgentHTMLReferencePageLayout.dtl - HTML reference page layout page
# Copyright (C) 2001-2010 OTRS AG, http://otrs.org/
# --
# $Id: AgentHTMLReferencePageLayout.dtl,v 1.9 2010/12/14 12:42:20 mb Exp $
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (AGPL). If you
# did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
# --

<div class="MainBox ARIARoleMain AgentHTMLReference OutlineBox">
    <h1>Page Layout</h1>

    <p class="Documentation">
        Around the content, a <code>&lt;div class="MainBox"&gt;&lt;/div&gt;</code>
        has to be used in most cases (this one is highlighted).
    </p>

    <p class="Documentation">
        There are different kind of layout containers that you can use to
        achieve different page layouts: LayoutFixedSidebar, LayoutGrid and LayoutPopup.
    </p>

    <h2>LayoutFixedSidebar</h2>
    <p class="Documentation">
        This will generate a layout with a fixed-width sidebar which will be displayed
        <em>before</em> the content column (in reading direction).
    </p>

    <div class="LayoutFixedSidebar SidebarFirst OutlineBox DocumentationExample">
        <div class="SidebarColumn OutlineBox">Sidebar</div>
        <div class="ContentColumn OutlineBox">Content</div>
        <div class="Clear"></div>
    </div>
    <p class="Warning Spacing">
        Don't forget to add the clearing div after the content column.
    </p>

    <p>
        If you want to switch the sidebar so that it comes <em>after</em>
        the content column, just exchange the modificator class
        <code>SidebarFirst</code> for <code>SidebarLast</code>. Don't modify
        the order in the markup, i.e. the sidebar must still come first.
    </p>
    <div class="LayoutFixedSidebar SidebarLast OutlineBox DocumentationExample">
        <div class="SidebarColumn OutlineBox">Sidebar</div>
        <div class="ContentColumn OutlineBox">Content</div>
        <div class="Clear"></div>
    </div>

    <p class="Documentation">
        An example layout with some content:
    </p>
    <div class="LayoutFixedSidebar SidebarFirst DocumentationExample">
        <div class="SidebarColumn">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>Actions</h2>
                </div>
                <div class="Content">
                    <ul class="ActionList">
                        <li>
                            <a href="#" class="CallForAction"><span>Go to overview</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ContentColumn">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>List</h2>
                </div>
                <div class="Content">
                    <table class="DataTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Group</th>
                                <th>Comment</th>
                                <th>Valid</th>
                                <th>Changed</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="6">
                                    No data found.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="Clear"></div>
    </div>

    <h2>LayoutGrid</h2>
    <p class="Documentation">
        <code>LayoutGrid</code> offers a flexible page layout based on columns. You can place boxes inside the container
        and specify for each box how many columns it should take (e. g. 2 of 4). Then it will have the appropriate
        width. After each line, you need to add a clearing div.
    </p>

    <div class="LayoutGrid OutlineBox DocumentationExample">
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Size2of4"><div class="OutlineBox">2 of 4</div></div>
        <div class="Clear"></div>
        <div class="Size3of4"><div class="OutlineBox">3 of 4</div></div>
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Clear"></div>
    </div>

    <p class="Documentation">
        If you want to have a spacing between the columns, just add the modificator class
        <code>ColumnsWithSpacing.</code>.
    </p>

    <div class="LayoutGrid ColumnsWithSpacing OutlineBox DocumentationExample">
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Size2of4"><div class="OutlineBox">2 of 4</div></div>
        <div class="Clear"></div>
        <div class="Size3of4"><div class="OutlineBox">3 of 4</div></div>
        <div class="Size1of4"><div class="OutlineBox">1 of 4</div></div>
        <div class="Clear"></div>
    </div>

    <p class="Documentation">
        Currently, there are 2-, 3- and 4-column grid layouts available.
        Let's see an example with some content.
    </p>


    <div class="LayoutGrid ColumnsWithSpacing DocumentationExample">
        <div class="Size1of3">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>Preference1</h2>
                </div>
                <div class="Content">
                    <p>
                        Form Content
                        <br/>
                        More
                        <br/>
                        More
                        <br/>
                        More
                    </p>
                </div>
            </div>
        </div>
        <div class="Size1of3">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>Preference2-0</h2>
                </div>
                <div class="Content">
                    Form Content
                </div>
            </div>
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>Preference2-1</h2>
                </div>
                <div class="Content">
                    Form Content
                </div>
            </div>
        </div>
        <div class="Size1of3">
            <div class="WidgetSimple">
                <div class="Header">
                    <h2>Preference3</h2>
                </div>
                <div class="Content">
                    Form Content
                </div>
            </div>
        </div>
    </div>

    <h2>LayoutPopup</h2>
    <p class="Documentation">
        <code>LayoutPopup</code> is the page layout to use for popup windows. It consists of a Header, Content, and a Footer section.
    </p>

    <div class="DocumentationExample OutlineBox">
        <div class="LayoutPopup ARIARoleMain">
            <div class="Header">
                <h1>Header</h1>
                <p>
                    $Text{"The ticket has been locked"}.
                    <a class="UndoClosePopup" href="$Env{"Baselink"}Action=AgentTicketLock;Subaction=Unlock;TicketID=$Data{"TicketID"}">
                        $Text{"Undo & close window"}
                    </a>
                </p>
            </div>
            <div class="Content">
                Form content<br/>
                goes<br/>
                here...
            </div>
            <div class="Footer">
                <button class="Primary" id="submitRichText" accesskey="g" title="$Text{"Submit"} (g)" type="submit" value="$Text{"Submit"}">$Text{"Submit"}</button>
            </div>
        </div>
    </div>

    <p class="Documentation">
        Note that you have to put the <code>&lt;form&gt;</code> tag around the entire <code>&lt;div class="LayoutPopup"&gt;</code>,
        because the Footer element also contains a form element.
    </p>

</div>
