Next: 2do for the front end

These notes are a collection of items remaining to be completed or adjusted on the front end. The reference version of the site front end is the nextontwo branch on 7-9-2017.

The spec for the design is defined on Discourse in a series of posts:

We tried to follow the Material Design specs as closely as possible.

Most of the spec has already been implemented by Vimala, so you can ignore it for practical purposes. During the development process, some things in the spec were changed, but the spec itself has not always been updated; where they differ the nextontwo implementation is usually correct, except where noted.

Here I will mention those things still unfinished.


  • Shadows: The shows under the toolbar currently violate Material design (MD), as they are the same height as the sidebar. The implementation on the search result pages, however, is correct: no shadow when scrolled to the top, and the toolbar “rises” to let the page flow underneath it where necessary. We should use the same implementation everywhere. I think the shadow depth here is correct, but we should check that it is “above” all the elements on the suttaplex list.
  • Note that the shadow under the vert-menu at the top right of the toolbar also needs attention.
  • The vert-menu is incomplete: it will ultimately include all the things currently found in the footer of the old site, although not necessarily in the same way. At some point I will reorganize and prepare this material.
  • One of the additional items for this menu will be the PWA “Enable offline” option. This should be immediately below the Language selector. It should activate a modal dialog,.
  • The “donations” button should call a modal dialog which makes available a Stripe connection.
  • I’m happy with the general behavior of the search field, but it needs to be carefully tested for narrow screens.
  • Autocomplete results would be nice, but is perhaps an enhancement rather than core.

Nav Drawer

  • Certain items should be open by default, so that new visitors can see what’s there. I would suggest we open LONG, MIDDLE, LINKED, and NUMBERED by default (to use the correct names!). Just open to the first level, not the full hierarchy.
  • I have some vaguely conceived ideas about increasing the awesome quotient of the nav drawer. It seems to me that as well as functioning as navigation, it can also serve as guide to where you are, in a way similar to breadcrumbs. The context is somewhat different, but you can see something like what I mean here: The side menu is dynamic, it opens and closes as you navigate, highlighting your current location, so it is helping you keep your place. Anyway, this is one for the “enhancement” basket.

Suttaplex list

  • The background should be --paper-grey-100
  • The expander icons should uniformly align right. This was correct before the upgrade to 2.0, so there is some bug here. Not sure what the cause is, because the CSS looks correct to me (flexbox, justify:space-between)
  • The “recommended” icons at the top-right of the suttaplex need a little attention. The weight is not uniform; the root files, if I recall correctly, are available in multiple weights, so this should be fixable. Also, I was thinking of giving them colors in shades of green: bright for the sapling, middle for the pot plant, and dark green for the tree. These icons are from Note that these icons are covered by a CC licence, and for whatever files we end up using, those details must be noted so we can mention it on our copyright page.
  • In the “nerdy details” row, the vol/page information can be displayed using HTML details/summary. This function is extremely rarely used. For browsers that don’t support this, just disable it, set the display of the details to “none”.
  • Currently the buttons for the translation authors use the most minimalist MD button style. This may be fine, or perhaps we want to use “lift on hover” or something else.
  • It would be good to somehow emphasize the new segmented Pootle translations. At the least, they can be the first button.
  • In the expanded view of the parallels, I have used a minimal styling to define each parallel item. I’m not sure about this: is it enough to sufficiently visually distinguish them? maybe we should give them a background color? .parallels-root-cell, .parallels-parallel-cell {background-color: #f5f5f5}
  • The animation of the suttaplex when it expands is currently not perfect. It “lifts” and expands vertically. But in MD the motion should always be realistic, so if it is to lift, it should expand horizontally too, and zoom slightly, like lifting a piece of paper. On the other hand, maybe it’s better to keep it simple and not have it lift at all, just expand vertically.

Text pages

  • I’ve designed the typography here (and throughout) myself, so please don’t change anything without consulting me.
  • In the segmented views—both side-by-side and line-by-line—the typography needs work. But I am waiting until we have a stable implementation before adjusting this.
  • The text columns in the side-by-side view are currently too narrow. I think each of the columns should be as wide as a normal text column if the screen is wide enough, and shrink gracefully from there.
  • The “Tools and Information” dialog should be centered.
  • Do we need to do something to draw extra attention to the “Tools and Information”?
  • There’s a bug in the “View Textual Information”. The reference numbers inherit link styling, giving an unwanted underline.


  • Currently, in the nav draw and dropdowns, we indicate language with the text of the ISO code, eg 'pi", “fr”, etc. But I wonder whether it would be better to use SVG icons for this.

These icons may also be obtained from

  • The rotating image used for the Home page is just an idea. It replaces the random quote on the old site. We haven’t given a huge amount of thought to the content of the Home page, so consider this as placeholder. Images on the home page
  • I have made some suggestions for making better use of wide screens. The design here is outdated, but the general idea is there: General flow of SC Next This should probably go in the “enhancement” basket.
  • Since we have such cool graphing capabilities gifted to us for free via ArangoDB, it would be nice to expose this for our users. Maybe we can wrap the Arango web interface in a web component and let the user play with it?