There should have been a light grey background already, a circular region, are you not seeing this?
Great, perfect now, thanks.
This is looking much better, thanks so much. However there is a new kind of glitch.
If I repeatedly click on a menu item, scrolling it up and down, then every 3 or 4 clicks the menu scrolls fully down, then suddenly disappears. The next time I click it, it suddenly appears fully extended, not scrolling at all.
Also, I just noticed a very slight glitch in the search bar animation. When it is in the āmobileā view, and fully extended, you then click anywhere to let the search bar retract. When you do so, the bar momentarily flicks out, extending further to the left over the Wheel before retracting.
Itās funny, these tiny details you see out of the corner of your eye; even when you donāt notice it explicitly, it somehow seems a bit off; it destroys the illusion.
Just checked in a fix for both of these issues.
1 Like
Great, these are now good.
Iām struggling to find any more issues! The only outstanding issue I can think of is the autocomplete for the search.
In addition, there are a couple of very minor behavioral details.
When you click on the header menu, there is something about when the menu starts to scroll down: I canāt quite see what it is, but thereās something not perfectly smooth about it. Maybe itās to do with how the menu panel flows over the dark red line? It is too quick for me to see whatās going on.
Another detail: when you switch between menu tabs, the menu panel fades in and out to transition between menus for Sutta, vinaya and Abhidhamma. Fine. On the sidebar, when you switch between tabs it does a āhardā switch, with no fading. Also fine, but the behavior is not consistent. Should we make it so that both behave in the same way, probably best for both to fade in/out as the menu does currently? I want the header and sidebar to feel like they are part of the same experience.
Is there anything else that you think might make the header better? @blake, any thoughts?
Also, can we please ensure that the new header is thoroughly tested against as many devices as possible? Would you like to see our Google analytics data to see what our users are using?
Oh, and what about swiping? Thatās something i know little about. But we should make the site behavior as touch-friendly as possible. Swiping out the sidebar would definitely be a good idea. Is there anything else youād suggest?
Finally, when we are satisfied, we should merge it back to master and deploy to staging before bringing it on to the main site.
I checked in an attempted fix for this that you may or may not like - let me know. I think it looks a bit smoother now with the tab (red) border transitioning rather than quick change.
This one will require more work and so I will not do anything until you decide to ignore it (which would not be so bad I think) or fix.
I have done a bunch of these tweaks today for you today and will not charge for the time. Just saying thanks for the work so far.
I still have the ānotificationā for the sidebar to do and I plan on doing that next (probably starting on my Monday). Let me know if there is a higher priority.
Thanks so much, I will check these out when I get a moment. But it is all looking pretty good to me.
Iāve just had a chance to pull the latest changes and test them out, congrats, itās pretty sweet. And thanks for giving us some of your time, that is very kind!
For now, just to sum up, the remaining issues:
- notification popup
- autocomplete
- swipability
- testing on various platforms
- vertical align for header
Hopefully the basic design is pretty clean and will work comfortably in different environments. But of course we canāt really test how it feels on mobiles until it is deployed live. So we can do what we can with browser emulators, and when we are ready, weāll deploy to staging and try it out on as many devices as we can.
If itās going to be a hassle for you to get the fonts and search working, then maybe we should do what we can, then merge the changes back to master, and do the final testing on staging.
The first pass on the notification dialog is checked in. I have intentionally left out the save-state stuff for now so you can test the dialog more easily.
Questions:
- What would you like the text to say exactly?
- How would you like the button to be styled? Much of the site seems to be using un-styled buttons currently.
- I intentionally left the navigation menus exposed in case the user simply wants to ignore the pop-up and navigate somewhere else. What do you think?
Dave
How about:
Click on the green menu icon to expand the sidebar. This contains useful things like navigation links, tools, and information about the text.
Unstyled buttons? Not at my end. In fact all the buttons should by styled, so Iām curious about what youāre seeing.
In any case, it should look not dissimilar to the standard āGot itā button as used by Google, etc. How about we style it like the buttons used for the Donations process? You can see them by going through the Donations page on the live site. The less bright one is probably fine.
That seems fine.
As for the overall idea, it is very much along the lines that I was thinking. Iām not sure that itās best to have the menu button detached and gliding back to its location, though. It seems to me that it may be confusing for some users: basic UI elements usually stay put. How about we leave the green icon where it is, give it a wobble, and have a nice friendly curved arrow from the popup to the icon?
As for the details of styling the popup, use a similar style to what we find elsewhere on SuttaCentral (In fact, it may be a good idea to have two or three standard popup styles and abstract them out using sassā¦) The basics of color and so on can be similar to what we are currently using for the announcement on the live Home page: light red background, 3px border-radius, a dark red border; plus of course some box-shadow. Also, use sans for all UI elements.
- Swapped out the āglidingā icon for a curved arrow (done in CSS)
- Styled the dialog as suggested.
- Styled button using one I found on donation page (not sure if I got the right one, but easy to change).
- Removed the shadow box. I felt that given the styling changes and acceptance of allowing access to menus, that we might as well get rid of the shadow box since it looks better and still works. It is just commented out and easy to put back in if you do not like it.
This is all in the branch now.
Dave
Looks perfect, thanks so much!
- DONE - Notification popup
- DONE - swipability (see below for a remaining issue for @blake)
- DONE - vertical align for header
autocomplete - Not done as I still do not have elastic search working locally. I plan on merging things into staging and doing some testing/dev work there and I should be able to get things done that way.
testing on various platforms - I have actually done a fair amount of testing already using chromeās emulation mode, but once on staging will do more extensive testing (including on the various devices I have lying around the house).
@blake, I tried including the jquery mobile js files by inserting in the base.html code, but ran into some nasty conflicts / issues with our code base. Not sure exactly why, but though maybe someone had done some customization to the jquery code possibly. Anyway, I could get it working enough to verify that my swiping code does work (I am using āswipeleftā event to close the side panel), but then backed out the include of jquery mobile. If you can include jquery-mobile somehow, then things should just work. Let me know if you have any ideas.
Dave
1 Like
Looking good. One thing, though, we still have the nasty whitespace making bug on the āvarā spansā¦
Apart from that, if you can work with @blake to merge the changes to master, we can tweak it on staging and then go live.
@sujato FYI when working with a branch, the merge to master approach is to first merge master into the branch, bringing in all changes made to master since the branch was started, the branch should then be updated to apapt the changes to master (an example in this case, is the donations CSS, which need to brought in line with Daveās new css), once the branch is up to date with the current state of master, it is then trivial to merge the branch into master, as all the conflicts have already been resolved in the branch.
@moneycito What kind of conflicts are you talking about? There are certainly no modifications to jquery, we do use a bunch of jquery plugins, but I expect it would be some event handler bindings.
1 Like
A couple of iPhone bugs have come to light, one serious, a couple less so. I tested these on iPhone 4 and 5S. @blake are you able to test these, or do we need to get @Moneycito to look at them?
- The header disappears at the top of the page. This is really annoying and makes the site borderline unusable. When you go further down the page the header behaves as it should, but when at the top it just vanishes and thereās not much you can do about it. This also affects the search: when you click on the search icon, it goes to the top of the page, and hence disappears.
- The sidebar is still not swipeable. (Actually I think this is the case for Android, too)
- The script changing buttons on the Pali texts donāt work.
Hmmm, I canāt emulate it in Chrome. I am thinking these are javascript issues, and likely Chrome continues to use the V8 engine even when emulating the display and touch behavior of other devices.
I could take a stab in the dark at fixing some of those issues though - and I have access to a couple of android devices.
This is kind of what I was suspecting, probably better to see if we can get @Moneycito to do it. Weāll see if he is available.