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>