SuttaCentral
Oh, and I should mention that the issue was related to the way that the “textual information” icons/links were displayed. Took me forever to figure out what the heck was going on, but finally realized that those items were somehow affecting screen size on small screens.
I have not tested on anything other than chrome at various (virtual) sizes AND my own iPhone5. Seems to work well on those.
Dave
Very nice, this has “bugged” me for ages! I’ve tested it on my Galaxy Nexus and it works fine. the prev/next links at the bottom of the page, however, are still weirdly large, tho not distorted.
May I ask, what did you do to make the Textual Information items not affect the layout?
Oh, and incidentally, could I ask you to make a small change with them? If this is beyond your current remit, just ignore. But for a long time I have wanted to correct those items so that on mobile view they display inline, not in the margin. Basically, just make them not be position:absolute, so they appear in the text at their normal position in the flow. No need to make them superscript or anything, but perhaps a background of light grey, border-radius : 3px.
The problem with the layout was that the textual information links were being displayed far to the right of the text (ie off the screen when at small widths) and this combined with the fact that they were being hidden with the visibility property and not with display: none and thus they were actually still in the flow, even if not visible, and this messed up the column widths.
I will see if I can get them inline - should be easy, but you know how that goes!
Ahh, the old visibilty:hidden chestnut! i should have known.
I’m now getting monstrous display problems with texts on staging….
Send me some links to staging that show some of the monstrosities. Even though I am changing to be inline, I would like to clean up everything as I go as much as possible.
You should be able to see on any text page, eg
http://staging.suttacentral.net/pi/mn67
You’ll see it more on the Pali pages, as they contain more metadata. Basically the display of absolute or hidden elements is not performing properly.
Some links appear inline, but behind the text; others appear in the margin, but not spaced properly, while in other cases they’re just in the wrong place (see for example the asterisk, which appears in the correct place in the oneboxed example here, but out of place on the page). And the invisible tables are still manifesting…
Most things should be pretty obvious, so do what you can and I can be more specific if need be.
Remember the inline is only for the mobile view. If there is room, we put the info in the margins.
OK, you can try the inline version on staging now. Personal preference, but I actually prefer the inline information much better (at any size).
Also, I am just not as familiar with the site as you guys are 
- not even close. So, actual links is what I was looking for, but your clue to hunt down the Pali pages was a good clue. I can see a bit of strangeness on this page: http://staging.suttacentral.net/pi/dn2
Most of the pages I was looking at looked completely fine. If you have any links that show particular problems that is the most useful for me as I can them easily compare the pages on staging to what is on production to determine how reality should be interpreted.
Dave
OK, give staging a try when you get a chance. Calling it a day here as it is getting late.
I think I fixed most of the bugs (including the dreaded “white space” bug). I reverted some of the code that was not merged correctly, and then made some more tweaks. I also made a small attempt to get the popups to be more centered at smaller screen widths (they would be off the screen sometime or only partially visible).
I know there is at least one remaining issue with the inline textual information: The “MS paragraph Number” is showing and I can see that it is NOT visible on production. I need more info. on what exactly that is before I try for a fix.
Talk to you tomorrow,
Dave
Looking good now, thanks so much. The only issue I can see with the full width text is that
.infomode .cross, .infomode .cross:hover
should be margin:0. In fact this was a bug on the main site that I recently fixed.
The mobile display is fantastic, just what I was after.
The “MS paragraph number” is now hidden on the full width text, so that’s fine. (this is a legacy reference number taken over from the text on which our Pali text is based. We keep it but don’t display it.) But it is visible on the mobile display. It can be squashed from there, too.
There are, as you will no doubt have seen, lots of different classes of references, and I haven’t check them all, but those that I have checked all work well.
I think we are done for now. I merged in the changes from Master (including the one you mentioned above) and removed the MS paragraph number from small width screens.
I hope to hear from you sometime in the not-too-distant future. Thanks again!
Dave
I agree, thanks Dave. @blake, if you’re happy with everything, can you switch staging to production?
Okay done. I also purged the Cloudflare cache so the changes should be visible immediately.
Seeing it, looks great.
One detail, I’m not getting the results for the recently posted MN9 talks; perhaps it’s taking a while to index.