wevote / wevotecordova Goto Github PK

I have been looking at many Apps, and one thing they seem to share in common is the hamburger menu / settings screen tends to take over the entire screen. I think we should do the same. I think that the component we use for our Profile menu may have a "full screen" option?

I think we should also move the hamburger icon to the far right of the bottom bar.

Facebook example:

Wikipedia example:

When you visit the mobile settings page, the "Our Promise" text at top of screen has a darker gray background. (If it isn't gray, click on it, and it then has a gray background.)

Found on candidate detail pages

On the iPhone X, our modals (in the App from the app store) are opening all the way at the top of the screen, wrapped around the camera cut-out. The voter wasn't able to click the "X" to close the modal.

Second, the notification messages when you select issues were displaying all the way at the top, so the camera cut-out was in the way.

There were also problems with the navigation in the footer.

(I'm working on getting a screenshot.)

On iPhone 6 & 7

1. Go to "change address or election" modal
2. Click "Edit" next to your address
3. Click in the text edit box
4. You get a strange display:
   

"Tweet Ballot", clicked from Test Flight on iPhone 7, iOS 11.2.5, does not include the link to the ballot you are viewing.

• Re-enable Google analytics
• Figure out an alternative to "anchor href #" for the BallotSideBar -- one that works in Cordova
• "ReactPlayer" in About.jsx, worked for a while and now it doesn't. Bet it is Content-Security-Policy related. Works a bit in Android.
• Sideways scroll for a settings sub-menu in Cordova on the HamburgerMenu.
• Re-enable "Polling Location" in HeaderSecondaryNavBar (WebApp uses an iFrame, yuck)
• Login with Facebook
• Login by email, in Android. (Works in iOS)

The top-most bar ("Verizon") is currently white. Please make it dark blue and not transparent so we don't get visual glitches like this:

Ballot decisions do not match on WebApp and iOS App

Cordova iOS 6 does not use UIWebView.
In the meantime there is a cordova plugin add cordova-plugin-wkwebview-engine that eliminates UIWebView, but has trouble loading files for local resources the way react does, for that you need another plugin cordova-plugin-wkwebview-file-xhr

I was not able to get these working in an hour or so.
Cordova iOS 6 has been released, but it is still in its early days and has some issues.

I think we should wait a few months, and wait for Cordova iOS 6 to mature.

https://www.npmjs.com/package/cordova-ios

• I noticed on first load there is the text "We Vote Cordova" on a blue background. Please remove "Cordova" from anywhere that voters can see it.
• On my phone, the app name that shows under our icon is "We Vote Cordova" (and "WeVoteCordova" in one place). Please make it "We Vote".

Dear Developer, We identified one or more issues with a recent delivery for your app, "We Vote 2018 Ballot, @wevote". Your delivery was successful, but you may wish to correct the following issues in your next delivery: Missing Push Notification Entitlement - Your app appears to register with the Apple Push Notification service, but the app signature's entitlements do not include the "aps-environment" entitlement. If your app uses the Apple Push Notification service, make sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit after signing your app with a Distribution provisioning profile that includes the "aps-environment" entitlement. Xcode 8 does not automatically copy the aps-environment entitlement from provisioning profiles at build time. This behavior is intentional. To use this entitlement, either enable Push Notifications in the project editor's Capabilities pane, or manually add the entitlement to your entitlements file. For more information, see https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/HandlingRemoteNotifications.html#//apple_ref/doc/uid/TP40008194-CH6-SW1. After you’ve corrected the issues, you can use Xcode or Application Loader to upload a new binary to iTunes Connect. Best regards, The App Store Team

Currently the search box fills a little over 1/3rd of the header bar. Please make it fill the full width of the header bar.

Hi @SailingSteve could you please remove this file from the vip.html file?

2018/10/15 15:00:40 [error] 22262#22262: *130903 open() "/websites/wevote.us/html/img/global/logos/we-vote-button-235x235.png" failed (2: No such file or directory), client: 172.31.32.146, server: wevote.us, request: "GET /img/global/logos/we-vote-button-235x235.png HTTP/1.1", host: "wevote.us", referrer: "https://s3-us-west-1.amazonaws.com/wevote/vip.html"

Search for Kamala Harris, click to see her website

In the WebApp they open in a new tab. Need to use cordovaOpenSafariView()

When you sign out, you are returned to the Sign In page. The page is scrolled though with some text that is hidden under the "Back to Settings" header.

Please test all header changes in the browser-based WebApp as well.

I suspect that the settings page being rendered under the "Back to Settings" page shown here is related:

After Twitter sign in, notification box partially hidden under header.

Please test all header changes in the browser-based WebApp as well.

Research how to configure Google Places API key for the Cordova app, given the API restrictions limit us based on referring website. Until we figure this out, we lose the "auto-complete" feature when a voter changes their address in the Settings area: https://wevote.us/settings/address
...we are using "google.maps.places.Autocomplete" to offer suggested addresses.

In Cordova, once you start typing in the search box, your display changes so you are no longer able to see search box you are typing in:

Once you click "Done" for the mobile phone keyboard, you are once again able to see the search box:

I believe we always want the footer navigation to show. Sometimes when I scroll long pages down (like the ballot), it goes away and it shouldn't. It does return a few seconds after stopping.

The only exception to this is when we go into "Theatre" mode, like:
https://wevote.us/wevoteintro/network

In the Cordova footer bar, when you have friend requests, a notification number appears:

Please make this match the position and color from the WebApp:

On a live iPhone 8.
NOTE: Problem didn't happen on Browserstack Galaxy Note 10 -- the form field scrolled to be vertically centered in the visible space.

1. Go to Ready page
2. Click in the "Search" form field of "Find Candidates & Opinions" (it usually doesn't matter where on screen this form field is, but sometimes on the live iPhone 8 if the "Search" form field is very high on the screen, it doesn't get scrolled down beneath the footer)
3. The page scrolls so that the "Search" form field is blocked by the footer.
   We could either have the form field scroll higher on the visible page (preferred) or turn off the footer.

Would it make sense (and not be too difficult) to set up a way to see the navigation configured for Cordova by changing a config.js setting in WebApp? This would allow our WebApp developers to more quickly make style changes without having to set up the Cordova development environment.

When you return to the app signed in, the default page should be /ready (as opposed to /ballot)

I think we can remove "We Vote" from the Cordova header, so there is only a search bar across the top. This will also prevent App users from being able to get to the Welcome page, which was a hot-button for the Apple review team.

When you are at the top of the ballot and you drag down, the header gets dragged down too. Instead, we want the header to remain stuck to the top of the screen, and the content below the header open up a little bit, and spring back when voter lets go (like how WebApp works in Safari browser.) The reverse is true when you are at the bottom of the Ballot and you drag up. (The footer should remain stuck to the bottom of the screen.

Space above header when dragging down:

Space below footer when dragging up:

If you scroll down to the very bottom of your ballot and then click the hamburger menu, it is hard to see because of the grayed out background.

An amazing amount of the App is working today in Cordova, maybe 95% of the functionality.

Open issues:

• iOS Submission

• Android

• Facebook login (tough one)

• Add an intermediate splash screen between the iOS screen and our index.html splash screen to avoid the white flash.

• Login by email, sends you off to browser land, it might be doable if you view your email on your phone.

Disabled:

• Re-enable Google analytics

• Re-enable "Ballot Location" in HeaderGettingStartedBar

• Re-enable all Facebook login

• Re-enable the "Vote / Polling Location" button on the secondary header bar, since the frame isn't working in Cordova.

Done:

• oAuth redirects do not return to the Cordova app, they open a local WebApp instance in safari. This will probably be similar to the oAuth work in WeVoteReactNative.

• Re-enable "ReactPlayer" in About.jsx I bet we need that iOS/React video player plug in.

• Get rid of the two SafariViewController() views on Twitter Login

• Test on various iPhone sizes in the simulator, and physical recent ones too.

• The Cordova app does not use the full iPhone screen, for some reason it seems to be leaving the iOS menu space at the bottom as a black area, and a similar area at top. It works as is, but looks weird.

• It would be nice to figure out Chrome devtools debugging -- this works with React Native, and of course with our React WebApp. The Apple tools are ok, but disappointing, and functionality is missing.

When a voter comes to the Apple App store and searches for "wevote", before you click "Search", a link to a competing app comes up as part of instant search. If we can add "WeVote" (one word) to either our app name or our description, I'm hoping a link to our app will appear in instant search. We currently have "WeVote" in our search terms, but that is not enough to get us to show up as part of instant search.

The crash is in the stack trace with last bit in our app in FacebookConnectPlugin

2018-11-05 12:42:44.254004-0800 WeVoteCordova[15006:5604446] STEVE ddddsdddd weakSelf.keyboardIsVisible = YES
2018-11-05 12:42:44.263568-0800 WeVoteCordova[15006:5604446] -[NSTaggedPointerString countByEnumeratingWithState:objects:count:]: unrecognized selector sent to instance 0xad40cce38ff927af
2018-11-05 12:42:44.266612-0800 WeVoteCordova[15006:5604446] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSTaggedPointerString countByEnumeratingWithState:objects:count:]: unrecognized selector sent to instance 0xad40cce38ff927af'
*** First throw call stack:
(
0 CoreFoundation 0x000000010ef6c29b __exceptionPreprocess + 331
1 libobjc.A.dylib 0x000000010e4da735 objc_exception_throw + 48
2 CoreFoundation 0x000000010ef8afa4 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
3 CoreFoundation 0x000000010ef70fb6 forwarding + 1446
4 CoreFoundation 0x000000010ef72e88 _CF_forwarding_prep_0 + 120
5 WeVoteCordova 0x000000010d6b1eab -[FacebookConnectPlugin graphApi:] + 715
6 WeVoteCordova 0x000000010d6ca57c -[CDVCommandQueue execute:] + 892
7 WeVoteCordova 0x000000010d6c9dc2 -[CDVCommandQueue executePending] + 834
8 WeVoteCordova 0x000000010d6c02c1 __40-[CDVCommandDelegateImpl evalJsHelper2:]_block_invoke + 321
9 WeVoteCordova 0x000000010d6ccebd -[CDVUIWebViewEngine evaluateJavaScript:completionHandler:] + 157
10 WeVoteCordova 0x000000010d6c0137 -[CDVCommandDelegateImpl evalJsHelper2:] + 215
11 Foundation 0x000000010df74e7b __NSThreadPerformPerform + 330
12 CoreFoundation 0x000000010eecfb31 CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION + 17
13 CoreFoundation 0x000000010eecf464 __CFRunLoopDoSources0 + 436
14 CoreFoundation 0x000000010eec9a4f __CFRunLoopRun + 1263
15 CoreFoundation 0x000000010eec9221 CFRunLoopRunSpecific + 625
16 GraphicsServices 0x0000000117aef1dd GSEventRunModal + 62
17 UIKitCore 0x000000011eab5115 UIApplicationMain + 140
18 WeVoteCordova 0x000000010d693811 main + 65
19 libdyld.dylib 0x00000001100ab551 start + 1
20 ??? 0x0000000000000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

With test build 14:

The proposition number is displayed as garbled in the text box,

Clicking in the text box, detaches the footer and leaves it mid-screen

SupportActions.positionsCountForAllBallotItems() is called unnecessarily for the same election on the return from Candidate detail page at the cost of 6.2 seconds of wasteful server side processing and a multi second loss of fluidity in Cordova.
VoterGuideActions.voterGuidesToFollowRetrieveByBallotItem() is called unnecessarily for the same voter guide on the entry to the candidate detail page at the cost of a wasteful 38 second server side processing, and an awkward react refresh that hangs the UI for a few seconds.

"Following" and "Followers" takes you to "Page not found"
This problem exists on organizations with and without followers. (The count number doesn't matter.)

1. Search for "sierraclub"
2. Click on Colorado Sierra Club
3. Click on either "0 Following" or "0 Followers"

The code that navigates you is in src/js/routes/VoterGuide/OrganizationVoterGuide.jsx on lines 398:

<a // eslint-disable-line
  style={{ padding: '5px 5px' }}
  onClick={() => this.goToVoterGuideDetailsPage('following')}
>

and 277 ('goToVoterGuideDetailsPage').

If the problem is the use of the "<a // eslint-disable-line", we can replace <a // eslint-disable-line with this, since we are already using an onClick:

<span
  className="u-link-color u-cursor--pointer"

Doesn't show up in iPhone screen sizes.

Clicking "Pennsylvania's 18th Congressional District" in the BallotSideBar ...

takes you to...

https://stackoverflow.com/questions/50448989/requirement-to-change-app-name-in-google-sign-in-alert

I have attached a loading screen we can use (that can be resized as needed).

I've spent 4 hours on this, and it is inconsistent, styling changes don't seem to effect it.

The first time the We Vote app is opened (following download), it should show the "Getting Started" sequence (as it does now.) The next time the We Vote app is started, please direct voter to their ballot.

• Toast message is obscured by the notch. (showToast.js)
• X to close works on iPhone 8p, but not on the XS Max, Make your positions public
• Back to button clipped on the top on XS Max
• Similar layout issues with toast and Make your positions public, on XR
• Modal scrolls out of protected area iPhone XR
• The google find address pulldown detaches and sticks to all screens (Did not reproduce)

Following Facebook sign in, page displays under header.

Please test all header changes in the browser-based WebApp as well.

When you request a sign in link within Cordova:

...clicking the link in your email program signs you into the browser version. Update the WeVoteServer api to instead send a link that opens and processes the link from Cordova instead of in a browser on your phone.

Whenever the Toast message is displayed in mobile, it is rendered to the very top of the screen. It should not be displayed over the top bar (which shows battery life).

Please test all header changes in the browser-based WebApp as well.

Would also be handy for WebApp in mobile browsers