Add semantic-ui (#8076)

* client: add semantic-ui

* add README, disable google fonts

* karma: limit coverage to .vue and .js files

* add missing deps

* semantic-ui in assets folder

gulp/gulp-build.js

@@ -25,7 +25,7 @@ gulp.task('build:common', () => {
 
 gulp.task('build:server', ['build:src', 'build:common']);
 
-gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff'], (done) => {
+gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff', 'semantic-ui'], (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.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff'], (done) => {
+gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff', 'semantic-ui'], (done) => {
   runSequence(
     'grunt-build:prod',
     'apidoc',

gulp/gulp-semanticui.js

@@ -0,0 +1,43 @@
+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/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);
+    }
+  );
+});

gulpfile.js

@@ -9,6 +9,7 @@
 require('babel-register');
 
 if (process.env.NODE_ENV === 'production') {
+  require('./gulp/gulp-semanticui');
   require('./gulp/gulp-apidoc');
   require('./gulp/gulp-newstuff');
   require('./gulp/gulp-build');

package.json

@@ -65,6 +65,8 @@
     "jade": "~1.11.0",
     "js2xmlparser": "~1.0.0",
     "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "lodash": "^3.10.1",
     "lodash.setwith": "^4.2.0",
     "merge-stream": "^1.0.0",
@@ -94,6 +96,7 @@
     "rimraf": "^2.4.3",
     "run-sequence": "^1.1.4",
     "s3-upload-stream": "^1.0.6",
+    "semantic-ui-less": "~2.2.4",
     "serve-favicon": "^2.3.0",
     "shelljs": "^0.6.0",
     "stripe": "^4.2.0",

test/client/unit/index.js

@@ -6,6 +6,6 @@ require('babel-polyfill');
 var testsContext = require.context('./specs', true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
-// require all src files except main.js/ README.md / index.html for coverage.
+// require all .vue and .js files except main.js for coverage.
-var srcContext = require.context('../../../website/client', true, /^\.\/(?!(main(\.js)?)|(index(\.html)?)$)/);
+var srcContext = require.context('../../../website/client', true, /^\.\/(?=(?!main(\.js)?$))(?=(.*\.(vue|js)$))/);
 srcContext.keys().forEach(srcContext);

website/client/assets/semantic-ui/README.md

@@ -0,0 +1,109 @@
+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

website/client/assets/semantic-ui/semantic.less

@@ -0,0 +1,68 @@
+/*
+
+███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
+██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
+███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
+╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
+███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
+╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
+
+  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"; }

website/client/assets/semantic-ui/site/globals/site.variables

@@ -0,0 +1,2 @@
+// Disable google fonts
+@importGoogleFonts: false;

website/client/assets/semantic-ui/theme.config

@@ -0,0 +1,92 @@
+/*
+
+████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
+╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
+   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
+   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
+   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
+   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝
+
+*/
+
+/*******************************
+        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 */
+@siteFolder  : '../../website/client/semantic-ui/site';
+
+
+/*******************************
+         Import Theme
+*******************************/
+
+@import "~semantic-ui-less/theme.less";
+
+/* End Config */

website/client/components/app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#app
+#app.ui.fluid.container
   site-header
   p Welcome back {{user.profile.name}}!
   ul
@@ -23,29 +23,12 @@ export default {
 };
 </script>
 
-<style>
+<style lang="less">
-html, body {
+@import '../assets/semantic-ui/semantic.less';
-  width: 100%;
+
+// Element is rendered outside of Vue because it cannot wait for JS to be loaded
+// Placing CSS here so it benefits from pre-processing
+#loading-screen {
   height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-#loading-screen { /* outside Vue because can't wait for rendering to finish */
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
-  z-index: 10001;
-}
-
-#app {
-  margin: 0 auto;
-  width: 80%;
-  border-left : 1px solid;
-  border-right: 1px solid;
-  padding: 20px;
 }
 </style>

website/client/index.html

@@ -6,7 +6,11 @@
   </head>
   <body>
     <!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
-    <div id="loading-screen">Loading...</div>
+    <div id="loading-screen" class="ui middle aligned one column grid">
+      <div class="column center aligned">
+        <p>Loading...</p>
+      </div>
+    </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>