Sabe Jones
9a6aa5f443
Squashed commit of the following: commit d0628da7557e718b4d144283949f6572718d9b45 Author: negue <eugen.bolz@gmail.com> Date: Fri Mar 15 19:34:39 2019 +0100 fix quest-tooltip padding/sizes commit c16bc0fe4521e01520628ddc84af54930b15e066 Merge: 24e3fe2a6163f31688Author: negue <eugen.bolz@gmail.com> Date: Fri Mar 15 18:58:51 2019 +0100 Merge branch 'fix/quest-tooltip-cells' into negue-ui-fixes commit 24e3fe2a6c8e384722d95f7edd9ce9e4ce16960c Author: negue <eugen.bolz@gmail.com> Date: Fri Mar 15 18:49:47 2019 +0100 use item margin instead of container padding commit 03ab975193b2007e24fcbb971fc7d4169bfb3ac7 Author: negue <eugen.bolz@gmail.com> Date: Thu Mar 14 21:41:43 2019 +0100 fix input heights commit 3aa18f1105a02655066e10a82cf53be9340a6bf1 Author: negue <eugen.bolz@gmail.com> Date: Thu Mar 14 20:58:22 2019 +0100 revert margin-bottom on checklist commit d8f533fda1d3833ab2f4aeb3bd8001d4a7881e8b Merge: fbd01ab797d45dcfeeAuthor: Sabe Jones <sabrecat@gmail.com> Date: Thu Mar 14 11:10:34 2019 -0500 Merge branch 'fix/shops-ui' into negue-ui-fixes commit fbd01ab79d5ea8144c191cd51a9c11216418493a Merge: 65517d259546e260e3Author: Sabe Jones <sabrecat@gmail.com> Date: Thu Mar 14 11:09:03 2019 -0500 Merge branch 'fix/more-ui' into negue-ui-fixes commit 65517d25947144f57b84fad84ce709ac7d008119 Merge:5e935230a2dcec78a4Author: Sabe Jones <sabrecat@gmail.com> Date: Thu Mar 14 11:08:20 2019 -0500 Merge branch 'fix/tasks-ui' into negue-ui-fixes commit546e260e36Author: negue <eugen.bolz@gmail.com> Date: Sat Mar 9 23:13:54 2019 +0100 fix checkbox check mark commit46ea2010f8Author: negue <eugen.bolz@gmail.com> Date: Sat Mar 9 22:48:20 2019 +0100 remove bottom margin on a collapsed checklist commit7d45dcfee5Author: negue <eugen.bolz@gmail.com> Date: Wed Mar 6 22:45:09 2019 +0100 fix star/empty colors - fix quest layout - countBadge z-index commitf9b9e75c18Author: negue <eugen.bolz@gmail.com> Date: Mon Mar 4 20:14:49 2019 +0100 shops - timeTravelers: refactor filter logic commit6d3e9e0de0Author: negue <eugen.bolz@gmail.com> Date: Mon Mar 4 20:06:02 2019 +0100 shops-seasonal: refactor filter logic commitaa2949e9d1Author: negue <eugen.bolz@gmail.com> Date: Mon Mar 4 19:54:23 2019 +0100 shops - quest: refactor filter logic + quest items margins commitad62b7a358Author: negue <eugen.bolz@gmail.com> Date: Mon Mar 4 19:50:51 2019 +0100 shop: equipment-cards background + market filter logic (as other pages) commit2dcec78a4aAuthor: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 21:02:10 2019 +0100 remove space between notes and checklist commit31fab9b66dAuthor: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:45:59 2019 +0100 remove margin of checklist items commit28b134a19bAuthor: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:33:43 2019 +0100 show `Options` instead of `Show More` commitcafcfb6112Author: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:30:22 2019 +0100 remove pointer on disabled task-controls commit7acbcc424bAuthor: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:25:36 2019 +0100 remove margin of task-title markdown-p-tag commitf667ab957bAuthor: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:25:16 2019 +0100 40px height search + tags button commit2080ecb7e8Author: negue <eugen.bolz@gmail.com> Date: Wed Feb 27 20:24:35 2019 +0100 show grabbing cursor while dragging commit163f316889Author: negue <eugen.bolz@gmail.com> Date: Fri Feb 15 23:26:40 2019 +0100 replace the questInfo to use table-like behavior, expands to the content
Running
For information about installing and running Habitica locally, see Setting up Habitica Locally.
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/
-
We're using
.vuefiles that make it possible to have HTML, JS and CSS for each component together in a single location. They're 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 I've only used the CSS part, it also has JS plugins but I've yet to use them. It supports theming so if it's not too difficult we'll 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. We're using something very similar to Vuex (equivalent of React's Redux) for state management http://vuex.vuejs.org/en/index.html
The API is almost the same except that we don't 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 we'll be able to avoid splitting it into a different branch.
So far most of the work has been on the template, so there's no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it's basically a Flux implementation: there's 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.
For further resources, see Guidance for Blacksmiths, and in particular the "Website Technology Stack" section.