mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-14 13:17:24 +01:00
Client: semantic ui -> bootstrap 4 and less -> scss (#8535)
* client: semantic ui -> bootstrap 4 and less -> scss * start porting components to boostrap * port header, start porting menu * port loading screen * port most of the menu * port secondary menus * port guilds and stable * disable tavern for now, port inbox * typo * put back old tavern code
This commit is contained in:
Matteo Pagliazzi
GitHub
@@ -25,7 +25,7 @@ gulp.task('build:common', () => {
|
|||||||
|
|
||||||
gulp.task('build:server', ['build:src', 'build:common']);
|
gulp.task('build:server', ['build:src', 'build:common']);
|
||||||
|
|
||||||
gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff', 'semantic-ui'], (done) => {
|
gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff'], (done) => {
|
||||||
gulp.start('grunt-build:dev', done);
|
gulp.start('grunt-build:dev', done);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -33,7 +33,7 @@ gulp.task('build:dev:watch', ['build:dev'], () => {
|
|||||||
gulp.watch(['website/client-old/**/*.styl', 'website/common/script/*']);
|
gulp.watch(['website/client-old/**/*.styl', 'website/common/script/*']);
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff', 'semantic-ui'], (done) => {
|
gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff'], (done) => {
|
||||||
runSequence(
|
runSequence(
|
||||||
'grunt-build:prod',
|
'grunt-build:prod',
|
||||||
'apidoc',
|
'apidoc',
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
import gulp from 'gulp';
|
|
||||||
import fs from 'fs';
|
|
||||||
|
|
||||||
// Make semantic-ui-less work with a theme in a different folder
|
|
||||||
// Code taken from https://www.artembutusov.com/webpack-semantic-ui/
|
|
||||||
|
|
||||||
// Relative to node_modules/semantic-ui-less
|
|
||||||
const SEMANTIC_THEME_PATH = '../../website/client/assets/less/semantic-ui/theme.config';
|
|
||||||
|
|
||||||
// fix well known bug with default distribution
|
|
||||||
function fixFontPath (filename) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
fs.readFile(filename, 'utf8', (err, content) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
|
|
||||||
let newContent = content.replace(
|
|
||||||
'@fontPath : \'../../themes/',
|
|
||||||
'@fontPath : \'../../../themes/'
|
|
||||||
);
|
|
||||||
|
|
||||||
fs.writeFile(filename, newContent, 'utf8', (err1) => {
|
|
||||||
if (err) return reject(err1);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
gulp.task('semantic-ui', (done) => {
|
|
||||||
// relocate default config
|
|
||||||
fs.writeFile(
|
|
||||||
'node_modules/semantic-ui-less/theme.config',
|
|
||||||
`@import '${SEMANTIC_THEME_PATH}';\n`,
|
|
||||||
'utf8',
|
|
||||||
(err) => {
|
|
||||||
if (err) return done(err);
|
|
||||||
|
|
||||||
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables')
|
|
||||||
.then(() => done())
|
|
||||||
.catch(done);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
239
npm-shrinkwrap.json
generated
239
npm-shrinkwrap.json
generated
@@ -468,6 +468,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-1.1.0.tgz",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"async-foreach": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"from": "async-foreach@>=0.1.3 <0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz"
|
||||||
|
},
|
||||||
"asynckit": {
|
"asynckit": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"from": "asynckit@>=0.4.0 <0.5.0",
|
"from": "asynckit@>=0.4.0 <0.5.0",
|
||||||
@@ -986,6 +991,11 @@
|
|||||||
"from": "boom@>=2.0.0 <3.0.0",
|
"from": "boom@>=2.0.0 <3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
|
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
|
||||||
},
|
},
|
||||||
|
"bootstrap": {
|
||||||
|
"version": "4.0.0-alpha.6",
|
||||||
|
"from": "bootstrap@4.0.0-alpha.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz"
|
||||||
|
},
|
||||||
"bower": {
|
"bower": {
|
||||||
"version": "1.3.12",
|
"version": "1.3.12",
|
||||||
"from": "bower@>=1.3.12 <1.4.0",
|
"from": "bower@>=1.3.12 <1.4.0",
|
||||||
@@ -1881,6 +1891,11 @@
|
|||||||
"from": "clone@>=1.0.2 <2.0.0",
|
"from": "clone@>=1.0.2 <2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
|
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
|
||||||
},
|
},
|
||||||
|
"clone-deep": {
|
||||||
|
"version": "0.2.4",
|
||||||
|
"from": "clone-deep@>=0.2.4 <0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz"
|
||||||
|
},
|
||||||
"clone-stats": {
|
"clone-stats": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"from": "clone-stats@>=0.0.1 <0.0.2",
|
"from": "clone-stats@>=0.0.1 <0.0.2",
|
||||||
@@ -6405,6 +6420,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"in-publish": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"from": "in-publish@>=2.0.0 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz"
|
||||||
|
},
|
||||||
"indent-string": {
|
"indent-string": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"from": "indent-string@>=2.1.0 <3.0.0",
|
"from": "indent-string@>=2.1.0 <3.0.0",
|
||||||
@@ -6746,6 +6766,18 @@
|
|||||||
"from": "is-plain-obj@>=1.0.0 <2.0.0",
|
"from": "is-plain-obj@>=1.0.0 <2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
|
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
|
||||||
},
|
},
|
||||||
|
"is-plain-object": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"from": "is-plain-object@>=2.0.1 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.1.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"isobject": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"from": "isobject@>=1.0.0 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/isobject/-/isobject-1.0.2.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"is-png": {
|
"is-png": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"from": "is-png@>=1.0.0 <2.0.0",
|
"from": "is-png@>=1.0.0 <2.0.0",
|
||||||
@@ -7686,36 +7718,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"less": {
|
|
||||||
"version": "2.7.2",
|
|
||||||
"from": "less@>=2.7.1 <3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/less/-/less-2.7.2.tgz",
|
|
||||||
"dependencies": {
|
|
||||||
"asap": {
|
|
||||||
"version": "2.0.5",
|
|
||||||
"from": "asap@>=2.0.3 <2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.5.tgz",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"image-size": {
|
|
||||||
"version": "0.5.1",
|
|
||||||
"from": "image-size@>=0.5.0 <0.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.1.tgz",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"promise": {
|
|
||||||
"version": "7.1.1",
|
|
||||||
"from": "promise@>=7.1.1 <8.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz",
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"less-loader": {
|
|
||||||
"version": "2.2.3",
|
|
||||||
"from": "less-loader@>=2.2.3 <3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-2.2.3.tgz"
|
|
||||||
},
|
|
||||||
"levn": {
|
"levn": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"from": "levn@>=0.3.0 <0.4.0",
|
"from": "levn@>=0.3.0 <0.4.0",
|
||||||
@@ -7951,6 +7953,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-3.0.3.tgz",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.clonedeep": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"from": "lodash.clonedeep@>=4.3.2 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
|
||||||
|
},
|
||||||
"lodash.create": {
|
"lodash.create": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"from": "lodash.create@>=3.1.1 <4.0.0",
|
"from": "lodash.create@>=3.1.1 <4.0.0",
|
||||||
@@ -8038,6 +8045,11 @@
|
|||||||
"from": "lodash.memoize@>=3.0.3 <3.1.0",
|
"from": "lodash.memoize@>=3.0.3 <3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz"
|
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz"
|
||||||
},
|
},
|
||||||
|
"lodash.mergewith": {
|
||||||
|
"version": "4.6.0",
|
||||||
|
"from": "lodash.mergewith@>=4.6.0 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz"
|
||||||
|
},
|
||||||
"lodash.now": {
|
"lodash.now": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"from": "lodash.now@>=2.4.1 <2.5.0",
|
"from": "lodash.now@>=2.4.1 <2.5.0",
|
||||||
@@ -8053,6 +8065,11 @@
|
|||||||
"from": "lodash.restparam@>=3.0.0 <4.0.0",
|
"from": "lodash.restparam@>=3.0.0 <4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
|
"resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
|
||||||
},
|
},
|
||||||
|
"lodash.tail": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"from": "lodash.tail@>=4.1.1 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz"
|
||||||
|
},
|
||||||
"lodash.template": {
|
"lodash.template": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"from": "lodash.template@>=3.0.0 <4.0.0",
|
"from": "lodash.template@>=3.0.0 <4.0.0",
|
||||||
@@ -8377,6 +8394,18 @@
|
|||||||
"from": "minimist@0.0.8",
|
"from": "minimist@0.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
|
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
|
||||||
},
|
},
|
||||||
|
"mixin-object": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"from": "mixin-object@>=2.0.1 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"for-in": {
|
||||||
|
"version": "0.1.8",
|
||||||
|
"from": "for-in@>=0.1.3 <0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"from": "mkdirp@>=0.5.1 <0.6.0",
|
"from": "mkdirp@>=0.5.1 <0.6.0",
|
||||||
@@ -8877,6 +8906,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node-gyp": {
|
||||||
|
"version": "3.5.0",
|
||||||
|
"from": "node-gyp@>=3.3.1 <4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.5.0.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"glob": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"from": "glob@^7.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node-libs-browser": {
|
"node-libs-browser": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"from": "node-libs-browser@>=2.0.0 <3.0.0",
|
"from": "node-libs-browser@>=2.0.0 <3.0.0",
|
||||||
@@ -8958,6 +8999,53 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node-sass": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"from": "node-sass@latest",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.0.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"cross-spawn": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"from": "cross-spawn@>=3.0.0 <4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz"
|
||||||
|
},
|
||||||
|
"gaze": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"from": "gaze@>=1.0.0 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz"
|
||||||
|
},
|
||||||
|
"glob": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"from": "glob@>=7.0.3 <8.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
|
||||||
|
},
|
||||||
|
"globule": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"from": "globule@>=1.0.0 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/globule/-/globule-1.1.0.tgz"
|
||||||
|
},
|
||||||
|
"lodash": {
|
||||||
|
"version": "4.16.6",
|
||||||
|
"from": "lodash@>=4.16.4 <4.17.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.16.6.tgz"
|
||||||
|
},
|
||||||
|
"lodash.assign": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"from": "lodash.assign@>=4.2.0 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz"
|
||||||
|
},
|
||||||
|
"lru-cache": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"from": "lru-cache@>=4.0.1 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.0.2.tgz"
|
||||||
|
},
|
||||||
|
"which": {
|
||||||
|
"version": "1.2.12",
|
||||||
|
"from": "which@>=1.2.9 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/which/-/which-1.2.12.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node-status-codes": {
|
"node-status-codes": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"from": "node-status-codes@>=1.0.0 <2.0.0",
|
"from": "node-status-codes@>=1.0.0 <2.0.0",
|
||||||
@@ -10836,6 +10924,65 @@
|
|||||||
"resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"sass-graph": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"from": "sass-graph@>=2.1.1 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.1.2.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"camelcase": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"from": "camelcase@>=3.0.0 <4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz"
|
||||||
|
},
|
||||||
|
"cliui": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"from": "cliui@>=3.2.0 <4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz"
|
||||||
|
},
|
||||||
|
"glob": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"from": "glob@^7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
|
||||||
|
},
|
||||||
|
"lodash.assign": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"from": "lodash.assign@^4.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz"
|
||||||
|
},
|
||||||
|
"window-size": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"from": "window-size@>=0.2.0 <0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/window-size/-/window-size-0.2.0.tgz"
|
||||||
|
},
|
||||||
|
"yargs": {
|
||||||
|
"version": "4.8.1",
|
||||||
|
"from": "yargs@>=4.7.1 <5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/yargs/-/yargs-4.8.1.tgz"
|
||||||
|
},
|
||||||
|
"yargs-parser": {
|
||||||
|
"version": "2.4.1",
|
||||||
|
"from": "yargs-parser@>=2.4.1 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sass-loader": {
|
||||||
|
"version": "6.0.2",
|
||||||
|
"from": "sass-loader@latest",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.2.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"async": {
|
||||||
|
"version": "2.1.5",
|
||||||
|
"from": "async@>=2.1.5 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/async/-/async-2.1.5.tgz"
|
||||||
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"from": "loader-utils@>=1.0.1 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.0.2.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"saucelabs": {
|
"saucelabs": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"from": "saucelabs@>=1.0.1 <1.1.0",
|
"from": "saucelabs@>=1.0.1 <1.1.0",
|
||||||
@@ -10913,11 +11060,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"semantic-ui-less": {
|
|
||||||
"version": "2.2.9",
|
|
||||||
"from": "semantic-ui-less@>=2.2.4 <2.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.9.tgz"
|
|
||||||
},
|
|
||||||
"semver": {
|
"semver": {
|
||||||
"version": "5.0.3",
|
"version": "5.0.3",
|
||||||
"from": "semver@>=5.0.1 <5.1.0",
|
"from": "semver@>=5.0.1 <5.1.0",
|
||||||
@@ -11041,6 +11183,23 @@
|
|||||||
"from": "sha.js@>=2.3.6 <3.0.0",
|
"from": "sha.js@>=2.3.6 <3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.8.tgz"
|
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.8.tgz"
|
||||||
},
|
},
|
||||||
|
"shallow-clone": {
|
||||||
|
"version": "0.1.2",
|
||||||
|
"from": "shallow-clone@>=0.1.2 <0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
|
||||||
|
"dependencies": {
|
||||||
|
"kind-of": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"from": "kind-of@>=2.0.1 <3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz"
|
||||||
|
},
|
||||||
|
"lazy-cache": {
|
||||||
|
"version": "0.2.7",
|
||||||
|
"from": "lazy-cache@>=0.2.3 <0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"shallow-copy": {
|
"shallow-copy": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"from": "shallow-copy@>=0.0.1 <0.1.0",
|
"from": "shallow-copy@>=0.0.1 <0.1.0",
|
||||||
@@ -11473,6 +11632,11 @@
|
|||||||
"from": "statuses@>=1.3.1 <2.0.0",
|
"from": "statuses@>=1.3.1 <2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz"
|
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz"
|
||||||
},
|
},
|
||||||
|
"stdout-stream": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"from": "stdout-stream@>=1.4.0 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz"
|
||||||
|
},
|
||||||
"stream-browserify": {
|
"stream-browserify": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"from": "stream-browserify@>=2.0.0 <3.0.0",
|
"from": "stream-browserify@>=2.0.0 <3.0.0",
|
||||||
@@ -11883,6 +12047,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.0.0.tgz",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"tether": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"from": "tether@>=1.4.0 <2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz"
|
||||||
|
},
|
||||||
"text-table": {
|
"text-table": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"from": "text-table@>=0.2.0 <0.3.0",
|
"from": "text-table@>=0.2.0 <0.3.0",
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
"bcrypt": "^1.0.2",
|
"bcrypt": "^1.0.2",
|
||||||
"bluebird": "^3.3.5",
|
"bluebird": "^3.3.5",
|
||||||
"body-parser": "^1.15.0",
|
"body-parser": "^1.15.0",
|
||||||
|
"bootstrap": "^4.0.0-alpha.6",
|
||||||
"bower": "~1.3.12",
|
"bower": "~1.3.12",
|
||||||
"browserify": "~12.0.1",
|
"browserify": "~12.0.1",
|
||||||
"compression": "^1.6.1",
|
"compression": "^1.6.1",
|
||||||
@@ -70,8 +71,6 @@
|
|||||||
"jade": "~1.11.0",
|
"jade": "~1.11.0",
|
||||||
"jquery": "^3.1.1",
|
"jquery": "^3.1.1",
|
||||||
"js2xmlparser": "~1.0.0",
|
"js2xmlparser": "~1.0.0",
|
||||||
"less": "^2.7.1",
|
|
||||||
"less-loader": "^2.2.3",
|
|
||||||
"lodash": "^4.17.4",
|
"lodash": "^4.17.4",
|
||||||
"merge-stream": "^1.0.0",
|
"merge-stream": "^1.0.0",
|
||||||
"method-override": "^2.3.5",
|
"method-override": "^2.3.5",
|
||||||
@@ -83,6 +82,7 @@
|
|||||||
"nconf": "~0.8.2",
|
"nconf": "~0.8.2",
|
||||||
"nib": "^1.1.0",
|
"nib": "^1.1.0",
|
||||||
"node-gcm": "^0.14.4",
|
"node-gcm": "^0.14.4",
|
||||||
|
"node-sass": "^4.5.0",
|
||||||
"nodemailer": "^2.3.2",
|
"nodemailer": "^2.3.2",
|
||||||
"object-path": "^0.9.2",
|
"object-path": "^0.9.2",
|
||||||
"ora": "^1.1.0",
|
"ora": "^1.1.0",
|
||||||
@@ -102,7 +102,7 @@
|
|||||||
"rimraf": "^2.4.3",
|
"rimraf": "^2.4.3",
|
||||||
"run-sequence": "^1.1.4",
|
"run-sequence": "^1.1.4",
|
||||||
"s3-upload-stream": "^1.0.6",
|
"s3-upload-stream": "^1.0.6",
|
||||||
"semantic-ui-less": "~2.2.4",
|
"sass-loader": "^6.0.2",
|
||||||
"serve-favicon": "^2.3.0",
|
"serve-favicon": "^2.3.0",
|
||||||
"shelljs": "^0.7.6",
|
"shelljs": "^0.7.6",
|
||||||
"stripe": "^4.2.0",
|
"stripe": "^4.2.0",
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
#app
|
#app
|
||||||
app-menu
|
app-menu
|
||||||
.ui.grid.fluid
|
.container-fluid
|
||||||
app-header
|
app-header
|
||||||
router-view
|
router-view
|
||||||
</template>
|
</template>
|
||||||
@@ -21,16 +21,6 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style src="assets/less/semantic-ui/semantic.less" lang="less"></style>
|
<style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
|
||||||
<style src="assets/less/index.less" lang="less"></style>
|
<style src="assets/scss/index.scss" lang="scss"></style>
|
||||||
<style src="assets/css/index.css"></style>
|
<style src="assets/css/index.css"></style>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ui.fixed.menu + .ui.grid {
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.grid {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
// Rendered outside Vue
|
|
||||||
#loading-screen {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
This folder contains the Semantic UI theme used on the website.
|
|
||||||
|
|
||||||
To load a Semantic UI element uncomment it from semantic.less.
|
|
||||||
|
|
||||||
The custom theme files are placed under /site.
|
|
||||||
|
|
||||||
For each element there's a .variables file that contains variables that are different for our theme and a .overrides file that contains custom CSS properties.
|
|
||||||
|
|
||||||
More info on theming can be found at http://semantic-ui.com/usage/theming.html.
|
|
||||||
|
|
||||||
The list of files that can be placed under /site is this:
|
|
||||||
|
|
||||||
├── collections
|
|
||||||
│ ├── breadcrumb.overrides
|
|
||||||
│ ├── breadcrumb.variables
|
|
||||||
│ ├── form.overrides
|
|
||||||
│ ├── form.variables
|
|
||||||
│ ├── grid.overrides
|
|
||||||
│ ├── grid.variables
|
|
||||||
│ ├── menu.overrides
|
|
||||||
│ ├── menu.variables
|
|
||||||
│ ├── message.overrides
|
|
||||||
│ ├── message.variables
|
|
||||||
│ ├── table.overrides
|
|
||||||
│ └── table.variables
|
|
||||||
├── elements
|
|
||||||
│ ├── button.overrides
|
|
||||||
│ ├── button.variables
|
|
||||||
│ ├── container.overrides
|
|
||||||
│ ├── container.variables
|
|
||||||
│ ├── divider.overrides
|
|
||||||
│ ├── divider.variables
|
|
||||||
│ ├── flag.overrides
|
|
||||||
│ ├── flag.variables
|
|
||||||
│ ├── header.overrides
|
|
||||||
│ ├── header.variables
|
|
||||||
│ ├── icon.overrides
|
|
||||||
│ ├── icon.variables
|
|
||||||
│ ├── image.overrides
|
|
||||||
│ ├── image.variables
|
|
||||||
│ ├── input.overrides
|
|
||||||
│ ├── input.variables
|
|
||||||
│ ├── label.overrides
|
|
||||||
│ ├── label.variables
|
|
||||||
│ ├── list.overrides
|
|
||||||
│ ├── list.variables
|
|
||||||
│ ├── loader.overrides
|
|
||||||
│ ├── loader.variables
|
|
||||||
│ ├── rail.overrides
|
|
||||||
│ ├── rail.variables
|
|
||||||
│ ├── reveal.overrides
|
|
||||||
│ ├── reveal.variables
|
|
||||||
│ ├── segment.overrides
|
|
||||||
│ ├── segment.variables
|
|
||||||
│ ├── step.overrides
|
|
||||||
│ └── step.variables
|
|
||||||
├── globals
|
|
||||||
│ ├── reset.overrides
|
|
||||||
│ ├── reset.variables
|
|
||||||
│ ├── site.overrides
|
|
||||||
│ └── site.variables
|
|
||||||
├── modules
|
|
||||||
│ ├── accordion.overrides
|
|
||||||
│ ├── accordion.variables
|
|
||||||
│ ├── chatroom.overrides
|
|
||||||
│ ├── chatroom.variables
|
|
||||||
│ ├── checkbox.overrides
|
|
||||||
│ ├── checkbox.variables
|
|
||||||
│ ├── dimmer.overrides
|
|
||||||
│ ├── dimmer.variables
|
|
||||||
│ ├── dropdown.overrides
|
|
||||||
│ ├── dropdown.variables
|
|
||||||
│ ├── embed.overrides
|
|
||||||
│ ├── embed.variables
|
|
||||||
│ ├── modal.overrides
|
|
||||||
│ ├── modal.variables
|
|
||||||
│ ├── nag.overrides
|
|
||||||
│ ├── nag.variables
|
|
||||||
│ ├── popup.overrides
|
|
||||||
│ ├── popup.variables
|
|
||||||
│ ├── progress.overrides
|
|
||||||
│ ├── progress.variables
|
|
||||||
│ ├── rating.overrides
|
|
||||||
│ ├── rating.variables
|
|
||||||
│ ├── search.overrides
|
|
||||||
│ ├── search.variables
|
|
||||||
│ ├── shape.overrides
|
|
||||||
│ ├── shape.variables
|
|
||||||
│ ├── sidebar.overrides
|
|
||||||
│ ├── sidebar.variables
|
|
||||||
│ ├── sticky.overrides
|
|
||||||
│ ├── sticky.variables
|
|
||||||
│ ├── tab.overrides
|
|
||||||
│ ├── tab.variables
|
|
||||||
│ ├── transition.overrides
|
|
||||||
│ └── transition.variables
|
|
||||||
└── views
|
|
||||||
├── ad.overrides
|
|
||||||
├── ad.variables
|
|
||||||
├── card.overrides
|
|
||||||
├── card.variables
|
|
||||||
├── comment.overrides
|
|
||||||
├── comment.variables
|
|
||||||
├── feed.overrides
|
|
||||||
├── feed.variables
|
|
||||||
├── item.overrides
|
|
||||||
├── item.variables
|
|
||||||
├── statistic.overrides
|
|
||||||
└── statistic.variables
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
|
|
||||||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
|
|
||||||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
|
|
||||||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
|
|
||||||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
|
|
||||||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
|
|
||||||
|
|
||||||
Import this file into your LESS project to use Semantic UI without build tools
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Un-comment each module when it gets used
|
|
||||||
|
|
||||||
/* Global */
|
|
||||||
& { @import "~semantic-ui-less/definitions/globals/reset"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/globals/site"; }
|
|
||||||
|
|
||||||
/* Elements */
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/button"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/container"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/divider"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/flag"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/header"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/icon"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/image"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/input"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/label"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/list"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/loader"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/rail"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/reveal"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/elements/segment"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/elements/step"; }
|
|
||||||
|
|
||||||
/* Collections */
|
|
||||||
// & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/collections/form"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/collections/grid"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/collections/menu"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/collections/message"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/collections/table"; }
|
|
||||||
|
|
||||||
/* Views */
|
|
||||||
// & { @import "~semantic-ui-less/definitions/views/ad"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/views/card"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/views/comment"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/views/feed"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/views/item"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/views/statistic"; }
|
|
||||||
|
|
||||||
/* Modules */
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/accordion"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/modules/checkbox"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/dimmer"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/modules/dropdown"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/embed"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/modal"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/nag"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/popup"; }
|
|
||||||
& { @import "~semantic-ui-less/definitions/modules/progress"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/rating"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/search"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/shape"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/sidebar"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/sticky"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/tab"; }
|
|
||||||
// & { @import "~semantic-ui-less/definitions/modules/transition"; }
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// Add classes for colored text and backgrounds
|
|
||||||
// See https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-226047499
|
|
||||||
@colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
|
|
||||||
|
|
||||||
/* .text {
|
|
||||||
.-(@i: length(@colors)) when (@i > 0) {
|
|
||||||
@c: extract(@colors, @i);
|
|
||||||
&.@{c} { color: @@c }
|
|
||||||
.-((@i - 1));
|
|
||||||
}.-;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background {
|
|
||||||
.-(@i: length(@colors)) when (@i > 0) {
|
|
||||||
@c: extract(@colors, @i);
|
|
||||||
&.@{c} { background-color: @@c }
|
|
||||||
.-((@i - 1));
|
|
||||||
}.-;
|
|
||||||
} */
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// Disable google fonts
|
|
||||||
@importGoogleFonts: false;
|
|
||||||
|
|
||||||
// Set font
|
|
||||||
@globalFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
|
|
||||||
@pageFont: @globalFont;
|
|
||||||
@headerFont: @globalFont;
|
|
||||||
|
|
||||||
// Define custom colors
|
|
||||||
@red : #f74e52;
|
|
||||||
@yellow : #ffbe5d;
|
|
||||||
@blue : #46a7d9;
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗
|
|
||||||
╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝
|
|
||||||
██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗
|
|
||||||
██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║
|
|
||||||
██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║
|
|
||||||
╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme Selection
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* To override a theme for an individual element
|
|
||||||
specify theme name below
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Global */
|
|
||||||
@site : 'default';
|
|
||||||
@reset : 'default';
|
|
||||||
|
|
||||||
/* Elements */
|
|
||||||
@button : 'default';
|
|
||||||
@container : 'default';
|
|
||||||
@divider : 'default';
|
|
||||||
@flag : 'default';
|
|
||||||
@header : 'default';
|
|
||||||
@icon : 'default';
|
|
||||||
@image : 'default';
|
|
||||||
@input : 'default';
|
|
||||||
@label : 'default';
|
|
||||||
@list : 'default';
|
|
||||||
@loader : 'default';
|
|
||||||
@rail : 'default';
|
|
||||||
@reveal : 'default';
|
|
||||||
@segment : 'default';
|
|
||||||
@step : 'default';
|
|
||||||
|
|
||||||
/* Collections */
|
|
||||||
@breadcrumb : 'default';
|
|
||||||
@form : 'default';
|
|
||||||
@grid : 'default';
|
|
||||||
@menu : 'default';
|
|
||||||
@message : 'default';
|
|
||||||
@table : 'default';
|
|
||||||
|
|
||||||
/* Modules */
|
|
||||||
@accordion : 'default';
|
|
||||||
@checkbox : 'default';
|
|
||||||
@dimmer : 'default';
|
|
||||||
@dropdown : 'default';
|
|
||||||
@embed : 'default';
|
|
||||||
@modal : 'default';
|
|
||||||
@nag : 'default';
|
|
||||||
@popup : 'default';
|
|
||||||
@progress : 'default';
|
|
||||||
@rating : 'default';
|
|
||||||
@search : 'default';
|
|
||||||
@shape : 'default';
|
|
||||||
@sidebar : 'default';
|
|
||||||
@sticky : 'default';
|
|
||||||
@tab : 'default';
|
|
||||||
@transition : 'default';
|
|
||||||
|
|
||||||
/* Views */
|
|
||||||
@ad : 'default';
|
|
||||||
@card : 'default';
|
|
||||||
@comment : 'default';
|
|
||||||
@feed : 'default';
|
|
||||||
@item : 'default';
|
|
||||||
@statistic : 'default';
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Folders
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Path to theme packages */
|
|
||||||
@themesFolder : 'themes';
|
|
||||||
|
|
||||||
/* Path to site override folder - relative to node_modules/semantic-ui */
|
|
||||||
@siteFolder : '../../website/client/assets/less/semantic-ui/site';
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Import Theme
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
@import "~semantic-ui-less/theme.less";
|
|
||||||
|
|
||||||
/* End Config */
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
// Center content inside a container using flexbox
|
|
||||||
// SemanticUI's .centered only support grids
|
|
||||||
.center-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
.label-primary {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nested-field {
|
.nested-field {
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,9 @@
|
|||||||
// CSS that doesn't belong to any specific Vue compoennt
|
// CSS that doesn't belong to any specific Vue compoennt
|
||||||
@import './utilities';
|
|
||||||
@import './forms';
|
@import './forms';
|
||||||
@import './loading-screen';
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
@@ -1,32 +1,32 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
#app-header.row
|
#app-header.row
|
||||||
avatar#header-avatar(:user="$store.state.user")
|
avatar#header-avatar(:user="$store.state.user")
|
||||||
.eight.wide.column
|
div
|
||||||
span.character-name {{user.profile.name}}
|
span.character-name {{user.profile.name}}
|
||||||
span.character-level Lvl {{user.stats.lvl}}
|
span.character-level Lvl {{user.stats.lvl}}
|
||||||
.progress-container
|
.progress-container.d-flex
|
||||||
img.icon(src="~assets/header/png/health@3x.png")
|
img.icon(src="~assets/header/png/health@3x.png")
|
||||||
.ui.progress.red
|
.progress
|
||||||
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
|
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
|
||||||
span {{user.stats.hp | round}} / {{maxHealth}}
|
span {{user.stats.hp | round}} / {{maxHealth}}
|
||||||
.progress-container
|
.progress-container.d-flex
|
||||||
img.icon(src="~assets/header/png/experience@3x.png")
|
img.icon(src="~assets/header/png/experience@3x.png")
|
||||||
.ui.progress.yellow
|
.progress
|
||||||
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
|
||||||
span {{user.stats.exp | round}} / {{toNextLevel}}
|
span {{user.stats.exp | round}} / {{toNextLevel}}
|
||||||
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
|
||||||
img.icon(src="~assets/header/png/magic@3x.png")
|
img.icon(src="~assets/header/png/magic@3x.png")
|
||||||
.ui.progress.blue
|
.progress
|
||||||
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
|
||||||
span {{user.stats.mp | round}} / {{maxMP}}
|
span {{user.stats.mp | round}} / {{maxMP}}
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* TODO refactor: only partially ported from SemanticUI; */
|
||||||
#app-header {
|
#app-header {
|
||||||
padding: 0px 0px 0px 20px;
|
padding-left: 14px;
|
||||||
margin-top: 56px;
|
margin-top: 56px;
|
||||||
background: #36205d;
|
background: #36205d;
|
||||||
margin-left: 1rem;
|
|
||||||
height: 192px;
|
height: 192px;
|
||||||
color: #d5c8ff;
|
color: #d5c8ff;
|
||||||
}
|
}
|
||||||
@@ -54,8 +54,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress-container {
|
.progress-container {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -71,7 +69,7 @@
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-container > .ui.progress {
|
.progress-container > .progress {
|
||||||
width: 203px;
|
width: 203px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
@@ -79,7 +77,7 @@
|
|||||||
background-color: rgba(0, 0, 0, 0.35);
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-container > .ui.progress > .bar {
|
.progress-container > .progress > .progress-bar {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
|
|||||||
@@ -1,234 +1,131 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
// TODO srcset / svg images
|
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
|
||||||
#app-menu.ui.top.fixed.menu
|
.navbar-header
|
||||||
.header.item
|
// TODO srcset / svg images
|
||||||
img(src="~assets/header/png/logo@3x.png")
|
img(src="~assets/header/png/logo@3x.png")
|
||||||
router-link.item(:to="{name: 'tasks'}", exact)
|
.collapse.navbar-collapse
|
||||||
span(v-once) {{ $t('tasks') }}
|
ul.navbar-nav.mr-auto
|
||||||
// .simple makes it possible to have a dropdown without JS
|
router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
|
||||||
.ui.simple.dropdown
|
a.nav-link(v-once) {{ $t('tasks') }}
|
||||||
router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
|
router-link.nav-item.dropdown(tag="li", :to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
|
||||||
span(v-once) {{ $t('inventory') }}
|
a.nav-link(v-once) {{ $t('inventory') }}
|
||||||
.menu
|
.dropdown-menu
|
||||||
router-link.item(:to="{name: 'inventory'}")
|
router-link.dropdown-item(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
|
||||||
span(v-once) {{ $t('inventory') }}
|
router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
|
||||||
router-link.item(:to="{name: 'equipment'}")
|
router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
|
||||||
span(v-once) {{ $t('equipment') }}
|
router-link.nav-item(tag="li", :to="{name: 'market'}", exact)
|
||||||
router-link.item(:to="{name: 'stable'}")
|
a.nav-link(v-once) {{ $t('market') }}
|
||||||
span(v-once) {{ $t('stable') }}
|
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
|
||||||
router-link.item(:to="{name: 'market'}")
|
a.nav-link(v-once) {{ $t('social') }}
|
||||||
span(v-once) {{ $t('market') }}
|
.dropdown-menu
|
||||||
.ui.simple.dropdown
|
router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
|
||||||
router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
|
router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
|
||||||
span(v-once) {{ $t('social') }}
|
router-link.dropdown-item(:to="{name: 'challenges'}") {{ $t('challenges') }}
|
||||||
.menu
|
router-link.dropdown-item(:to="{name: 'party'}") {{ $t('party') }}
|
||||||
router-link.item(:to="{name: 'tavern'}")
|
router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
|
||||||
span(v-once) {{ $t('tavern') }}
|
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
|
||||||
router-link.item(:to="{name: 'inbox'}")
|
a.nav-link(v-once) {{ $t('help') }}
|
||||||
span(v-once) {{ $t('inbox') }}
|
.dropdown-menu
|
||||||
router-link.item(:to="{name: 'challenges'}")
|
router-link.dropdown-item(to="/help/faq") {{ $t('faq') }}
|
||||||
span(v-once) {{ $t('challenges') }}
|
router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
|
||||||
router-link.item(:to="{name: 'party'}")
|
router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
|
||||||
span(v-once) {{ $t('party') }}
|
.item-with-icon
|
||||||
router-link.item(:to="{name: 'guilds'}")
|
|
||||||
span(v-once) {{ $t('guilds') }}
|
|
||||||
.ui.simple.dropdown
|
|
||||||
router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}")
|
|
||||||
span(v-once) {{ $t('help') }}
|
|
||||||
.menu
|
|
||||||
router-link.item(to="/help/faq")
|
|
||||||
span(v-once) {{ $t('faq') }}
|
|
||||||
router-link.item(to="/help/report-bug")
|
|
||||||
span(v-once) {{ $t('reportBug') }}
|
|
||||||
router-link.item(to="/help/request-feature")
|
|
||||||
span(v-once) {{ $t('requestAF') }}
|
|
||||||
.right.menu
|
|
||||||
.item.with-img
|
|
||||||
img(src="~assets/header/png/gem@3x.png")
|
img(src="~assets/header/png/gem@3x.png")
|
||||||
span {{userGems}}
|
span {{userGems}}
|
||||||
.item.with-img.gp-icon
|
.item-with-icon
|
||||||
img(src="~assets/header/png/gold@3x.png")
|
img(src="~assets/header/png/gold@3x.png")
|
||||||
span {{user.stats.gp | floor}}
|
span {{user.stats.gp | floor}}
|
||||||
a.item.with-img.notifications-dropdown
|
.item-with-icon
|
||||||
img(src="~assets/header/png/notifications@3x.png")
|
img(src="~assets/header/png/notifications@3x.png")
|
||||||
.ui.simple.dropdown.pointing
|
router-link.dropdown.item-with-icon(:to="{name: 'avatar'}")
|
||||||
router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}")
|
// TODO icons should be white when active
|
||||||
// TODO icons should be white when active
|
img(src="~assets/header/png/user@3x.png")
|
||||||
img(src="~assets/header/png/user@3x.png")
|
.dropdown-menu.dropdown-menu-right.user-dropdown
|
||||||
.menu
|
router-link.dropdown-item(:to="{name: 'avatar'}") {{ $t('editAvatar') }}
|
||||||
.item.user-edit-avatar
|
// .dropdown-divider
|
||||||
strong {{user.profile.name}}
|
router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
|
||||||
a(v-once) {{ $t('editAvatar') }}
|
router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
|
||||||
.divider
|
// .dropdown-divider
|
||||||
router-link.item(:to="{name: 'stats'}")
|
router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
|
||||||
span(v-once) {{ $t('stats') }}
|
// .dropdown-divider
|
||||||
router-link.item(:to="{name: 'achievements'}")
|
router-link.dropdown-item(to="/logout") {{ $t('logout') }}
|
||||||
span(v-once) {{ $t('achievements') }}
|
|
||||||
.divider
|
|
||||||
router-link.item(:to="{name: 'settings'}")
|
|
||||||
span(v-once) {{ $t('settings') }}
|
|
||||||
.divider
|
|
||||||
router-link.item(to="/logout")
|
|
||||||
span(v-once) {{ $t('logout') }}
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="scss" scoped>
|
||||||
#app-menu {
|
nav.navbar {
|
||||||
background: #432874 url(~assets/header/png/bits.png) right no-repeat;
|
background: #432874 url(~assets/header/png/bits.png) right no-repeat;
|
||||||
border-bottom: 0px;
|
padding: 0 1.5rem;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.navbar-header {
|
||||||
font-size: 16px !important;
|
margin-right: 3rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$active-purple: #6133b4;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
&.header {
|
&:hover {
|
||||||
width: 256px;
|
.nav-link {
|
||||||
padding-left: 20px;
|
color: #fff;
|
||||||
|
background: $active-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
&.active,&:hover {
|
||||||
width: 128px;
|
.nav-link {
|
||||||
height: 28px;
|
box-shadow: 0px -4px 0px #6133b4 inset;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-menu .item:not(.header) img {
|
// Make the dropdown menu open on hover
|
||||||
vertical-align: middle;
|
.dropdown:hover .dropdown-menu {
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img {
|
|
||||||
padding-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown{
|
|
||||||
width: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown {
|
|
||||||
width: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img.notifications-dropdown {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img.gp-icon {
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .right.menu .item.with-img img + span {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.menu .right.menu .ui.simple.dropdown > .item::before {
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .item, #app-menu > .right.menu > .item, #app-menu .dropdown > .item {
|
|
||||||
height: 56px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
padding: 16px 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .item::before, #app-menu > .right.menu > .item::before, #app-menu .dropdown > .item::before {
|
|
||||||
width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .item:not(.header):hover, #app-menu > .dropdown:hover {
|
|
||||||
background-color: #6133b4;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .item.active, #app-menu > .dropdown > .item.active {
|
|
||||||
box-shadow: 0px -4px 0px #6133b4 inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .dropdown > .menu {
|
|
||||||
border: none;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5); // transparent
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .dropdown > .menu > .item:last-child {
|
|
||||||
border-radius: 0px 0px 4px 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .dropdown .menu > .item {
|
|
||||||
/* !important to override Semantic UI's !important */
|
|
||||||
width: 217px;
|
|
||||||
background: #6133b4 !important;
|
|
||||||
color: #fff !important;
|
|
||||||
padding: 6px 0px 6px 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .dropdown .menu .item.active {
|
|
||||||
font-weight: normal !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu > .dropdown .menu > .item:hover {
|
|
||||||
background: #4f2a93 !important; /* to override Semantic UI's !important */
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu .item {
|
|
||||||
padding-top: 12px !important;
|
|
||||||
padding-bottom: 12px !important;
|
|
||||||
color: #616162 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu .item {
|
|
||||||
padding-top: 12px !important;
|
|
||||||
padding-bottom: 12px !important;
|
|
||||||
color: #616162 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(3) {
|
|
||||||
padding-bottom: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu .item:nth-child(4) {
|
|
||||||
padding-top: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu {
|
|
||||||
width: 200px;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .menu .item:hover {
|
|
||||||
background: #fff !important;
|
|
||||||
color: #6133b4 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown > .menu::after {
|
|
||||||
top: -0.50em;
|
|
||||||
left: 85.3%;
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .ui.pointing.dropdown .divider {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-menu .user-edit-avatar strong, #app-menu .user-edit-avatar strong:hover {
|
|
||||||
color: #313131;
|
|
||||||
margin-top: -3px;
|
|
||||||
flex-grow: 1;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
margin-top: 0; // remove the gap so it doesn't close
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-menu .user-edit-avatar a, #app-menu .user-edit-avatar a:hover {
|
.dropdown-menu:not(.user-dropdown) {
|
||||||
font-size: 13px;
|
background: $active-purple;
|
||||||
line-height: 1.23;
|
border-radius: 0px;
|
||||||
color: #6133b4;
|
border: none;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: $active-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #4f2a93;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-with-icon {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -44,8 +44,8 @@
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.avatar {
|
.avatar {
|
||||||
max-width: 140px;
|
width: 140px;
|
||||||
max-height: 147px;
|
height: 147px;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,14 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.row
|
.row
|
||||||
.sixteen.wide.column
|
.col-12
|
||||||
.ui.secondary.menu.center-content
|
nav.nav
|
||||||
router-link.item(:to="{name: 'inventory'}", exact)
|
router-link.nav-link(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
|
||||||
span(v-once) {{ $t('inventory') }}
|
router-link.nav-link(:to="{name: 'equipment'}") {{ $t('equipment') }}
|
||||||
router-link.item(:to="{name: 'equipment'}")
|
router-link.nav-link(:to="{name: 'stable'}") {{ $t('stable') }}
|
||||||
span(v-once) {{ $t('equipment') }}
|
.col-12
|
||||||
router-link.item(:to="{name: 'stable'}")
|
|
||||||
span(v-once) {{ $t('stable') }}
|
|
||||||
|
|
||||||
.sixteen.wide.column
|
|
||||||
router-view
|
router-view
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
@@ -1,46 +1,48 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.grid
|
.row
|
||||||
.three.wide.column
|
.col-3
|
||||||
.ui.left.icon.input
|
.form-group
|
||||||
i.search.icon
|
input.form-control(type="text", :placeholder="$t('search')")
|
||||||
input(type="text", :placeholder="$t('search')")
|
|
||||||
h3(v-once) {{ $t('filter') }}
|
|
||||||
|
|
||||||
.ui.form
|
.form
|
||||||
.field
|
h3(v-once) {{ $t('filter') }}
|
||||||
.ui.checkbox
|
.form-group
|
||||||
input(type="checkbox")
|
.form-check
|
||||||
label.label-primary(v-once) {{ $t('pets') }}
|
label.form-check-label(v-once)
|
||||||
.field.nested-field
|
input.form-check-input(type="checkbox")
|
||||||
.ui.checkbox
|
strong {{ $t('pets') }}
|
||||||
input(type="checkbox")
|
.form-check.nested-field
|
||||||
label(v-once) {{ $t('hatchingPotions') }}
|
label.form-check-label(v-once)
|
||||||
.field.nested-field
|
input.form-check-input(type="checkbox")
|
||||||
.ui.checkbox
|
span {{ $t('hatchingPotions') }}
|
||||||
input(type="checkbox")
|
.form-check.nested-field
|
||||||
label(v-once) {{ $t('quest') }}
|
label.form-check-label(v-once)
|
||||||
.field.nested-field
|
input.form-check-input(type="checkbox")
|
||||||
.ui.checkbox
|
span {{ $t('quest') }}
|
||||||
input(type="checkbox")
|
.form-check.nested-field
|
||||||
label(v-once) {{ $t('special') }}
|
label.form-check-label(v-once)
|
||||||
.field
|
input.form-check-input(type="checkbox")
|
||||||
.ui.checkbox
|
span {{ $t('special') }}
|
||||||
input(type="checkbox")
|
.form-group
|
||||||
label.label-primary(v-once) {{ $t('mounts') }}
|
.form-check
|
||||||
.field.nested-field
|
label.form-check-label(v-once)
|
||||||
.ui.checkbox
|
input.form-check-input(type="checkbox")
|
||||||
input(type="checkbox")
|
strong {{ $t('mounts') }}
|
||||||
label(v-once) {{ $t('hatchingPotions') }}
|
.form-check.nested-field
|
||||||
.field.nested-field
|
label.form-check-label(v-once)
|
||||||
.ui.checkbox
|
input.form-check-input(type="checkbox")
|
||||||
input(type="checkbox")
|
span {{ $t('hatchingPotions') }}
|
||||||
label(v-once) {{ $t('quest') }}
|
.form-check.nested-field
|
||||||
.field.nested-field
|
label.form-check-label(v-once)
|
||||||
.ui.checkbox
|
input.form-check-input(type="checkbox")
|
||||||
input(type="checkbox")
|
span {{ $t('quest') }}
|
||||||
label(v-once) {{ $t('special') }}
|
.form-check.nested-field
|
||||||
|
label.form-check-label(v-once)
|
||||||
|
input.form-check-input(type="checkbox")
|
||||||
|
span {{ $t('special') }}
|
||||||
|
|
||||||
.thirteen.wide.column
|
|
||||||
|
.col-9
|
||||||
h2 Pets
|
h2 Pets
|
||||||
.inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
|
.inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
|
||||||
.PixelPaw
|
.PixelPaw
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.row
|
.row
|
||||||
.sixteen.wide.column
|
.col
|
||||||
h2 Page
|
h2 Page
|
||||||
p {{ $route.path }}
|
p {{ $route.path }}
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default { };
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.row
|
.row
|
||||||
.sixteen.wide.column
|
.col
|
||||||
router-view.row
|
router-view
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default { };
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,27 +1,28 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.grid
|
.row
|
||||||
.three.wide.column
|
.col-3
|
||||||
.ui.left.icon.input
|
.form-group
|
||||||
i.search.icon
|
input.form-control(type="text", :placeholder="$t('search')")
|
||||||
input(type="text", :placeholder="$t('search')")
|
|
||||||
h3(v-once) {{ $t('filter') }}
|
|
||||||
|
|
||||||
.ui.form
|
form
|
||||||
h4 Interests
|
h3(v-once) {{ $t('filter') }}
|
||||||
.field
|
|
||||||
.ui.checkbox
|
|
||||||
input(type="checkbox")
|
|
||||||
label(v-once) Habitica Official
|
|
||||||
.field
|
|
||||||
.ui.checkbox
|
|
||||||
input(type="checkbox")
|
|
||||||
label(v-once) Nature
|
|
||||||
.field
|
|
||||||
.ui.checkbox
|
|
||||||
input(type="checkbox")
|
|
||||||
label(v-once) Animals
|
|
||||||
|
|
||||||
.thirteen.wide.column
|
.form-group
|
||||||
|
h5 Interests
|
||||||
|
.form-check
|
||||||
|
.label.form-check-label
|
||||||
|
input.form-check-input(type="checkbox")
|
||||||
|
span Habitica Official
|
||||||
|
.form-check
|
||||||
|
.label.form-check-label
|
||||||
|
input.form-check-input(type="checkbox")
|
||||||
|
span Nature
|
||||||
|
.form-check
|
||||||
|
.label.form-check-label
|
||||||
|
input.form-check-input(type="checkbox")
|
||||||
|
span Animals
|
||||||
|
|
||||||
|
.col-9
|
||||||
h2(v-once) {{ $t('publicGuilds') }}
|
h2(v-once) {{ $t('publicGuilds') }}
|
||||||
public-guild-item(v-for="guild in guilds", :key='guild._id', :guild="guild")
|
public-guild-item(v-for="guild in guilds", :key='guild._id', :guild="guild")
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,13 +1,19 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.clearing.raised.segment
|
.card
|
||||||
.ui.right.floated.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
|
.card-block
|
||||||
.floated
|
.clearfix
|
||||||
// TODO v-once?
|
router-link.float-left(:to="{ name: 'guild', params: { guildId: guild._id } }")
|
||||||
router-link(:to="{ name: 'guild', params: { guildId: guild._id } }")
|
h3 {{ guild.name }}
|
||||||
h3.ui.header {{ guild.name }}
|
button.btn.float-right(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
|
||||||
p {{ guild.description }}
|
p {{ guild.description }}
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from '../../../../store';
|
import { mapState } from '../../../../store';
|
||||||
import groupUtilities from '../../../../mixins/groupsUtilities';
|
import groupUtilities from '../../../../mixins/groupsUtilities';
|
||||||
|
|||||||
@@ -1,36 +1,36 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
// TODO this is necessary until we have a way to wait for data to be loaded from the server
|
// TODO this is necessary until we have a way to wait for data to be loaded from the server
|
||||||
div(v-if="guild")
|
.row(v-if="guild")
|
||||||
.ui.grid
|
.clearfix.col-12
|
||||||
.row
|
.float-left
|
||||||
.eight.wide.column.left.floated
|
h2 {{guild.name}}
|
||||||
h2.ui.header.sixteen.wide.column {{guild.name}}
|
strong.float-left {{$t('groupLeader')}}
|
||||||
.sixteen.wide.column
|
span.float-left : {{guild.leader.profile.name}}
|
||||||
h4.ui.left.floated.header {{$t('groupLeader')}}
|
.float-right
|
||||||
p {{guild.leader.profile.name}}
|
.clearfix
|
||||||
.eight.wide.column.right.floated
|
h3.float-left
|
||||||
.ui.basic.segment.right.floated
|
span.badge.badge-default {{guild.memberCount}}
|
||||||
// TODO extract button to component?
|
| {{$t('members')}}
|
||||||
.ui.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
|
button.btn.float-left(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
|
||||||
.ui.segment.compact.right.floated
|
.col-5
|
||||||
h3.ui.header.centered
|
h4(v-once) {{ $t('description') }}
|
||||||
| {{guild.memberCount}}
|
p {{ guild.description }}
|
||||||
.sub.header(v-once) {{ $t('members') }}
|
.col-7
|
||||||
.row
|
h4(v-once) {{ $t('chat') }}
|
||||||
.five.wide.column
|
.card(v-for="msg in guild.chat", :key="msg.id")
|
||||||
h3.ui.header(v-once) {{ $t('description') }}
|
.card-block
|
||||||
p {{ guild.description }}
|
.clearfix
|
||||||
.eleven.wide.column
|
strong.float-left {{msg.user}}
|
||||||
h3.ui.header(v-once) {{ $t('chat') }}
|
.float-right {{msg.timestamp}}
|
||||||
.ui.minimal.comments
|
.text {{msg.text}}
|
||||||
.comment(v-for="msg in guild.chat", :key="msg.id")
|
|
||||||
.content
|
|
||||||
a.author {{msg.user}}
|
|
||||||
.metadata
|
|
||||||
span.date {{msg.timestamp}}
|
|
||||||
.text {{msg.text}}
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import groupUtilities from '../../../mixins/groupsUtilities';
|
import groupUtilities from '../../../mixins/groupsUtilities';
|
||||||
|
|||||||
@@ -1,23 +1,16 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.internally.celled.grid
|
.row
|
||||||
.row
|
.col-12
|
||||||
.sixteen.wide.column
|
h2 Conversation
|
||||||
.ui.comments
|
.card(v-for="message in messages")
|
||||||
h2.ui.dividing.header Conversation
|
.card-block
|
||||||
.comment(v-for="message in messages")
|
strong {{message.from}}
|
||||||
a.avatar
|
span {{message.date}}
|
||||||
img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
|
p {{message.message}}
|
||||||
.content
|
form.form.mt-2(@submit.prevent='reply')
|
||||||
a.author {{message.from}}
|
.form-group
|
||||||
.metadata
|
textarea.form-control(rows="3", v-model='newMessage')
|
||||||
span.date {{message.date}}
|
button.btn.btn-primary(type="submit") Add Reply
|
||||||
.text
|
|
||||||
| {{message.message}}
|
|
||||||
.field
|
|
||||||
textarea(v-model='newMessage')
|
|
||||||
.ui.blue.labeled.submit.icon.button(v-on:click='reply')
|
|
||||||
i.icon.edit
|
|
||||||
| Add Reply
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,15 +1,11 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.internally.celled.grid
|
.row
|
||||||
.row
|
.col-12
|
||||||
.sixteen.wide.colum
|
h2(v-once) {{ $t('inbox') }}
|
||||||
h2.ui.dividing.header(v-once) {{ $t('inbox') }}
|
.card(v-for="conversation in conversations")
|
||||||
.ui.middle.aligned.selection.list
|
.card-block
|
||||||
.item(v-for="conversation in conversations")
|
router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
|
||||||
img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg')
|
| {{ conversation.from }}
|
||||||
.content
|
|
||||||
.header
|
|
||||||
router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
|
|
||||||
| {{ conversation.from }}
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,14 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.row
|
.row
|
||||||
.sixteen.wide.column
|
.col-12
|
||||||
.ui.secondary.menu.center-content
|
nav.nav
|
||||||
router-link.item(:to="{name: 'tavern'}")
|
router-link.nav-link(:to="{name: 'tavern'}", exact) {{ $t('tavern') }}
|
||||||
span(v-once) {{ $t('tavern') }}
|
router-link.nav-link(:to="{name: 'inbox'}") {{ $t('inbox') }}
|
||||||
router-link.item(:to="{name: 'guilds'}")
|
router-link.nav-link(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
|
||||||
span(v-once) {{ $t('guilds') }}
|
.col-12
|
||||||
router-link.item(:to="{name: 'inbox'}")
|
|
||||||
span(v-once) {{ $t('inbox') }}
|
|
||||||
|
|
||||||
.sixteen.wide.column
|
|
||||||
router-view
|
router-view
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.ui.grid
|
.row
|
||||||
|
h2.col-12 Tavern
|
||||||
|
// TODO Example code based on Semantic UI .ui.grid
|
||||||
.four.wide.column
|
.four.wide.column
|
||||||
h2.ui.dividing.header SideMenu
|
h2.ui.dividing.header SideMenu
|
||||||
|
|
||||||
@@ -176,7 +178,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
// @TODO: Abstract to Store
|
// TODO: Abstract to Store
|
||||||
let messages = [
|
let messages = [
|
||||||
{
|
{
|
||||||
from: 'Paglias',
|
from: 'Paglias',
|
||||||
@@ -195,7 +197,7 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
sendChat: function sendChat () {
|
sendChat: function sendChat () {
|
||||||
// @TODO: This will be default values based on the conversation and current user
|
// TODO: This will be default values based on the conversation and current user
|
||||||
let messageToSend = {
|
let messageToSend = {
|
||||||
from: 'TheHollidayInn',
|
from: 'TheHollidayInn',
|
||||||
fromUserId: 3211,
|
fromUserId: 3211,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.row
|
.row
|
||||||
.four.wide.column(v-for="taskType in tasksTypes")
|
.col(v-for="taskType in tasksTypes")
|
||||||
h3 {{taskType}}s
|
h3 {{taskType}}s
|
||||||
ul
|
ul
|
||||||
task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
|
task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
|
||||||
|
|||||||
@@ -7,10 +7,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
|
<!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
|
||||||
<div id="loading-screen" class="ui middle aligned one column grid">
|
<div id="loading-screen" class="h-100 w-100 d-flex justify-content-center align-items-center">
|
||||||
<div class="column center aligned">
|
<p>Loading...</p>
|
||||||
<p>Loading...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|||||||
@@ -67,13 +67,13 @@ export default new VueRouter({
|
|||||||
component: EmptyView,
|
component: EmptyView,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'guilds',
|
name: 'guildsDiscovery',
|
||||||
path: '',
|
path: 'discovery',
|
||||||
component: GuildsDiscoveryPage,
|
component: GuildsDiscoveryPage,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'guild',
|
name: 'guild',
|
||||||
path: ':guildId',
|
path: 'guild/:guildId',
|
||||||
component: GuildPage,
|
component: GuildPage,
|
||||||
props: true,
|
props: true,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user