Bhante @Sujato: can you please look at the triangles in the sidebar on staging now. Not an ideal solution but it looks OK on my screen.
Also, I changed Textual Details to Parallels & References and it refers directly to the /ll/ page now.
I made a small change to the json loader so the parallels page does not show double entries with regards to partially parallels, but there are other issues that I still need to look at.
That brings me to another question. On the (sub)division pages, parallels are also listed but this reflects the old situation and not the new parallels. For some, that might be rather a lot now with all the partials as well so what do you want displayed here exactly.
Unfortunately the triangle has made the layout of this page a bit wonky so I still have to look at that.
I was maybe too embarassed to foreward a request, but honestly, even after years of visiting SC I could occasionally be trapped to mix up “Textual Details” and “Textual Information” the respective functional differences of which are not self-evident from their labeling
Sorry, i’m not seeing any of these changes on staging …
For the i18n version, something like the mockup I posted previously, although maybe as well as the plain triangle, we can put the number of parallels, as we do for the Vinaya parallels. For the expert version, probably keep it the same as now, I guess, unless it becomes too unwieldy.
OK. It’s up on staging now. I just changed the triangles on the sidebar, not the rest for now.
But it looks horrible on Firefox so I will take those triangles out again.
I’m just wondering what is going on here. My Firefox does not seem to take the Skolar font from SC but uses DejaVu instead for the triangles, but it works for other characters.
Also, if you compare the sidebars on Firefox and Chrome in Master, the triangles are completely different. So in trying to cater for one browser, things go wrong on the other.
I also made some changes to the presentation of the parallels so that is better now but there are still a few small issues.
@blake, can you help us out here? What I suspect is happening is that the relevant glyphs are being left out when the font is subset. Ayya, let’s make sure we have the content delivered properly before making adjustments on the client side.
I suspect that when the content is delivered properly, the whole issue is irrelevant anyway. I have changed staging back the way it was, except that the staging server now also times out as per my email earlier today.
I’ve updated the subsetting code to take into account glyphs found in the templates so on staging they are now being used from the Skolar font. Looks like it needs some css fine-tuning though.
Thanks. Could you do it on Master also and maybe incorporate the master changes into staging too.
I just remembered that I did some changes to the css on master last month because Firefox did not render things well in the sidebar. Have a look at the difference in de sidebar between master and staging on Firefox.
Cool, thanks. And just to be clear, this means that any icons we use in the template will be automatically subsetted from the full Skolar PE? Which means that we can, in principle, use any of the glyphs found there? The triangle icons are a relic of very early days on SC, let me see if we have something more fun to use.
Well, as so often, once I start looking I can see so many things that need fixing!
In the early days, we used ugly pngs as icons, and I got rid of these when we updated the site. But not knowing much about it, and cos it was early days in terms of resolution-independent options, I thought we could just use the triangle and see how it went. For now, I think we can improve things significantly by using a few arrows from Skolar, and a couple of other adjustments. In the future, if we’re using Polymer, we should probably use the material icons:
But for now, let’s see what we can do right away. Skolar has a bunch of arrows and related symbols, here they are:
There are a few more arrows in the private use area. Also, the different weights of Skolar have genuine weights for these signs. So if the regular versions are too thin, we can use the bold instead.
##Division/subdivision
Here we use the triangle to indicate “go to details page” (class="details"). In fact this is a subdirectory, so why not use a suitable arrow for that:
↳
We also use the triangle to indicate “drop-down”. We also do this in the sidebar, and, charmingly, we use it in a different way in almost every place. Let’s follow the material guidelines:
So drop-downs should be indicated with a down-facing triangle, positioned after the text. So here it is correct already, yay!
Droppable ▼
A more substantial problem is that in each of the drop-down type contexts, we seem, so far as I can tell, to implement it in a different way. But we should probably wait before standardizing this. For the record, the one I like best visually is Lookup Language ▼ where the expanded material floats on top of what was there previously, rather than pushing it down.
##Details
Here we have two new uses of the triangle as .note and .bib. The former is for “notes” while the latter is for “bibligraphy”. Let’s use something that captures these more clearly.
I’d suggest using simply “note” for the notes. We can style it up. For the bibliography, how about using an elipsis … It conveys “expand for extra information”, and is low profile, befitting a feature used only occasionally.
One problem with both of these, though, is that for some reason the is included inside the span, i.e <div class="tri"> ▶</div> It should be before, so we can style it properly. Also, why is this a div? The simple way to make an inline span: mark it as div, then set it to display:inline. </sarcasm>
##Text pages, including sidebar
Let’s go through the sidebar panel by panel.
###Controls
Lookup Language ▼ is correct. Yay!
For the language change, we have rightwards arrow. How about we use instead a bidirectional arrow, to suggest that we are relating the language pairs:
⇋
One issue here, the arrow doesn’t have its own class. Can we make sure that all of these elements are wrapped in a span with an appropriate class, so we can style them?
For Textual Information, do we need anything? Maybe it’s okay as is.
Discuss & Discover should have the dropdown arrow.
Textual Details, or as it is now, Parallels & References should have something that indicates it’s going somewhere else. We used ↳ to indicate going down a level, how about we use the complementary arrow here to indicate “go up a level”:
↱
Languages should use the standard dropdown.
Then we have the next/prev links. Let’s use regular arrows for these. Note that these express the same kind of thing as the “go up a level” and “go down a level” signs, except here it is “go sideways to the next file on the same level.”
← DN 6DN 8 →
Finally, we can use the same thing for the nex/prev links at the bottom of the page.
For completeness, I should mention the search results page, where we have another dropdown to select the language. This uses the dropdown triangle correctly. However the selector seems to be implemented differently than elsewhere.
##Polymer
If we are going to standardize the dropdowns, why not take the chance to play with polymer?
Took me a little while to figure out which page you were talking about … that has completely changed to /ll/ on staging (go to division page and click on the arrow and you don’t end up on the details page any more) and there these triangles don’t appear at all (but I can add it in if you like).
In other words, the parallels page has replaced the details page.
It denotes that we translate Pali to another language, not visa versa. So I think the rightward arrow is good.
Not so sure about this one either. Before, we used ↳ to go to the parallels page and now you want to use a different arrow to go to the same page. I cannot see why one is “up one level” and the other one “down one level”.
I did some of it on staging now so please have a look. I will work further on it tomorrow. Arrows need some finetuning by the looks of it. And of course Firefox is a pain again with the details - summary.
As for P&R, yes, we use a different arrow to go to the same place, because we are coming from a different direction. The division is a higher level in the hierarchy, so we go “down” to P&R. But the text page is the very bottom level of the hierarchy, so we go “up” from that to P&R.
In fact the spatial metaphor should be a little more subtle that that. To go “up” in the hierarchy from a text page should mean to go to a vagga. In an earlier thread I suggested we think in three dimensions, so to go from a text page to P&R is to zoom “out”, to see the same terrain and its neighbors more broadly.
I don’t know if there is an obvious solution to this, but i would like to start thinking in these terms, to try out some ideas and see what sticks. At least we can differentiate different forms of motion.
One option might be to use this:
⇗
The double lines are parallel-y, and the motion is oblique: what do you think? Or we could use the single-line version:
up to you! You’re the expert in design here. I’ve changed it now so have a look what it looks like.
There is a still a Firefox issue with the language-dropdown (refuses to remove the arrow from details/summary).
Controls
I like the on/off switch for Textual Information but it will take me some time to look into it and implement it - I have to learn about the js on the site and how that is working exactly.
If we do this, I suggest to also have the same switch for the “keep sidebar & header extended” buttons.
If it’s feasible to use the polymer element, that would be nice, it gives us a chance to get some experience working with it. As I understand it, one of the characteristics of these is that they are encapsulated so they can easily be imported, without requiring any huge framework:
up to you! You’re the expert in design here. I’ve changed it now so have a look what it looks like.