<div class="page">
    <header class="topbar" role="banner">
        <nav class="dashnav">
            <ul>
                <li class="sidebar-trigger"><a href="?sidebar=show"><svg width="30" height="30" class="icon icon-o-birdhouse"><use xlink:href="/assets/svg/core.svg#o-birdhouse" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-dashboard"><use xlink:href="/assets/svg/core.svg#o-dashboard" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-world"><use xlink:href="/assets/svg/core.svg#o-world" /></svg></a></li>
            </ul>
        </nav>

        <nav class="utilnav">
            <ul>
                <li><a href="/"><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> <span>Search</span></a></li>
                <li><a href="/" class="selected"><svg width="16" height="16" class="icon icon-gear"><use xlink:href="/assets/svg/core.svg#gear" /></svg> <span>Settings</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> <span>My Account</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-question"><use xlink:href="/assets/svg/core.svg#question" /></svg> <span>Help</span></a></li>
                <li><a href="/" class="button logout ">Log out</a></li>
            </ul>
        </nav>
    </header>
    <div class="panels">
        <aside class="sidebar">

            <div class="sidebar-nav">
                <div class="appmenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
                <div class="submenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
            </div>

        </aside>

        <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
        <script src="/assets/js/sidebar.js"></script>
        <main class="main-panel">

            <header class="title-panel">
                <h1>Listing all your things</h1>
                <div class="buttons">
                    <a href="/foo" class="button button-icon  icon-left">
                        <div>
                            <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
                            <span>Submit</span>
                        </div>
                    </a>

                </div>
            </header>

            <div class="smartbar">
                <ul>
                    <li>
                        <div class="button-group button-toggle">
                            <a class="button button-small toggle-active" href="/foo"><svg width="12" height="12" class="icon icon-grid-big"><use xlink:href="/assets/svg/core.svg#grid-big" /></svg> Grid</a>
                            <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> List</a>
                        </div>

                    </li>
                    <li>
                        <div class="breadcrumb tab-active">
                            <a href="/grandparent">Grandparent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent">Parent Item</a>
                            <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg>
                            <a href="/grandparent/parent/me">Current Item</a>
                        </div>

                    </li>
                    <li>
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-end smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <a href="/options" class=""><svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Reorder</span></a>
                    </li>
                    <li class="smartbar-util">
                        <button type="submit" name="btnUndo" id="btnUndo" value="Undo" class="button">
<svg width="14" height="14" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> <span>Undo</span>
</button>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <table>
                    <thead>
                        <tr>
                            <th><a href="#">Column heading <svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a></th>
                            <th><a href="#">Column heading</a></th>
                            <th><a href="#">Column heading</a></th>
                            <th><a href="#">Column heading</a></th>
                            <th class="action"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-label="My Label">
                                <a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a> <a href="/" class="create-subitem"><svg width="8" height="8" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg> New subitem</a>                                </td>
                            <td data-label="My Label"><span class="new">New</span> drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label"><svg width="16" height="16" class="icon icon-circle-check icon-listing-status"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg></td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>

                        <tr>
                            <td data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
                            <td data-label="My Label">drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label">1</td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>
                        <tr>
                            <td data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
                            <td data-label="My Label">drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label">1</td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>
                        <tr>
                            <td data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
                            <td data-label="My Label">drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label">1</td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>
                        <tr>
                            <td data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
                            <td data-label="My Label">drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label">1</td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>
                        <tr>
                            <td data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
                            <td data-label="My Label">drew@grabaperch.com</td>
                            <td data-label="My Label">Mango Bingo</td>
                            <td data-label="My Label">1</td>
                            <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </main>

    </div>

</div>
<div class="page">
{{> @topbar }}
	<div class="panels">
		{{> @sidebar }}

		<main class="main-panel">

			{{> @page-head }}

			{{> @tabbed-smartbar }}

			{{> @table-listing }}

		</main>

	</div>

</div>
/* No context defined for this component. */
  • Content:
    .panels {
      width: 100%;
      min-height: 100%;
      display: table;
      display:flex;
    }
    
    body>div.page {
    	height: 100vh;
    }
    
    .smartbar+.inner {
    	padding-top: 0;
    }
  • URL: /components/raw/listing-page/listing-page.scss
  • Filesystem Path: src/components/99-pages/02-listing-page/listing-page.scss
  • Size: 154 Bytes

There are no notes for this item.