Of course.
After using it a little, I have a fairly significant change to suggest to the design: let me know when you’d like to discuss it.
I’m not ready implementing the design yet, still working on it. But do you mean a change to your specs above?
yes, that’s right.
OK new version just uploaded to github so have a look at that and I will be with you in 40 minutes.
1 Like
Ayya, the CSS that’s causing the annoying gaps in the table borders is fixed by the border-spacing. For this design we must separate the table borders (which is the normal default), and then define the spacing. Something like this is a start:
table {
border-collapse: separate;
border-spacing: 0px 8px;
}
https://www.w3schools.com/cssref/pr_border-spacing.asp
One other thing that we didn’t talk about last night. In the expanded view, each of the suttaplex items for the parallels should contain the same basic elements as the main entry, except for the description. That means we should, I think, add the vol/page info, so for the first entry under DN 1 we would have something like:
Some parallel sutta
EA 1.34 Chinese title of suttaT i 343c
BODHI SUJATO Other ⏷
However, while the content is mostly the same as the main entry, we should make the styling more compact where we can. MD offers the option of:
- large title: 24px, top padding 24px
- small title: 14px
So let’s use the large title for the main entry, and the small title for the parallels in the table.
For the large title we should use the normal weight: bold is too much. For the small title, let’s see. Try the normal weight, and if that is not prominent enough, use bold.
We want to avoid making these parallel items too tall. So let’s see how it goes; we might want to reduced the vertical padding, for example, above the translator buttons.
Ayya, I have updated the spec for the Suttaplex list in accord with our discussion yesterday.
Just a few notes on this.
I have adjusted the vertical metrics especially, and they are now fairly accurate. I noticed one thing with the MD specs. Check out, eg. this image:
If you look at the main title, you can see that the bottom padding is calculated starting from the baseline of the text, i.e. it doesn’t include the suspender on the “g”. But if you add padding in CSS it usually applies to the whole line-height, which extends beyond the suspender on the “g”. So if you just add the same px to the padding, it ends up way too big. I don’t know if there’s a general solution to this, apart from just visually comparing them. But anyway, for now that’s what I’ve done.
Another point. As we discussed, I had originally placed the expander in the middle of the row, but it is now at the bottom. This is correct as per, for example:
This is not exactly what we have, but the main point is that expander is on the same level as the buttons. That makes sense, since this is the “action row”, and all the things that you can do are gathered here.
However, in the expanded view, the “go to parallels” downwards arrow is still vertically aligned in the middle, and occupies its own table cell. But it would be better for it to be handled the same way as the “expander”, i.e. on the “action row”.
This means that we can get rid of the extra table cell. Since we have already got rid of the first cell, containing the ID, the whole parallel item is now in one table cell, which is nice and simple.
@vimala, @blake I’ve updated the spec for the expanded view. Enjoy!
Also, Ayya, I’m not sure if this is of any use, it’s a polymer element for the expand/collapse behavior.
https://www.webcomponents.org/element/vitantonioc/visual-collapse
I prefer to stick to the more official elements or write my own. Although they can be useful to look at the code and pick out the things that are helpful. Right now I wrote our own element with this one:
webcomponents.org - Discuss & share web components because the paper version had some annoying features that could not be overwritten:
webcomponents.org - Discuss & share web components
1 Like
Material design icons for bookmarks: I can only find the three variations here https://material.io/icons/. What would you prefer for that icon?
Use the one just called “book”.
@Vimala, @blake, I’ve just updated the spec again. Main changes:
- I introduced “low priority”. These things can be left aside for now if you like. Note that this includes the “go to parallels for this sutta” arrow in the expanded suttaplex view. This function will be rarely used, if at all, so I would suggest remove it for now. I will update the mockup to reflect this.
- Following our discussion, I have now defined “Suttaplex URL” more clearly and consistently: it is a URL of the form
/dn2, i.e. the same as the old “details” view, and like the “details” view it shows the expanded suttaplex for that sutta only. - I have changed my thinking on how to do the static pages. Basically I think we should forget about using a sidebar footer and instead put them all in the Toolbar Menu. I have updated this section accordingly.
- Put the Help page out of its misery
- Add info on policy re open source, privacy, etc.
OK, made another draft on https://samanerivimala.github.io/polymer-mockup-sc/
Some remarks:
- left the low-priority down icon in for now because it was already done so I just wanted to make sure the styling and everything is in there. Then we can hide it for now and unhide it when we need it.
- The languages have become buttons but that comes with its own behavior: aligned in the middle of the button.
- Title in parallel view is 18px otherwise it looked a bit small in comparison to the capitalized ID.
- Paper cards have a line above the action-bar but I removed that. https://www.webcomponents.org/element/PolymerElements/paper-card
- Here is shows a link to the original text but is it clear? I.e. Chinese can be a translation language or an original language. Next to the names of the English translators, it looks like it should be more clearly emphasized.
- On your mockup you have several different icons indicating relationships which are not mentioned in the list below. I only used the latter now.
1 Like
that’s all looking excellent. We can chat again soon, but to respond to the things you mention:
Fine.
Yes, i see the issue. I think it’s fine for now.
Fine.
Good.
Yes, I agree, let’s use a different color for the original languages
Yes, that should be fine, I think I have reduced the number to four.
Okay, I have looked more closely, and here are some adjustments to look forward to when you get back.
- Ensure vertical spacing follows the MD metrics, which are represented fairly accurately in the mockup. Currently there is too much space between text.
- I know you’ve slaved over it, but I’m afraid that we need to get rid of the horizontal expansion. Rather than solving any design problems, it creates them. In the latest mockup, i was struck by the fact that we have just expanded the horizontal space—for nothing. It’s just filled with white space. Let’s keep it simple and just expand vertically. That has a number of implications.
- The surface no longer moves “towards” you. That means the shadow depth should not change: the “card” merely extends downwards.
- The expanded card can still separate from the others in the list as it does now.
- This approach will be better for mobiles, and in general will be easier to handle.
- As for the issue on the buttons and center align, I have checked the MD specs and they seem to be silent on this. Let’s leave as is.
- However, the buttons need to have 8px padding-left as per MD specs.
- MD allows for dense buttons in some cases, perhaps we could use these here.
- The typography for the dropdown is broken; I think you have made some unnecessary changes. Use the MD specs, which I would hope are the defaults on the element. For the record:
- font-size: 16px;
- lowercase
- Use “Other”, not “Other languages” (too long)
- For the Title in parallel view, please go back to the specified size.
- Remove both the “down arrow” and the “difficulty” icons from the parallels.
- We should reorder the information in the “nerdy details” line. The sequence should be:
- Title in original language
- UID
- Volume/page
- This in turn allows us to select the main title for a suttaplex more easily. We have:
- Translated title
- Original title
- UID
If the translated title is absent, it becomes - Original title
- UID
And if there is no original title: - UID
I will reply to this more in detail later, but I have followed MD specs to the letter everywhere. That is why it took so long: to get the vertical spacing right in all cases.
I am sure you have. Design is hard! Here’s a side-by-side with:
- Image from the MD website (specifically this one. I have reduced the number of lines of text to match with our site)
- Screenshot from the mockup
- Screenshot from latest version of site on github.
It’s difficult to match things up exactly, what with different font metrics and screen rounding, etc. But anyway, these are as close as I can get it.
So the mockup is close, but the live version has currently got too much vertical space. 
OMG! Now we have to find out what is going on. Could it be related to the issue with how MD measures vertical metrics?
One related detail. If you check out the shots above, you can see the that line-height for the supporting text on the MD website image is slightly taller than ours is. I’ve mentioned this before, but just to re-iterate: ours is better! MD has, IMHO, too much line-height on body text. So no need to change anything here.
I guess on this one it is difficult to see: https://www.webcomponents.org/element/PolymerElements/paper-card
because we are missing a few lines and stars.
But please note that one of our buttons is a lot higher than the others, namely the “other languages”; you wanted it to show the words “other languages” above the actual language when one is selected to that button is much higher and will need a minimum of space not to run into the text above.
The buttons are now spaced 8px in between buttons. Buttons are not just the text, but a lot more around the text (I did not add a background to the buttons so you cannot see it, but it shows up when you click on one and the ripple takes the entire button space (it ripples from the point where you click so not necessary in the middle)).
I also don’t think that the vertical expanding card is such a problem on mobiles because on mobiles (or anything under 600px) it will not expand because it does not expand the width but the max-width. The whole view takes up 100% width up to a maximum.
But maybe we should discuss this in person when I get back, I think that will be easier.
Sure, ping me when you’re ready.