0af1203832
* add colors palette * add secondary menu component and style it * add box shadow to secondary menu * misc css, fixes for secondary menu * client: add equipment page with grouping, css: add some styles * add typography * more equipment * stable: fix linting * equipment: add styles (lots of general styles too) * remove duplicate google fonts loading * add dropdowns * design: white search input background, remove gray from items * start adding drawer and selected indicator * wip equipment * fix equipment * equipment: correctly bind new properties on items.gear.equipped * equipment: fix vue binding. version 2 * equipment: fix vue binding. version 3 * back to first fix for equip op, fix for sourcemaps, send http request when an item is equipped, load bootstrap-vue components where needed * checkboxes and radio buttons * correctly renders selected items in first postion during the first render * add search * general changes, constants part of app state, add popovers * add toggle switch, rename css * correct offset * upgrade deps * upgrade deps * drawer and lot of other work * update equipping mechanism * finish equipment * fix compilation and upgrade deps * use v-show in place of v-if to fix ui issues * v-show -> v-if * fix linting in test/client * fix es6 compilation in test/client * fix babel compilation for tests * fix groupsUtilities mixin tests * client: buttons * client: buttons: fix colors * client: finish buttons and dropdowns * upgrade bootstrap-vue, finish buttons and dropdowns * fix tasks page layout * misc fixes for buttons * add textareas * fix app menu * add inputs * fixes for toggleSwitch * typography * checkboxes and radio buttons * add checkbox icon * fix equip.js * extract strings to newClient.json * add Popover above 'Use Costume' / 'Auto Equip' slider - disable item select if costume-mode and 'useCostume' isn't active * show "you have disabled your costume" error above the drawer items * check errorMessage for null * hide star if costume not enabled * fix errorMessage (!errorMessage seems not to work for string) * show minimize / expand icon - always centered by css * drawer test * drawer: fix centering on large screens * fix show more button * add margin when two dropdowns are next to each other * adjust the page padding based on the drawer, misc fixes * drawer fixes |
||
|---|---|---|
| .. | ||
| assets | ||
| components | ||
| filters | ||
| libs | ||
| mixins | ||
| store | ||
| .babelrc | ||
| .eslintrc | ||
| app.vue | ||
| index.html | ||
| main.js | ||
| readme.md | ||
| router.js | ||
#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/
-
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.