Master Template / UI Guide

devfreddy commented 6 years ago

Also known as the UI Guide - https://projects.invisionapp.com/share/GCL1U3CKB45#/screens/298862244_Elements

devfreddy commented 6 years ago

@Chitradip-Capitalnumbers Can you edit/comment with some detail around what this is? I'm guessing its the header/menu/container/footer elements which will be the basis for all/most of the pages?

Chitradip-Capitalnumbers commented 6 years ago

@mdfrederick Yes, you are right. Actually, this is just the full view of all component related to Clarity app. This is needed to avoid the internal class conflict. If we do so then in the time of development a Vue Js developer can easily take any type of component without any dependency.

Chitradip-Capitalnumbers commented 6 years ago

@mdfrederick I have completed Master template. Also pushed that on the GitHub. You can check that. Now you can close this issue.

danielgolden commented 6 years ago

@Chitradip-Capitalnumbers Thanks for your work on this, I've reviewed it and will provide feedback below:

[ ] Checkbox labels shouldn’t be uppercase and shouldn’t have any extra letter-spacing.
Dropdown Element
[x] The text in .dropdown-content li is vertically off-center.
[x] When an <li> in the sub-nav section (.level-2-dropdown) of dropdown-content is hovered over there’s a 1 pixel shift happening that shouldn’t:

Text & Select inputs

[ ] The padding-left on the “has no input/value” state is not correct on the standard-size and small inputs. Please take the measurements directly from Figma for this.
[ ] The labels for these inputs is also a bit too large when the input has focus. It may be helpful to. Please also take measurements directly from Figma for this.
[x] The dropdown arrow for the standard size select in off-center vertically.

danielgolden commented 6 years ago

@Chitradip-Capitalnumbers I should also mention that a big chunk of these issues (if not most of them) are left over from our first build of these components, so I do recognize that we created the bugs, not you. That said I appreciate your resolving them.

danielgolden commented 6 years ago

@Chitradip-Capitalnumbers Most of these issues have been resolved, but several still remain. Here are the issue that remain:

[x] The select input labels have letter spacing even when their inputs are not focused (They should not have letter spacing until the input gets focus)
[x] The label for the standard sized input is still incorreclty positioned when it's input has focus (it's too far to the right) and it's still not set in uppercase.
[ ] The text of the tag in the grid view item is off-center vertically

devfreddy commented 6 years ago

@Chitradip-Capitalnumbers Please structure this page more like the Invision screen instead of just a list of components. This isn't just to avoid internal class conflict, this is a resource to be developed and re-used by anyone working on the project.

Chitradip-Capitalnumbers commented 6 years ago

@danielgolden Hello, I have removed the bootstrap grid from the project and implemented my own custom style there. I have also try to match the spacing issue , but as the design element and the web element both are from different media you may find 1px 2px difference due to browser rending techniques. Today I have also work on select-client.html page, please check and let me know your view.

devfreddy commented 6 years ago

@danielgolden Closing this one. Reopen if you feel there is further work that needs done.

danielgolden commented 6 years ago

@Chitradip-Capitalnumbers I think this grid will work well. Thank you.

danielgolden commented 6 years ago

@Chitradip-Capitalnumbers Please structure this page more like the Invision screen instead of just a list of components. This isn't just to avoid internal class conflict, this is a resource to be developed and re-used by anyone working on the project.

Chitradip-Capitalnumbers commented 6 years ago

@danielgolden I have started working on this. I will update you soon.

Thanks!

Chitradip-Capitalnumbers commented 6 years ago

@danielgolden

I have made some more progress on this page. I have pushed the code. Please review my progress on this page :- ui-guide-v2.html

Please check and let me know your thoughts.

Thanks!

Chitradip-Capitalnumbers commented 6 years ago

@danielgolden I have completed the UI guide page. Please check and let me know your feedback.

Thanks!

danielgolden commented 6 years ago

The form inputs do not match what's in figma. Please pay close attention to what is in figma and match it in the UI guide.

Masterworks / Clarity-Components

Master Template / UI Guide #4

Dropdown Element

Text & Select inputs