Pat's list of UI fixes / Responsive Techniques

[pizzaboy314]

Homepage

1. No responsive layout techniques implemented.
2. The .md-toolbar-tools class is bloated and shouldn’t have a height and a max-height.
3. Logo in the top header should be in an anchor tag and not an h1 tag.
4. The logo height should not be done through the backend but in the CSS.
5. The h1 tag should be at the top of the main body with some header text.
6. Charts should be vertically aligned and not horizontally aligned. Should be fluid as well.
7. The two charts on the homepage should be in a ul/li and not in tables.
8. The “My Charts” shouldn’t have a inside the h2 tag. Not needed.
9. The created charts in the container should have the anchor tag with a width around 80% so the user can click the row to select the chart, besides clicking the chart name, to view the chart.
10. The icons on the right side of each chart should have the mouse change to a pointer when hovering over the icons.
11. No CSS background color indication when anchors are in active states for mobile devices.
12. No hover effect when hovering over the “create” button.

Create Chart page

1. The .md-toolbar-tools class is bloated and shouldn’t have a height and a max-height.
2. Logo in the top header should be in an anchor tag and not an h1 tag.
3. The logo height should not be done through the backend but in the CSS.
4. The “house” icon should be styled so the mouse changes to a pointer on hover.
5. The h1 tag should be at the top of the main body with some header text.
6. “Close” tab should be located 50% the height of the page.
7. The “Close” tab hover effect should be reworked.
8. No background color for the side menu. The right border should be more darker in color to stand out.
9. The side menu should have padding and remove the margins set to the labels and inputs.
10. Too much padding between the “Chart Information” header and form controls.
11. Labels are not styled to look like labels.
12. Inputs should have left padding.
13. The Select Options should be restyled. Shouldn’t have a bottom padding but a top and bottom padding.
14. Due to having long content for options, there probably should be a vertical scrollbar so users can see the full content of the option.
15. Remove the font size set to the #sidenav id and place font size rem’s on the elements.
16. The “Advanced Options” button needs to be reworked.
17. After clicking the “Advanced Options” button, the modal needs total rework. No “x” in the header, no modal structure (modal-header, modal-body, modal-footer).
18. When setting up the initial Series, there should not be a down caret to signify to the user that they can contract the Series container.
19. After creating a Series and clicking the “Add Another Series” button, that’s when the caret for the first Series should show up and it doesn’t collapse the first Series.
20. Inside the Series container, the labels need to be styled so they look like labels and the inputs need left padding.
21. The “Use Secondary Axis” label doesn’t have a mouse over effect to change the mouse to a pointer when hovering over the label.
22. The “Clear” link should be restyled. No mouse over hover change to pointer. No responsive technique to change the background color for mobile devices.
23. When user clicks the “Clear” link to clear out the Series, the refresh spinner remains on the page and keeps spinning. It should go away after the Series is cleared.
24. The Render button, Save button and Clear button should be restyled and relocated. See #1 below.
25. All button need to be reworked. Button elements are not to be placed inside anchor tags.
26. The main page with the newly created chart should have left and right padding.
27. Chart name should not be in a paragraph tag but a label or div.
28. When user clicks on the “Close” tab, the chart should go 100% of the main page.
29. When a user mouses over a section of the chart, the header background of the modal should be darker to meet ADA standards, since the text is white.

[pizzaboy314]

almost finished...typing list of changes

[pizzaboy314]

included changes in this story:

• all md-buttons and anchor tags have been reevaluated to changed to their correct uses
• all incorrect uses of various header tags have been reevaluated and corrected syntactically
• chart and datasource listings now use ul / li tags instead of it being a table
• clickable anchor tags for view chart have been extended to the full width of the row
• home page is now responsive (split into responsive columns, switches in mobile screen sizes
• icon button container spacing in chart and datasource listings has been fixed
• login/logout "button" is now an anchor tag/link instead of an md-button
• md actions toolbar for control buttons has been re-styled
• all button text has ALLCAPS styling
• all error popups now use matching md-raised button stylings like the rest of the UI
• all usage of default html input fields has been canned in favor of universal usage of the angular material equivalent inputs
• time range adjustment UI in view chart page has been expanded to 100% width

[pizzaboy314]

chasing down some final bugs:

• fixing chart view anchor styling for standard and hover states on disabled charts
• fixing chart edit and dupicate icon styling on disabled charts
• trying to figure out why c3 is not rendering to full body width on page load, only after window resizing, most times the secondary right access and a small amount of data is completely cut off. this is only an issue in the UI fix branch

[pizzaboy314]

would love some help from @dwatling or @Rayfucious on that last point ^^^ in the next few weeks if possible

[pizzaboy314]

it's driving me crazy

[pizzaboy314]

@dwatling's solution: Inject the $timeout service and do a delayed flush on the chart object. $timeout(chartObj.flush, 100);