Skip to content

Add components for portfolio manager

This MR hands off the UI components for the tile-based Portfolio Manager demonstrated in torque-tracker#415. Note that you'll need the companion portfolio-manager branch from LFCTheme.

JavaScript:

  • portfolio-manager-menus.js: JS for the "add to portfolio" (Explore) and "toggle portfolios" (individual pages) action menus

CSS:

  • portfolio-manager.css: All the CSS

Templates (all in templates/portfolio-manager-examples) for you to use wherever they are needed:

  • explore-add-to-portfolio.mustache: For the Explore menu.
  • proposal-toggle-portfolio.mustache: For the individual page action menu.
  • portfolio-tiles.mustache: The index page that shows a grid of portfolios.
  • portfolio.mustache: A single portfolio page, showing a grid of pages/proposals.

A note about submenus: They're easy to use, just drop a normal menu inside the .dropdown-menu-items li of another menu. There's no special class or anything; the CSS (and JS) just recognize that it's a submenu and go from there.

<details class="ots--dropdown">
  <summary class="dropdown-trigger ots--button">Dropdown</summary>
  <div class="dropdown-menu">
    <ul class="dropdown-menu-items">
      <li>
        <button>Main item 1</button>
      </li>
      <li>
        <a href="#">Main item 2</a>
      </li>
      <li>
        <details class="ots--dropdown">
          <summary class="dropdown-trigger">Main item 3 (submenu)</summary>
          <div class="dropdown-menu">
            <ul class="dropdown-menu-items">
              <li>
                <button>Sub item 1</button>
              </li>
              <li>
                <button>Sub item 1</button>
              </li>
              <li>
                <button>Sub item 1</button>
              </li>
            </ul>
          </div>
        </details>
      </li>
    </ul>
  </div>
</details>

Merge request reports

Loading