Developers of Open Source Software, Open Hardware, Open Knowledge in Asia
Implementing User Input guide and using Semantic-UI Tables
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges. If a helper is not there for the directions to use these features then these features may be difficult to use for a user.
To resolve this issue and make Badgeyay more user friendly I have implemented a User Guide to help user to go through the User Manual before generating Badges in my Pull Request.
To implement user guide, I have used Semantic UI tables to give examples for CSV format and used other components for Manual format.
Let’s get started and understand it step by step.
Create User Guide component with Ember CLI.
$ ember g component user-component/user-guide
Now, We will use Semantic UI while editing Handlebars.
class="ui center aligned huge header">User-Input Guide
class="ui center aligned small header">
Please check what is the "Correct Format"?
class="ui raised segment">
class="ui header">class="file excel icon">
class="ui bulleted list">
class="item">The CSV must be uploaded with 5 columns of data.
class="item">Five comma (',') seperated values should be present in the CSV