Suttaplex lists include everything that was formerly found in Tabular pages, including division, subdivision, and details. I.e. everything apart from the texts, home, search, and static pages.
Our suttaplex list is not identical with any of the stock MD components. It is similar to a “list”, in the the items are arranged in a fixed vertical order. But they have richer content than a list, and in that respect are similar to a “card”.
Here is a mockup of a suttaplex list.
- Title in Translated language is treated as the “title” of a card, in the large size (24px)
- The next line is like the “subtitle” of a card, greyed and smaller (14px). This contains “nerdy details”, eg ID, original language title, and volume/page info.
- If there is no translated title, it defaults to the original language.
- If there is no title, there is just the ID
- Descriptions, where present, are secondary text. They should generally take up no more than two lines.
- The expander on the right shows the parallels for that sutta. (see below).
- Perhaps we could use a MD badge on the expander to indicate the number of parallels. Low priority.
- Select translations using MD flat buttons
- Translator’s names are shown for the selected language.
- In addition, show a dropdown menu with all translations to the right of the translator’s names. This will serve as fallback where there are no translations in that language. This is similar to the old site, except we should show the translator’s names. (Due to the complexity of the data, these are only called on demand.) Eg:
- Sujato en
- Bodhi en
- Keci fr
- In DN and MN (and maybe other places), we can add a “difficulty” icon in the form of a sapling, potted plant, and tree. This guides a new reader. Title attributes explain the meaning. Low priority.
Parallels & references AKA details
We don’t need to go to a new page to display details. Rather, the data is collapsed by default, to allow scanning of the suttaplex list, and the parallels for a specific suttaplex are opened via the expander.
There are several ways of doing this in MD.
The slickest way is to use what MD calls “parent to child” transition:
The surface that the user touches should lift up and expand into place from its origin. This expansion and motion highlights movement away from the parent towards a destination (a child element) in a natural movement using the material motion curve.
This would be the same as opening an email in Inbox.
Here is a Polymer element for this:
However, this approach only works in one-column designs, where there is a margin for the child element to expand into. If this is not appropriate, we can use a simpler expandable element, which is called an “expansion panel”:
Here are some Polymer examples:
Here is a mockup, showing the parent-to-child transition. The expansion panel would look similar, except the transformations are less drastic: it doesn’t move “towards” you, so there is no increase in size or shadow depth. Also it remains connected with the previous and subsequent items.
-
I have not found any of the stock MD design patterns that closely mimics our “parallels”.
-
Spacing is reduced, especially padding above the action row.
-
There could be down arrow in each parallel that, as with the unexpanded version, takes you to the Suttaplex for that sutta. Like the expander, it lives in the action row. However, rather than expanding in situ, it opens the relevant URL (see below, “Suttaplex URL”). So we use a different arrow to indicate a different kind of motion. Low priority. In fact, so low I have removed it for now.
-
The up indicator closes the details view.
-
Show links for original texts as well as translations here. The logic is that someone interested in the parallels is more likely to be interested in the original texts.
-
At the top right of the opened details view there is a small “vertical menu” icon. Let us refer to this menu as the “Suttaplex menu”. This reveals any minor options, including:
- Permalink to Suttaplex URL: this is a simple URL with just the ID, as in the old “details” view. It opens to a page with just the relevant suttaplex, expanded by default. In this view, the position in the hierarchy is indicated via the nav drawer, which is opened and highlighted in the relevant vagga.
- “Cite” button—same as current “cite” function for details. Low priority.
- “Copy table”—copy the parallels data that suttaplex as a plain HTML table, omitting translations, etc. Low priority. Here is a sample based on the dummy data for DN 1. copy-table.html.zip (451 Bytes)
-
Use MD subheading size, i.e. 16px, for titles in expanded view. Same for the ID in the left column.
-
Note that descriptions should be shown for the root text alone, not the parallels. This is because in the majority of cases the parallels are basically the same (duh!).
Some remarks on copy table
Regarding “Copy Table”, we have previously discussed whether to use HTML tables for this data. My main concern is that the data be stable and reusable. To show what I mean, here is a straight copy of the table data into a word processor. I did it the crudest way possible, just highlighting the table and pasting straight into LibreOffice:
As you can see, it’s not too bad. The data and parallel relations are all preserved.
On the other hand, perhaps using tables will not be ideal from a Polymer point of view: I don’t know.
Anyway, what I am thinking is that from the menu, just as we now provide a “Cite” button that allows the data to be reused and pasted as text, how about we have a “copy table” button? This would supply a strictly bare HTML table, with no buttons, links, classes, or whatever, just the raw data. Then it can be used on other sites, posted into a blog, thrown into a Word doc, a powerpoint, or whatever. (Could we maybe have a similar function on Text pages for “Copy Text”? That would copy just the vanilla HTML, no variants, classes, metadata, etc.)
Perhaps this will be useful.
Icons for indicating relations
We use MD icons to indicate various relations between the parallels. So far as possible, these should indicate the kind of relation visually, as well as being harmonious with the intended meaning of these icons
Swap horizontal: full parallel. title=“Full parallel: different versions of the same text.”
Compare: resembling parallel. title=“Resembling parallel: texts are comparable.”
Quote: mentions. title=“Mention: one text is quoted or mentioned in another.”
Cached: retelling. A story or event is “backed up in cache” or “recycled” by being retold in another place. title=“Retelling: the events of one text are retold in another.”
Both mentions and retellings are reversable, as they indicate a directional relationship. To avoid overburdening the icons with meaning, keep the icons simple and further define the relation as necessary in the title attribute, to display on hover. Note that in a retelling it is sometimes possible to indicate a direction (“this event is retold in …”) but often this is not the case, so we use a bidirectional icon.
More info on SuttaPlex nodes: