Moving pudl.bytecode.news to PUDL 0.80.1

pudl.bytecode.news serves PUDL 0.70. This brief covers moving it to 0.80.1, the current release: the one change that will break your build, what you will see change, what to check, what you can now delete, and the new pieces that suit the site. It covers the public pages; the admin, moderation and signed-in pages weren't looked at.

The build: minified files moved

The minified copies now live in dist/min/ under the same names as their sources: dist/min/pudl.css, dist/min/pudl-windows.js and so on. The pudl.min.css and pudl-windows.min.js files your build copies no longer exist. Point the build at dist/min/. The fonts and the url() paths to them inside the stylesheet are unchanged.

Your two issues are fixed

  • #24. A link whose href starts with # is left as written under data-region-link, so a page menu's #heading rows move within their window without changing the address. You can move the article's nav[data-page-menu] back inside the window body.
  • #25. A press outside the windows, such as on a menu bar title, now lands before a docked window's peek is dismissed, so the first press opens the menu. Remove whatever you do to work around it.

What you will see change

  • Window buttons are glyph buttons. Each .win-btn is a raised square, 28px on a floating window and 26px docked, with its glyph as large as the title's text. The window menu button shows a window glyph and a caret.
  • A maximized window has a docked window's title bar, 30px tall. Your article windows on narrow screens (data-win-narrow="maximized") gain a little height.
  • A dock tab has a right-click menu, its window's menu, opened against the tab, with an accent ring on the tab while it is open. data-win-tab-menu="off" on the layer or the dock turns it off.
  • The window menu reads in blocks. The window's own commands end with Reset size and position, then the layout picker under a Snap heading and the edges under a Dock heading, each set apart by a line.
  • Menus line up. Glyphs, ticks and warnings share one column, and a long panel stays below its title and scrolls rather than flipping above it.
  • Small buttons are 28px tall, a glyph button's height. Your feed pills are .topbar-pill and don't change; a .btn-sm on the board or in a window grows a little.
  • A field with a button inside it is one sunken field, with the button as a raised strip inside its border. That includes a master-detail toolbar's filter with its apply button, so look at your board's search form.
  • Toasts stand above a taskbar along the window's foot. You have none there, so your pudlToast() calls look as they do now.

What to check

  1. The dock tab's menu button. brand.css enlarges .win-dock-group .win-dock-menu from 18px to 24px for touch. PUDL still draws and places that button at 18px, so keep the rule and look at it once after upgrading.
  2. Search with a window open. bcn-search's capture-phase submit listener relies on running before pudl-regions.js handles the submit. That ordering hasn't changed, but it's the kind of reliance an upgrade can disturb.

Nothing your scripts use has changed. That covers:

  • the calls: pudlWindows.state(), .open(), .raise() and .replace(), and pudlToast();
  • the events, with the same detail: pudl:windows-change, pudl:window-close, pudl:window-place, pudl:window-open, pudl:regions-swap and pudl:md-resize;
  • the address parameters: open, top, min, p.*, d.left and d.right;
  • .menubar-ready, .win-collapsed, --win-min-h and --win-head-docked.

New pieces that suit the site

A taskbar above the windows

Your dock sits in the board's .md-toolbar.md-site-tools, beside its heading and search form. PUDL now has a taskbar, and data-win-bar-edge="top" puts it above the window area:

<div class="win-bar" data-win-bar-edge="top">
  <nav class="win-dock" data-win-dock aria-label="Open windows"></nav>
  <a class="icon-btn" data-win-back href="…" aria-label="Minimize all windows"></a>
  <a class="icon-btn" data-win-restore href="…" aria-label="Restore all windows"></a>
  <a class="icon-btn" data-win-close-all href="…" aria-label="Close all windows"></a>
</div>

The dock keeps to one line and scrolls when it needs more room, and your own buttons may stand on either side of it in markup order. PUDL keeps the three links pointed at the state they produce and disabled while they would change nothing. Minimize all and Restore all share one place, showing whichever is useful. Close all closes each window as its own Close button would. Left empty, the links get PUDL's glyphs. A press in the bar's padding goes to the nearest button, a right-click away from a tab opens the bar's own menu, and a .status-area in the bar is its tray. Your md-back link, Back to the list on a narrow screen, is a separate control and can stay where it is.

Title glyphs

data-menu-glyph="name" on a title's <li> puts a glyph before its words. When the bar runs short of room, those titles show their glyph alone before the bar collapses to one button, which keeps the menus one press away longer on a phone. Go, Applets, View and Window could take home, app, eye and window.

A menu bar that unfolds into a ribbon

data-menubar-ribbon on the menu bar adds a Show as ribbon toggle at the topbar's end. Unfolded, every title becomes a tab, and a row of tools under the topbar holds the chosen tab's commands. Your bar is mostly links, which become buttons. While an article is in front, its Story and Contents menus become tabs too, and Contents' anchor links would become a row of buttons, so try it before deciding.