habitica/website/client
Keith Holliday 744090e652 Sept 21 fixes (#9061)
* Fixed analytics when party is not defined:

* Waited to set Stripe

* Added popovers to danger zone

* Added date format to next cron

* Redirect user back to home for static

* Removed old settings

* Fixed show bailey

* Fixed close button on inbox

* Fixed sending blank message

* Changed input to text area in inbox

* Fixed deleting messages in inbox

* Allowed user to delete other user message in inbox

* Fixed joined date

* Fixed count styling

* Fixed display of pet and mount

* Removed white box when using base_0 items

* Fixed your profile to show when clicking from menu

* Prevented user from pinning already purchased backgroud

* Added user last log in

* Added date refresh for yesterdailies modal

* Updatd eyewear

* Fixed start a quest button

* Fixed styles on home page footer

* Added checklist sorting

* Added support for if card type is missing computed field

* Fixed linting
2017-09-21 18:53:45 -05:00
..
assets Sept 20 fixes 2 (#9055) 2017-09-20 19:35:03 -05:00
components Sept 21 fixes (#9061) 2017-09-21 18:53:45 -05:00
directives Sept 14 2017 (#9037) 2017-09-14 14:53:27 -05:00
filters Client Tasks (#8889) 2017-07-22 20:30:08 +02:00
libs misc fixes - sep 17 (#9045) 2017-09-19 22:45:28 +02:00
mixins Sept 21 fixes (#9061) 2017-09-21 18:53:45 -05:00
store Sept 21 fixes (#9061) 2017-09-21 18:53:45 -05:00
.babelrc Client: Header & Menu & Icons (#8770) 2017-06-08 12:04:19 -07:00
.eslintrc Client: i18n (#8972) 2017-08-22 18:26:53 +02:00
app.vue [WIP] new client - seasonal-shop (#9018) 2017-09-20 19:28:11 -05:00
index.html Client Fixes (#9026) 2017-09-12 01:06:14 +02:00
main.js Client Analytics (#9023) 2017-09-08 21:23:58 +02:00
README.md minor text fixes: accurate flavour text for Golden Knight testimonies collection quest, etc (#8826) 2017-06-26 22:35:29 +01:00
readme.md minor text fixes: accurate flavour text for Golden Knight testimonies collection quest, etc (#8826) 2017-06-26 22:35:29 +01:00
router.js Redesign: Static Pages Wrapper (#9027) 2017-09-15 13:59:15 -05:00

#Running

  • Open a terminal and type npm run client:dev
  • Open a second terminal and type npm start

#Preparation Reading

  • Vue 2 (https://vuejs.org)

  • Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/

  • Were using .vue files that make it possible to have HTML, JS and CSS for each component together in a single location. Theyre implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/

  • SemanticUI is the UI framework http://semantic-ui.com/. So far Ive only used the CSS part, it also has JS plugins but Ive yet to use them. It supports theming so if its not too difficult well want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.

The code is in /website/client. Were using something very similar to Vuex (equivalent of Reacts Redux) for state management http://vuex.vuejs.org/en/index.html

The API is almost the same except that we dont use mutations but only actions because it would make it difficult to work with common code

The project is developed directly in the develop branch as long as well be able to avoid splitting it into a different branch.

So far most of the work has been on the template, so theres no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: its basically a Flux implementation: theres a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.