The simplest way to fix this is to add bottom padding on mobile. Other alternatives could be a fixed button container at the bottom of the viewport, or placing the buttons smaller in the header bar at the top on mobile. Might be harder to redesign/implement these in a bulletproof way so I would stay away from that path for now.

I run the demo on my local machine and the red bar just goes across forever. The log-in page never fully pops up. How could I get rid of that log-in portion to go directly to the list view on the demo?

Heads up: https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea

• In desktop big size, the editor part without data should be transparent


It seems quite random and not something I would really want to have in my new project?

Apply the cosmetic fixes described in the analysis document: https://docs.google.com/document/d/11A8ScBF03__GskbOOylnWD1z_4BlZJm8tpMXCIX7Qb0/edit#

I am guessing the inputs are not yet combo boxes because we don't have one available, yet. Anyhow, filtering the grid by having to type the values feels awkward (e.g. on the screenshot when you would want to limit the results with "Max ($): 200") and you start typing "2" the grid momentarily shows nothing because the value is so small). Also because there is a prefedined set of "Merchants" available, it would make more sense to have the options in a dropdown rather than having to type them yourself.

It is not possible to get a local development version running using the README.md instructions without previous knowledge about Polymer, PouchDB, Vaadin Elements etc.
e.g. the mentioned <pouch-db> element is missing from overview-page.html and simly running polymer build fails with
Error: ENOENT: no such file or directory, open '/home/jonni/Downloads/expense-manager-demo/bower_components/polymer/polymer.html'

Must click back button twice on mobile, if you previously clicked cancel.
Context:

• Android latest stock nexus 6.

Steps to Repro:

click the new button to make a new expense

• click cancel and it will close the dialog
  click the new button again
• click the mobile "back" button. Nothing will happen
• click the mobile "back" button. It will close.

I was very excited to come across this web app, and was eager to experiment with it. However, it appears that the online demo version isn't working. It loads up fine, but it doesn't actually save any of the data that's entered. I've tried various different devices and browsers, but all of them have the same behavior. And my developer console is displaying numerous errors that I suspect might be related to couchDB.

Are there any special requirements in order for this application to work .. like the enabling of a flag in the browser settings or something similar? And are there any special hosting or server configuration requirements?

Thanks,

• Yvan

"Min($)" and "Max($)" and "Status" filters are not accessible on mobile. Even if other filters except "Merchant" are hidden on purpose, there should be less padding above and more padding below the "Merchant" input on mobile. Screenshot with desktop and mobile side by side:

aria-label is missing for #add-button, it's pronounced as "clickable button" by screen readers.

To make it more clear for mobile users that they can scroll the grid also horizontally, the frozen column should at least have the drop shadow to the light as in the attached example. The horizontal 1px lines added between rows in the demo might make the light shadow less noticeable so I might try removing the lines as in the original design. If a more visible zebra contrast between lines is needed for poor displays, then try a bit darker grey background for the altering rows.

When adding a new expense, it would be great to be able to select from the existing list of merchants to avoid duplicates.

client/gulp serve produces error

[09:49:00] Finished 'styles' after 3.76 s

app/elements/expense-service.html-script-0
  line 317  col 20  'findMonth' was used before it was defined.
  line 577  col 19  Don't make functions within a loop.

  ⚠  2 warnings

[09:49:03] 'lint' errored after 11 s
[09:49:03] Error in plugin 'gulp-jshint'
Message:
    JSHint failed for: app/elements/expense-service.html-script-0
[09:49:03] gulp-imagemin: Minified 5 images (saved 54.58 kB - 35.8%)
[09:49:03] images all files 97.68 kB
[09:49:03] Finished 'images' after 5.4 s

Browser: IE11
OS: Windows 10

expense-manager-demo unable to show data on IE11. Both demo.vaadin and local version fails.

demo.vaadin:

Local version:

Right now, some of the breakpoints are using some pretty hacky stuff, replace with css grid.

On firefox the Add / Edit expense dialog opens in to the lower left corner instead of in the middle of the screen

Where possible, update demo to use vaadin equivalents of the used paper elements

vaadin/vaadin-charts#task/CHARTS-505 dependency is not found. Change to #master

Makes not sense that the user can modify certain fields when editing in_progress or reimbursed expenses. I would disable Merchant Total and Date fields, makes sense that the user can update his comment, and probably it is useful to update the picture.

When expense is long enough, buttons bar is not visible until the user scrolls the dialog, but some times is not clear that he needs to scroll the dialog in order to see the cancel button.
Note that clicking outside, or pressing escape dialog does not close, so user might not be able to close the dialog if he does notice that the dialog is scrollable.

• In desktop big screen, the 'To be reimbursed' label is sometimes hidden, sometimes shown but in the background of the title bar.

When you click an item to edit it, the dialog says "Edit Expense".
When you press "Cancel" or "Save", the dialog suddenly changes to say "Add Expense" and all fields are cleared. This should not happen

If init method is defined it sometimes gets called even though there is data in the remote db because it takes so long to fetch it. Figure out a way to avoid this.

This way hitting the back button won't exit the app

Also use different background for filters toolbar (not enough contrast)

The asc and desc sorting icons should be reversed in the theme: https://github.com/vaadin/expense-manager-demo/blob/master/client/app/elements/expenses-list.html#L63

Replace with a placeholder note mentioning "the pro version has statistics reporting here"

Displaying the list option breaks down as in the attached screenshot on desktop. On mobile, the three-dot-menu icon to open the list is completely missing (i.e. you cannot replace the receipt on mobile).

Depend on vaadin-core instead of individual elements. Remove unused components.

Use redux or similar to simplify the application

The combo for the merchant gives an error when running local .. maybe I amd doing something wrong. Any idea ?

Local I see this (and the combox box does not work) :

The Live demo shows :

In the console I have the error
vaadin-overlay-behavior.html:105 Uncaught ReferenceError: unwrap is not defined

When I put a breakpoint in the _setPosition function on the LIve demo, the function is not being called... ?

The dates filters are not working correctly, for example if you select from 01-01-2018 to 01-31-2018 , then only dates from 01-02-2018 to 01-30-2018 show up on the table.

Using Chrome extension for Allow-Control-Allow-Origin:

From Vaadin demo Site:
XMLHttpRequest cannot load https://em2db.demo.vaadin.com/db_0e7ab06211/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'https://wc.demo.vaadin.com' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

From polymer serve:
XMLHttpRequest cannot load https://em2db.demo.vaadin.com/db_9e5c96a3b0/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

HoonsMBPRetina:server hoonchung$ npm --version
3.8.0
HoonsMBPRetina:server hoonchung$ pwd
/Users/hoonchung/Documents/WebstormProjects/PolymerJSProjects/vaadin-expense-manager-demo-master/server
HoonsMBPRetina:server hoonchung$ node server.js
/Users/hoonchung/Documents/WebstormProjects/PolymerJSProjects/vaadin-expense-manager-demo-master/server/server.js:2
(() => {
^
SyntaxError: Unexpected token )
at exports.runInThisContext (vm.js:69:16)
at Module._compile (module.js:432:25)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:349:32)
at Function.Module._load (module.js:305:12)
at Function.Module.runMain (module.js:490:10)
at startup (node.js:124:16)
at node.js:807:3
HoonsMBPRetina:server hoonchung$

The demo uses date picker component and it suffers usability heavily on some scenarios:

• no receipt image:
  
• partially cropped actions (could be this ref: vaadin/vaadin-date-picker#176)
  
  Thanks!

Tested against Firefox 39.0 on a wide screen.

The chart on the right side of the screen gets bigger and bigger whenever the window (viewport) is resized or it refresh itself with new data.

Hi All - if you wipe out your bower_components and do a bower install there are multiple conflicts.

Also may I ask if / when this will be a 2.0 version?

Started up Expense Manager, added it to iOS 11.3 home screen and started the app. Added an expense and tried to add a receipt. Instead of showing the receipt it just shows bordered label "Receipt". Save, Cancel nor Delete buttons work. See attached video.

Tried both, the file picker & drag n drop. Does not upload the file. Tried on Linux using Chromium and Firefox

• Edit Dialog should be full-screen (mobile)
• Buttons for closing dialog should be always visible instead of having to scroll (mobile & desktop) (#89)
• Top bar exceed viewport in mobile. Title should be hidden, and elements width adjusted.
• Dialogs should be cancellable by escape or outside click (desktop)
• In mobile expense list is not easy to scroll, frozen column is not necessary, and we could shift merchant and total columns.