Natalie L
761d70ec55
* update selectUserModal.vue * more updates to selectUserModal.vue, typo fix in subscriber.json * remove exact sizing for selectUserModal.vue * update to size for selectUserModal.vue * added sendGiftModal.vue file * updates to selectUser & sendGift modals * making the modals go & position cursor * working working working * added a return to method * avatar display & placeholder profile.name and username * subscription-options added * added menu row & started on gem options * Added selectPage function, have not tested. * updated habitica-images * state changes * bringing in gem counter * arranging elements * state changes, gem input boxes * styling sendGiftModal.vue * more sendGiftModal.vue styling and new close.svg icon * more styling! * and more styling of send own gems part of page * images update * more styling of own gems & some attempts to adjust :class on the menu * styling styling styling * replace +/- svg, styling * styling, mostly * new SVGs * stylin' * reverting svg changes * no more stylin' * finally got the +/- icons to show up...but they're the wrong color * solved svg icon color problem! :) * habitica-images * working on sendGift part of button * trying to make it do math, failing * more attempts at math * +/- buttons work on gem pages & cost calculation on buyGems * trying to get hover colors working on +/- svgs * formatted dollar amount as currency * css/html for subscription-options & payments-buttons simplified * swag at payments-buttons parameter (not tested) * send gems from own balance works! * working on starting page * increment gem amount limited to maxGems and not < 0 * uncommented onHide() * got bg color on sub options to work! yay! * payment buttons! * making g1g1 look good * position modal on page properly & code clean-up * Changes as requested! * small color update * fixed ternary function * chore(html): indentation and comments * fix(fn): correct catch for under-0 * chore(json): whitespace Co-authored-by: SabreCat <sabe@habitica.com>
Habitica Client
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your unit tests
npm run test:unit
Lints and fixes files
npm run lint
Customize configuration
Storybook
Storybook is mainly used while working on UI-Components to see changes faster instead of using the website.
Start Storybook
npm run storybook:serve
This will start the storybook process, every *.stories.js-File is searched and added to the storybook overview.
Storybook Worklow
Usually when you working on component-name.vue you also create a component-name.stories.js file.
Example of the stories structure - Storybook Docs - CountBadge
Each function or example of this component will be put after storiesOf('Your Component', module),
in a separate .add('function of component', ...
Storybook Build
After each client build, storybook build is also triggered and will be available in dist/storybook