SuttaCentral

MD Header Toolbar


#1

MENU

The top header AKA Title bar AKA “Tool bar”.

https://material.io/guidelines/components/toolbars.html2

https://material.io/guidelines/layout/structure.html#structure-app-bar1

The Toolbar keeps similar behavior to the current design. I.e. it is narrow, retracts on scroll-down, and reappears on scroll-up. This is the default behavior of the Polymer app layout:

https://www.webcomponents.org/element/PolymerElements/app-layout1

The essential elements are, from left to right:

  • Hamburger for nav drawer

  • Adaptable title

  • Search

  • Forum

  • Tools/settings

  • Vertical menu

     ≡  Middle Discourses                                🔍  🗪  ⚙ ⋮
    

Tools and chat are context dependent.

##Color

Toolbar background color should change according to context. Rather than the pastel yellow we use currently, we should use a bold color as usual for MD. We can define distinct colors for:

  • Home page
  • Suttaplex lists
  • Text pages
  • Search results
  • Static pages

Let me discuss each item in turn.

##≡ Main site navigation

Opens the nav drawer.

This one is cute:

https://www.webcomponents.org/element/kcmr/transburger-icon

##Adaptable title

MD typically eschews the traditional “Home” icon. Instead, “Home” appears at the top when the nav drawer is opened. This is seen both in Inbox and the MD specs site.

Meanwhile, the Toolbar displays a context-dependent title.

  • On suttaplex lists, this would replace the “caption” on the division pages of the old site.
  • On text pages, we can have the Sutta title and translator.
  • On search pages, “search results”

##:mag: Search

https://material.io/guidelines/patterns/search.html#1

For apps where search is not the main purpose, such as SC, MD specs say display just the icon by default, and expands on click.

:point_right: Use expandable search

There are a number of different styles of search fields in MD apps. I dislike extreme search fields, where clicking on the icon radically changes the view (like, say, https://www.wired.com/). Better to modestly expand from the current position, as for example, https://material.io.

##🗪 Forum

Connection with Discourse is similar to use of social media widgets, etc.

:point_right: Display forum icon on every page, with badge indicating the number of conversations

https://www.webcomponents.org/element/PolymerElements/paper-badge1

In the old design, we import snippets from Discourse and list them. This could be done in the new design, using an MD list to display content in a popup.

However, I am leaning towards thinking that this is unnecessary. The forum has become fairly well established by now, and there is less need to promote it. In addition, it is already more prominent in the new design, being visible, with a mention-count, on every page. So I propose that we deprecate this functionality, and instead:

:point_right: Click on the forum item leads to the relevant search results on Discourse for that sutta.

##:gear: Tools

:point_right: Use MD dialogue

https://material.io/guidelines/components/dialogs.html#2

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Dialogues can include a greater variety and complexity of interactions as opposed to Menus.

The Tools dialogue only appears on Text pages. By appearing only then, it calls attention to itself.

It includes:

  • Textual Information
  • :eye: Lookup dictionary
  • Script switcher
  • Text & Translation view selector (not yet implemented)
  • ⇄ Parallels and References
  • Metadata

Here is a discussion of each element.

###Textual Information

:point_right: Toggle with a switch

https://material.io/guidelines/components/selection-controls.html#selection-controls-switch2

###Lookup Dictionary

:point_right: Use a dropdown

https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu

Rather than having separate “select” and “activate”, as currently, include “none” as one of the options.

###Script Switcher

The script switcher allows to select one from a group.

:point_right: Use a dropdown.

###Text/Translation view selector

The Text/Translation view selector allows the user to compare the translation with the original text in a variety of ways. Each of this has its own use case.

  • Columns are good on a wide screen.
  • Line by line is for narrow screens.
  • Popup is good for occasional checking if using a mouse.

:point_right: Use a radio button group.

https://www.webcomponents.org/element/PolymerElements/paper-radio-group1

###Parallels and References

:point_right: Open “suttaplex URL” in new tab.

###Metadata

Metadata displays the information as in the current metadata tab.

In addition to the info currently available, extract data from github, such as contributors, last modified, etc.

##⋮Toolbar Menu

https://material.io/guidelines/components/menus.html1

Menus in MD display a list of choices, with one choice per line. They are not used for primary navigation. Represent with a three vertical dot icon (AKA vertical ellipsis) at the far right of the Toolbar.

Whereas the Tools is for the text pages only, the Toolbar Menu applies site-wide. Here we can include:

  • Change site language
  • :pray: Donations
  • Downloads
  • :busts_in_silhouette:Acknowledgements
  • Methodology
  • Abbreviations (include “Numbering”)
  • Bibliography
  • Free, Open, Safe
  • About SuttaCentral

###Change site language

This switches the UI, etc., i.e. it applies the i18n.

:point_right: Use a dropdown menu. Also see:

https://www.webcomponents.org/element/Protoss78/country-select

###No Help

Help = :poop:

Among the many, many disadvantages of help pages:

  • Who uses them?
  • When was the last time you ever used a Help page on a website? Was it in a year that started with a “2”?
  • According to Google Analytics, the current Help page accounts for 0.01% of our page views, with a bounce rate of 100%.
  • Hard to update
  • Each time the site changes we have to check it. Our current Help hasn’t been updated for years, and I am sure it has lots and lots of wrong things. Who cares? Not me!
  • It’s almost impossible to anticipate answers to specific problems with a general solution.
  • Consider the different people who will use the site
    • Someone goes on to the site who knows nothing about computers. Like, literally, say a Burmese monk who has just got their first Android phone and has never used the internet before. “Click” on a “link” or “use search” or “open sidebar” are just meaningless to them.
    • Someone else comes on who wants to know how to extract JSON data via our REST API.
      How are supposed to cater for both of these with a generic Help?
  • Let Help die already. Use Discourse instead.

###Donations

:point_right: Use a Stripe form:

https://www.webcomponents.org/element/vic10us/stripe-form1

Downloads, Acknowledgements, Methodology, Abbreviations, Bibliography, About

These all lead to static pages. We can review them, but otherwise they stay much the same.

###Free, Open, Safe

Here we can include:

  • Copyright policy
  • open source policy, link to Github
  • security, privacy policy

This page is expanded from the current Copyright page, and gives an overall view of the ethics and legalisms of our site. If we call it “copyright”, it sounds like we are making copyright claims, rather than relinquishing them, so let’s call it the opposite.

We can explain the copyright situation as currently. In addition, promote the open source nature of our work, encourage people to fork the repo, etc. And we can make an assurance that there is no advertising, tracking, etc. on the site.