Board base

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "env": {
-    "es6": true
+    "es6": true,
+    "browser": true
   },
   "parserOptions": {
     "ecmaVersion": 6,

.gitignore

@@ -25,3 +25,4 @@
 /public/system/*
 /public/packs
 /node_modules
+.vscode

.hound.yml

@@ -6,6 +6,6 @@ eslint:
   enabled: true
   config_file: ".eslintrc.json"
   ignore_file: .eslintignore
-scss:
+stylelint:
   enabled: true
-  config_file: ".scss-lint.yml"
+  config_file: ".stylelintrc.json"

.stylelintrc.json

@@ -0,0 +1,45 @@
+{
+  "rules": {
+    "declaration-bang-space-before": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-property-value-blacklist": {
+      "/^border/": ["none"]
+    },
+    "color-named": "never",
+    "declaration-block-no-duplicate-properties": true,
+    "rule-empty-line-before": ["always-multi-line", {
+      "except": ["after-single-line-comment", "first-nested"]
+    }],
+    "block-no-empty": true,
+    "no-missing-end-of-source-newline": true,
+    "color-hex-length": "short",
+    "color-hex-case": "lower",
+    "color-no-invalid-hex": true,
+    "declaration-no-important": true,
+    "indentation": 2,
+    "number-leading-zero": "never",
+    "no-duplicate-selectors": true,
+    "max-nesting-depth": 3,
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-no-qualifying-type": true,
+    "shorthand-property-no-redundant-values": true,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "selector-list-comma-newline-after": "always",
+    "function-comma-space-after": "always-single-line",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "block-opening-brace-space-before": "always",
+    "function-parentheses-space-inside": "never",
+    "string-quotes": "single",
+    "declaration-block-trailing-semicolon": "always",
+    "no-eol-whitespace": true,
+    "number-no-trailing-zeros": true,
+    "function-url-quotes": "always",
+    "property-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "at-rule-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "length-zero-no-unit": true
+  }
+}

app/controllers/app_controller.rb

@@ -0,0 +1,2 @@
+class AppController < ApplicationController
+end

app/javascript/packs/app.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app">
+    <app-header class="app__header"></app-header>
+    <board class="app__board"></board>
+  </div>
+</template>
+
+<script>
+import appHeader from '../trellaw/app-header.vue';
+import board from '../trellaw/board.vue';
+
+export default {
+  components: {
+    appHeader,
+    board,
+  },
+}
+</script>
+
+<style lang="scss">
+@import '~normalize.css/normalize';
+@import '../trellaw/stylesheets/variables';
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-family;
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+html,
+body,
+.app {
+  width: 100%;
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+
+  &__header {
+    flex: 40px 0 0;
+  }
+
+  &__board {
+    flex: 100% 1 1;
+  }
+}
+</style>

app/javascript/packs/trellaw.js

@@ -0,0 +1,7 @@
+/* eslint-disable no-unused-vars */
+import Vue from 'vue';
+import App from './app.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new Vue(App).$mount('#app');
+});

app/javascript/trellaw/app-header.vue

@@ -0,0 +1,28 @@
+<template>
+  <header class="header">
+    <img :src="logo" />
+  </header>
+</template>
+
+<script>
+import logo from '../trellaw/images/white-monkey.svg'
+
+export default {
+  data() {
+    return {
+      logo,
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import 'stylesheets/variables';
+  .header {
+    background-color: $header-bg;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

app/javascript/trellaw/board.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="board">
+    <list class="board__list" :title="'Ideas'"></list>
+    <list class="board__list" :title="'Backlog'"></list>
+    <list class="board__list" :title="'This Sprint'"></list>
+    <list class="board__list" :title="'In Process'"></list>
+    <list class="board__list" :title="'Done'"></list>
+  </div>
+</template>
+
+<script>
+import list from './list';
+
+export default {
+  components: {
+    list,
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import './stylesheets/variables';
+
+.board {
+  padding: 45px 5px 24px;
+  white-space: nowrap;
+  overflow-x: auto;
+
+  &__list {
+    display: inline-block;
+    margin: 0 5px;
+    width: 270px;
+    height: 100%;
+  }
+}
+</style>

app/javascript/trellaw/card-target.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="card-target">
+    <img :src="add" />
+  </div>
+</template>
+
+<script>
+import add from '../trellaw/images/add.svg'
+
+export default {
+  data() {
+    return {
+      add,
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .card-target {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 103px;
+  }
+</style>

app/javascript/trellaw/card.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="card">
+    <component :is="cardType"></component>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['cardType'],
+}
+</script>
+
+<style lang="scss" scoped>
+  @import './stylesheets/variables';
+
+  .card {
+    background-color: $card-bg;
+    border-radius: 4px;
+  }
+</style>

app/javascript/trellaw/list.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="list-wrapper">
+    <div class="list">
+      <div class="list__header">{{title}}</div>
+      <div class="list__content">
+        <card :card-type="dropTarget"></card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import card from './card';
+import cardTarget from './card-target';
+
+export default {
+  components: {
+    card,
+  },
+  props: {
+    title: {
+      default: 'Título',
+    }
+  },
+  data() {
+    return {
+      dropTarget: cardTarget,
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+  @import './stylesheets/variables';
+
+  .list-wrapper {
+    background-color: $list-bg;
+    border-radius: 4px;
+  }
+
+  .list {
+    display: flex;
+    flex-flow: column;
+    padding: 0 8px;
+    height: 100%;
+
+    &__header {
+      font-weight: 600;
+      font-size: 14px;
+      flex: 40px 0 0;
+      line-height: 40px;
+    }
+
+    &__content {
+      background-color: $list-content-bg;
+      flex: 100% 1 1;
+      border-radius: 4px;
+      padding: 8px;
+    }
+  }
+</style>

app/javascript/trellaw/stylesheets/variables.scss

@@ -0,0 +1,9 @@
+$font-family: 'Helvetica Neue', Helvetica, 'Open Sans', sans-serif;
+
+$body-bg: #6c34b4;
+$body-color: #4d4d4d;
+$card-bg: #f6f6f6;
+$color: #7000ff;
+$header-bg: #4e2187;
+$list-bg: #e2e4e6;
+$list-content-bg: #ecedee;

app/views/app/index.html

@@ -0,0 +1,2 @@
+<div id="app">
+</div>

app/views/layouts/app.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Trellaw</title>
+  <%= stylesheet_pack_tag 'trellaw' %>
+  <%= javascript_pack_tag 'trellaw' %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

config/routes.rb

@@ -8,6 +8,8 @@
 
   mount Sidekiq::Web => '/queue'
 
+  get '/app' => 'app#index'
+
   # User root, used by devise
   get '/user_root', to: redirect('/boards'), as: :user_root
 

config/webpack/loaders/vue.js

@@ -0,0 +1,13 @@
+module.exports = {
+  test: /.vue$/,
+  loader: 'vue-loader',
+  options: {
+    extractCSS: true,
+    loaders: {
+      js: 'babel-loader',
+      file: 'file-loader',
+      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
+      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
+    }
+  }
+}

package.json

@@ -16,6 +16,7 @@
     "glob": "^7.1.2",
     "js-yaml": "^3.8.4",
     "node-sass": "^4.5.3",
+    "normalize.css": "^7.0.0",
     "path-complete-extname": "^0.1.0",
     "postcss-loader": "^2.0.6",
     "postcss-smart-import": "^0.7.4",
@@ -24,6 +25,9 @@
     "resolve-url-loader": "^2.0.3",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
+    "vue": "^2.4.1",
+    "vue-loader": "^12.2.2",
+    "vue-template-compiler": "^2.4.1",
     "webpack": "^3.0.0",
     "webpack-manifest-plugin": "^1.1.0",
     "webpack-merge": "^4.1.0"