v6.26

and changing image attachment view big image popup from swipebox to lightbox.

Thanks to xet7 !

Fixes #4507

.devcontainer/Dockerfile

@@ -5,12 +5,12 @@ LABEL maintainer="sgr"
 # - gyp does not yet work with Ubuntu 22.04 ubuntu:rolling,
 #   so changing to 21.10. https://github.com/wekan/wekan/issues/4488
 
-ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python git ca-certificates iproute2"
+ENV BUILD_DEPS="gnupg gosu libarchive-tools wget curl bzip2 g++ build-essential python3 git ca-certificates iproute2"
 ENV DEBIAN_FRONTEND=noninteractive
 
 ENV \
     DEBUG=false \
-    NODE_VERSION=v14.19.2 \
+    NODE_VERSION=v14.19.3 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \
@@ -224,12 +224,6 @@ RUN set -o xtrace \
 
 USER wekan
 
-RUN \
-    set -o xtrace && \
-    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
-    cd /home/wekan/.meteor && \
-    /home/wekan/.meteor/meteor -- help;
-
 RUN \
     set -o xtrace && \
     # Build app

.devcontainer/docker-compose.yml

@@ -3,7 +3,7 @@ version: '3.7'
 services:
 
   wekandb-dev:
-    image: mongo:4.4
+    image: mongo:5.0
     container_name: wekan-dev-db
     restart: unless-stopped
     command: mongod --oplogSize 128
@@ -42,7 +42,7 @@ services:
       - ../client:/home/wekan/app/client
       - ../models:/home/wekan/app/models
       - ../config:/home/wekan/app/config
-      - ../i18n:/home/wekan/app/i18n
+      - ../imports:/home/wekan/app/imports
       - ../server:/home/wekan/app/server
       - ../public:/home/wekan/app/public
 

.future-snap/broken-snapcraft.yaml

@@ -81,7 +81,7 @@ parts:
     wekan:
         source: .
         plugin: nodejs
-        node-engine: 14.19.2
+        node-engine: 14.19.3
         node-packages:
             - node-gyp
             - node-pre-gyp

.meteor/packages

@@ -3,12 +3,12 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.4.0
+meteor-base@1.5.1
 
 # Build system
-ecmascript@0.15.1
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
+ecmascript@0.16.2
+standard-minifier-css@1.8.1
+standard-minifier-js@2.8.0
 mquandalle:jade
 coffeescript@2.4.1!
 
@@ -21,19 +21,14 @@ cfs:standard-packages
 cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
-matb33:collection-hooks
 matteodem:easy-search
-mongo@1.11.0
+mongo@1.15.0
 mquandalle:collection-mutations
 
 # Account system
-kenton:accounts-sandstorm
-service-configuration@1.0.11
-useraccounts:unstyled
-useraccounts:flow-routing
-wekan-ldap
-wekan-accounts-cas
-wekan-accounts-oidc
+#wekan-ldap
+#wekan-accounts-cas
+#wekan-accounts-oidc
 
 # Utilities
 check@1.3.1
@@ -43,7 +38,6 @@ reactive-dict@1.3.0
 session@1.2.0
 tracker@1.2.0
 underscore@1.0.10
-3stack:presence
 arillo:flow-router-helpers
 audit-argument-checks@1.0.7
 kadira:blaze-layout
@@ -51,39 +45,29 @@ kadira:dochead
 mquandalle:autofocus
 ongoworks:speakingurl
 raix:handlebar-helpers
-tap:i18n
-http@1.4.2
+http@2.0.0! # force new http package
 
 # UI components
 blaze
+ostrio:i18n
 reactive-var@1.0.11
 fortawesome:fontawesome
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
 mquandalle:mousetrap-bindglobal
-peerlibrary:blaze-components@=0.15.1
+peerlibrary:blaze-components
 templates:tabs
 meteor-autosize
-simple:json-routes
 rajit:bootstrap3-datepicker
 shell-server@0.5.0
-simple:rest-accounts-password
-useraccounts:core
-email@2.0.0
-horka:swipebox
-dynamic-import@0.6.0
+email@2.2.1
+dynamic-import@0.7.2
 
-accounts-password@1.6.2
 cfs:gridfs
 rzymek:fullcalendar
-momentjs:moment@2.22.2
-mquandalle:moment
 msavin:usercache
 # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
-coagmano:stylus@1.1.0!
 meteorhacks:subs-manager
-meteorhacks:picker
-lamhieu:unblock
 meteorhacks:aggregate@1.3.0
 wekan-markdown
 konecty:mongo-counter
@@ -91,8 +75,6 @@ percolate:synced-cron
 cfs:filesystem
 ostrio:cookies
 ostrio:files@2.0.1
-tmeasday:check-npm-versions
-steffo:meteor-accounts-saml
 rajit:bootstrap3-datepicker-fi
 rajit:bootstrap3-datepicker-ar
 rajit:bootstrap3-datepicker-bg
@@ -141,10 +123,26 @@ rajit:bootstrap3-datepicker-uk
 rajit:bootstrap3-datepicker-vi
 rajit:bootstrap3-datepicker-zh-cn
 rajit:bootstrap3-datepicker-zh-tw
-staringatlights:fast-render
-spacebars
 easylogic:summernote
 pascoual:pdfkit
-wekan-accounts-lockout
 lmieulet:meteor-coverage
-meteortesting:mocha
+meteortesting:mocha@2.0.3
+aldeed:simple-schema
+accounts-password@2.3.1
+matb33:collection-hooks
+simple:json-routes
+kadira:flow-router
+spacebars
+useraccounts:core
+useraccounts:flow-routing
+useraccounts:unstyled
+service-configuration@1.3.0
+communitypackages:picker
+simple:rest-accounts-password
+wekan-accounts-sandstorm
+wekan-accounts-lockout
+wekan-oidc
+wekan-accounts-oidc
+wekan-ldap
+wekan-accounts-cas
+czbaker:lightbox2

.meteor/release

@@ -1 +1 @@
-METEOR@2.2
+METEOR@2.7.2

.meteor/versions

@@ -1,26 +1,25 @@
-3stack:presence@1.1.2
-accounts-base@1.9.0
-accounts-oauth@1.2.0
-accounts-password@1.7.1
+accounts-base@2.2.3
+accounts-oauth@1.4.1
+accounts-password@2.3.1
 aldeed:collection2@2.10.0
 aldeed:collection2-core@1.2.0
 aldeed:schema-deny@1.1.0
 aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.4
-allow-deny@1.1.0
+allow-deny@1.1.1
 arillo:flow-router-helpers@0.5.2
 audit-argument-checks@1.0.7
-autoupdate@1.7.0
-babel-compiler@7.6.1
+autoupdate@1.8.0
+babel-compiler@7.9.0
 babel-runtime@1.5.0
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.5.0
-blaze-tools@1.1.2
+blaze@2.6.0
+blaze-tools@1.1.3
 boilerplate-generator@1.7.1
 caching-compiler@1.2.2
-caching-html-compiler@1.2.0
-callback-hook@1.3.0
+caching-html-compiler@1.2.1
+callback-hook@1.4.0
 cfs:access-point@0.1.49
 cfs:base-package@0.0.30
 cfs:collection@0.5.5
@@ -40,37 +39,36 @@ cfs:tempstore@0.1.6
 cfs:upload-http@0.0.20
 cfs:worker@0.1.5
 check@1.3.1
-chuangbo:cookie@1.1.0
-coagmano:stylus@1.1.0
 coffeescript@2.4.1
 coffeescript-compiler@2.4.1
+communitypackages:picker@1.1.0
 cottz:publish-relations@2.0.8
+czbaker:lightbox2@2.7.1_1
 dburles:collection-helpers@1.1.0
 ddp@1.4.0
-ddp-client@2.4.1
+ddp-client@2.5.0
 ddp-common@1.4.0
-ddp-rate-limiter@1.0.9
-ddp-server@2.3.3
+ddp-rate-limiter@1.1.0
+ddp-server@2.5.0
 deps@1.0.12
 diff-sequence@1.1.1
-dynamic-import@0.6.0
+dynamic-import@0.7.2
 easylogic:summernote@0.8.8
-ecmascript@0.15.1
-ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.11.1
-ecmascript-runtime-server@0.10.1
-ejson@1.1.1
-email@2.0.0
+ecmascript@0.16.2
+ecmascript-runtime@0.8.0
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.2
+email@2.2.1
 es5-shim@4.8.0
 fastclick@1.0.13
 fetch@0.1.1
 fortawesome:fontawesome@4.7.0
 geojson-utils@1.0.10
-horka:swipebox@1.0.2
 hot-code-push@1.0.4
-html-tools@1.1.2
+html-tools@1.1.3
 htmljs@1.1.1
-http@1.4.4
+http@2.0.0
 id-map@1.1.1
 idmontie:migrations@1.0.3
 inter-process-messaging@0.1.1
@@ -78,41 +76,37 @@ jquery@1.11.11
 kadira:blaze-layout@2.3.0
 kadira:dochead@1.5.0
 kadira:flow-router@2.12.1
-kenton:accounts-sandstorm@0.7.0
 konecty:mongo-counter@0.0.5_3
-lamhieu:meteorx@2.1.1
-lamhieu:unblock@1.0.0
-launch-screen@1.2.1
+launch-screen@1.3.0
 livedata@1.0.18
-lmieulet:meteor-coverage@3.2.0
+lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.2.0
-matb33:collection-hooks@0.9.1
+logging@1.3.1
+matb33:collection-hooks@1.1.2
 matteodem:easy-search@1.6.4
 mdg:validation-error@0.5.1
-meteor@1.9.3
+meteor@1.10.0
 meteor-autosize@5.0.1
-meteor-base@1.4.0
+meteor-base@1.5.1
 meteor-platform@1.2.6
 meteorhacks:aggregate@1.3.0
 meteorhacks:collection-utils@1.2.0
 meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
-meteorspark:util@0.2.0
-meteortesting:browser-tests@1.3.4
-meteortesting:mocha@2.0.1
+meteortesting:browser-tests@1.3.5
+meteortesting:mocha@2.0.3
 meteortesting:mocha-core@8.0.1
-minifier-css@1.5.4
-minifier-js@2.6.0
+minifier-css@1.6.0
+minifier-js@2.7.4
 minifiers@1.1.8-faster-rebuild.0
-minimongo@1.6.2
+minimongo@1.8.0
 mobile-status-bar@1.1.0
-modern-browsers@0.1.5
-modules@0.16.0
-modules-runtime@0.12.0
-momentjs:moment@2.29.1
-mongo@1.11.1
-mongo-decimal@0.1.2
+modern-browsers@0.1.8
+modules@0.18.0
+modules-runtime@0.13.0
+momentjs:moment@2.29.3
+mongo@1.15.0
+mongo-decimal@0.1.3
 mongo-dev-server@1.1.0
 mongo-id@1.0.8
 mongo-livedata@1.0.12
@@ -122,26 +116,27 @@ mquandalle:collection-mutations@0.1.0
 mquandalle:jade@0.4.9
 mquandalle:jade-compiler@0.4.5
 mquandalle:jquery-textcomplete@0.8.0_1
-mquandalle:moment@1.0.1
 mquandalle:mousetrap-bindglobal@0.0.1
 msavin:usercache@1.8.0
-npm-bcrypt@0.9.4
-npm-mongo@3.9.0
-oauth@1.3.2
-oauth2@1.3.0
-observe-sequence@1.0.16
+npm-mongo@4.3.1
+oauth@2.1.2
+oauth2@1.3.1
+observe-sequence@1.0.20
 ongoworks:speakingurl@1.1.0
 ordered-dict@1.1.0
 ostrio:cookies@2.7.0
+ostrio:cstorage@2.2.2
 ostrio:files@2.0.1
+ostrio:i18n@3.1.0
 pascoual:pdfkit@1.0.7
 peerlibrary:assert@0.3.0
-peerlibrary:base-component@0.16.0
-peerlibrary:blaze-components@0.15.1
+peerlibrary:base-component@0.17.1
+peerlibrary:blaze-components@0.23.0
 peerlibrary:computed-field@0.10.0
+peerlibrary:data-lookup@0.3.0
 peerlibrary:reactive-field@0.6.0
 percolate:synced-cron@1.3.2
-promise@0.11.2
+promise@0.12.0
 raix:eventemitter@0.1.3
 raix:handlebar-helpers@0.2.5
 rajit:bootstrap3-datepicker@1.7.1_1
@@ -195,54 +190,46 @@ rajit:bootstrap3-datepicker-zh-cn@1.7.1
 rajit:bootstrap3-datepicker-zh-tw@1.7.1
 random@1.2.0
 rate-limit@1.0.9
-react-fast-refresh@0.1.1
+react-fast-refresh@0.2.3
 reactive-dict@1.3.0
 reactive-var@1.0.11
 reload@1.3.1
 retry@1.1.0
-routepolicy@1.1.0
+routepolicy@1.1.1
 rzymek:fullcalendar@3.8.0
-server-render@0.3.1
-service-configuration@1.0.11
+service-configuration@1.3.0
 session@1.2.0
 sha@1.0.9
 shell-server@0.5.0
-simple:authenticate-user-by-token@1.0.1
-simple:json-routes@2.1.0
-simple:rest-accounts-password@1.1.2
-simple:rest-bearer-token-parser@1.0.1
-simple:rest-json-error-handler@1.0.1
-socket-stream-client@0.3.3
-softwarerero:accounts-t9n@1.3.11
-spacebars@1.2.0
-spacebars-compiler@1.2.1
-srp@1.1.0
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
-staringatlights:fast-render@3.3.0
-staringatlights:inject-data@2.3.0
-steffo:meteor-accounts-saml@0.0.18
-tap:i18n@1.8.2
+simple:authenticate-user-by-token@1.2.1
+simple:json-routes@2.3.1
+simple:rest-accounts-password@1.2.1
+simple:rest-bearer-token-parser@1.1.1
+simple:rest-json-error-handler@1.1.1
+socket-stream-client@0.5.0
+spacebars@1.3.0
+spacebars-compiler@1.3.1
+standard-minifier-css@1.8.1
+standard-minifier-js@2.8.0
 templates:tabs@2.3.0
-templating@1.4.0
+templating@1.4.1
 templating-compiler@1.4.1
-templating-runtime@1.4.0
-templating-tools@1.2.0
-tmeasday:check-npm-versions@1.0.2
+templating-runtime@1.5.0
+templating-tools@1.2.2
 tracker@1.2.0
 twbs:bootstrap@3.3.6
-typescript@4.2.2
 ui@1.0.13
 underscore@1.0.10
 url@1.3.2
-useraccounts:core@1.14.2
-useraccounts:flow-routing@1.14.2
+useraccounts:core@1.16.2
+useraccounts:flow-routing@1.15.0
 useraccounts:unstyled@1.14.2
-webapp@1.10.1
+webapp@1.13.1
 webapp-hashing@1.1.0
 wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
+wekan-accounts-sandstorm@0.8.0
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9
 wekan-oidc@1.0.12

.travis.yml

@@ -3,7 +3,7 @@ sudo: required
 
 env:
   TRAVIS_DOCKER_COMPOSE_VERSION: 1.24.0
-  TRAVIS_NODE_VERSION: 14.19.2
+  TRAVIS_NODE_VERSION: 14.19.3
   TRAVIS_NPM_VERSION: latest
 
 before_install:

.tx/config

@@ -42,7 +42,7 @@ host = https://www.transifex.com
 lang_map = ar_EG:ar-EG, bg_BG:bg, cs_CZ:cs-CZ, cy_GB:cy-GB, de_AT:de-AT, de_CH:de-CH, en_BR:en-BR, en_DE:en-DE, en_IT:en-IT, en_GB:en-GB, et_EE:et-EE, es_AR:es-AR, en@ysv:en-YS, es_CL:es-CL, es_419:es-LA, es_PE:es-PE, es_MX:es-MX, es_TX:es-TX, es_PY:es-PY, el_GR:el-GR, fa_IR:fa-IR, fi_FI:fi, fr_FR:fr-FR, fr_CH:fr-CH, fy_NL:fy-NL, gl_ES:gl-ES, gu_IN:gu-IN, he_IL:he-IL, hi_IN:hi-IN, hu_HU:hu, id_ID:id, mn_MN:mn, ms_MY:ms-MY, nl_NL:nl-NL, ko_KR:ko-KR, lv_LV:lv, pl_PL:pl-PL, pt_BR:pt-BR, ro_RO:ro, ru_UA:ru-UA, sl_SI:sl, uk_UA:uk-UA, uz@Arab:uz-AR, uz@Latn:uz-LA, uz_UZ:uz-UZ, vec:ve-CC, vep:ve-PP, vls:vl-SS, war:wa-RR, vi_VN:vi-VN, zh_CN:zh-CN, zh_TW:zh-TW, zh_Hans:zh-Hans, zh_HK:zh-HK, zu_ZA:zu-ZA
 
 [wekan.application]
-file_filter = i18n/<lang>.i18n.json
+file_filter = imports/i18n/data/<lang>.i18n.json
 source_lang = en
 type = KEYVALUEJSON
 

.vscode/launch.json

@@ -17,6 +17,23 @@
           "outputCapture": "std",
           "port": 9229,
           "timeout": 60000
+      },
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Test: Node",
+          "runtimeExecutable": "meteor",
+          "runtimeArgs": [
+            "test",
+            "--inspect-brk=9229",
+            "--port=4040",
+            "--exclude-archs=web.browser.legacy,web.cordova",
+            "--driver-package=meteortesting:mocha",
+            "--settings=settings.json"
+          ],
+          "outputCapture": "std",
+          "port": 9229,
+          "timeout": 60000
       }
   ],
   "compounds": [

CHANGELOG.md

@@ -1,5 +1,98 @@
 [Mac ChangeLog](https://github.com/wekan/wekan/wiki/Mac)
 
+# v6.26 2022-05-21 WeKan ® release
+
+This release adds the following updates:
+
+- [Updated to Node.js v14.19.3](https://github.com/wekan/wekan/commit/6c8563d02f0865989d8db39dd84757a1a534b49b).
+  Thanks to Node.js developers.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.25 2022-05-21 WeKan ® release
+
+This release adds the following new features:
+
+- [Attachment rename](https://github.com/wekan/wekan/pulls/4521).
+  Thanks to mfilser.
+
+and fixes the following bugs:
+
+- [Fix Bullets in label selection popup. Related to import nib css reset](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9).
+  Thanks to AuspeXeu, mfilser and xet7.
+- [Fix images not showing correctly, by updating packages like jquery,
+  removing handlebars, changing image attachment view big image popup
+  from swipebox to lightbox, and changing import nib related code](https://github.com/wekan/wekan/commit/990477e9c6b33072b27bebf387bd6e6d9ef62074).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.24 2022-05-18 WeKan ® release
+
+This release fixes the following bugs:
+
+- [Fix redirects needs to be done in sync](https://github.com/wekan/wekan/commit/3ed1fc3e6bdf90ecdc3593468d68a29807ed52b5).
+  Thanks to nebulade and xet7.
+- [Added missing 'import nib' stylesheet reset that removes extra li bullet points](https://github.com/wekan/wekan/commit/8964a18e765699e2a5060a72c3ca66d27e1c2ffd).
+  Thanks to mfilser and xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
+# v6.23 2022-05-17 WeKan ® release
+
+This release adds the following updates:
+
+- [Merged branch upgrade-meteor 2.7.2 to master](https://github.com/wekan/wekan/commit/7e43a6f4fb6ac3346729d3bb091e2019591fb323).
+  Thanks to xet7.
+- [Upgrade to Meteor 2.7.2](https://github.com/wekan/wekan/commit/963a4711dbad325a1618abf2f76541d94570ca89).
+  Thanks to Meteor developers.
+- [When developing with Meteor on macOS, get current IP address](https://github.com/wekan/wekan/commit/a73a4c1e5b1971ff32643fb39a37e285a240a77a).
+  Thanks to xet7.
+- [Updated meteor-upgrade branch to Node.js v14.19.2](https://github.com/wekan/wekan/commit/907013228d00f1190933bf7fc402957b1a973131).
+  Thanks to Node.js developers.
+- [Added back to meteor-upgrade branch packages WeKan lockout, ldap, oidc, cas](https://github.com/wekan/wekan/commit/00768b4392109dec62a4dcf44dbceb295990d785).
+  Thanks to xet7.
+- [Added fixes to meteor-upgrade branch Sandstorm accounts](https://github.com/wekan/wekan/pulls/4500).
+  Thanks to mfilser.
+- [Added backup to meteor-upgrade branch Sandstorm Accounts](https://github.com/wekan/wekan/commit/f260b7ba889c39a2db4a5f3057439a9b78dd7cf1).
+  Thanks to xet7.
+- [Improvements to future WeKan Snap core20. Does not work yet. In Progress](https://github.com/wekan/wekan/commit/38d26fa7e32c705a0cad34c199e1190c5226b968).
+  Thanks to xet7.
+- [Updated MongoDB 5 rawCollection deprecated update to updateMany (or updateOne)](https://github.com/wekan/wekan/commit/a196a5ed63cba2b812b9e825172f3a97d9756daa).
+  Thanks to xet7.
+- [Added --trace-warnings to start-wekan.sh](https://github.com/wekan/wekan/commit/50ce0ce442d804bf1d9eacacba3b493761ca6773).
+  Thanks to xet7.
+- [Meteor-upgrade: Fix language auto-detection](https://github.com/wekan/wekan/commit/8f43b74bbca78fa03162985fc7b2192782549c1f).
+  Thanks to imajus.
+- [Meteor-upgrade: Fix broken useraccounts UI i18n](https://github.com/wekan/wekan/commit/566527dfad9b11d730c84f7b62bac9c4d60518bd).
+  Thanks to imajus.
+- [Meteor-upgrade: Rename isoCode to tag (cause they are IETF tags actually)](https://github.com/wekan/wekan/commit/c858e0b7965847587c5e16b775c4cd44cbefbee0).
+  Thanks to imajus.
+- [Meteor-upgrade: Add missing language names](https://github.com/wekan/wekan/commit/f40b0d495db12824e46a60d9676e94464cc9897a).
+  Thanks to imajus.
+- [Added 30 new languages, now about 105 total](https://github.com/wekan/wekan/commit/28317c7cf3fea7f1c7cf0860ccebb7322000d132).
+  Thanks to translators and xet7.
+- [Use MongoDB 5 at docker-compose.yml](https://github.com/wekan/wekan/commit/77d72ae20acf3c96d7e864bf0fd8a159f9456823).
+  Thanks to MongoDB.
+
+and fixes the following bugs:
+
+- [Fix Copy Board](https://github.com/wekan/wekan/pulls/4496).
+  Thanks to mfilser.
+- [Fix FileStoreStrategy, moveToStorage, wrong variable in error handling](https://github.com/wekan/wekan/commit/58d760a615834f989633efcd5e1577265219af19).
+  Thanks to mfilser.
+- [Multi-File Storage code was missing after merge](https://github.com/wekan/wekan/commit/3fad014e919be29fc85af754f89b708888d8a98e).
+  Thanks to mfilser.
+- Card Details dates in user language format.
+  [Part 1](https://github.com/wekan/wekan/commit/d1714abc6a13783600c68526c259967886dbe80d),
+  [Part 2](https://github.com/wekan/wekan/commit/2e5ec0308f2ac8059af6219693177e294197776a),
+  [Part 3](https://github.com/wekan/wekan/commit/441b3e9c0a50b21da2c875946ff1059a14ce04e4).
+  Thanks to mfilser.
+- [Converted Stylus to CSS. Removed Stylus. This change removed many error messages](https://github.com/wekan/wekan/commit/072778b9aaefd7fcaa7519b1ce1cafc1704d646d).
+  Thanks to xet7.
+
+Thanks to above GitHub users for their contributions and translators for their translations.
+
 # v6.22 2022-05-09 WeKan ® release
 
 - [Updated to Node.js v14.19.2](https://github.com/wekan/wekan/commit/bfef7844ba15a28bce63a577ed499ed899aaff79).

Dockerfile

@@ -16,7 +16,7 @@ ARG DEBIAN_FRONTEND=noninteractive
 
 ENV BUILD_DEPS="apt-utils libarchive-tools gnupg gosu wget curl bzip2 g++ build-essential git ca-certificates python3" \
     DEBUG=false \
-    NODE_VERSION=v14.19.2 \
+    NODE_VERSION=v14.19.3 \
     METEOR_RELEASE=1.10.2 \
     USE_EDGE=false \
     METEOR_EDGE=1.5-beta.17 \

Dockerfile.arm64v8

@@ -4,7 +4,7 @@ FROM amd64/alpine:3.7 AS builder
 ENV QEMU_VERSION=v4.2.0-6 \
     QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.19.2 \
+    NODE_VERSION=v14.19.3 \
     WEKAN_VERSION=latest  \
     WEKAN_ARCHITECTURE=arm64 \
     NODE_OPTIONS="--max_old_space_size=4096"
@@ -49,7 +49,7 @@ LABEL maintainer="wekan"
 # Set the environment variables (defaults where required)
 ENV QEMU_ARCHITECTURE=aarch64 \
     NODE_ARCHITECTURE=linux-arm64 \
-    NODE_VERSION=v14.19.2 \
+    NODE_VERSION=v14.19.3 \
     NODE_ENV=production \
     NPM_VERSION=latest \
     WITH_API=true \

Stackerfile.yml

@@ -1,5 +1,5 @@
 appId: wekan-public/apps/77b94f60-dec9-0136-304e-16ff53095928
-appVersion: "v6.22.0"
+appVersion: "v6.26.0"
 files:
   userUploads:
     - README.md

client/components/activities/activities.css

@@ -0,0 +1,101 @@
+.activity-title {
+  margin: 0 0.5em 0.8em;
+  display: flex;
+  justify-content: space-between;
+}
+.reactions-popup .add-comment-reaction {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 22px;
+  text-align: center;
+  line-height: 30px;
+  width: 40px;
+}
+.reactions-popup .add-comment-reaction:hover {
+  background-color: #b0c4de;
+}
+.activities {
+  clear: both;
+}
+.activities .activity {
+  margin: 0.5px 0;
+  padding: 6px 0;
+  display: flex;
+}
+.activities .activity .member {
+  width: 32px;
+  height: 32px;
+}
+.activities .activity .activity-member {
+  font-weight: 700;
+}
+.activities .activity .activity-desc {
+  word-wrap: break-word;
+  overflow: hidden;
+  flex: 1;
+  align-self: center;
+  margin: 0;
+  margin-left: 3px;
+  overflow: hidden;
+  word-break: break-word;
+}
+.activities .activity .activity-desc .activity-comment {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .reactions {
+  display: flex;
+  margin-top: 5px;
+  gap: 5px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  height: 24px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
+  font-size: 17px;
+  font-weight: 500;
+  margin-left: 2px;
+}
+.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
+  font-size: 8px;
+  margin-top: -7px;
+  margin-left: 1px;
+}
+.activities .activity .activity-desc .reactions .reaction {
+  cursor: pointer;
+  border: 1px solid #808080;
+  border-radius: 15px;
+  display: flex;
+  padding: 2px 5px;
+}
+.activities .activity .activity-desc .reactions .reaction.selected {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction:hover {
+  background-color: #b0c4de;
+}
+.activities .activity .activity-desc .reactions .reaction .reaction-count {
+  font-size: 12px;
+}
+.activities .activity .activity-desc .activity-checklist {
+  display: block;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}
+.activities .activity .activity-desc .activity-meta {
+  font-size: 0.8em;
+  color: #999;
+}

client/components/activities/activities.jade

@@ -42,7 +42,7 @@ template(name="addReactionPopup")
       span.add-comment-reaction(data-codepoint="#{codepoint}") !{codepoint}
 
 template(name="activity")
-  .activity
+  .activity(data-id=activity._id)
     +userAvatar(userId=activity.user._id)
     p.activity-desc
       span.activity-member
@@ -152,10 +152,10 @@ template(name="activity")
                 +editOrDeleteComment
 
         if($eq activity.activityType 'deleteComment')
-          | {{{_ 'activity-deleteComment' currentData.commentId}}}.
+          | {{{_ 'activity-deleteComment' activity.commentId}}}.
 
         if($eq activity.activityType 'editComment')
-          | {{{_ 'activity-editComment' currentData.commentId}}}.
+          | {{{_ 'activity-editComment' activity.commentId}}}.
       else
         //- if we are not in card mode we only display a summary of the comment
         if($eq activity.activityType 'addComment')

client/components/activities/activities.js

@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import { TAPi18n } from '/imports/i18n';
 
 const activitiesPerPage = 500;
 

client/components/activities/activities.styl

@@ -1,105 +0,0 @@
-@import 'nib'
-
-.activity-title
-  margin: 0 0.5em 0.8em
-  display: flex
-  justify-content:space-between
-
-.reactions-popup
-  .add-comment-reaction
-    display: inline-block
-    cursor: pointer
-    border-radius: 5px
-    font-size: 22px
-    text-align: center
-    line-height: 30px
-    width: 40px
-
-    &:hover {
-      background-color: #b0c4de
-    }
-
-.activities
-  clear: both
-
-  .activity
-    margin: 0.5px 0
-    padding: 6px 0;
-    display: flex
-
-    .member
-      width: 32px
-      height: @width
-
-    .activity-member
-      font-weight: 700
-
-    .activity-desc
-      word-wrap: break-word
-      overflow: hidden
-      flex: 1
-      align-self: center
-      margin: 0
-      margin-left: 3px
-      overflow: hidden;
-      word-break: break-word;
-
-      .activity-comment
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-
-      .reactions
-        display: flex
-        margin-top: 5px
-        gap: 5px
-
-        .open-comment-reaction-popup
-          display: flex
-          align-items: center
-          text-decoration: none
-          height: 24px;
-
-          i.fa.fa-smile-o
-            font-size: 17px
-            font-weight: 500
-            margin-left: 2px
-
-          i.fa.fa-plus
-            font-size: 8px;
-            margin-top: -7px;
-            margin-left: 1px;
-
-        .reaction
-          cursor: pointer
-          border: 1px solid grey
-          border-radius: 15px
-          display: flex
-          padding: 2px 5px
-
-          &.selected {
-            background-color: #b0c4de
-          }
-
-          &:hover {
-            background-color: #b0c4de
-          }
-
-          .reaction-count
-            font-size: 12px
-
-      .activity-checklist
-        display: block
-        border-radius: 3px
-        background: white
-        text-decoration: none
-        box-shadow: 0 1px 2px rgba(0,0,0,.2)
-        margin-top: 5px
-        padding: 5px
-      .activity-meta
-        font-size: 0.8em
-        color: darken(white, 40%)

client/components/activities/comments.css

@@ -0,0 +1,65 @@
+.new-comment {
+  position: relative;
+  margin: 0 0 20px 38px;
+}
+.new-comment .member {
+  opacity: 0.7;
+  position: absolute;
+  top: 1px;
+  left: -38px;
+}
+.new-comment.is-open .member {
+  opacity: 1;
+}
+.new-comment.is-open .helper {
+  display: inline-block;
+}
+.new-comment.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-comment .too-long {
+  margin-top: 8px;
+}
+.new-comment textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-comment textarea:hover,
+.new-comment textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-comment textarea:is-open {
+  cursor: auto;
+}
+.comment-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.comment-item:hover {
+  background: #e0e0e0;
+}
+.comment-item.add-comment {
+  display: flex;
+  margin: 5px;
+}
+.comment-item.add-comment a {
+  display: block;
+  margin: auto;
+}

client/components/activities/comments.styl

@@ -1,67 +0,0 @@
-@import 'nib'
-
-.new-comment
-  position: relative
-  margin: 0 0 20px 38px
-
-  .member
-    opacity: .7
-    position: absolute
-    top: 1px
-    left: -38px
-
-  &.is-open
-    .member
-      opacity: 1
-
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.comment-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-comment
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/boards/boardBody.css

@@ -0,0 +1,169 @@
+.board-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.board-wrapper .board-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transition: margin 0.1s;
+  overflow-y: auto;
+}
+.board-wrapper .board-canvas.is-sibling-sidebar-open {
+  margin-right: 248px;
+}
+.board-wrapper .board-canvas .board-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: -100px;
+  right: -400px;
+  background: #000;
+  opacity: 0.33;
+  animation: fadeIn 0.2s;
+  z-index: 16;
+}
+.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
+.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
+  display: none;
+}
+@media screen and (max-width: 800px) {
+  .board-wrapper .board-canvas .swimlane {
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0px 0px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+.calendar-event-green {
+  background: #3cb500 !important;
+  border-color: #2a8000;
+  color: #fff !important;
+}
+.calendar-event-yellow {
+  background: #fad900 !important;
+  border-color: #c7ac00;
+  color: #000 !important;
+}
+.calendar-event-orange {
+  background: #ff9f19 !important;
+  border-color: #cc7c14;
+  color: #000 !important;
+}
+.calendar-event-red {
+  background: #eb4646 !important;
+  border-color: #b83737;
+  color: #fff !important;
+}
+.calendar-event-purple {
+  background: #a632db !important;
+  border-color: #7d26a6;
+  color: #fff !important;
+}
+.calendar-event-blue {
+  background: #0079bf !important;
+  border-color: #005a8a;
+  color: #fff !important;
+}
+.calendar-event-pink {
+  background: #ff78cb !important;
+  border-color: #cc62a3;
+  color: #000 !important;
+}
+.calendar-event-sky {
+  background: #00c2e0 !important;
+  border-color: #0094ab;
+  color: #fff !important;
+}
+.calendar-event-black {
+  background: #4d4d4d !important;
+  border-color: #1a1a1a;
+  color: #fff !important;
+}
+.calendar-event-lime {
+  background: #51e898 !important;
+  border-color: #3eb375;
+  color: #000 !important;
+}
+.calendar-event-silver {
+  background: #c0c0c0 !important;
+  border-color: #8c8c8c;
+  color: #000 !important;
+}
+.calendar-event-peachpuff {
+  background: #ffdab9 !important;
+  border-color: #ccaf95;
+  color: #000 !important;
+}
+.calendar-event-crimson {
+  background: #dc143c !important;
+  border-color: #a8112f;
+  color: #fff !important;
+}
+.calendar-event-plum {
+  background: #dda0dd !important;
+  border-color: #a87ba8;
+  color: #000 !important;
+}
+.calendar-event-darkgreen {
+  background: #006400 !important;
+  border-color: #003000;
+  color: #fff !important;
+}
+.calendar-event-slateblue {
+  background: #6a5acd !important;
+  border-color: #4f4399;
+  color: #fff !important;
+}
+.calendar-event-magenta {
+  background: #f0f !important;
+  border-color: #c0c;
+  color: #fff !important;
+}
+.calendar-event-gold {
+  background: #ffd700 !important;
+  border-color: #ca0;
+  color: #000 !important;
+}
+.calendar-event-navy {
+  background: #000080 !important;
+  border-color: #003;
+  color: #fff !important;
+}
+.calendar-event-gray {
+  background: #808080 !important;
+  border-color: #333;
+  color: #fff !important;
+}
+.calendar-event-saddlebrown {
+  background: #8b4513 !important;
+  border-color: #572b0c;
+  color: #fff !important;
+}
+.calendar-event-paleturquoise {
+  background: #afeeee !important;
+  border-color: #8ababa;
+  color: #000 !important;
+}
+.calendar-event-mistyrose {
+  background: #ffe4e1 !important;
+  border-color: #ccb8b6;
+  color: #000 !important;
+}
+.calendar-event-indigo {
+  background: #4b0082 !important;
+  border-color: #2b004d;
+  color: #fff !important;
+}

client/components/boards/boardBody.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 const { calculateIndex } = Utils;
 const swimlaneWhileSortingHeight = 150;
@@ -267,9 +269,10 @@ BlazeComponent.extendComponent({
 
   openNewListForm() {
     if (this.isViewSwimlanes()) {
-      this.childComponents('swimlane')[0]
-        .childComponents('addListAndSwimlaneForm')[0]
-        .open();
+      // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902
+      // this.childComponents('swimlane')[0]
+      //   .childComponents('addListAndSwimlaneForm')[0]
+      //   .open();
     } else if (this.isViewLists()) {
       this.childComponents('listsGroup')[0]
         .childComponents('addListForm')[0]

client/components/boards/boardBody.styl

@@ -1,133 +0,0 @@
-@import 'nib'
-
-position()
-  if arguments[0] == cover || arguments[0] == fixed-cover
-    if arguments[0] == cover
-      position: absolute
-    else
-      position: fixed
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-  else
-    position: arguments
-
-.board-wrapper
-  position: cover
-  overflow-x: hidden
-  overflow-y: hidden
-
-  .board-canvas
-    position: cover
-    transition: margin .1s
-    overflow-y: auto
-
-    &.is-sibling-sidebar-open
-      margin-right: 248px
-
-    .board-overlay
-      position: fixed-cover
-      top: -100px
-      right: -400px
-      background: black
-      opacity: 0.33
-      animation: fadeIn 0.2s
-      z-index: 16
-
-    &.is-dragging-active
-      .open-minicard-composer,
-      .minicard-wrapper.is-checked
-        display: none
-
-@media screen and (max-width: 800px)
-  .board-wrapper
-
-    .board-canvas
-
-      .swimlane
-        border-bottom: 1px solid #CCC
-        display: flex
-        flex-direction: column
-        margin: 0
-        padding: 0 0px 0px 0
-        overflow-x: hidden
-        overflow-y: auto
-
-calendar-event-color(background, borderColor, color...)
-  background: background !important
-  border-color: borderColor
-  if color
-    color: color !important //overwrite text for better visibility
-
-.calendar-event-green
-  calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
-
-.calendar-event-yellow
-  calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
-
-.calendar-event-orange
-  calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
-
-.calendar-event-red
-  calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
-
-.calendar-event-purple
-  calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
-
-.calendar-event-blue
-  calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
-
-.calendar-event-pink
-  calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
-
-.calendar-event-sky
-  calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
-
-.calendar-event-black
-  calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
-
-.calendar-event-lime
-  calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
-
-.calendar-event-silver
-  calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
-
-.calendar-event-peachpuff
-  calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
-
-.calendar-event-crimson
-  calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
-
-.calendar-event-plum
-  calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
-
-.calendar-event-darkgreen
-  calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
-
-.calendar-event-slateblue
-  calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
-
-.calendar-event-magenta
-  calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
-
-.calendar-event-gold
-  calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
-
-.calendar-event-navy
-  calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
-
-.calendar-event-gray
-  calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
-
-.calendar-event-saddlebrown
-  calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
-
-.calendar-event-paleturquoise
-  calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
-
-.calendar-event-mistyrose
-  calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
-
-.calendar-event-indigo
-  calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility

client/components/boards/boardHeader.css

@@ -0,0 +1,23 @@
+.integration-form {
+  padding: 5px;
+  border-bottom: 1px solid #ccc;
+}
+.flex,
+.option {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.option {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+}

client/components/boards/boardHeader.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';

client/components/boards/boardHeader.styl

@@ -1,22 +0,0 @@
-.integration-form
-  padding: 5px
-  border-bottom: 1px solid #ccc
-
-.flex
-  display: -webkit-box
-  display: -moz-box
-  display: -webkit-flex
-  display: -moz-flex
-  display: -ms-flexbox
-  display: flex
-
-.option
-  @extends .flex
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background: #fff;
-  text-decoration: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-  margin-top: 5px;
-  padding: 5px;

client/components/boards/boardsList.css

@@ -0,0 +1,281 @@
+@import url("css/reset.css") print, screen;
+
+.board-list {
+  margin: 0 8px;
+}
+.board-list li {
+  float: left;
+  width: 20%;
+  box-sizing: border-box;
+  position: relative;
+}
+.board-list li.placeholder:after {
+  content: '';
+  display: block;
+  background: #ccc;
+  border-radius: 3px;
+  height: 106px;
+  margin: 8px;
+}
+.board-list li.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.board-list li.starred .fa-star,
+.board-list li.starred .fa-star-o {
+  opacity: 1;
+}
+.board-list .board-list-item {
+  overflow: hidden;
+  background-color: #999;
+  color: #f6f6f6;
+  min-height: 100px;
+  font-size: 16px;
+  line-height: 22px;
+  border-radius: 3px;
+  display: block;
+  font-weight: 700;
+  padding: 8px;
+  margin: 8px;
+  position: relative;
+  text-decoration: none;
+  word-wrap: break-word;
+}
+.board-list .board-list-item.template-container {
+  border: 4px solid #fff;
+}
+.board-list .board-list-item.tile {
+  background-size: auto;
+  background-repeat: repeat;
+}
+.board-list .board-list-item-sub-name {
+  color: rgba(255,255,255,0.5);
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.board-list .board-list-item-desc {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.board-list .js-add-board {
+  text-align: center;
+}
+.board-list .js-add-board .label {
+  font-weight: normal;
+  line-height: 56px;
+}
+.board-list .js-add-board :hover {
+  background-color: #939393;
+}
+.board-list .fa-star,
+.board-list .fa-star-o {
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-circle {
+  bottom: 0;
+  font-size: 10px;
+  height: 10px;
+  line-height: 10px;
+  padding: 9px 9px;
+  position: absolute;
+  right: 0;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .has-overtime-card-active {
+  color: #eb4646 !important;
+}
+.board-list .no-overtime-card-active {
+  color: #3cb500 !important;
+}
+.board-list .is-star-active {
+  color: #fff;
+}
+.board-list .fa-clone {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  right: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list .fa-archive {
+  position: absolute;
+  bottom: 0;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  opacity: 0;
+  left: 0;
+  padding: 9px 9px;
+  transition-duration: 0.15s;
+  transition-property: color, font-size, background;
+}
+.board-list li:hover a:hover .fa-star,
+.board-list li:hover a:hover .fa-clone,
+.board-list li:hover a:hover .fa-archive,
+.board-list li:hover a:hover .fa-star-o {
+  color: #fff;
+}
+.board-list li:hover a .fa-star,
+.board-list li:hover a .fa-clone,
+.board-list li:hover a .fa-archive,
+.board-list li:hover a .fa-star-o {
+  color: #fff;
+  opacity: 0.75;
+}
+.board-list li:hover a .fa-star:hover,
+.board-list li:hover a .fa-clone:hover,
+.board-list li:hover a .fa-archive:hover,
+.board-list li:hover a .fa-star-o:hover {
+  font-size: 18px;
+  opacity: 1;
+}
+.board-list li:hover a .fa-star.is-star-active,
+.board-list li:hover a .fa-clone.is-star-active,
+.board-list li:hover a .fa-archive.is-star-active,
+.board-list li:hover a .fa-star-o.is-star-active {
+  opacity: 1;
+}
+.board-backgrounds-list .board-background-select {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 50%;
+  padding-top: 12px;
+  position: relative;
+  z-index: 1;
+}
+.board-backgrounds-list .board-background-select:nth-child(-n + 2) {
+  padding-top: 0;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n) {
+  padding-left: 6px;
+}
+.board-backgrounds-list .board-background-select:nth-child(2n+1) {
+  padding-right: 6px;
+}
+.board-backgrounds-list .board-background-select .background-box {
+  color: #fff;
+  border-radius: 3px;
+  background-size: cover;
+  display: block;
+  height: 74px;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-backgrounds-list .board-background-select .background-box i.fa-check {
+  font-size: 25px;
+  color: #fff;
+}
+@media screen and (max-width: 800px) {
+  .board-list {
+    height: 100%;
+    overflow: scroll;
+  }
+  .board-list li {
+    width: 50%;
+  }
+  .board-list .board-list-item {
+    overflow: hidden;
+    height: 8rem;
+  }
+  .board-list .board-list-item-sub-name {
+    position: relative;
+    top: -100px;
+    left: -100px;
+  }
+  .board-list .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 360px) {
+  li {
+    width: 100%;
+  }
+  .board-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+}
+.AllBoardTeamsOrgs {
+  list-style-type: none;
+  overflow: hidden;
+}
+.AllBoardTeams,
+.AllBoardOrgs,
+.AllBoardBtns {
+  float: left;
+}
+.js-AllBoardOrgs {
+  margin-left: 16px;
+}
+.AllBoardTeams {
+  margin-left: 16px;
+}
+.AllBoardButtonsContainer {
+  margin: 16px;
+}
+#filterBtn,
+#resetBtn {
+  display: inline;
+}
+.js-board {
+  display: block;
+}
+.minicard-members {
+  padding: 6px 0 6px 8px;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  display: inline-block;
+}
+.minicard-lists {
+  margin: 0 auto;
+  max-width: 95%;
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap .item {
+  margin: 2px;
+  padding-right: 6px;
+  text-align: center;
+}

client/components/boards/boardsList.jade

@@ -13,7 +13,7 @@ template(name="boardList")
           select.js-AllBoardOrgs#jsAllBoardOrgs("multiple")
             option(value="-1") {{_ 'organizations'}} :
             each orgsDatas
-              option(value="{{orgId}}") {{_ orgDisplayName}}
+              option(value="{{orgId}}") {{orgDisplayName}}
 
       //li.AllBoardTemplates
       //  if userHasTemplates

client/components/boards/boardsList.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 const subManager = new SubsManager();
 
 Template.boardListHeaderBar.events({
@@ -33,7 +35,6 @@ BlazeComponent.extendComponent({
     }
     if (userLanguage) {
       TAPi18n.setLanguage(userLanguage);
-      T9n.setLanguage(userLanguage);
     }
   },
 
@@ -259,7 +260,7 @@ BlazeComponent.extendComponent({
             },
             (err, res) => {
               if (err) {
-                self.setError(err.error);
+                console.error(err);
               } else {
                 Session.set('fromBoard', null);
                 subManager.subscribe('board', res, false);
@@ -267,7 +268,6 @@ BlazeComponent.extendComponent({
                   id: res,
                   slug: title,
                 });
-                //Utils.goBoardId(res);
               }
             },
           );

client/components/boards/boardsList.styl

@@ -1,276 +0,0 @@
-@import 'nib'
-
-$spaceBetweenTiles = 16px
-
-.board-list
-  margin: 0 ($spaceBetweenTiles/2)
-
-  li
-    float: left
-    width: 20%
-    box-sizing: border-box
-    position: relative
-
-    &.placeholder:after
-      content: '';
-      display: block;
-      background: darken(white, 20%)
-      border-radius: 3px;
-      height: 106px;
-      margin: 8px;
-
-    &.ui-sortable-helper
-      cursor: grabbing
-      transform: rotate(4deg)
-      display: block !important
-
-    &.starred
-      .fa-star,
-      .fa-star-o
-        opacity: 1
-
-  .board-list-item
-    overflow: hidden;
-    background-color: #999
-    color: #f6f6f6
-    min-height: 100px
-    font-size: 16px
-    line-height: 22px
-    border-radius: 3px
-    display: block
-    font-weight: 700
-    padding: 8px
-    margin: ($spaceBetweenTiles/2)
-    position: relative
-    text-decoration: none
-    word-wrap: break-word
-
-    &.template-container
-      border: 4px solid #fff
-
-    &.tile
-      background-size: auto
-      background-repeat: repeat
-
-  .board-list-item-sub-name
-    color: rgba(255, 255, 255, .5)
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 22px
-
-  .board-list-item-desc
-    color: #fff
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 18px
-
-  .js-add-board
-    text-align:center
-
-    .label
-      font-weight: normal
-      line-height: 56px
-
-    :hover
-      background-color:#939393
-
-  .fa-star,
-  .fa-star-o
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    padding: 9px 9px
-    position: absolute
-    right: 0
-    top: 0
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-circle
-    bottom: 0;
-    font-size: 10px;
-    height: 10px;
-    line-height: 10px;
-    padding: 9px 9px;
-    position: absolute;
-    right: 0;
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .has-overtime-card-active
-    color: #eb4646 !important
-
-  .no-overtime-card-active
-    color: #3cb500 !important
-
-  .is-star-active
-    color: white
-
-  .fa-clone
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    right: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .fa-archive
-    position: absolute;
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    left: 0
-    padding: 9px 9px
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  li:hover a
-    &:hover
-      .fa-star,
-      .fa-clone,
-      .fa-archive,
-      .fa-star-o
-        color: white
-
-    .fa-star,
-    .fa-clone,
-    .fa-archive,
-    .fa-star-o
-      color: white
-      opacity: .75
-
-      &:hover
-        font-size: 18px
-        opacity: 1
-
-      &.is-star-active
-        opacity: 1
-
-.board-backgrounds-list
-
-  .board-background-select
-    box-sizing: border-box
-    display: block
-    float: left
-    width: 50%
-    padding-top: 12px
-    position: relative
-    z-index: 1
-
-    &:nth-child(-n + 2)
-      padding-top: 0
-
-    &:nth-child(2n)
-      padding-left: 6px
-
-    &:nth-child(2n+1)
-      padding-right: 6px
-
-    .background-box
-      color: white
-      border-radius: 3px
-      background-size: cover
-      display: block
-      height: 74px
-      position: relative
-      width: 100%
-      cursor: pointer
-      display: flex
-      align-items: center
-      justify-content: center
-
-      i.fa-check
-        font-size: 25px
-        color: white
-
-@media screen and (max-width: 800px)
-  .board-list
-    height: 100%
-    overflow: scroll
-
-    li
-      width: 50%
-
-    .board-list-item
-      overflow: hidden
-      height: 8rem
-
-    .board-list-item-sub-name
-      position: relative
-      top: -100px
-      left: -100px
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-@media screen and (max-width: 360px)
-    li
-      width: 100%
-
-    .board-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-.AllBoardTeamsOrgs
-  list-style-type: none;
-  overflow: hidden;
-
-.AllBoardTeams,.AllBoardOrgs,.AllBoardBtns
-  float: left;
-
-.js-AllBoardOrgs
-  margin-left: 16px;
-
-.AllBoardTeams
-  margin-left : 16px;
-
-.AllBoardButtonsContainer
-  margin: 16px;
-
-#filterBtn,#resetBtn
-  display: inline;
-
-.js-board
-  display: block;
-
-.minicard-members
-  padding: 6px 0 6px 8px
-  width: 100%
-  margin-bottom: 2px
-  margin-left: -4px
-  display: inline-block
-
-.minicard-lists
-  margin: 0 auto
-  max-width: 95%
-  height: 100%
-
-.flex
-  display: flex
-
-.flex-wrap
-  flex-wrap: wrap
-
-  .item
-    margin: 2px;
-    padding-right: 6px
-    text-align: center

client/components/cards/attachments.css

@@ -0,0 +1,81 @@
+.attachments-galery {
+  display: flex;
+  flex-wrap: wrap;
+}
+.attachments-galery .attachment-item {
+  width: 31.33%;
+  margin: 10px 1% 0;
+  text-align: center;
+  border-radius: 3px;
+  overflow: auto;
+  background: #ededed;
+  min-height: 120px;
+}
+.attachments-galery .attachment-item:hover {
+  background: #e0e0e0;
+}
+.attachments-galery .attachment-item.add-attachment {
+  display: flex;
+  align-items: center;
+}
+.attachments-galery .attachment-item.add-attachment a {
+  display: block;
+  margin: auto;
+}
+.attachments-galery .attachment-item .attachment-thumbnail {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
+  max-height: 100%;
+  max-width: 100%;
+}
+.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
+  text-transform: uppercase;
+  font-size: 1.6em;
+}
+.attachments-galery .attachment-item .attachment-details {
+  font-size: 0.75em;
+  margin: 3px;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
+  display: block;
+}
+.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
+  padding-top: 10px;
+}
+.attachment-image-preview {
+  max-width: 100px;
+  display: block;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.preview-clipboard-image {
+  width: 280px;
+  max-width: 100%;
+  height: 200px;
+  display: block;
+  border: 1px solid #000;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+@media screen and (max-width: 800px) {
+  .attachments-galery .attachment-item {
+    width: 48%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 130px;
+  }
+  .attachments-galery .attachment-item .attachment-details {
+    font-size: 1.1em;
+  }
+}
+@media screen and (max-width: 360px) {
+  .attachments-galery .attachment-item {
+    width: 100%;
+  }
+  .attachments-galery .attachment-item .attachment-thumbnail {
+    height: 200px;
+  }
+}

client/components/cards/attachments.jade

@@ -19,7 +19,7 @@ template(name="attachmentsGalery")
   .attachments-galery
     each attachments
       .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{link}}" title="{{name}}")
+        a.attachment-thumbnail(href="{{link}}" title="{{name}}" data-lightbox="{{name}}")
           if link
             if isImage
               img.attachment-thumbnail-img(src="{{link}}")
@@ -69,6 +69,9 @@ template(name="attachmentActionsPopup")
           else
             | {{_ 'add-cover'}}
       if currentUser.isBoardAdmin
+        a.js-rename
+          i.fa.fa-pencil-square-o
+          | {{_ 'rename'}}
         a.js-confirm-delete
           i.fa.fa-close
           | {{_ 'delete'}}
@@ -85,3 +88,8 @@ template(name="attachmentActionsPopup")
             a.js-move-storage-gridfs
               i.fa.fa-arrow-right
               | {{_ 'attachment-move-storage-gridfs'}}
+
+template(name="attachmentRenamePopup")
+  input.js-edit-attachment-name(type='text' autofocus value="{{getNameWithoutExtension}}" dir="auto")
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-attachment-name(type="submit") {{_ 'save'}}

client/components/cards/attachments.js

@@ -134,6 +134,7 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
+        'click .js-rename': Popup.open('attachmentRename'),
         'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
           Attachments.remove(this._id);
           Popup.back(2);
@@ -158,3 +159,31 @@ BlazeComponent.extendComponent({
     ]
   }
 }).register('attachmentActionsPopup');
+
+BlazeComponent.extendComponent({
+  getNameWithoutExtension() {
+    const ret = this.data().name.replace(new RegExp("\." + this.data().extension + "$"), "");
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'keydown input.js-edit-attachment-name'(evt) {
+          // enter = save
+          if (evt.keyCode === 13) {
+            this.find('button[type=submit]').click();
+          }
+        },
+        'click button.js-submit-edit-attachment-name'(event) {
+          // save button pressed
+          event.preventDefault();
+          const name = this.$('.js-edit-attachment-name')[0]
+            .value
+            .trim() + this.data().extensionWithDot;
+          Meteor.call('renameAttachment', this.data()._id, name);
+          Popup.back(2);
+        },
+      }
+    ]
+  }
+}).register('attachmentRenamePopup');

client/components/cards/attachments.styl

@@ -1,83 +0,0 @@
-@import 'nib'
-
-.attachments-galery
-  display: flex
-  flex-wrap: wrap
-
-  .attachment-item
-    width: 33.33% - 2%
-    margin: 10px 1% 0
-    text-align: center
-    border-radius: 3px
-    overflow: auto
-    background: darken(white, 7%)
-    min-height: 120px
-
-    &:hover
-      background: darken(white, 12%)
-
-    &.add-attachment
-      display: flex
-      align-items: center
-
-      a
-        display: block
-        margin: auto
-
-    .attachment-thumbnail
-      height: 80px
-      display: flex
-      align-items: center
-      justify-content: center
-      position: relative
-
-      .attachment-thumbnail-img
-        max-height: 100%
-        max-width: 100%
-
-      .attachment-thumbnail-ext
-        text-transform: uppercase
-        font-size: 1.6em
-
-    .attachment-details
-      font-size: 0.75em
-      margin: 3px
-
-      .attachment-details-actions a
-        display: block
-
-        &.attachment-details-menu
-          padding-top: 10px
-
-.attachment-image-preview
-  max-width: 100px
-  display: block
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.preview-clipboard-image
-  width: 280px
-  max-width: 100%;
-  height: 200px
-  display: block
-  border: 1px solid black
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@media screen and (max-width: 800px)
-  .attachments-galery
-    flex-direction
-      row
-    .attachment-item
-      width: 50% - 2%
-
-      .attachment-thumbnail
-        height: 130px
-      .attachment-details
-        font-size: 1.1em
-
-@media screen and (max-width: 360px)
-  .attachments-galery
-    .attachment-item
-      width: 100%
-
-      .attachment-thumbnail
-        height: 200px

client/components/cards/cardCustomFields.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
 

client/components/cards/cardDate.css

@@ -0,0 +1,67 @@
+.card-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  background-color: #dbdbdb;
+}
+.card-date:hover,
+.card-date.is-active {
+  background-color: #b3b3b3;
+}
+.card-date.current,
+.card-date.almost-due,
+.card-date.due,
+.card-date.long-overdue {
+  color: #fff;
+}
+.card-date.current {
+  background-color: #5ba639;
+}
+.card-date.current:hover,
+.card-date.current.is-active {
+  background-color: #46802c;
+}
+.card-date.almost-due {
+  background-color: #edc909;
+}
+.card-date.almost-due:hover,
+.card-date.almost-due.is-active {
+  background-color: #bc9f07;
+}
+.card-date.due {
+  background-color: #fa3f00;
+}
+.card-date.due:hover,
+.card-date.due.is-active {
+  background-color: #c73200;
+}
+.card-date.long-overdue {
+  background-color: #fd5d47;
+}
+.card-date.long-overdue:hover,
+.card-date.long-overdue.is-active {
+  background-color: #fd3e24;
+}
+.card-date.end-date time::before {
+  content: "\f253";
+}
+.card-date.due-date time::before {
+  content: "\f090";
+}
+.card-date.start-date time::before {
+  content: "\f251";
+}
+.card-date.received-date time::before {
+  content: "\f08b";
+}
+.card-date time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  margin-right: 0.3em;
+}
+.customfield-date {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+}

client/components/cards/cardDate.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 
 Template.dateBadge.helpers({
@@ -317,31 +319,31 @@ CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
   showDate() {
-    return this.date.get().format('l');
+    return this.date.get().format('L');
   }
 }.register('minicardCustomFieldDate'));
 
@@ -358,7 +360,7 @@ class VoteEndDate extends CardDate {
     return classes;
   }
   showDate() {
-    return this.date.get().format('l LT');
+    return this.date.get().format('L LT');
   }
   showTitle() {
     return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;

client/components/cards/cardDate.styl

@@ -1,63 +0,0 @@
-.card-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  &.current, &.almost-due, &.due, &.long-overdue
-    color: #fff
-
-  &.current
-    background-color: #5ba639
-    &:hover, &.is-active
-      background-color: darken(#5ba639, 10)
-
-  &.almost-due
-    background-color: #edc909
-    &:hover, &.is-active
-      background-color: darken(#edc909, 10)
-
-  &.due
-    background-color: #fa3f00
-    &:hover, &.is-active
-      background-color: darken(#fa3f00, 10)
-
-  &.long-overdue
-    background-color: #fd5d47
-    &:hover, &.is-active
-      background-color: darken(#fd5d47, 7)
-
-  &.end-date
-    time
-      &::before
-        content: "\f253"  // symbol: fa-hourglass-end
-
-  &.due-date
-    time
-      &::before
-        content: "\f090"  // symbol: fa-sign-in
-
-  &.start-date
-    time
-      &::before
-        content: "\f251"  // symbol: fa-hourglass-start
-
-  &.received-date
-    time
-      &::before
-        content: "\f08b"  // symbol: fa-sign-out
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      margin-right: 0.3em
-
-.customfield-date
-  display: block
-  border-radius: 4px
-  padding: 1px 3px

client/components/cards/cardDescription.css

@@ -0,0 +1,56 @@
+.new-description {
+  position: relative;
+  margin: 0 0 20px 0;
+}
+.new-description.is-open .helper {
+  display: inline-block;
+}
+.new-description.is-open textarea {
+  min-height: 100px;
+  color: #4d4d4d;
+  cursor: auto;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+.new-description .too-long {
+  margin-top: 8px;
+}
+.new-description textarea {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  padding: 9px 11px;
+  width: 100%;
+}
+.new-description textarea:hover,
+.new-description textarea:is-open {
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.33);
+  border: 0;
+  cursor: pointer;
+}
+.new-description textarea:is-open {
+  cursor: auto;
+}
+.description-item {
+  background-color: #fff;
+  border: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.23);
+  color: #8c8c8c;
+  height: 36px;
+  margin: 4px 4px 6px 0;
+  width: 92%;
+}
+.description-item:hover {
+  background: #e0e0e0;
+}
+.description-item.add-description {
+  display: flex;
+  margin: 5px;
+}
+.description-item.add-description a {
+  display: block;
+  margin: auto;
+}

client/components/cards/cardDescription.styl

@@ -1,59 +0,0 @@
-@import 'nib'
-
-.new-description
-  position: relative
-  margin: 0 0 20px 0
-
-
-  &.is-open
-    .helper
-      display: inline-block
-
-    textarea
-      min-height: 100px
-      color: #4d4d4d
-      cursor: auto
-      overflow: hidden
-      word-wrap: break-word
-
-  .too-long
-    margin-top: 8px
-
-  textarea
-    background-color: #fff
-    border: 0
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-    height: 36px
-    margin: 4px 4px 6px 0
-    padding: 9px 11px
-    width: 100%
-
-    &:hover,
-    &:is-open
-      background-color: #fff
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
-      border: 0
-      cursor: pointer
-
-    &:is-open
-      cursor: auto
-
-.description-item
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  width: 92%
-
-  &:hover
-    background: darken(white, 12%)
-
-  &.add-description
-    display: flex
-    margin: 5px
-
-    a
-      display: block
-      margin: auto

client/components/cards/cardDetails.css

@@ -0,0 +1,588 @@
+.assignee {
+  border-radius: 3px;
+  display: block;
+  position: relative;
+  float: left;
+  height: 30px;
+  width: 30px;
+  margin: 0 4px 4px 0;
+  cursor: pointer;
+  user-select: none;
+  z-index: 1;
+  text-decoration: none;
+  border-radius: 50%;
+}
+.assignee .avatar {
+  overflow: hidden;
+  border-radius: 50%;
+}
+.assignee .avatar.avatar-assignee-initials {
+  height: 70%;
+  width: 70%;
+  padding: 15%;
+  background-color: #dbdbdb;
+  color: #444;
+  position: absolute;
+}
+.assignee .avatar.avatar-image {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+.assignee .assignee-presence-status {
+  background-color: #b3b3b3;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  height: 7px;
+  width: 7px;
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border: 1px solid #fff;
+  z-index: 15;
+}
+.assignee .assignee-presence-status.active {
+  background: #64c464;
+  border-color: #daf1da;
+}
+.assignee .assignee-presence-status.idle {
+  background: #e4e467;
+  border-color: #f7f7d4;
+}
+.assignee .assignee-presence-status.disconnected {
+  background: #bdbdbd;
+  border-color: #ededed;
+}
+.assignee .assignee-presence-status.pending {
+  background: #e44242;
+  border-color: #f1dada;
+}
+.assignee.add-assignee {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+}
+.assignee.add-assignee:hover,
+.assignee.add-assignee.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.copied-tooltip {
+  display: none;
+  padding: 0px 10px;
+  background-color: rgba(0,0,0,0.875);
+  color: #fff;
+  border-radius: 5px;
+}
+.card-details {
+  padding: 0;
+  flex-shrink: 0;
+  flex-basis: 600px;
+  will-change: flex-basis;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: #f7f7f7;
+  border-radius: bottom 3px;
+  z-index: 20;
+  animation: flexGrowIn 0.1s;
+  box-shadow: 0 0 7px 0 #b3b3b3;
+  transition: flex-basis 0.1s;
+  box-sizing: border-box;
+}
+.card-details .mCustomScrollBox {
+  padding-left: 0;
+}
+.card-details .card-details-canvas {
+  width: auto;
+  padding: 0 20px;
+}
+.card-details .card-details-header {
+  margin: 0 -20px 5px;
+  padding: 7px 20px;
+  background: #ededed;
+  border-bottom: 1px solid #dbdbdb;
+  position: sticky;
+  top: 0px;
+  z-index: 500;
+}
+.card-details .card-details-header .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details,
+.card-details .card-details-header .card-details-menu,
+.card-details .card-details-header .card-copy-button,
+.card-details .card-details-header .card-copy-mobile-button,
+.card-details .card-details-header .close-card-details-mobile-web,
+.card-details .card-details-header .card-details-menu-mobile-web,
+.card-details .card-details-header .copied-tooltip {
+  float: right;
+}
+.card-details .card-details-header .close-card-details,
+.card-details .card-details-header .maximize-card-details,
+.card-details .card-details-header .minimize-card-details {
+  font-size: 24px;
+  padding: 5px 10px 5px 10px;
+  margin-right: -8px;
+}
+.card-details .card-details-header .close-card-details-mobile-web {
+  font-size: 24px;
+  padding: 5px;
+  margin-right: 40px;
+}
+.card-details .card-details-header .card-copy-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-copy-mobile-button {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 10px;
+}
+.card-details .card-details-header .card-details-menu {
+  font-size: 17px;
+  padding: 10px;
+}
+.card-details .card-details-header .card-details-menu-mobile-web {
+  font-size: 17px;
+  padding: 10px;
+  margin-right: 30px;
+}
+.card-details .card-details-header .card-details-watch {
+  font-size: 17px;
+  padding-left: 7px;
+  color: #a6a6a6;
+}
+.card-details .card-details-header .card-details-title {
+  font-weight: bold;
+  font-size: 1.33em;
+  margin: 7px 0 0;
+  padding: 0;
+}
+.card-details .card-details-header .linked-card-location {
+  font-style: italic;
+  font-size: 1em;
+  margin-bottom: 0;
+}
+.card-details .card-details-header .linked-card-location p {
+  margin-bottom: 0;
+}
+.card-details .card-details-header form.inlined-form {
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+.card-details .card-details-header form.inlined-form .copied-tooltip {
+  padding: 0px 10px;
+}
+.card-details .card-details-header .card-details-list {
+  font-size: 0.85em;
+  margin-bottom: 3px;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title {
+  font-weight: bold;
+}
+.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
+  display: inline-block;
+  background: #e6e6e6;
+  border-radius: 3px;
+  padding: 0px 5px;
+}
+.card-details .card-details-header .copied-tooltip {
+  margin-right: 10px;
+  padding: 10px;
+}
+.card-details .card-description textarea {
+  min-height: 100px;
+}
+.card-details .card-details-items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+}
+.card-details .card-details-items .card-details-item {
+  margin-right: 0.5em;
+  flex-grow: 1;
+}
+.card-details .card-details-items .card-details-item:last-child {
+  margin-right: 0;
+}
+.card-details .card-details-items .card-details-item.card-details-item-labels {
+  display: block;
+  word-wrap: break-word;
+  max-width: 95%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-members,
+.card-details .card-details-items .card-details-item.card-details-item-assignees,
+.card-details .card-details-items .card-details-item.card-details-item-customfield,
+.card-details .card-details-items .card-details-item.card-details-item-name {
+  display: block;
+  word-wrap: break-word;
+  max-width: 36%;
+}
+.card-details .card-details-items .card-details-item.card-details-item-creator,
+.card-details .card-details-items .card-details-item.card-details-item-received,
+.card-details .card-details-items .card-details-item.card-details-item-start,
+.card-details .card-details-items .card-details-item.card-details-item-due,
+.card-details .card-details-items .card-details-item.card-details-item-end {
+  display: block;
+  word-wrap: break-word;
+  max-width: 28%;
+}
+.card-details .card-details-items .card-details-item.custom-fields {
+  padding-left: 10px;
+}
+.card-details .card-details-item-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #4d4d4d;
+}
+.card-details .activities {
+  padding-top: 10px;
+}
+@media screen and (min-width: 801px) {
+  .card-details-maximized {
+    padding: 0;
+    flex-shrink: 0;
+    flex-basis: calc(100% - 20px);
+    will-change: flex-basis;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    background: #f7f7f7;
+    border-radius: bottom 3px;
+    z-index: 100;
+    animation: flexGrowIn 0.1s;
+    box-shadow: 0 0 7px 0 #b3b3b3;
+    transition: flex-basis 0.1s;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
+    float: left;
+  }
+  .card-details-maximized .card-details-left {
+    float: left;
+    top: 60px;
+    left: 20px;
+    width: 47%;
+    border-right: solid 2px #dbdbdb;
+    padding-right: 10px;
+  }
+  .card-details-maximized .card-details-right {
+    position: absolute;
+    float: right;
+    left: 50%;
+    margin: 15px 0;
+  }
+  .card-details-maximized .card-details-header {
+    width: 100%;
+  }
+}
+input[type="text"].attachment-add-link-input {
+  float: left;
+  margin: 0 0 8px;
+  width: 80%;
+}
+input[type="submit"].attachment-add-link-submit {
+  float: left;
+  margin: 0 0 8px 4px;
+  padding: 6px 12px;
+  width: 18%;
+}
+@media screen and (max-width: 800px) {
+  .card-details {
+    width: calc(100% - 1px);
+    padding: 0px 20px 0px 20px;
+    margin: 0px;
+    transition: none;
+    overflow-y: revert;
+    overflow-x: revert;
+  }
+  .card-details .card-details-canvas {
+    width: 100%;
+    padding-left: 0px;
+  }
+  .card-details .card-details-header .close-card-details {
+    margin-right: 0px;
+  }
+  .card-details .card-details-header .card-details-menu {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .maximize-card-details {
+    margin-right: 40px;
+  }
+  .card-details .card-details-header .minimize-card-details {
+    margin-right: 40px;
+  }
+  .card-details-popup {
+    padding: 0px 10px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 {
+    width: 100%;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content {
+    width: calc(100% - 10px);
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
+    margin: 15px 0px;
+  }
+  .pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
+    margin: 0;
+  }
+}
+.card-details-white {
+  background: unset !important;
+  color: #000 !important;
+  border: 1px solid #eee;
+}
+.card-details-green {
+  background: #3cb500 !important;
+  color: #fff !important;
+}
+.card-details-yellow {
+  background: #fad900 !important;
+  color: #000 !important;
+}
+.card-details-orange {
+  background: #ff9f19 !important;
+  color: #000 !important;
+}
+.card-details-red {
+  background: #eb4646 !important;
+  color: #fff !important;
+}
+.card-details-purple {
+  background: #a632db !important;
+  color: #fff !important;
+}
+.card-details-blue {
+  background: #0079bf !important;
+  color: #fff !important;
+}
+.card-details-pink {
+  background: #ff78cb !important;
+  color: #000 !important;
+}
+.card-details-sky {
+  background: #00c2e0 !important;
+  color: #fff !important;
+}
+.card-details-black {
+  background: #4d4d4d !important;
+  color: #fff !important;
+}
+.card-details-lime {
+  background: #51e898 !important;
+  color: #000 !important;
+}
+.card-details-silver {
+  background: #c0c0c0 !important;
+  color: #000 !important;
+}
+.card-details-peachpuff {
+  background: #ffdab9 !important;
+  color: #000 !important;
+}
+.card-details-crimson {
+  background: #dc143c !important;
+  color: #fff !important;
+}
+.card-details-plum {
+  background: #dda0dd !important;
+  color: #000 !important;
+}
+.card-details-darkgreen {
+  background: #006400 !important;
+  color: #fff !important;
+}
+.card-details-slateblue {
+  background: #6a5acd !important;
+  color: #fff !important;
+}
+.card-details-magenta {
+  background: #f0f !important;
+  color: #fff !important;
+}
+.card-details-gold {
+  background: #ffd700 !important;
+  color: #000 !important;
+}
+.card-details-navy {
+  background: #000080 !important;
+  color: #fff !important;
+}
+.card-details-gray {
+  background: #808080 !important;
+  color: #fff !important;
+}
+.card-details-saddlebrown {
+  background: #8b4513 !important;
+  color: #fff !important;
+}
+.card-details-paleturquoise {
+  background: #afeeee !important;
+  color: #000 !important;
+}
+.card-details-mistyrose {
+  background: #ffe4e1 !important;
+  color: #000 !important;
+}
+.card-details-indigo {
+  background: #4b0082 !important;
+  color: #fff !important;
+}
+.voted {
+  opacity: 0.7;
+}
+.vote-title {
+  display: flex;
+  justify-content: space-between;
+}
+.vote-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.vote-result {
+  display: flex;
+}
+.js-show-positive-votes {
+  cursor: pointer;
+}
+.poker-voted {
+  opacity: 0.7;
+}
+.poker-title {
+  display: flex;
+  justify-content: space-between;
+}
+.poker-title .js-edit-date {
+  align-self: baseline;
+  margin-left: 5px;
+}
+.poker-result {
+  display: flex;
+  flex-flow: row wrap;
+}
+.js-show-positive-poker-votes {
+  cursor: pointer;
+}
+.poker-deck {
+  display: grid;
+  flex-direction: column;
+  text-align: center;
+}
+.poker-card-result {
+  width: 32px;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 4px 2px 4px 2px;
+  cursor: default;
+}
+.winner {
+  font-weight: bold;
+  outline: #2d2d2d solid 2px;
+}
+.loser {
+  opacity: 0.5;
+}
+.responsive-table {
+  overflow-x: auto;
+}
+.poker-table {
+  display: table;
+  width: 100%;
+  padding-top: 10px;
+}
+.poker-table-row {
+  display: table-row;
+}
+.poker-table-heading {
+  background-color: #eee;
+  display: table-header-group;
+}
+.poker-table-cell {
+  display: table-cell;
+  padding: 0 0 5px 2px;
+  border-bottom: 1px solid #d2d0d0;
+  text-align: center;
+  min-width: 45px;
+}
+.poker-table-cell-who {
+  width: 150px;
+  vertical-align: middle;
+}
+.poker-table-heading-left,
+.poker-table-heading-right {
+  display: table-header-group;
+  font-weight: bold;
+  border-top: 1px solid #808080;
+}
+@media (max-width: 400px) {
+  .poker-table-heading-right {
+    display: none;
+  }
+}
+.poker-table-body {
+  display: table-row-group;
+}
+.poker-table-side-left,
+.poker-table-side-right {
+  display: inline-block;
+}
+.poker-table-side-right {
+  padding-left: 10px;
+}
+@media (max-width: 400px) {
+  .poker-table-side-right {
+    padding-left: 0px;
+  }
+}
+.estimation-add {
+  display: block;
+  overflow: auto;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.estimation-add input {
+  display: inline-block;
+  float: right;
+  margin: auto;
+  margin-right: 10px;
+  width: 100px;
+}
+.estimation-add button {
+  display: inline-block;
+  float: right;
+  margin: auto;
+}
+.poker-card {
+  width: 48px;
+  height: 72px;
+  float: left;
+  background: #fff;
+  border-radius: 5px;
+  display: table;
+  box-sizing: border-box;
+  padding: 5px;
+  margin: 3px;
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: #2d2d2d 1px 1px 0;
+  box-shadow: 0 0 5px #aaa;
+  text-align: center;
+  position: relative;
+  cursor: pointer;
+}
+.poker-card .inner {
+  display: table-cell;
+  vertical-align: middle;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #cecece;
+}

client/components/cards/cardDetails.js

@@ -1,3 +1,5 @@
+import moment from 'moment/min/moment-with-locales';
+import { TAPi18n } from '/imports/i18n';
 import { DatePicker } from '/client/lib/datepicker';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
@@ -7,7 +9,6 @@ import Users from '/models/users';
 import Lists from '/models/lists';
 import CardComments from '/models/cardComments';
 import { ALLOWED_COLORS } from '/config/const';
-import moment from 'moment';
 import { UserAvatar } from '../users/userAvatar';
 
 const subManager = new SubsManager();
@@ -1795,6 +1796,7 @@ Template.cardAssigneePopup.helpers({
     return user && user.isBoardAdmin() ? 'admin' : 'normal';
   },
 
+/*
   presenceStatusClassName() {
     const user = Users.findOne(this.userId);
     const userPresence = presences.findOne({ userId: this.userId });
@@ -1804,7 +1806,7 @@ Template.cardAssigneePopup.helpers({
       return 'active';
     else return 'idle';
   },
-
+*/
   isCardAssignee() {
     const card = Template.parentData();
     const cardAssignees = card.getAssignees();

client/components/cards/cardDetails.styl

@@ -1,564 +0,0 @@
-@import 'nib'
-
-// Assignee, code copied from wekan/client/users/userAvatar.styl
-
-avatar-radius = 50%
-
-.assignee
-  border-radius: 3px
-  display: block
-  position: relative
-  float: left
-  height: 30px
-  width: @height
-  margin: 0 4px 4px 0
-  cursor: pointer
-  user-select: none
-  z-index: 1
-  text-decoration: none
-  border-radius: avatar-radius
-
-  .avatar
-    overflow: hidden
-    border-radius: avatar-radius
-
-    &.avatar-assignee-initials
-      height: 70%
-      width: @height
-      padding: 15%
-      background-color: #dbdbdb
-      color: #444444
-      position: absolute
-
-    &.avatar-image
-      object-fit: cover;
-      object-position: center;
-      height: 100%
-      width: @height
-
-  .assignee-presence-status
-    background-color: #b3b3b3
-    border: 1px solid #fff
-    border-radius: 50%
-    height: 7px
-    width: @height
-    position: absolute
-    right: -1px
-    bottom: -1px
-    border: 1px solid white
-    z-index: 15
-
-    &.active
-      background: #64c464
-      border-color: #daf1da
-
-    &.idle
-      background: #e4e467
-      border-color: #f7f7d4
-
-    &.disconnected
-      background: #bdbdbd
-      border-color: #ededed
-
-    &.pending
-      background: #e44242
-      border-color: #f1dada
-
-
-
-  &.add-assignee
-    display: flex
-    align-items: center
-    justify-content: center
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-// Other card details
-.copied-tooltip
-  display: none
-  padding: 0px 10px;
-  background-color: #000000df;
-  color: #fff;
-  border-radius: 5px;
-
-.card-details
-  padding: 0
-  flex-shrink: 0
-  flex-basis: 600px
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: hidden
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 20
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
-
-  .mCustomScrollBox
-    padding-left: 0
-
-  .card-details-canvas
-    width: auto
-    padding: 0 20px
-
-  .card-details-header
-    margin: 0 -20px 5px
-    padding: 7px 20px
-    background: darken(white, 7%)
-    border-bottom: 1px solid darken(white, 14%)
-    position: sticky
-    top: 0px
-    z-index: 500
-
-    .card-number {
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details,
-    .card-details-menu,
-    .card-copy-button,
-    .card-copy-mobile-button,
-    .close-card-details-mobile-web,
-    .card-details-menu-mobile-web,
-    .copied-tooltip
-      float: right
-
-    .close-card-details,
-    .maximize-card-details,
-    .minimize-card-details
-      font-size: 24px
-      padding: 5px 10px 5px 10px
-      margin-right: -8px
-
-    .close-card-details-mobile-web
-      font-size: 24px
-      padding: 5px
-      margin-right: 40px
-
-    .card-copy-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-copy-mobile-button
-      font-size: 17px
-      padding: 10px
-      margin-right: 10px
-
-    .card-details-menu
-      font-size: 17px
-      padding: 10px
-
-    .card-details-menu-mobile-web
-      font-size: 17px
-      padding: 10px
-      margin-right: 30px
-
-    .card-details-watch
-      font-size: 17px
-      padding-left: 7px
-      color: #a6a6a6
-
-    .card-details-title
-      font-weight: bold
-      font-size: 1.33em
-      margin: 7px 0 0
-      padding: 0
-
-    .linked-card-location
-      font-style: italic
-      font-size: 1em
-      margin-bottom: 0
-      & p
-        margin-bottom: 0
-
-    form.inlined-form
-      margin-top: 5px
-      margin-bottom: 10px
-
-      .copied-tooltip
-        padding: 0px 10px
-
-    .card-details-list
-      font-size: 0.85em
-      margin-bottom: 3px
-
-      a.card-details-list-title
-        font-weight: bold
-
-        &.is-editable
-          display: inline-block
-          background: darken(white, 10%)
-          border-radius: 3px
-          padding: 0px 5px
-
-    .copied-tooltip
-      margin-right: 10px
-      padding: 10px;
-
-  .card-description textarea
-    min-height: 100px
-
-  .card-details-items
-    display: flex
-    flex-wrap: wrap
-    margin: 15px 0
-
-    .card-details-item
-      margin-right: 0.5em
-      flex-grow: 1
-      &:last-child
-        margin-right: 0
-      &.card-details-item-labels
-        display: block
-        word-wrap: break-word
-        max-width: 95%
-      &.card-details-item-members,
-      &.card-details-item-assignees,
-      &.card-details-item-customfield,
-      &.card-details-item-name
-        display: block
-        word-wrap: break-word
-        max-width: 36%
-      &.card-details-item-creator,
-      &.card-details-item-received,
-      &.card-details-item-start,
-      &.card-details-item-due,
-      &.card-details-item-end
-        display: block
-        word-wrap: break-word
-        max-width: 28%
-      &.custom-fields
-        padding-left: 10px
-
-
-  .card-details-item-title
-    font-size: 16px
-    font-weight: bold
-    color: #4d4d4d
-
-  .activities
-    padding-top: 10px
-
-@media screen and (min-width: 801px)
-  .card-details-maximized
-    padding: 0
-    flex-shrink: 0
-    flex-basis: calc(100% - 20px)
-    will-change: flex-basis
-    overflow-y: scroll
-    overflow-x: scroll
-    background: darken(white, 3%)
-    border-radius: bottom 3px
-    z-index: 100
-    animation: flexGrowIn 0.1s
-    box-shadow: 0 0 7px 0 darken(white, 30%)
-    transition: flex-basis 0.1s
-    box-sizing: border-box
-    position: absolute
-    top: 0
-    left: 0
-    height: calc(100% - 20px)
-    width: calc(100% - 20px)
-    float: left
-
-    .card-details-left
-      float: left
-      top: 60px
-      left: 20px
-      width: 47%
-      border-right: solid 2px #dbdbdb
-      padding-right: 10px
-
-    .card-details-right
-      position: absolute
-      float: right
-      left: 50%
-      margin: 15px 0
-
-    .card-details-header
-      width: 100%
-
-input[type="text"].attachment-add-link-input
-  float: left
-  margin: 0 0 8px
-  width: 80%
-
-input[type="submit"].attachment-add-link-submit
-  float: left
-  margin: 0 0 8px 4px
-  padding: 6px 12px
-  width: 18%
-
-@media screen and (max-width: 800px)
-  .card-details
-    width: calc(100% - 1px)
-    padding: 0px 20px 0px 20px
-    margin: 0px
-    transition: none
-    overflow-y: revert
-    overflow-x: revert
-
-    .card-details-canvas
-      width: 100%
-      padding-left: 0px
-
-    .card-details-header
-      .close-card-details
-        margin-right: 0px
-
-      .card-details-menu
-        margin-right: 40px
-
-      .maximize-card-details
-        margin-right: 40px
-
-      .minimize-card-details
-        margin-right: 40px
-
-  .card-details-popup
-    padding: 0px 10px
-
-  .pop-over > .content-wrapper > .popup-container-depth-0
-    width: 100%
-
-    & > .content
-      width: calc(100% - 10px)
-
-    & > .content > .card-details-popup hr
-        margin: 15px 0px
-
-      .card-details-header
-        margin: 0
-
-card-details-color(background, color...)
-  background: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-
-.card-details-white
-  card-details-color(unset, #000) //Black text for better visibility
-  border: 1px solid #eee
-
-.card-details-green
-  card-details-color(#3cb500, #ffffff) //White text for better visibility
-
-.card-details-yellow
-  card-details-color(#fad900, #000) //Black text for better visibility
-
-.card-details-orange
-  card-details-color(#ff9f19, #000) //Black text for better visibility
-
-.card-details-red
-  card-details-color(#eb4646, #ffffff) //White text for better visibility
-
-.card-details-purple
-  card-details-color(#a632db, #ffffff) //White text for better visibility
-
-.card-details-blue
-  card-details-color(#0079bf, #ffffff) //White text for better visibility
-
-.card-details-pink
-  card-details-color(#ff78cb, #000) //Black text for better visibility
-
-.card-details-sky
-  card-details-color(#00c2e0, #ffffff) //White text for better visibility
-
-.card-details-black
-  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.card-details-lime
-  card-details-color(#51e898, #000) //Black text for better visibility
-
-.card-details-silver
-  card-details-color(#c0c0c0, #000) //Black text for better visibility
-
-.card-details-peachpuff
-  card-details-color(#ffdab9, #000) //Black text for better visibility
-
-.card-details-crimson
-  card-details-color(#dc143c, #ffffff) //White text for better visibility
-
-.card-details-plum
-  card-details-color(#dda0dd, #000) //Black text for better visibility
-
-.card-details-darkgreen
-  card-details-color(#006400, #ffffff) //White text for better visibility
-
-.card-details-slateblue
-  card-details-color(#6a5acd, #ffffff) //White text for better visibility
-
-.card-details-magenta
-  card-details-color(#ff00ff, #ffffff) //White text for better visibility
-
-.card-details-gold
-  card-details-color(#ffd700, #000) //Black text for better visibility
-
-.card-details-navy
-  card-details-color(#000080, #ffffff) //White text for better visibility
-
-.card-details-gray
-  card-details-color(#808080, #ffffff) //White text for better visibility
-
-.card-details-saddlebrown
-  card-details-color(#8b4513, #ffffff) //White text for better visibility
-
-.card-details-paleturquoise
-  card-details-color(#afeeee, #000) //Black text for better visibility
-
-.card-details-mistyrose
-  card-details-color(#ffe4e1, #000) //Black text for better visibility
-
-.card-details-indigo
-  card-details-color(#4b0082, #ffffff) //White text for better visibility
-
-.voted
-  opacity: .7
-.vote-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.vote-result
-  display: flex
-.js-show-positive-votes
-  cursor: pointer
-
-.poker-voted
-  opacity: .7
-
-.poker-title
-  display: flex
-  justify-content: space-between
-
-  .js-edit-date
-    align-self: baseline
-    margin-left: 5px
-
-.poker-result
-  display: flex
-  flex-flow: row wrap
-.js-show-positive-poker-votes
-  cursor: pointer
-
-.poker-deck
-  display: grid
-  flex-direction: column
-  text-align: center
-
-.poker-card-result
-  width: 32px
-  font-size: 1em
-  font-weight: bold
-  padding: 4px 2px 4px 2px
-  cursor: default
-
-.winner
-  font-weight: bold
-  outline: #2d2d2d solid 2px
-
-.loser
-  opacity: .5
-
-.responsive-table
-  overflow-x: auto
-
-.poker-table
-  display: table
-  width: 100%
-  padding-top: 10px
-
-.poker-table-row
-  display: table-row
-
-.poker-table-heading
-  background-color: #EEE
-  display: table-header-group
-
-.poker-table-cell
-  display: table-cell
-  padding: 0 0 5px 2px
-  border-bottom: 1px solid #d2d0d0
-  text-align: center
-  min-width: 45px
-
-.poker-table-cell-who
-  width: 150px
-  vertical-align: middle
-
-.poker-table-heading-left,
-.poker-table-heading-right
-  display: table-header-group
-  font-weight: bold
-  border-top: 1px solid #808080
-
-@media (max-width: 400px)
-  .poker-table-heading-right
-    display: none
-
-.poker-table-body
-  display: table-row-group
-
-.poker-table-side-left,
-.poker-table-side-right
-  display: inline-block
-
-.poker-table-side-right
-  padding-left: 10px
-
-@media (max-width: 400px)
-  .poker-table-side-right
-    padding-left: 0px
-
-.estimation-add
-  display: block
-  overflow: auto
-  margin-top: 15px
-  margin-bottom: 5px
-  input
-    display: inline-block
-    float: right
-    margin: auto
-    margin-right: 10px
-    width: 100px
-  button
-    display: inline-block
-    float: right
-    margin: auto
-
-.poker-card
-  width:48px
-  height:72px
-  float:left
-  background:#fff
-  border-radius:5px
-  display:table
-  box-sizing:border-box
-  padding:5px
-  margin:3px
-  font-size:20px
-  font-weight: bold
-  text-shadow: #2d2d2d 1px 1px 0
-  box-shadow:0 0 5px #aaaaaa
-  text-align:center
-  position:relative
-  cursor: pointer
-
-  .inner
-    display:table-cell
-    vertical-align:middle
-    border-radius:5px
-    overflow:hidden
-    background-color: #cecece
-

client/components/cards/cardTime.css

@@ -0,0 +1,18 @@
+.card-time {
+  display: block;
+  border-radius: 4px;
+  padding: 1px 3px;
+  color: #fff;
+  background-color: #dbdbdb;
+}
+.card-time:hover,
+.card-time.is-active {
+  background-color: #b3b3b3;
+}
+.card-time time::before {
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  content: "\f017";
+  margin-right: 0.3em;
+}

client/components/cards/cardTime.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 BlazeComponent.extendComponent({
   template() {
     return 'editCardSpentTime';

client/components/cards/cardTime.styl

@@ -1,17 +0,0 @@
-.card-time
-  display: block
-  border-radius: 4px
-  padding: 1px 3px
-  color: #fff
-
-  background-color: #dbdbdb
-  &:hover, &.is-active
-    background-color: #b3b3b3
-
-  time
-    &::before
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: inherit
-      -webkit-font-smoothing: antialiased
-      content: "\f017"  // clock symbol
-      margin-right: 0.3em

client/components/cards/checklists.css

@@ -0,0 +1,173 @@
+.js-add-checklist {
+  color: #8c8c8c;
+}
+textarea.js-add-checklist-item,
+textarea.js-edit-checklist-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.js-delete-checklist-item:hover,
+.js-convert-checklist-item-to-card:hover {
+  color: inherit;
+}
+.checklists-title {
+  display: flex;
+  justify-content: space-between;
+}
+.checklist-progress-bar-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.checklist-progress-bar-container .checklist-progress-text {
+  margin-right: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar {
+  width: 80%;
+  height: 10px;
+}
+.checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
+  color: #fff !important;
+  background-color: #2196f3 !important;
+  padding: 0.01em 16px;
+  border-radius: 16px;
+  height: 100%;
+}
+.checklist-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.checklist-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.checklist-title .checklist-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.checklist-title .checklist-stat.is-finished {
+  color: #3cb500;
+}
+.checklist-title span.fa.checklist-handle {
+  padding-right: 20px;
+  padding-top: 3px;
+  float: left;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.checklist {
+  background: #f7f7f7;
+}
+.checklist.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+  opacity: 1;
+  transition: height 0ms 400ms, opacity 400ms 0ms;
+  height: auto;
+  overflow: hidden;
+}
+.checklist-item.is-checked.invisible {
+  opacity: 0;
+  height: 0;
+  transition: height 0ms 0ms, opacity 600ms 0ms;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.checklist-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.checklist-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.checklist-item:hover {
+  background-color: #ebebeb;
+}
+.checklist-item .check-box-container {
+  padding-right: 10px;
+}
+.checklist-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.checklist-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.checklist-item .item-title {
+  flex: 1;
+}
+.checklist-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+  text-decoration: line-through;
+}
+.checklist-item .item-title .viewer p {
+  margin-bottom: 2px;
+  display: block;
+  word-wrap: break-word;
+  max-width: 420px;
+}
+.checklist-item span.fa.checklistitem-handle {
+  padding-top: 2px;
+  padding-right: 10px;
+}
+.js-delete-checklist-item,
+.js-convert-checklist-item-to-card {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-checklist-item {
+  margin: 0.2em 0 0.5em 1.33em;
+}
+.add-checklist-item.js-open-inlined-form,
+.add-checklist.js-open-inlined-form {
+  display: block;
+  width: 50%;
+}
+.add-checklist-item.js-open-inlined-form:hover,
+.add-checklist.js-open-inlined-form:hover {
+  background: #dbdbdb;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.checklist-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}
+.edit-controls label.toggle-label {
+  margin-left: 2px;
+}

client/components/cards/checklists.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import Cards from '/models/cards';
 import Boards from '/models/boards';
 

client/components/cards/checklists.styl

@@ -1,168 +0,0 @@
-.js-add-checklist
-  color: #8c8c8c
-
-textarea.js-add-checklist-item, textarea.js-edit-checklist-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.checklists-title
-  display: flex
-  justify-content: space-between
-
-.checklist-progress-bar-container
-  display: flex
-  flex-direction: row
-  align-items: center
-
-  .checklist-progress-text
-    margin-right: 10px
-
-  .checklist-progress-bar
-    width: 80%
-    height: 10px
-
-    .checklist-progress
-      color: #fff !important
-      background-color: #2196F3 !important
-      padding: 0.01em 16px
-      border-radius: 16px
-      height: 100%
-
-.checklist-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .checklist-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  span.fa.checklist-handle
-    padding-right: 20px
-    padding-top: 3px
-    float: left
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.checklist
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.checklist-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-  opacity: 1
-  transition: height 0ms 400ms, opacity 400ms 0ms
-  height: auto
-  overflow: hidden
-
-  &.is-checked.invisible
-    opacity: 0
-    height: 0
-    transition: height 0ms 0ms, opacity 600ms 0ms
-    margin-top: 0
-    margin-bottom: 0
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box-container
-    padding-right: 10px;
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-      text-decoration: line-through
-    & .viewer
-      p
-        margin-bottom: 2px
-        display: block
-        word-wrap: break-word
-        max-width: 420px
-
-  span.fa.checklistitem-handle
-    padding-top: 2px
-    padding-right: 10px;
-
-.js-delete-checklist-item,
-.js-convert-checklist-item-to-card
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-checklist-item
-  margin: 0.2em 0 0.5em 1.33em
-
-.add-checklist-item,.add-checklist
-  &.js-open-inlined-form
-    display: block
-    width: 50%
-
-    &:hover
-      background: #dbdbdb
-      color: #222
-      box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-.checklist-details-menu
-  float: right
-  padding: 6px 10px 6px 10px
-
-.edit-controls
-  label.toggle-label
-    margin-left: 2px

client/components/cards/labels.css

@@ -0,0 +1,230 @@
+.card-label {
+  border: 1px solid #000;
+  border-radius: 4px;
+  color: #fff;
+  display: inline-block;
+  font-weight: 700;
+  font-size: 13px;
+  margin-right: 4px;
+  margin-bottom: 5px;
+  padding: 3px 8px;
+  max-width: 210px;
+  min-width: 8px;
+  word-wrap: break-word;
+  min-height: 18px;
+  vertical-align: middle;
+  white-space: initial;
+  overflow: initial;
+}
+.card-label:hover {
+  color: #fff;
+}
+.card-label.square {
+  height: 30px;
+  width: 30px;
+  padding: 0;
+}
+.card-label.add-label {
+  box-shadow: 0 0 0 2px #bfbfbf inset;
+  border: initial;
+}
+.card-label.add-label:hover,
+.card-label.add-label.is-active {
+  box-shadow: 0 0 0 2px #666 inset;
+}
+.card-label p {
+  margin: 0px;
+}
+.palette-colors {
+  display: flex;
+  flex-wrap: wrap;
+}
+.palette-colors .palette-color {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-label-white {
+  background-color: #fff;
+  color: #000;
+}
+.card-label-white:hover {
+  color: #aaa;
+}
+.card-label-green {
+  background-color: #3cb500;
+}
+.card-label-green:hover {
+  color: #000;
+}
+.card-label-yellow {
+  background-color: #fad900;
+  color: #000;
+}
+.card-label-orange {
+  background-color: #ff9f19;
+  color: #000;
+}
+.card-label-red {
+  background-color: #eb4646;
+}
+.card-label-purple {
+  background-color: #a632db;
+}
+.card-label-blue {
+  background-color: #0079bf;
+}
+.card-label-pink {
+  background-color: #ff78cb;
+  color: #000;
+}
+.card-label-sky {
+  background-color: #00c2e0;
+}
+.card-label-black {
+  background-color: #4d4d4d;
+}
+.card-label-lime {
+  background-color: #51e898;
+  color: #000;
+}
+.card-label-silver {
+  background-color: #c0c0c0;
+  color: #000;
+}
+.card-label-peachpuff {
+  background-color: #ffdab9;
+  color: #000;
+}
+.card-label-crimson {
+  background-color: #dc143c;
+}
+.card-label-plum {
+  background-color: #dda0dd;
+  color: #000;
+}
+.card-label-darkgreen {
+  background-color: #006400;
+}
+.card-label-slateblue {
+  background-color: #6a5acd;
+}
+.card-label-magenta {
+  background-color: #f0f;
+}
+.card-label-gold {
+  background-color: #ffd700;
+  color: #000;
+}
+.card-label-navy {
+  background-color: #000080;
+}
+.card-label-gray {
+  background-color: #808080;
+}
+.card-label-saddlebrown {
+  background-color: #8b4513;
+}
+.card-label-paleturquoise {
+  background-color: #afeeee;
+  color: #000;
+}
+.card-label-mistyrose {
+  background-color: #ffe4e1;
+  color: #000;
+}
+.card-label-indigo {
+  background-color: #4b0082;
+}
+.edit-label .card-label,
+.create-label .card-label {
+  float: left;
+  height: 25px;
+  margin: 0px 3% 7px 0px;
+  width: 10.5%;
+  max-width: 10.5%;
+  cursor: pointer;
+}
+.edit-labels input[type="text"] {
+  margin: 4px 0 6px 38px;
+  width: 243px;
+}
+.edit-labels .card-label {
+  height: 30px;
+  left: 0;
+  padding: 1px 5px;
+  position: absolute;
+  top: 0;
+  width: 24px;
+}
+.edit-labels .labels-static .card-label {
+  line-height: 30px;
+  margin-bottom: 4px;
+  position: relative;
+  top: auto;
+  left: 0;
+  width: 260px;
+}
+.edit-labels-pop-over {
+  margin-bottom: 8px;
+}
+.edit-labels-pop-over .card-label .viewer p {
+  margin: 0;
+}
+.edit-labels-pop-over .shortcut {
+  display: inline-block;
+}
+.card-label-selectable {
+  border-radius: 3px;
+  cursor: pointer;
+  margin: 0;
+  margin-bottom: 3px;
+  width: 190px;
+  min-height: 18px;
+  padding: 8px;
+  position: relative;
+  transition: margin-right 0.1s;
+}
+.card-label-selectable .card-label-selectable-icon {
+  position: absolute;
+  top: 8px;
+  right: -20px;
+}
+.card-label-selectable.active:hover,
+.card-label-selectable.active,
+.card-label-selectable.active.selected:hover,
+.card-label-selectable.active.selected {
+  padding-right: 32px;
+}
+.card-label-selectable.active:hover .card-label-selectable-icon,
+.card-label-selectable.active .card-label-selectable-icon,
+.card-label-selectable.active.selected:hover .card-label-selectable-icon,
+.card-label-selectable.active.selected .card-label-selectable-icon {
+  right: 6px;
+}
+.card-label-selectable.selected,
+.card-label-selectable:hover {
+  opacity: 0.8;
+}
+.active .card-label-selectable,
+.active .card-label-selectable:hover {
+  margin-right: 0;
+}
+.active .card-label-selectable .card-label-selectable-icon {
+  right: 8px;
+}
+.card-label-edit-button {
+  border-radius: 3px;
+  float: right;
+  padding: 8px;
+}
+.card-label-edit-button:hover {
+  background: #dbdbdb;
+}
+ul.edit-labels-pop-over span.fa.label-handle {
+  padding-right: 10px;
+}
+ul.edit-labels-pop-over span.fa.label-handle + .card-label {
+  max-width: 180px;
+}

client/components/cards/labels.styl

@@ -1,231 +0,0 @@
-@import 'nib'
-
-// XXX Use .board-widget-labels as a flexbox container
-.card-label
-  border: 1px solid #000000
-  border-radius: 4px
-  color: white  //Default white text, in select cases,  changed to black to improve contrast between label colour and text
-  display: inline-block
-  font-weight: 700
-  font-size: 13px
-  margin-right: 4px
-  margin-bottom: 5px
-  padding: 3px 8px
-  max-width: 210px
-  min-width: 8px
-  word-wrap: break-word
-  min-height: 18px
-  vertical-align: middle
-  white-space: initial
-  overflow: initial
-
-  &:hover
-    color: white
-
-  &.square
-    height: 30px
-    width: @height
-    padding: 0
-
-  &.add-label
-    box-shadow: 0 0 0 2px darken(white, 25%) inset
-    border: initial
-
-    &:hover, &.is-active
-      box-shadow: 0 0 0 2px darken(white, 60%) inset
-
-  p
-    margin: 0px
-
-.palette-colors
-  display: flex
-  flex-wrap: wrap
-
-  .palette-color
-    flex-grow: 1
-    display: flex
-    align-items: center
-    justify-content: center
-
-.card-label-white
-  background-color: #ffffff
-  color: #000000 //Black text for better visibility
-
-.card-label-white:hover
-  color: #aaaaaa //grey text for better visibility
-
-.card-label-green
-  background-color: #3cb500
-
-.card-label-green:hover
-  color: #000000 //Black hover text for better visibility
-
-.card-label-yellow
-  background-color: #fad900
-  color: #000000 //Black text for better visibility
-
-.card-label-orange
-  background-color: #ff9f19
-  color: #000000 //Black text for better visibility
-
-.card-label-red
-  background-color: #eb4646
-
-.card-label-purple
-  background-color: #a632db
-
-.card-label-blue
-  background-color: #0079bf
-
-.card-label-pink
-  background-color: #ff78cb
-  color: #000000 //Black text for better visibility
-
-.card-label-sky
-  background-color: #00c2e0
-
-.card-label-black
-  background-color: #4d4d4d
-
-.card-label-lime
-  background-color: #51e898
-  color: #000000 //Black text for better visibility
-
-.card-label-silver
-  background-color: #c0c0c0
-  color: #000000 //Black text for better visibility
-
-.card-label-peachpuff
-  background-color: #ffdab9
-  color: #000000 //Black text for better visibility
-
-.card-label-crimson
-  background-color: #dc143c
-
-.card-label-plum
-  background-color: #dda0dd
-  color: #000000 //Black text for better visibility
-
-.card-label-darkgreen
-  background-color: #006400
-
-.card-label-slateblue
-  background-color: #6a5acd
-
-.card-label-magenta
-  background-color: #ff00ff
-
-.card-label-gold
-  background-color: #ffd700
-  color: #000000 //Black text for better visibility
-
-.card-label-navy
-  background-color: #000080
-
-.card-label-gray
-  background-color: #808080
-
-.card-label-saddlebrown
-  background-color: #8b4513
-
-.card-label-paleturquoise
-  background-color: #afeeee
-  color: #000000 //Black text for better visibility
-
-.card-label-mistyrose
-  background-color: #ffe4e1
-  color: #000000 //Black text for better visibility
-
-.card-label-indigo
-  background-color: #4b0082
-
-.edit-label,
-.create-label
-  .card-label
-    float: left
-    height: 25px
-    margin: 0px 3% 7px 0px
-    width: 10.5%
-    max-width: 10.5%
-    cursor: pointer
-
-.edit-labels
-  input[type="text"]
-    margin: 4px 0 6px 38px
-    width: 243px
-
-  .card-label
-    height: 30px
-    left: 0
-    padding: 1px 5px
-    position: absolute
-    top: 0
-    width: 24px
-
-  .labels-static .card-label
-    line-height: 30px
-    margin-bottom: 4px
-    position: relative
-    top: auto
-    left: 0
-    width: 260px
-
-.edit-labels-pop-over
-  margin-bottom: 8px
-  .card-label .viewer p
-    margin: 0
-
-.edit-labels-pop-over .shortcut
-  display: inline-block
-
-.card-label-selectable
-  border-radius: 3px
-  cursor: pointer
-  margin: 0
-  margin-bottom: 3px
-  width: 190px
-  min-height: 18px
-  padding: 8px
-  position: relative
-  transition: margin-right .1s
-
-  .card-label-selectable-icon
-    position: absolute
-    top: 8px
-    right: -20px
-
-  &.active:hover,
-  &.active,
-  &.active.selected:hover,
-  &.active.selected
-    padding-right: 32px
-
-    .card-label-selectable-icon
-      right: 6px
-
-  &.selected,
-  &:hover
-    opacity: .8
-
-.active .card-label-selectable
-  &,
-  &:hover
-    margin-right: 0
-
-  .card-label-selectable-icon
-    right: 8px
-
-.card-label-edit-button
-  border-radius: 3px
-  float: right
-  padding: 8px
-
-  &:hover
-    background: #dbdbdb
-
-ul.edit-labels-pop-over
-  span.fa.label-handle
-    padding-right: 10px;
-
-  span.fa.label-handle + .card-label
-    max-width: 180px

client/components/cards/minicard.css

@@ -0,0 +1,550 @@
+.minicard-wrapper {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 9px;
+}
+.minicard-wrapper.placeholder {
+  background: #ccc;
+  border-radius: 9px;
+}
+.minicard-wrapper.ui-sortable-helper {
+  cursor: grabbing;
+  transform: rotate(4deg);
+  display: block !important;
+}
+.minicard-wrapper.ui-sortable-helper .and-n-other {
+  width: 100%;
+  height: 16px;
+  padding: 4px;
+  background-color: #f2f2f2;
+  text-align: center;
+  border-radius: 3px;
+}
+.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
+  display: none;
+}
+.minicard-wrapper .multi-selection-checkbox + .minicard {
+  margin-left: 8px;
+}
+.minicard {
+  padding: 6px 8px 2px;
+  position: relative;
+  flex: 1;
+  flex-wrap: wrap;
+  background-color: #fff;
+  min-height: 20px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  border-radius: 2px;
+  color: #4d4d4d;
+  overflow: hidden;
+  transition: transform 0.2s, border-radius 0.2s;
+}
+.minicard.linked-board .linked-icon,
+.minicard.linked-card .linked-icon {
+  display: inline-block;
+  margin-right: 11px;
+  vertical-align: baseline;
+  font-size: 0.9em;
+}
+.minicard.linked-board .linked-archived,
+.minicard.linked-card .linked-archived {
+  color: #937760;
+}
+.is-selected .minicard {
+  transform: translateX(11px);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  z-index: 25;
+  box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
+}
+.minicard:hover:not(.minicard-composer),
+.is-selected .minicard,
+.draggable-hover-card .minicard {
+  background: #f7f7f7;
+}
+.draggable-hover-card .minicard {
+  background: #ededed;
+}
+.minicard .minicard-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 145px;
+  user-select: none;
+  margin: -6px -8px 6px -8px;
+  border-radius: top 2px;
+}
+.minicard .minicard-labels {
+  float: none;
+}
+.minicard .minicard-labels .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.minicard .minicard-labels-no-text {
+  display: flex;
+  flex-wrap: wrap;
+}
+.minicard .minicard-custom-fields {
+  display: block;
+}
+.minicard .minicard-custom-field {
+  display: flex;
+}
+.minicard .minicard-custom-field-item {
+  flex-grow: 1;
+  display: block;
+  word-wrap: break-word;
+  max-width: 100px;
+  margin-right: 4px;
+}
+.minicard .handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: none;
+}
+@media only screen {
+  .minicard .handle {
+    display: block;
+  }
+}
+.minicard .handle .fa-arrows {
+  font-size: 20px;
+  color: #ccc;
+}
+.minicard .minicard-title .card-number {
+  color: #b3b3b3;
+  display: inline-block;
+  margin-right: 5px;
+}
+.minicard .minicard-title p:last-child {
+  margin-bottom: 0;
+}
+.minicard .minicard-title .viewer {
+  display: block;
+  word-wrap: break-word;
+  max-width: 230px;
+}
+.minicard .dates {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.minicard .date {
+  margin-right: 3px;
+}
+.minicard .badges {
+  float: left;
+  margin-top: 7px;
+  color: #808080;
+}
+.minicard .badges:empty {
+  display: none;
+}
+.minicard .badges .badge {
+  float: left;
+  margin-right: 11px;
+  margin-bottom: 3px;
+  font-size: 0.9em;
+}
+.minicard .badges .badge.is-finished {
+  background: #3cb500;
+  padding: 0px 3px;
+  border-radius: 3px;
+  color: #fff;
+}
+.minicard .badges .badge:last-of-type {
+  margin-right: 0;
+}
+.minicard .badges .badge .badge-icon,
+.minicard .badges .badge .badge-text {
+  vertical-align: middle;
+}
+.minicard .badges .badge .badge-icon.badge-comment,
+.minicard .badges .badge .badge-text.badge-comment {
+  margin-bottom: 0.1rem;
+}
+.minicard .badges .badge .badge-text {
+  font-size: 0.9em;
+  padding-left: 2px;
+  line-height: 14px;
+}
+.minicard .badges .badge .check-list-text {
+  padding-left: 0px;
+  line-height: 12px;
+}
+.minicard .minicard-members,
+.minicard .minicard-assignees,
+.minicard .minicard-creator {
+  float: right;
+  margin-left: 5px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .member,
+.minicard .minicard-assignees .member,
+.minicard .minicard-creator .member {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+  margin-bottom: 4px;
+}
+.minicard .minicard-members .assignee,
+.minicard .minicard-assignees .assignee,
+.minicard .minicard-creator .assignee {
+  float: right;
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+}
+.minicard .minicard-members + .badges,
+.minicard .minicard-assignees + .badges,
+.minicard .minicard-creator + .badges {
+  margin-top: 5px;
+}
+.minicard .minicard-assignees {
+  border-bottom: 1px solid #f00;
+}
+.minicard .minicard-creator {
+  border-bottom: 1px solid #008000;
+}
+.minicard .minicard-members:empty,
+.minicard .minicard-assignees:empty {
+  display: none;
+}
+.minicard .minicard-description {
+  padding: 6px 0 6px 8px;
+  background-color: #eee;
+  width: 100%;
+  margin-bottom: 2px;
+  margin-left: -4px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.minicard.minicard-composer {
+  margin-bottom: 10px;
+}
+.minicard.minicard-composer textarea.minicard-composer-textarea,
+.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
+  resize: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  max-height: 162px;
+  min-height: 36px;
+  margin-bottom: 20px;
+  overflow-y: auto;
+}
+.parent-prefix {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+.parent-subtext {
+  color: #b3b3b3;
+  font-size: 0.9em;
+}
+@media screen and (max-width: 800px) {
+  .is-selected .minicard {
+    transform: translateX(0px);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 15;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  }
+}
+/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
+.minicard-green {
+  background-color: #3cb500 !important;
+  color: #fff !important;
+}
+.minicard-green:hover:not(.minicard-composer),
+.is-selected .minicard-green,
+.draggable-hover-card .minicard-green {
+  background: #3ab000;
+}
+.draggable-hover-card .minicard-green {
+  background: #38a800;
+}
+.minicard-yellow {
+  background-color: #fad900 !important;
+}
+.minicard-yellow:hover:not(.minicard-composer),
+.is-selected .minicard-yellow,
+.draggable-hover-card .minicard-yellow {
+  background: #f3d200;
+}
+.draggable-hover-card .minicard-yellow {
+  background: #e9ca00;
+}
+.minicard-orange {
+  background-color: #ff9f19 !important;
+}
+.minicard-orange:hover:not(.minicard-composer),
+.is-selected .minicard-orange,
+.draggable-hover-card .minicard-orange {
+  background: #ff9b11;
+}
+.draggable-hover-card .minicard-orange {
+  background: #ff9705;
+}
+.minicard-red {
+  background-color: #eb4646 !important;
+  color: #fff !important;
+}
+.minicard-red:hover:not(.minicard-composer),
+.is-selected .minicard-red,
+.draggable-hover-card .minicard-red {
+  background: #ea3e3e;
+}
+.draggable-hover-card .minicard-red {
+  background: #e93333;
+}
+.minicard-purple {
+  background-color: #a632db !important;
+  color: #fff !important;
+}
+.minicard-purple:hover:not(.minicard-composer),
+.is-selected .minicard-purple,
+.draggable-hover-card .minicard-purple {
+  background: #a32bda;
+}
+.draggable-hover-card .minicard-purple {
+  background: #9e25d5;
+}
+.minicard-blue {
+  background-color: #0079bf !important;
+  color: #fff !important;
+}
+.minicard-blue:hover:not(.minicard-composer),
+.is-selected .minicard-blue,
+.draggable-hover-card .minicard-blue {
+  background: #0075b9;
+}
+.draggable-hover-card .minicard-blue {
+  background: #0071b2;
+}
+.minicard-pink {
+  background-color: #ff78cb !important;
+}
+.minicard-pink:hover:not(.minicard-composer),
+.is-selected .minicard-pink,
+.draggable-hover-card .minicard-pink {
+  background: #ff6dc7;
+}
+.draggable-hover-card .minicard-pink {
+  background: #ff5ec1;
+}
+.minicard-sky {
+  background-color: #00c2e0 !important;
+  color: #fff !important;
+}
+.minicard-sky:hover:not(.minicard-composer),
+.is-selected .minicard-sky,
+.draggable-hover-card .minicard-sky {
+  background: #00bcd9;
+}
+.draggable-hover-card .minicard-sky {
+  background: #00b4d0;
+}
+.minicard-black {
+  background-color: #4d4d4d !important;
+  color: #fff !important;
+}
+.minicard-black:hover:not(.minicard-composer),
+.is-selected .minicard-black,
+.draggable-hover-card .minicard-black {
+  background: #4b4b4b;
+}
+.draggable-hover-card .minicard-black {
+  background: #484848;
+}
+.minicard-lime {
+  background-color: #51e898 !important;
+}
+.minicard-lime:hover:not(.minicard-composer),
+.is-selected .minicard-lime,
+.draggable-hover-card .minicard-lime {
+  background: #49e793;
+}
+.draggable-hover-card .minicard-lime {
+  background: #3ee58d;
+}
+.minicard-silver {
+  background-color: #c0c0c0 !important;
+}
+.minicard-silver:hover:not(.minicard-composer),
+.is-selected .minicard-silver,
+.draggable-hover-card .minicard-silver {
+  background: #bababa;
+}
+.draggable-hover-card .minicard-silver {
+  background: #b3b3b3;
+}
+.minicard-peachpuff {
+  background-color: #ffdab9 !important;
+}
+.minicard-peachpuff:hover:not(.minicard-composer),
+.is-selected .minicard-peachpuff,
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffd3ac;
+}
+.draggable-hover-card .minicard-peachpuff {
+  background: #ffca9a;
+}
+.minicard-crimson {
+  background-color: #dc143c !important;
+  color: #fff !important;
+}
+.minicard-crimson:hover:not(.minicard-composer),
+.is-selected .minicard-crimson,
+.draggable-hover-card .minicard-crimson {
+  background: #d5133a;
+}
+.draggable-hover-card .minicard-crimson {
+  background: #cd1338;
+}
+.minicard-plum {
+  background-color: #dda0dd !important;
+}
+.minicard-plum:hover:not(.minicard-composer),
+.is-selected .minicard-plum,
+.draggable-hover-card .minicard-plum {
+  background: #da98da;
+}
+.draggable-hover-card .minicard-plum {
+  background: #d68cd6;
+}
+.minicard-darkgreen {
+  background-color: #006400 !important;
+  color: #fff !important;
+}
+.minicard-darkgreen:hover:not(.minicard-composer),
+.is-selected .minicard-darkgreen,
+.draggable-hover-card .minicard-darkgreen {
+  background: #006100;
+}
+.draggable-hover-card .minicard-darkgreen {
+  background: #005d00;
+}
+.minicard-slateblue {
+  background-color: #6a5acd !important;
+  color: #fff !important;
+}
+.minicard-slateblue:hover:not(.minicard-composer),
+.is-selected .minicard-slateblue,
+.draggable-hover-card .minicard-slateblue {
+  background: #6453cb;
+}
+.draggable-hover-card .minicard-slateblue {
+  background: #5c4ac8;
+}
+.minicard-magenta {
+  background-color: #f0f !important;
+  color: #fff !important;
+}
+.minicard-magenta:hover:not(.minicard-composer),
+.is-selected .minicard-magenta,
+.draggable-hover-card .minicard-magenta {
+  background: #f700f7;
+}
+.draggable-hover-card .minicard-magenta {
+  background: #ed00ed;
+}
+.minicard-gold {
+  background-color: #ffd700 !important;
+}
+.minicard-gold:hover:not(.minicard-composer),
+.is-selected .minicard-gold,
+.draggable-hover-card .minicard-gold {
+  background: #f7d100;
+}
+.draggable-hover-card .minicard-gold {
+  background: #edc800;
+}
+.minicard-navy {
+  background-color: #000080 !important;
+  color: #fff !important;
+}
+.minicard-navy:hover:not(.minicard-composer),
+.is-selected .minicard-navy,
+.draggable-hover-card .minicard-navy {
+  background: #00007c;
+}
+.draggable-hover-card .minicard-navy {
+  background: #007;
+}
+.minicard-gray {
+  background-color: #808080 !important;
+  color: #fff !important;
+}
+.minicard-gray:hover:not(.minicard-composer),
+.is-selected .minicard-gray,
+.draggable-hover-card .minicard-gray {
+  background: #7c7c7c;
+}
+.draggable-hover-card .minicard-gray {
+  background: #777;
+}
+.minicard-saddlebrown {
+  background-color: #8b4513 !important;
+  color: #fff !important;
+}
+.minicard-saddlebrown:hover:not(.minicard-composer),
+.is-selected .minicard-saddlebrown,
+.draggable-hover-card .minicard-saddlebrown {
+  background: #874312;
+}
+.draggable-hover-card .minicard-saddlebrown {
+  background: #814012;
+}
+.minicard-paleturquoise {
+  background-color: #afeeee !important;
+}
+.minicard-paleturquoise:hover:not(.minicard-composer),
+.is-selected .minicard-paleturquoise,
+.draggable-hover-card .minicard-paleturquoise {
+  background: #a5ecec;
+}
+.draggable-hover-card .minicard-paleturquoise {
+  background: #97e9e9;
+}
+.minicard-mistyrose {
+  background-color: #ffe4e1 !important;
+}
+.minicard-mistyrose:hover:not(.minicard-composer),
+.is-selected .minicard-mistyrose,
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffd7d3;
+}
+.draggable-hover-card .minicard-mistyrose {
+  background: #ffc6bf;
+}
+.minicard-indigo {
+  background-color: #4b0082 !important;
+  color: #fff !important;
+}
+.minicard-indigo:hover:not(.minicard-composer),
+.is-selected .minicard-indigo,
+.draggable-hover-card .minicard-indigo {
+  background: #49007e;
+}
+.draggable-hover-card .minicard-indigo {
+  background: #460079;
+}
+.text-red {
+  color: #f00;
+}
+.text-green {
+  color: #008000;
+}

client/components/cards/minicard.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 // Template.cards.events({
 //   'click .member': Popup.open('cardMember')
 // });

client/components/cards/minicard.styl

@@ -1,335 +0,0 @@
-@import 'nib'
-
-.minicard-wrapper
-  cursor: pointer
-  position: relative
-  display: flex
-  align-items: center
-  margin-bottom: 9px
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 9px
-
-  &.ui-sortable-helper
-    cursor: grabbing
-    transform: rotate(4deg)
-    display: block !important
-
-    .and-n-other
-      width: 100%
-      height: 16px
-      padding: 4px
-      background-color: darken(white, 5%)
-      text-align: center
-      border-radius: 3px
-
-    .multi-selection-checkbox
-      display: none
-
-  .multi-selection-checkbox + .minicard
-    margin-left: 8px
-
-.minicard
-  padding: 6px 8px 2px
-  position: relative
-  flex: 1
-  flex-wrap: wrap
-  background-color: #fff
-  min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.15)
-  border-radius: 2px
-  color: #4d4d4d
-  overflow: hidden
-  transition: transform 0.2s,
-              border-radius 0.2s
-
-  &.linked-board
-  &.linked-card
-    .linked-icon
-      display: inline-block
-      margin-right: 11px
-      vertical-align: baseline
-      font-size: 0.9em
-    .linked-archived
-      color: #937760
-
-  .is-selected &
-    transform: translateX(11px)
-    border-bottom-right-radius: 0
-    border-top-right-radius: 0
-    z-index: 25
-    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(white, 3%)
-
-  .draggable-hover-card &
-    background: darken(white, 7%)
-
-  .minicard-cover
-    background-position: center
-    background-repeat: no-repeat
-    background-size: contain
-    height: 145px
-    user-select: none
-    margin: -6px -8px 6px -8px
-    border-radius: top 2px
-
-  .minicard-labels
-    float: none
-
-    .minicard-label
-      width: 11px
-      height: @width
-      border-radius: 2px
-      margin-right: 3px
-      margin-bottom: 3px
-
-  .minicard-labels-no-text
-    display: flex
-    flex-wrap: wrap
-
-  .minicard-custom-fields
-    display:block;
-  .minicard-custom-field
-    display:flex;
-  .minicard-custom-field-item
-    flex-grow: 1
-    display: block
-    word-wrap: break-word
-    max-width: 100px
-    margin-right: 4px
-  .handle
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-    display:none;
-    @media only screen {
-      display:block;
-    }
-    .fa-arrows
-      font-size:20px;
-      color: #ccc;
-  .minicard-title
-    .card-number
-      color: darken(white, 30%);
-      display: inline-block;
-      margin-right: 5px;
-    p:last-child
-      margin-bottom: 0
-    .viewer
-      display: block
-      word-wrap: break-word
-      max-width: 230px
-  .dates
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  .date
-    margin-right: 3px
-  .badges
-    float: left
-    margin-top: 7px
-    color: darken(white, 50%)
-
-    &:empty
-      display: none
-
-    .badge
-      float: left
-      margin-right: 11px
-      margin-bottom: 3px
-      font-size: 0.9em
-      &.is-finished
-         background: #3cb500
-         padding: 0px 3px
-         border-radius: 3px
-         color: white
-
-      &:last-of-type
-        margin-right: 0
-
-      .badge-icon,
-      .badge-text
-        vertical-align: middle
-        &.badge-comment
-          margin-bottom: 0.1rem
-
-      .badge-text
-        font-size: 0.9em
-        padding-left: 2px
-        line-height: 14px
-      .check-list-text
-        padding-left: 0px
-        line-height: 12px
-
-  .minicard-members,
-  .minicard-assignees,
-  .minicard-creator
-    float: right
-    margin-left: 5px
-    margin-bottom: 4px
-
-    .member
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-      margin-bottom: 4px
-
-    .assignee
-      float: right
-      border-radius: 50%
-      height: 28px
-      width: @height
-
-    + .badges
-      margin-top: 5px
-
-  .minicard-assignees
-    border-bottom: 1px solid red
-
-  .minicard-creator
-    border-bottom: 1px solid green
-
-  .minicard-members:empty,
-  .minicard-assignees:empty
-    display: none
-
-  .minicard-description {
-    padding: 6px 0 6px 8px
-    background-color: #eee
-    width: 100%
-    margin-bottom: 2px
-    margin-left: -4px
-    border-radius: 3px
-    display: inline-block
-  }
-
-  &.minicard-composer
-    margin-bottom: 10px
-
-    textarea.minicard-composer-textarea,
-    textarea.minicard-composer-textarea:focus
-      resize: none
-      background: none
-      border: none
-      box-shadow: none
-      height: auto
-      margin: 0
-      padding: 0
-      max-height: 162px
-      min-height: 36px
-      margin-bottom: 20px
-      overflow-y: auto
-
-.parent-prefix
-  color: darken(white, 30%)
-  font-size: 0.9em
-.parent-subtext
-  color: darken(white, 30%)
-  font-size: 0.9em
-
-@media screen and (max-width: 800px)
-  .minicard
-    .is-selected &
-      transform: translateX(0px)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      z-index: 15
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
-
-minicard-color(background, color...)
-  background-color: background !important
-  if color
-    color: color !important //overwrite text for better visibility
-  &:hover:not(.minicard-composer),
-  .is-selected &,
-  .draggable-hover-card &
-    background: darken(background, 3%)
-  .draggable-hover-card &
-    background: darken(background, 7%)
-
-.minicard-green
-  minicard-color(#3cb500, #ffffff) //White text for better visibility
-
-.minicard-yellow
-  minicard-color(#fad900)
-
-.minicard-orange
-  minicard-color(#ff9f19)
-
-.minicard-red
-  minicard-color(#eb4646, #ffffff) //White text for better visibility
-
-.minicard-purple
-  minicard-color(#a632db, #ffffff) //White text for better visibility
-
-.minicard-blue
-  minicard-color(#0079bf, #ffffff) //White text for better visibility
-
-.minicard-pink
-  minicard-color(#ff78cb)
-
-.minicard-sky
-  minicard-color(#00c2e0, #ffffff) //White text for better visibility
-
-.minicard-black
-  minicard-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.minicard-lime
-  minicard-color(#51e898)
-
-.minicard-silver
-  minicard-color(#c0c0c0)
-
-.minicard-peachpuff
-  minicard-color(#ffdab9)
-
-.minicard-crimson
-  minicard-color(#dc143c, #ffffff) //White text for better visibility
-
-.minicard-plum
-  minicard-color(#dda0dd)
-
-.minicard-darkgreen
-  minicard-color(#006400, #ffffff) //White text for better visibility
-
-.minicard-slateblue
-  minicard-color(#6a5acd, #ffffff) //White text for better visibility
-
-.minicard-magenta
-  minicard-color(#ff00ff, #ffffff) //White text for better visibility
-
-.minicard-gold
-  minicard-color(#ffd700)
-
-.minicard-navy
-  minicard-color(#000080, #ffffff) //White text for better visibility
-
-.minicard-gray
-  minicard-color(#808080, #ffffff) //White text for better visibility
-
-.minicard-saddlebrown
-  minicard-color(#8b4513, #ffffff) //White text for better visibility
-
-.minicard-paleturquoise
-  minicard-color(#afeeee)
-
-.minicard-mistyrose
-  minicard-color(#ffe4e1)
-
-.minicard-indigo
-  minicard-color(#4b0082, #ffffff) //White text for better visibility
-
-.text-red
-  color:red
-.text-green
-  color:green

client/components/cards/resultCard.css

@@ -0,0 +1,25 @@
+.result-card-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.result-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.result-card-context {
+  display: inline-block;
+}
+.result-card-context-separator {
+  font-weight: bold;
+}
+.result-card-context-list {
+  margin-bottom: 0.7rem;
+}
+.result-card-block-wrapper {
+  display: inline-block;
+}

client/components/cards/resultCard.styl

@@ -1,24 +0,0 @@
-.result-card-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.result-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.result-card-context
-  display: inline-block
-
-.result-card-context-separator
-  font-weight: bold
-
-.result-card-context-list
-  margin-bottom: 0.7rem
-
-.result-card-block-wrapper
-  display: inline-block

client/components/cards/subtasks.css

@@ -0,0 +1,152 @@
+.js-add-subtask {
+  color: #8c8c8c;
+}
+textarea.js-add-subtask-item,
+textarea.js-edit-subtask-item {
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  height: 34px;
+}
+.delete-text,
+.subtask-title .js-delete-subtask,
+.subtask-title .js-view-subtask,
+.js-delete-subtask-item {
+  color: #8c8c8c;
+  text-decoration: underline;
+  word-wrap: break-word;
+  float: right;
+  padding-top: 6px;
+}
+.delete-text:hover,
+.subtask-title .js-delete-subtask:hover,
+.subtask-title .js-view-subtask:hover,
+.js-delete-subtask-item:hover {
+  color: inherit;
+}
+.subtask-title .checkbox {
+  float: left;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+}
+.subtask-title .title {
+  font-size: 18px;
+  line-height: 25px;
+}
+.subtask-title .subtasks-stat {
+  margin: 0 0.5em;
+  float: right;
+  padding-top: 6px;
+}
+.subtask-title .subtasks-stat.is-finished {
+  color: #3cb500;
+}
+.subtask-title .js-delete-subtask {
+  margin: 0 0.5em;
+}
+.js-confirm-subtask-delete {
+  background-color: #f7f7f7;
+  position: absolute;
+  float: left;
+  width: 60%;
+  margin-top: 0;
+  margin-left: 13%;
+  padding-bottom: 2%;
+  padding-left: 3%;
+  padding-right: 3%;
+  z-index: 17;
+  border-radius: 3px;
+}
+.js-confirm-subtask-delete p {
+  position: relative;
+  margin-top: 3%;
+  width: 100%;
+  text-align: center;
+}
+.js-confirm-subtask-delete p span {
+  font-weight: bold;
+}
+.js-confirm-subtask-delete p i {
+  font-size: 2em;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons {
+  position: relative;
+  padding: left 2% right 2%;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete {
+  margin-left: 12%;
+  float: left;
+}
+.js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog {
+  margin-right: 12%;
+  float: right;
+}
+#card-details-overlay {
+  top: 0;
+  bottom: -600px;
+  right: 0;
+}
+.subtasks {
+  background: #f7f7f7;
+}
+.subtasks.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item {
+  margin: 0 0 0 0.1em;
+  line-height: 18px;
+  font-size: 1.1em;
+  margin-top: 3px;
+  display: flex;
+  background: #f7f7f7;
+}
+.subtasks-item.placeholder {
+  background: #ccc;
+  border-radius: 2px;
+}
+.subtasks-item.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.subtasks-item:hover {
+  background-color: #ebebeb;
+}
+.subtasks-item .check-box {
+  margin: 0.1em 0 0 0;
+}
+.subtasks-item .check-box.is-checked {
+  border-bottom: 2px solid #3cb500;
+  border-right: 2px solid #3cb500;
+}
+.subtasks-item .item-title {
+  flex: 1;
+  padding-left: 10px;
+}
+.subtasks-item .item-title.is-checked {
+  color: #8c8c8c;
+  font-style: italic;
+}
+.subtasks-item .item-title .viewer p {
+  margin-bottom: 2px;
+}
+.js-delete-subtask-item {
+  margin: 0 0 0.5em 1.33em;
+  padding: 12px 0 0 0;
+}
+.add-subtask-item {
+  margin: 0.2em 0 0.5em 1.33em;
+  display: inline-block;
+}
+.subtask-details-menu {
+  float: right;
+  padding: 6px 10px 6px 10px;
+}

client/components/cards/subtasks.styl

@@ -1,146 +0,0 @@
-.js-add-subtask
-  color: #8c8c8c
-
-textarea.js-add-subtask-item, textarea.js-edit-subtask-item
-  overflow: hidden
-  word-wrap: break-word
-  resize: none
-  height: 34px
-
-.delete-text
-  color: #8c8c8c
-  text-decoration: underline
-  word-wrap: break-word
-  float: right
-  padding-top: 6px
-  &:hover
-    color: inherit
-
-.subtask-title
-  .checkbox
-    float: left
-    width: 30px
-    height 30px
-    font-size: 18px
-    line-height: 30px
-
-  .title
-    font-size: 18px
-    line-height: 25px
-
-  .subtasks-stat
-    margin: 0 0.5em
-    float: right
-    padding-top: 6px
-    &.is-finished
-      color: #3cb500
-
-  .js-delete-subtask
-    @extends .delete-text
-    margin: 0 0.5em
-
-  .js-view-subtask
-    @extends .delete-text
-
-.js-confirm-subtask-delete
-  background-color: darken(white, 3%)
-  position: absolute
-  float: left;
-  width: 60%
-  margin-top: 0
-  margin-left: 13%
-  padding-bottom: 2%
-  padding-left: 3%
-  padding-right: 3%
-  z-index: 17
-  border-radius: 3px
-
-  p
-    position: relative
-    margin-top: 3%
-    width: 100%
-    text-align: center
-    span
-      font-weight: bold
-
-    i
-      font-size: 2em
-
-  .js-subtask-delete-buttons
-    position: relative
-    padding: left 2% right 2%
-    .confirm-subtask-delete
-      margin-left: 12%
-      float: left
-    .toggle-delete-subtask-dialog
-      margin-right: 12%
-      float: right
-
-#card-details-overlay
-  top: 0
-  bottom: -600px
-  right: 0
-
-.subtasks
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-
-.subtasks-item
-  margin: 0 0 0 0.1em
-  line-height: 18px
-  font-size: 1.1em
-  margin-top: 3px
-  display: flex
-  background: darken(white, 3%)
-
-  &.placeholder
-    background: darken(white, 20%)
-    border-radius: 2px
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-  &:hover
-    background-color: darken(white, 8%)
-
-  .check-box
-    margin: 0.1em 0 0 0;
-    &.is-checked
-      border-bottom: 2px solid #3cb500
-      border-right: 2px solid #3cb500
-
-  .item-title
-    flex: 1
-    padding-left: 10px;
-    &.is-checked
-      color: #8c8c8c
-      font-style: italic
-    & .viewer
-      p
-        margin-bottom: 2px
-
-.js-delete-subtask-item
-  margin: 0 0 0.5em 1.33em
-  @extends .delete-text
-  padding: 12px 0 0 0
-
-.add-subtask-item
-  margin: 0.2em 0 0.5em 1.33em
-  display: inline-block
-
-.subtask-details-menu
-  float: right
-  padding: 6px 10px 6px 10px

client/components/forms/datepicker.css

@@ -0,0 +1,22 @@
+.datepicker-container .fields .left {
+  width: 56%;
+}
+.datepicker-container .fields .right {
+  width: 38%;
+}
+.datepicker-container .datepicker {
+  width: 100%;
+}
+.datepicker-container .datepicker table {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.datepicker-container .datepicker table thead {
+  background: none;
+}
+.datepicker-container .datepicker table td,
+.datepicker-container .datepicker table th {
+  box-sizing: border-box;
+}

client/components/forms/datepicker.styl

@@ -1,17 +0,0 @@
-.datepicker-container
-  .fields
-    .left
-      width: 56%
-    .right
-      width: 38%
-  .datepicker
-    width: 100%
-    table
-      width: 100%
-      border: none
-      border-spacing: 0
-      border-collapse: collapse
-      thead
-        background: none
-      td, th
-        box-sizing: border-box

client/components/forms/forms.css

@@ -0,0 +1,736 @@
+select,
+textarea,
+input:not([type=file]),
+button {
+  box-sizing: border-box;
+  background-color: #ebebeb;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  display: block;
+  margin-bottom: 12px;
+  min-height: 34px;
+  padding: 7px;
+}
+select.full,
+textarea.full,
+input:not([type=file]).full,
+button.full {
+  width: 100%;
+}
+select.input-error,
+textarea.input-error,
+input:not([type=file]).input-error,
+button.input-error {
+  background-color: #ece9e9;
+  border-color: #ba1212;
+}
+select:focus,
+textarea:focus,
+input:not([type=file]):focus,
+button:focus {
+  outline: 0;
+}
+input[type="file"] {
+  margin-bottom: 16px;
+}
+input[type="radio"] {
+  -webkit-appearance: radio;
+  min-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  width: 250px;
+}
+input[type="text"].inline-input,
+input[type="password"].inline-input,
+input[type="email"].inline-input {
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 2px;
+  min-height: 0;
+  height: 18px;
+  width: 200px;
+}
+input[type="text"].full-line,
+input[type="password"].full-line,
+input[type="email"].full-line {
+  width: 100%;
+}
+input[type="email"]:invalid {
+  box-shadow: none;
+}
+input[type="text"]:hover,
+input[type="password"]:hover,
+input[type="email"]:hover,
+textarea:hover {
+  border-color: #999;
+}
+input[type="text"]:hover.input-error,
+input[type="password"]:hover.input-error,
+input[type="email"]:hover.input-error,
+textarea:hover.input-error {
+  border-color: #ba1212;
+}
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  background: #fff;
+  border-color: #318ec4;
+  box-shadow: 0 0 2px #318ec4;
+}
+input[type="text"]:focus.input-error,
+input[type="password"]:focus.input-error,
+input[type="email"]:focus.input-error,
+textarea:focus.input-error {
+  background-color: #f8f7f7;
+  border-color: #ba1212;
+  box-shadow: 0 0 2px #d11515;
+}
+input[type="text"]:disabled,
+input[type="password"]:disabled,
+input[type="email"]:disabled,
+textarea:disabled {
+  background-color: #dcdcdc;
+  border-color: #bfbfbf;
+  color: #8c8c8c;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+select {
+  max-height: 300px;
+  width: 256px;
+  margin-bottom: 8px;
+}
+select.inline {
+  width: 100%;
+}
+option[disabled] {
+  color: #8c8c8c;
+}
+textarea {
+  height: 150px;
+  transition: background 85ms ease-in, border-color 85ms ease-in;
+  resize: vertical;
+  width: 100%;
+}
+textarea.editor {
+  resize: none;
+  padding-bottom: 22px;
+}
+.button {
+  border-radius: 3px;
+  text-decoration: none;
+  position: relative;
+}
+input[type="submit"],
+button {
+  background: #cfcfcf;
+  background: linear-gradient(#cfcfcf, #c2c2c2);
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 700;
+  line-height: 22px;
+  padding: 7px 20px;
+  text-align: center;
+}
+input[type="submit"] .wide,
+button .wide {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+input[type="submit"]:hover,
+button:hover,
+input[type="submit"]:focus,
+button:focus {
+  background: #c2c2c2;
+  background: linear-gradient(#c2c2c2, #b5b5b5);
+}
+input[type="submit"]:active,
+button:active {
+  background: #b5b5b5;
+  background: linear-gradient(#b5b5b5, #a8a8a8);
+  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
+}
+input[type="submit"]:active:hover,
+button:active:hover,
+input[type="submit"]:active:focus,
+button:active:focus,
+input[type="submit"]:active:active,
+button:active:active {
+  background: #e6e6e6;
+  background: linear-gradient(#e6e6e6, #e6e6e6);
+}
+input[type="submit"].primary,
+button.primary {
+  background: #005377;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].primary:hover,
+button.primary:hover,
+input[type="submit"].primary:focus,
+button.primary:focus {
+  background: #004766;
+}
+input[type="submit"].primary:active,
+button.primary:active {
+  background: #01628c;
+}
+input[type="submit"].negate:hover,
+button.negate:hover,
+input[type="submit"].negate:focus,
+button.negate:focus {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"].negate:active,
+button.negate:active {
+  background: #7d0c0c;
+  box-shadow: 0 1px 0 #4d4d4d;
+  color: #fff;
+}
+input[type="submit"] i.fa,
+button i.fa {
+  margin-right: 10px;
+}
+input[type="submit"].disabled,
+input[type="submit"]:disabled,
+input[type="button"].disabled,
+button.disabled,
+.button.disabled,
+input[type="submit"].disabled:hover,
+input[type="submit"]:disabled:hover,
+input[type="button"].disabled:hover,
+button.disabled:hover,
+.button.disabled:hover,
+input[type="submit"].disabled:active,
+input[type="submit"]:disabled:active,
+input[type="button"].disabled:active,
+button.disabled:active,
+.button.disabled:active {
+  background: #cfcfcf;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+fieldset {
+  border: 1px solid #bfbfbf;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+input[type="hidden"] {
+  display: none;
+}
+.radio-div,
+.check-div {
+  display: block;
+  margin: 0 0 4px 20px;
+  min-height: 20px;
+  position: relative;
+}
+.radio-div input,
+.check-div input {
+  left: -18px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 2px;
+}
+.radio-div label,
+.check-div label {
+  font-weight: 400;
+}
+label {
+  display: block;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+label.form-error {
+  color: #ba1212;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder,
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #8c8c8c;
+}
+.edit-controls,
+.add-controls {
+  display: flex;
+  align-items: center;
+  margin-top: 0px;
+  margin-bottom: 12px;
+}
+.edit-controls button[type=submit],
+.add-controls button[type=submit],
+.edit-controls input[type=button],
+.add-controls input[type=button] {
+  float: left;
+  height: 32px;
+  margin-bottom: 0px;
+}
+.edit-controls .fa-times-thin,
+.add-controls .fa-times-thin {
+  font-size: 26px;
+  margin: 3px 10px;
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+  display: none;
+}
+.materialCheckBox {
+  position: relative;
+  width: 13px;
+  height: 13px;
+  z-index: 0;
+  border: 2px solid #5a5a5a;
+  border-radius: 1px;
+  transition: 0.2s;
+  margin: 0;
+  cursor: pointer;
+}
+.materialCheckBox.is-checked {
+  top: -4px;
+  left: -3px;
+  width: 7px;
+  height: 15px;
+  margin-right: 6px;
+  border-top: 2px solid transparent;
+  border-left: 2px solid transparent;
+  transform: rotate(40deg);
+  -webkit-backface-visibility: hidden;
+  transform-origin: 100% 100%;
+}
+.button-link {
+  background: #fff;
+  background: linear-gradient(#fff, #f5f5f5);
+  border-radius: 3px;
+  box-sizing: border-box;
+  user-select: none;
+  border: 1px solid #e3e3e3;
+  border-bottom-color: #c2c2c2;
+  cursor: pointer;
+  display: block;
+  font-weight: 700;
+  height: 34px;
+  margin-top: 6px;
+  max-width: 300px;
+  padding: 7px;
+  position: relative;
+  text-decoration: none;
+  overflow: ellipsis;
+}
+.button-link .on {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border-radius: 3px;
+  color: #fff;
+  display: none;
+  font-size: 12px;
+  font-weight: 700;
+  height: 17px;
+  line-height: 17px;
+  margin: 0;
+  padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  text-align: center;
+}
+.button-link.is-on {
+  padding-right: 30px;
+  max-width: 196px;
+}
+.button-link.is-on .on {
+  display: block;
+}
+.button-link.inline {
+  color: #666;
+  padding: 2px 14px;
+  margin-left: 4px;
+}
+.button-link.setting {
+  height: 52px;
+  float: left;
+  position: relative;
+  margin-top: 0;
+}
+.button-link.setting.disabled {
+  background: #fff;
+  border-color: #e9e9e9;
+  color: #8c8c8c;
+  cursor: default;
+}
+.button-link.setting.disabled select {
+  display: none;
+}
+.button-link.setting.disabled:hover .label {
+  color: #8c8c8c;
+}
+.button-link.setting.disabled,
+.button-link.setting.disabled:hover,
+.button-link.setting.disabled:active,
+.button-link.setting.disabled.primary,
+.button-link.setting.disabled.primary:hover,
+.button-link.setting.disabled.primary:active {
+  background: #cfcfcf;
+  border-color: #c2c2c2;
+  border-bottom-color: #b5b5b5;
+  cursor: default;
+  box-shadow: none;
+  color: #a8a8a8;
+}
+.button-link.setting .label {
+  color: #8c8c8c;
+  display: block;
+  font-size: 12px;
+  line-height: 14px;
+  margin-bottom: 0;
+}
+.button-link.setting:hover .label {
+  color: #eee;
+}
+.button-link.setting .value {
+  display: block;
+  font-size: 18px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.button-link.setting label {
+  display: none;
+}
+.button-link.setting select {
+  border: none;
+  cursor: pointer;
+  height: 50px;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+}
+.button-link:hover {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.button-link:hover .on {
+  background-image: none;
+  background-color: rgba(255,255,255,0.3);
+  border-color: transparent;
+}
+.button-link:active {
+  background: #2e85b8;
+  background: linear-gradient(#2e85b8, #28739f);
+  border-color: #2b7cab;
+  color: #fff;
+}
+.button-link .button-link.negate:hover {
+  background: #990f0f;
+  background: linear-gradient(#990f0f, #7d0c0c);
+  border-color: linear-gradient(#990f0f, #7d0c0c);
+}
+.button-link .button-link.negate:active {
+  background: #7d0c0c;
+  border-color: #990f0f;
+}
+.button-link.primary {
+  background: #48b512;
+  background: linear-gradient(#48b512, #3d990f);
+  border: 1px solid;
+  border-color: #3d990f;
+  color: #fff;
+}
+.button-link.primary:hover {
+  background: #3d990f;
+  background: linear-gradient(#3d990f, #327d0c);
+  border-color: #3d990f;
+}
+.button-link.danger {
+  background: #ba1212;
+  background: linear-gradient(#ba1212, #8b0e0e);
+  border: 1px solid;
+  border-color: #a21010;
+  color: #fff;
+}
+.button-link.danger:hover {
+  background: #a21010;
+  background: linear-gradient(#a21010, #740b0b);
+  border-color: #8b0e0e;
+}
+button.quiet-button,
+button.loud-text-button {
+  background: none;
+  text-align: left;
+  line-height: normal;
+  border: none;
+  box-shadow: none;
+}
+button.quiet-button:active,
+button.loud-text-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+  box-shadow: none;
+}
+button.quiet-button {
+  font-weight: 400;
+  text-decoration: underline;
+}
+button.loud-text-button {
+  width: 100%;
+}
+button.loud-text-button:hover {
+  color: #111;
+}
+.emphasis-button,
+.quiet-button {
+  border-radius: 3px;
+  user-select: none;
+  color: #8c8c8c;
+  display: block;
+  margin: 2px 0;
+  padding: 6px 8px;
+  position: relative;
+}
+.emphasis-button.w-img,
+.quiet-button.w-img {
+  padding-left: 28px;
+}
+.emphasis-button:hover,
+.quiet-button:hover {
+  color: #4d4d4d;
+  background: #dcdcdc;
+}
+.emphasis-button:active,
+.quiet-button:active {
+  color: #4d4d4d;
+  background: #d3d3d3;
+}
+.quiet-button-large {
+  padding: 16px 24px;
+}
+.emphasis-button {
+  color: #74663e;
+  background: #ecdfbb;
+}
+.emphasis-button:hover {
+  color: #53492d;
+  background: #e7d6a7;
+}
+.emphasis-button:active {
+  color: #53492d;
+  background: #e1cc93;
+}
+.is-editable {
+  cursor: pointer;
+}
+.big-link {
+  border-radius: 3px;
+  display: block;
+  margin: 6px 0 6px 40px;
+  padding: 11px;
+  position: relative;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 20px;
+}
+.big-link .text {
+  text-decoration: underline;
+}
+.big-link:hover {
+  background: #dcdcdc;
+}
+.big-link.options {
+  padding-right: 41px;
+}
+.big-link .option {
+  height: 30px;
+  width: 30px;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+}
+.big-link.none {
+  color: #8c8c8c;
+  text-decoration: none;
+}
+.big-link.none:hover {
+  background: transparent;
+}
+.big-link.avatar-changer {
+  padding-right: 51px;
+}
+.big-link.avatar-changer .member {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.big-link.avatar-changer .member .member-avatar {
+  height: 40px;
+  width: 40px;
+}
+.big-link.avatar-changer .member .member-initials {
+  font-size: 16px;
+  height: 40px;
+  line-height: 40px;
+  max-height: 40px;
+}
+.show-more {
+  border-radius: 3px;
+  color: #8c8c8c;
+  display: block;
+  padding: 16px 8px 16px 40px;
+  margin: 8px 0;
+}
+.show-more:hover {
+  background: #dcdcdc;
+  text-decoration: underline;
+}
+.show-more.compact {
+  padding: 12px 8px;
+  margin: 8px 0 0;
+  text-align: center;
+}
+.board-widget .show-more {
+  padding: 12px 8px 12px 40px;
+}
+.uploader {
+  clear: both;
+  cursor: pointer;
+  position: relative;
+  height: 34px;
+  width: 100%;
+}
+.uploader .realfile {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader .realfile input[type="file"] {
+  cursor: pointer;
+  height: 34px;
+  line-height: 34px;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  width: 100%;
+  z-index: 2;
+  font-size: 23px;
+}
+.uploader:hover .fakefile {
+  background: #318ec4;
+  background: linear-gradient(#318ec4, #2b7cab);
+  border-color: #2e85b8;
+  color: #fff;
+}
+.dropdown-menu {
+  border-radius: 2px;
+  overflow: hidden;
+}
+.dropdown-menu li {
+  border-top: none;
+}
+.dropdown-menu li a {
+  padding: 4px 12px 4px 8px;
+}
+.dropdown-menu li a img {
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.dropdown-menu li a .minicard-label {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin: 2px 7px -2px -2px;
+  display: inline-block;
+}
+.dropdown-menu li.active {
+  background: #005377;
+}
+.dropdown-menu li.active a,
+.dropdown-menu li.active .quiet {
+  color: #fff;
+}
+.material-toggle-switch {
+  display: flex;
+}
+.toggle-label {
+  position: relative;
+  display: block;
+  height: 20px;
+  width: 44px;
+  background-color: #a6a6a6;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.toggle-label:after {
+  position: absolute;
+  left: -2px;
+  top: -3px;
+  display: block;
+  width: 26px;
+  height: 26px;
+  border-radius: 100px;
+  background-color: #fff;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
+  content: '';
+  transition: all 0.3s ease;
+}
+.toggle-label:active:after {
+  transform: scale(1.15, 0.85);
+}
+.toggle-switch:checked ~ .toggle-label {
+  background-color: #6fbeb5;
+}
+.toggle-switch:checked ~ .toggle-label:after {
+  left: 20px;
+  background-color: #179588;
+}
+.toggle-switch:checked:disabled ~ .toggle-label {
+  background-color: #d5d5d5;
+  pointer-events: none;
+}
+.toggle-switch:checked:disabled ~ .toggle-label:after {
+  background-color: #bcbdbc;
+}
+.toggle-switch {
+  display: none;
+}
+.toggle-switch-title {
+  margin: 0 0.5em;
+  display: flex;
+}
+@media screen and (max-width: 800px) {
+  .edit-controls .fa-times-thin,
+  .add-controls .fa-times-thin {
+    margin: 3px 20px;
+  }
+}

client/components/forms/forms.styl

@@ -1,695 +0,0 @@
-@import 'nib'
-
-select,
-textarea,
-input:not([type=file]),
-button
-  box-sizing: border-box
-  background-color: #ebebeb
-  border: 1px solid #ccc
-  border-radius: 3px
-  display: block
-  margin-bottom: 12px
-  min-height: 34px
-  padding: 7px
-
-  &.full
-    width: 100%
-
-  &.input-error
-    background-color: #ece9e9
-    border-color: #ba1212
-
-  &:focus
-    outline: 0
-
-input[type="file"]
-  margin-bottom: 16px
-
-input[type="radio"]
-  -webkit-appearance: radio
-  min-height: inherit
-
-input[type="text"],
-input[type="password"],
-input[type="email"]
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  width: 250px
-
-  &.inline-input
-    background: none
-    border: 0
-    margin: 0
-    padding: 2px
-    min-height: 0
-    height: 18px
-    width: 200px
-
-  &.full-line
-    width: 100%
-
-input[type="email"]:invalid
-  box-shadow: none
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-textarea
-
-  &:hover
-    border-color: #999
-
-    &.input-error
-      border-color: #ba1212
-
-  &:focus
-    background: #fff
-    border-color: #318ec4
-    box-shadow: 0 0 2px #318ec4
-
-    &.input-error
-      background-color: #f8f7f7
-      border-color: #ba1212
-      box-shadow: 0 0 2px #d11515
-
-  &:disabled
-    background-color: #dcdcdc
-    border-color: #bfbfbf
-    color: #8c8c8c
-    -webkit-touch-callout: none
-    user-select: none
-
-select
-  max-height: 300px
-  width: 256px
-  margin-bottom: 8px
-
-  &.inline
-    width: 100%
-
-option[disabled]
-  color: #8c8c8c
-
-textarea
-  height: 150px
-  transition: background 85ms ease-in,
-        border-color 85ms ease-in
-  resize: vertical
-  width: 100%
-
-  &.editor
-    resize: none
-    padding-bottom: 22px
-
-
-.button
-  border-radius: 3px
-  text-decoration: none
-  position: relative
-
-input[type="submit"],
-button
-  background: #cfcfcf
-  background: linear-gradient(#cfcfcf, #c2c2c2)
-  border: none
-  cursor: pointer
-  display: inline-block
-  font-weight: 700
-  line-height: 22px
-  padding: 7px 20px
-  text-align: center
-
-  .wide
-    padding-left: 30px
-    padding-right: 30px
-
-  &:hover,
-  &:focus
-    background: #c2c2c2
-    background: linear-gradient(#c2c2c2, #b5b5b5)
-
-  &:active
-    background: #b5b5b5
-    background: linear-gradient(#b5b5b5, #a8a8a8)
-    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
-
-    &:hover,
-    &:focus,
-    &:active
-      background: #e6e6e6
-      background: linear-gradient(#e6e6e6, #e6e6e6)
-
-  &.primary
-    background: #005377
-    box-shadow: 0 1px 0 #4d4d4d
-    color: white
-
-    &:hover,
-    &:focus
-      background: #004766
-
-    &:active
-      background: #01628C
-
-  &.negate
-    &:hover,
-    &:focus
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-    &:active
-      background: #7d0c0c
-      box-shadow: 0 1px 0 #4d4d4d
-      color: #fff
-
-  i.fa
-    margin-right: 10px
-
-input[type="submit"].disabled,
-input[type="submit"]:disabled,
-input[type="button"].disabled,
-button.disabled,
-.button.disabled
-
-  &,
-  &:hover,
-  &:active
-    background: #cfcfcf
-    cursor: default
-    box-shadow: none
-    color: #a8a8a8
-
-fieldset
-  border: 1px solid #bfbfbf
-  padding: 15px
-  margin-bottom: 15px
-
-input[type="hidden"]
-  display: none
-
-.radio-div,
-.check-div
-  display: block
-  margin: 0 0 4px 20px
-  min-height: 20px
-  position: relative
-
-  input
-    left: -18px
-    min-height: 0
-    margin: 0
-    padding: 0
-    position: absolute
-    top: 2px
-
-  label
-    font-weight: 400
-
-label
-  display: block
-  font-weight: 700
-  margin-bottom: 4px
-
-  &.form-error
-    color: #ba1212
-
-input,
-textarea
-  &::-webkit-input-placeholder,
-  &::-moz-placeholder
-    color: #8c8c8c
-
-.edit-controls,
-.add-controls
-  display: flex
-  align-items: center
-  margin-top: 0px
-  margin-bottom: 12px
-
-  button[type=submit]
-  input[type=button]
-    float: left
-    height: 32px
-    margin-bottom: 0px
-
-  .fa-times-thin
-    font-size: 26px
-    margin: 3px 10px
-
-// Material Design checkboxes
-  [type="checkbox"]:not(:checked),
-  [type="checkbox"]:checked
-    position: absolute
-    left: -9999px
-    visibility: hidden
-    display: none
-
-.materialCheckBox
-  position: relative
-  width: 13px
-  height: @width
-  z-index: 0
-  border: 2px solid #5a5a5a
-  border-radius: 1px
-  transition: .2s
-  margin: 0
-  cursor: pointer
-
-  &.is-checked
-    top: -4px
-    left: -3px
-    width: 7px
-    height: 15px
-    margin-right: 6px
-    border-top: 2px solid transparent
-    border-left: 2px solid transparent
-    transform: rotate(40deg)
-    -webkit-backface-visibility: hidden
-    transform-origin: 100% 100%
-
-.button-link
-  background: #fff
-  background: linear-gradient(#fff, #f5f5f5)
-  border-radius: 3px
-  box-sizing: border-box
-  user-select: none
-  border: 1px solid #e3e3e3
-  border-bottom-color: #c2c2c2
-  cursor: pointer
-  display: block
-  font-weight: 700
-  height: 34px
-  margin-top: 6px
-  max-width: 300px
-  padding: 7px
-  position: relative
-  text-decoration: none
-  overflow: ellipsis
-
-  .on
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border-radius: 3px
-    color: #fff
-    display: none
-    font-size: 12px
-    font-weight: 700
-    height: 17px
-    line-height: @height
-    margin: 0
-    padding: 2px 4px
-    position: absolute
-    right: 5px
-    top: 5px
-    text-align: center
-
-  &.is-on
-    padding-right: 30px
-    max-width: 196px
-
-    .on
-      display: block
-
-  &.inline
-    color: #666
-    padding: 2px 14px
-    margin-left: 4px
-
-  &.setting
-    height: 52px
-    float: left
-    position: relative
-    margin-top: 0
-
-    &.disabled
-      background: #fff
-      border-color: #e9e9e9
-      color: #8c8c8c
-      cursor: default
-
-      select
-        display: none
-
-      &:hover .label
-        color: #8c8c8c
-
-      &,
-      &:hover,
-      &:active,
-      &.primary,
-      &.primary:hover,
-      &.primary:active
-        background: #cfcfcf
-        border-color: #c2c2c2
-        border-bottom-color: #b5b5b5
-        cursor: default
-        box-shadow: none
-        color: #a8a8a8
-
-    .label
-      color: #8c8c8c
-      display: block
-      font-size: 12px
-      line-height: 14px
-      margin-bottom: 0
-
-    &:hover .label
-      color: #eee
-
-    .value
-      display: block
-      font-size: 18px
-      line-height: 24px
-      overflow: hidden
-      text-overflow: ellipsis
-
-    label
-      display: none
-
-    select
-      border: none
-      cursor: pointer
-      height: 50px
-      left: 0
-      margin: 0
-      opacity: 0
-      position: absolute
-      top: 0
-      z-index: 2
-      width: 100%
-
-  &:hover
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-    .on
-      background-image: none
-      background-color: rgba(255, 255, 255, .3)
-      border-color: transparent
-
-  &:active
-    background: #2e85b8
-    background: linear-gradient(#2e85b8, #28739f)
-    border-color: #2b7cab
-    color: #fff
-
-  .button-link.negate
-
-    &:hover
-      background: #990f0f
-      background: linear-gradient(#990f0f, #7d0c0c)
-      border-color: @background
-
-    &:active
-      background: #7d0c0c
-      border-color: #990f0f
-
-
-  &.primary
-    background: #48b512
-    background: linear-gradient(#48b512, #3d990f)
-    border: 1px solid
-    border-color: #3d990f
-    color: #fff
-
-    &:hover
-      background: #3d990f
-      background: linear-gradient(#3d990f, #327d0c)
-      border-color: #3d990f
-
-  &.danger
-    background: #ba1212
-    background: linear-gradient(#ba1212, #8b0e0e)
-    border: 1px solid
-    border-color: #a21010
-    color: #fff
-
-    &:hover
-      background: #a21010
-      background: linear-gradient(#a21010, #740b0b)
-      border-color: #8b0e0e
-
-button
-  &.quiet-button,
-  &.loud-text-button
-    background: none
-    text-align: left
-    line-height: normal
-    border: none
-    box-shadow: none
-
-    &:active
-      color: #4d4d4d
-      background: #d3d3d3
-      box-shadow: none
-
-  &.quiet-button
-    font-weight: 400
-    text-decoration: underline
-
-  &.loud-text-button
-    width: 100%
-
-    &:hover
-      color: #111
-
-.emphasis-button,
-.quiet-button
-  border-radius: 3px
-  user-select: none
-  color: #8c8c8c
-  display: block
-  margin: 2px 0
-  padding: 6px 8px
-  position: relative
-
-  &.w-img
-    padding-left: 28px
-
-  &:hover
-    color: #4d4d4d
-    background: #dcdcdc
-
-  &:active
-    color: #4d4d4d
-    background: #d3d3d3
-
-.quiet-button-large
-  padding: 16px 24px
-
-.emphasis-button
-  color: #74663e
-  background: #ecdfbb
-
-  &:hover
-    color: #53492d
-    background: #e7d6a7
-
-  &:active
-    color: #53492d
-    background: #e1cc93
-
-.is-editable
-  cursor: pointer
-
-.big-link
-  border-radius: 3px
-  display: block
-  margin: 6px 0 6px 40px
-  padding: 11px
-  position: relative
-  text-decoration: none
-  font-size: 16px
-  line-height: 20px
-
-  .text
-    text-decoration: underline
-
-  &:hover
-    background: #dcdcdc
-
-  &.options
-    padding-right: 41px
-
-  .option
-    height: 30px
-    width: @height
-    position: absolute
-    right: 6px
-    top: 6px
-
-  &.none
-    color: #8c8c8c
-    text-decoration: none
-
-    &:hover
-      background: transparent
-
-  &.avatar-changer
-    padding-right: 51px
-
-    .member
-      border: 1px solid #ccc
-      border-radius: 3px
-      height: 40px
-      width: @height
-      position: absolute
-      right: 0
-      top: 0
-
-      .member-avatar
-        height: 40px
-        width: @height
-
-      .member-initials
-        font-size: 16px
-        height: 40px
-        line-height: @height
-        max-height: @height
-
-.show-more
-  border-radius: 3px
-  color: #8c8c8c
-  display: block
-  padding: 16px 8px 16px 40px
-  margin: 8px 0
-
-  &:hover
-    background: #dcdcdc
-    text-decoration: underline
-
-  &.compact
-    padding: 12px 8px
-    margin: 8px 0 0
-    text-align: center
-
-.board-widget .show-more
-  padding: 12px 8px 12px 40px
-
-.uploader
-  clear: both
-  cursor: pointer
-  position: relative
-  height: 34px
-  width: 100%
-
-  .realfile
-    cursor: pointer
-    height: 34px
-    line-height: @height
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    z-index: 2
-    font-size: 23px
-
-    input[type="file"]
-      cursor: pointer
-      height: 34px
-      line-height: @height
-      margin: 0
-      opacity: 0
-      padding: 0
-      width: 100%
-      z-index: 2
-      font-size: 23px
-
-  &:hover .fakefile
-    background: #318ec4
-    background: linear-gradient(#318ec4, #2b7cab)
-    border-color: #2e85b8
-    color: #fff
-
-.dropdown-menu
-  border-radius: 2px
-  overflow: hidden
-
-  li
-    border-top: none
-
-    a
-      padding: 4px 12px 4px 8px
-
-      img
-        width: 18px
-        height: @width
-        margin-right: 5px
-        vertical-align: middle
-
-      .minicard-label
-        width: 11px
-        height: @width
-        border-radius: 2px
-        margin: 2px 7px -2px -2px
-        display: inline-block
-
-    &.active
-      background: #005377
-
-      a, .quiet
-        color: white
-
-// Material Design Toggle Switch
-.material-toggle-switch
-  display: flex
-
-.toggle-label
-  position: relative
-  display: block
-  height: 20px
-  width: 44px
-  background-color: #a6a6a6
-  border-radius: 100px
-  cursor: pointer
-  transition: all 0.3s ease
-
-  &:after
-    position: absolute
-    left: -2px
-    top: -3px
-    display: block
-    width: 26px
-    height: 26px
-    border-radius: 100px
-    background-color: #fff
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
-    content: ''
-    transition: all 0.3s ease
-
-  &:active
-    &:after
-      transform: scale(1.15, 0.85)
-
-.toggle-switch:checked ~ .toggle-label
-  background-color: #6fbeb5
-
-  &:after
-    left: 20px
-    background-color: #179588
-
-.toggle-switch:checked:disabled ~ .toggle-label
-  background-color: #d5d5d5
-  pointer-events: none
-
-  &:after
-    background-color: #bcbdbc
-
-.toggle-switch
-  display: none
-
-.toggle-switch-title
-  margin: 0 0.5em
-  display: flex
-
-
-@media screen and (max-width: 800px)
-  .edit-controls,
-  .add-controls
-    .fa-times-thin
-      margin: 3px 20px

client/components/import/import.css

@@ -0,0 +1,51 @@
+.map-members:after {
+  content: "";
+  flex: auto;
+}
+.map-members .mapping-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+}
+.map-members .mapping-list .mapping-item {
+  max-width: 300px;
+  min-width: 200px;
+  padding: 6px;
+  margin: 5px;
+  flex: 1;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+.map-members .mapping-list .mapping-item:hover {
+  background: #f2f2f2;
+}
+.map-members .mapping-list .mapping-item.filled {
+  background: #e0ffe5;
+}
+.map-members .mapping-list .mapping-item.filled:hover {
+  background: #ffe0e0;
+}
+.map-members .mapping-list .mapping-item.ghost-item {
+  height: 0;
+  visibility: hidden;
+  border: none;
+}
+.map-members .mapping-list .profile-source {
+  display: inline-block;
+  width: 80%;
+}
+.map-members .mapping-list .wekan {
+  display: inline-block;
+  width: 35px;
+}
+.map-members .mapping-list .wekan .member {
+  float: none;
+}
+a.show-mapping {
+  text-decoration: underline;
+}
+.import-members-map-note {
+  font-size: 90%;
+  font-weight: bold;
+}

client/components/import/import.styl

@@ -1,53 +0,0 @@
-@import 'nib'
-
-.map-members
-  &:after
-    content: "";
-    flex: auto;
-
-  .mapping-list
-    display: flex
-    flex-wrap: wrap
-    margin: 0 -4px
-
-    .mapping-item
-      max-width: 300px
-      min-width: 200px
-      padding: 6px
-      margin: 5px
-      flex:1
-      background: white
-      border-radius: 3px
-      box-shadow: 0 1px 2px rgba(0,0,0,.15)
-
-      &:hover
-        background: darken(white, 5%)
-
-      &.filled
-        background: #E0FFE5
-
-        &:hover
-          background: #FFE0E0
-
-      &.ghost-item
-        height: 0
-        visibility: hidden
-        border: none
-
-    .profile-source
-      display: inline-block
-      width: 80%
-
-    .wekan
-      display: inline-block
-      width: 35px
-
-      .member
-        float: none
-
-a.show-mapping
-  text-decoration underline
-
-.import-members-map-note
-  font-size: 90%
-  font-weight: bold

client/components/lists/list.css

@@ -0,0 +1,345 @@
+.list {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #dedede;
+  border-left: 1px solid #ccc;
+  padding: 0;
+  float: left;
+  min-width: 270px;
+  max-width: 270px;
+}
+.list:first-child {
+  margin-left: 5px;
+  border-left: none;
+}
+.card-details + .list {
+  border-left: none;
+}
+.list.ui-sortable-helper {
+  box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
+  transform: rotate(4deg);
+  cursor: grabbing;
+}
+.list.ui-sortable-helper .list-header.ui-sortable-handle {
+  cursor: grabbing;
+}
+.list.placeholder {
+  background-color: rgba(0,0,0,0.2);
+  border-color: transparent;
+  box-shadow: none;
+  height: 100px;
+}
+.list.list-composer .open-list-composer,
+.list .list-composer .open-list-composer {
+  color: #8c8c8c;
+}
+.list.list-composer .list-name-input,
+.list .list-composer .list-name-input {
+  background: #fff;
+  margin: -3px 0 8px;
+}
+.list-header-add {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+}
+.list-header {
+  flex: 0 0 auto;
+  padding: 20px 12px 4px;
+  position: relative;
+  min-height: 20px;
+  background-color: #e4e4e4;
+  border-bottom: 6px solid #e4e4e4;
+}
+.list-header.list-header-card-count {
+  min-height: 35px;
+  height: auto;
+}
+.list-header.ui-sortable-handle {
+  cursor: grab;
+}
+.list-header .list-header-left-icon {
+  display: none;
+}
+.list-header .list-header-name {
+  display: inline;
+  font-size: 16px;
+  line-height: 17px;
+  margin: 0;
+  font-weight: bold;
+  min-height: 9px;
+  min-width: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+}
+.list-header .list-header-watch-icon {
+  padding-left: 10px;
+  color: #a6a6a6;
+}
+.list-header .list-header-menu {
+  float: right;
+}
+.list-header .list-header-plus-top {
+  color: #a6a6a6;
+  margin-right: 15px;
+}
+.list-header .highlight {
+  color: #ce1414;
+}
+.list-header .cardCount {
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: bold;
+}
+.list-header .list-header-plus-top,
+.js-open-list-menu,
+.list-header-menu a {
+  color: #4d4d4d;
+  padding-left: 4px;
+}
+.list-body {
+  flex: 1 1 auto;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+  padding: 5px 11px;
+}
+.list-body .minicards {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.list-body .minicards form {
+  margin-bottom: 9px;
+}
+.list-body .open-minicard-composer {
+  border-radius: 2px;
+  color: #8c8c8c;
+  display: block;
+  padding: 7px 10px;
+  position: relative;
+  text-decoration: none;
+  animation: fadeIn 0.3s;
+}
+.list-body .open-minicard-composer i.fa {
+  margin-right: 7px;
+}
+.list-body .open-minicard-composer:hover {
+  background: #fafafa;
+  color: #222;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+#js-wip-limit-edit {
+  padding-top: 2%;
+}
+#js-wip-limit-edit p {
+  margin-bottom: 0;
+}
+#js-wip-limit-edit input {
+  display: inline-block;
+}
+#js-wip-limit-edit .wip-limit-value {
+  width: 20%;
+  margin-right: 5%;
+}
+#js-wip-limit-edit .wip-limit-error {
+  display: none;
+}
+#js-wip-limit-edit .soft-wip-limit {
+  margin-right: 8px;
+}
+#js-wip-limit-edit div {
+  float: left;
+}
+@media screen and (max-width: 800px) {
+  .mini-list {
+    flex: 0 0 60px;
+    height: auto;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list {
+    display: contents;
+    flex-basis: auto;
+    width: 100%;
+    border-left: 0px;
+  }
+  .list:first-child {
+    margin-left: 0px;
+  }
+  .list.ui-sortable-helper {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list.ui-sortable-helper .list-header.ui-sortable-handle {
+    cursor: grabbing;
+  }
+  .list.placeholder {
+    flex: 0 0 60px;
+    height: 60px;
+    width: 100%;
+    border-left: 0px;
+    border-bottom: 1px solid #ccc;
+  }
+  .list-body {
+    padding: 15px 19px;
+  }
+  .list-header {
+    padding: 0 12px 0px;
+    border-bottom: 0px solid #e4e4e4;
+    height: 60px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .list-header .list-header-left-icon {
+    padding: 7px;
+    padding-right: 27px;
+    margin-top: 1px;
+    top: -7px;
+    left: -7px;
+  }
+  .list-header .list-header-menu-icon {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 47px;
+    font-size: 20px;
+  }
+  .list-header .list-header-handle {
+    position: absolute;
+    padding: 7px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    font-size: 24px;
+  }
+  .list-header {
+    display: grid;
+    grid-template-columns: 30px 5fr 1fr;
+  }
+  .list-header .list-header-left-icon {
+    display: grid;
+    grid-row: 1/3;
+    grid-column: 1;
+  }
+  .list-header .list-header-name {
+    grid-row: 1;
+    grid-column: 2;
+    align-self: end;
+  }
+  .list-header .cardCount {
+    grid-row: 2;
+    grid-column: 2;
+    align-self: start;
+  }
+  .list-header .list-header-menu {
+    grid-row: 1/3;
+    grid-column: 3;
+  }
+  .list-header .inlined-form {
+    grid-row: 1/3;
+    grid-column: 1/4;
+  }
+  .list-header .edit-controls {
+    align-items: initial;
+  }
+}
+.link-board-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+.link-board-wrapper .js-link-board {
+  margin-left: 15px;
+}
+.search-card-results {
+  max-height: 250px;
+  overflow: hidden;
+}
+.sk-spinner-list {
+  margin-top: unset !important;
+}
+.list-header-white {
+  border-bottom: 6px solid #fff;
+  border: 1px solid #eee;
+}
+.list-header-green {
+  border-bottom: 6px solid #3cb500;
+}
+.list-header-yellow {
+  border-bottom: 6px solid #fad900;
+}
+.list-header-orange {
+  border-bottom: 6px solid #ff9f19;
+}
+.list-header-red {
+  border-bottom: 6px solid #eb4646;
+}
+.list-header-purple {
+  border-bottom: 6px solid #a632db;
+}
+.list-header-blue {
+  border-bottom: 6px solid #0079bf;
+}
+.list-header-pink {
+  border-bottom: 6px solid #ff78cb;
+}
+.list-header-sky {
+  border-bottom: 6px solid #00c2e0;
+}
+.list-header-black {
+  border-bottom: 6px solid #4d4d4d;
+}
+.list-header-lime {
+  border-bottom: 6px solid #51e898;
+}
+.list-header-silver {
+  border-bottom: 6px solid unset;
+}
+.list-header-peachpuff {
+  border-bottom: 6px solid #ffdab9;
+}
+.list-header-crimson {
+  border-bottom: 6px solid #dc143c;
+}
+.list-header-plum {
+  border-bottom: 6px solid #dda0dd;
+}
+.list-header-darkgreen {
+  border-bottom: 6px solid #006400;
+}
+.list-header-slateblue {
+  border-bottom: 6px solid #6a5acd;
+}
+.list-header-magenta {
+  border-bottom: 6px solid #f0f;
+}
+.list-header-gold {
+  border-bottom: 6px solid #ffd700;
+}
+.list-header-navy {
+  border-bottom: 6px solid #000080;
+}
+.list-header-gray {
+  border-bottom: 6px solid #808080;
+}
+.list-header-saddlebrown {
+  border-bottom: 6px solid #8b4513;
+}
+.list-header-paleturquoise {
+  border-bottom: 6px solid #afeeee;
+}
+.list-header-mistyrose {
+  border-bottom: 6px solid #ffe4e1;
+}
+.list-header-indigo {
+  border-bottom: 6px solid #4b0082;
+}

client/components/lists/list.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 require('/client/lib/jquery-ui.js')
 
 const { calculateIndex } = Utils;

client/components/lists/list.styl

@@ -1,341 +0,0 @@
-@import 'nib'
-
-.list
-  box-sizing: border-box
-  display: flex
-  flex-direction: column
-  position: relative
-  // Even if this background color is the same as the body we can't leave it
-  // transparent, because that won't work during a list drag.
-  background: darken(white, 13%)
-  border-left: 1px solid darken(white, 20%)
-  padding: 0
-  float: left
-  min-width: 270px
-  max-width: 270px
-
-  &:first-child
-    margin-left: 5px
-    border-left: none
-
-  .card-details + &
-    border-left: none
-
-  &.ui-sortable-helper
-    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
-                0 0 1px rgba(0, 0, 0, .5)
-    transform: rotate(4deg)
-    cursor: grabbing
-
-    .list-header.ui-sortable-handle
-      cursor: grabbing
-
-  &.placeholder
-    background-color: rgba(0, 0, 0, .2)
-    border-color: transparent
-    box-shadow: none
-    height: 100px
-
-  &.list-composer, & .list-composer
-    .open-list-composer
-      color: #8c8c8c
-
-    .list-name-input
-      background: white
-      margin: -3px 0 8px
-
-.list-header-add
-  flex: 0 0 auto
-  padding: 20px 12px 4px
-  position: relative
-  min-height: 20px
-
-.list-header
-  flex: 0 0 auto
-  padding: 20px 12px 4px
-  position: relative
-  min-height: 20px
-  background-color: #e4e4e4;
-  border-bottom: 6px solid #e4e4e4;
-
-  &.list-header-card-count
-    min-height: 35px
-    height: auto
-
-  &.ui-sortable-handle
-    cursor: grab
-
-  .list-header-left-icon
-    display: none
-
-  .list-header-name
-    display: inline
-    font-size: 16px
-    line-height: 17px
-    margin: 0
-    font-weight: bold
-    min-height: 9px
-    min-width: 30px
-    overflow: hidden
-    text-overflow: ellipsis
-    word-wrap: break-word
-
-
-  .list-header-watch-icon
-    padding-left: 10px
-    color: #a6a6a6
-
-  .list-header-menu
-    float: right
-
-  .list-header-plus-top
-    color: #a6a6a6
-    margin-right: 15px
-
-  .highlight
-    color: #ce1414
-
-  .cardCount
-    color: #8c8c8c
-    font-size: 12px
-    font-weight: bold
-
-.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
-    color #4d4d4d
-    padding-left 4px
-
-.list-body
-  flex: 1 1 auto
-  flex-direction: column
-  display: flex
-  overflow-y: auto
-  padding: 5px 11px
-
-  .minicards
-    flex-grow: 1
-    flex-shrink: 0
-
-    form
-      margin-bottom: 9px
-
-  .open-minicard-composer
-    border-radius: 2px
-    color: #8c8c8c
-    display: block
-    padding: 7px 10px
-    position: relative
-    text-decoration: none
-    animation: fadeIn 0.3s
-
-    i.fa
-      margin-right: 7px
-
-    &:hover
-      background: #fafafa
-      color: #222
-      box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-#js-wip-limit-edit
-  padding-top: 2%
-
-  p
-    margin-bottom: 0
-
-  input
-    display: inline-block
-
-  .wip-limit-value
-    width: 20%
-    margin-right: 5%
-
-  .wip-limit-error
-    display: none
-
-  .soft-wip-limit
-    margin-right: 8px
-
-  div
-    float: left
-
-@media screen and (max-width: 800px)
-  .mini-list
-    flex: 0 0 60px
-    height: auto
-    width: 100%
-    border-left: 0px
-    border-bottom: 1px solid darken(white, 20%)
-
-  .list
-    display: contents
-    flex-basis: auto
-    width: 100%
-    border-left: 0px
-    &:first-child
-      margin-left: 0px
-
-    &.ui-sortable-helper
-      flex: 0 0 60px
-      height: 60px
-      width: 100%
-      border-left: 0px
-      border-bottom: 1px solid darken(white, 20%)
-
-      .list-header.ui-sortable-handle
-        cursor: grabbing
-
-    &.placeholder
-      flex: 0 0 60px
-      height: 60px
-      width: 100%
-      border-left: 0px
-      border-bottom: 1px solid darken(white, 20%)
-
-  .list-body
-    padding: 15px 19px;
-
-  .list-header
-    padding: 0 12px 0px
-    border-bottom: 0px solid #e4e4e4
-    height: 60px
-    margin-top: 10px
-    display: flex
-    align-items: center
-    .list-header-left-icon
-      padding: 7px
-      padding-right: 27px
-      margin-top: 1px
-      top: -@padding
-      left: -@padding
-
-    .list-header-menu-icon
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 47px
-      font-size: 20px
-
-    .list-header-handle
-      position: absolute
-      padding: 7px
-      top: 50%
-      transform: translateY(-50%)
-      right: 10px
-      font-size: 24px
-
-  .list-header
-    display: grid
-    grid-template-columns: 30px 5fr 1fr
-    .list-header-left-icon
-      display: grid
-      grid-row: 1/3
-      grid-column: 1
-    .list-header-name
-      grid-row: 1
-      grid-column: 2
-      align-self: end
-    .cardCount
-      grid-row: 2
-      grid-column: 2
-      align-self: start
-    .list-header-menu
-      grid-row: 1/3
-      grid-column: 3
-    .inlined-form
-      grid-row: 1/3
-      grid-column: 1/4
-    .edit-controls
-      align-items: initial
-
-.link-board-wrapper
-  display: flex
-  align-items: baseline
-
-  .js-link-board
-    margin-left: 15px
-
-.search-card-results
-  max-height: 250px
-  overflow: hidden
-
-.sk-spinner-list
-  margin-top: unset !important
-
-list-header-color(background, color...)
-  border-bottom: 6px solid background
-
-.list-header-white
-  list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
-  border: 1px solid #eee
-
-.list-header-green
-  list-header-color(#3cb500, #ffffff) //White text for better visibility
-
-.list-header-yellow
-  list-header-color(#fad900, #4d4d4d) //Black text for better visibility
-
-.list-header-orange
-  list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility
-
-.list-header-red
-  list-header-color(#eb4646, #ffffff) //White text for better visibility
-
-.list-header-purple
-  list-header-color(#a632db, #ffffff) //White text for better visibility
-
-.list-header-blue
-  list-header-color(#0079bf, #ffffff) //White text for better visibility
-
-.list-header-pink
-  list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility
-
-.list-header-sky
-  list-header-color(#00c2e0, #ffffff) //White text for better visibility
-
-.list-header-black
-  list-header-color(#4d4d4d, #ffffff) //White text for better visibility
-
-.list-header-lime
-  list-header-color(#51e898, #4d4d4d) //Black text for better visibility
-
-.list-header-silver
-  list-header-color(unset, #4d4d4d) //Black text for better visibility
-
-.list-header-peachpuff
-  list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility
-
-.list-header-crimson
-  list-header-color(#dc143c, #ffffff) //White text for better visibility
-
-.list-header-plum
-  list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility
-
-.list-header-darkgreen
-  list-header-color(#006400, #ffffff) //White text for better visibility
-
-.list-header-slateblue
-  list-header-color(#6a5acd, #ffffff) //White text for better visibility
-
-.list-header-magenta
-  list-header-color(#ff00ff, #ffffff) //White text for better visibility
-
-.list-header-gold
-  list-header-color(#ffd700, #4d4d4d) //Black text for better visibility
-
-.list-header-navy
-  list-header-color(#000080, #ffffff) //White text for better visibility
-
-.list-header-gray
-  list-header-color(#808080, #ffffff) //White text for better visibility
-
-.list-header-saddlebrown
-  list-header-color(#8b4513, #ffffff) //White text for better visibility
-
-.list-header-paleturquoise
-  list-header-color(#afeeee, #4d4d4d) //Black text for better visibility
-
-.list-header-mistyrose
-  list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility
-
-.list-header-indigo
-  list-header-color(#4b0082, #ffffff) //White text for better visibility

client/components/lists/listBody.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import { Spinner } from '/client/lib/spinner';
 
 const subManager = new SubsManager();
@@ -42,7 +43,6 @@ BlazeComponent.extendComponent({
     const position = this.currentData().position;
     const title = textarea.val().trim();
 
-    const formComponent = this.childComponents('addCardForm')[0];
     let sortIndex;
     if (position === 'top') {
       sortIndex = Utils.calculateIndex(null, firstCardDom).base;
@@ -50,6 +50,7 @@ BlazeComponent.extendComponent({
       sortIndex = Utils.calculateIndex(lastCardDom, null).base;
     }
 
+    const formComponent = this.cardFormComponent();
     const members = formComponent.members.get();
     const labelIds = formComponent.labels.get();
     const customFields = formComponent.customFields.get();
@@ -131,6 +132,16 @@ BlazeComponent.extendComponent({
     }
   },
 
+  cardFormComponent() {
+    for (const inlinedForm of this.childComponents('inlinedForm')) {
+      const [addCardForm] = inlinedForm.childComponents('addCardForm');
+      if (addCardForm) {
+        return addCardForm;
+      }
+    }
+    return null;
+  },
+
   scrollToBottom() {
     const container = this.firstNode();
     $(container).animate({

client/components/lists/listHeader.js

@@ -1,3 +1,5 @@
+import { TAPi18n } from '/imports/i18n';
+
 let listsColors;
 Meteor.startup(() => {
   listsColors = Lists.simpleSchema()._schema.color.allowedValues;

client/components/main/brokenCards.css

@@ -0,0 +1,28 @@
+.broken-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+  border-width: 3px !important;
+  border-color: #808080 !important;
+  border-style: solid;
+  border-radius: 5px;
+  padding: 1.5rem;
+  background-color: #fff;
+}
+.broken-cards-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.broken-cards-card-title {
+  font-weight: bold;
+}
+.broken-cards-context {
+  display: inline-block;
+}
+.broken-cards-context-separator {
+  font-weight: bold;
+}
+.broken-cards-null {
+  color: #8b0000;
+  font-style: italic;
+}

client/components/main/brokenCards.styl

@@ -1,31 +0,0 @@
-.broken-cards-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-  border-width: 3px !important
-  border-color: grey !important
-  border-style: solid
-  border-radius: 5px
-  padding: 1.5rem
-  background-color: white
-
-.broken-cards-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto
-
-.broken-cards-card-title
-  font-weight: bold
-  //padding: 10px
-
-.broken-cards-context
-  display: inline-block
-
-.broken-cards-context-separator
-  font-weight: bold
-
-.broken-cards-context-list
-  //margin-bottom: 0.7rem
-
-.broken-cards-null
-  color: darkred
-  font-style: italic

client/components/main/dueCards.css

@@ -0,0 +1,5 @@
+.due-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}

client/components/main/dueCards.styl

@@ -1,4 +0,0 @@
-.due-cards-dueat-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto

client/components/main/editor.css

@@ -0,0 +1,7 @@
+.new-comment a.fa.fa-copy,
+.inlined-form a.fa.fa-copy {
+  float: right;
+  position: relative;
+  top: 20px;
+  right: 6px;
+}

client/components/main/editor.styl

@@ -1,7 +0,0 @@
-.new-comment,
-.inlined-form
-  a.fa.fa-copy
-    float: right
-    position: relative
-    top: 20px
-    right: 6px

client/components/main/fonts.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url("/fonts/roboto-regular.woff2") format('woff2'), url("/fonts/roboto-regular.woff") format('woff');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url("/fonts/roboto-bold.woff2") format('woff2'), url("/fonts/roboto-bold.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins'), local('Poppins-Regular'), url("/fonts/poppins-regular.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url("/fonts/poppins-medium.woff") format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url("/fonts/poppins-bold.woff") format('woff');
+}

client/components/main/fonts.styl

@@ -1,41 +0,0 @@
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 400
-  src: local('Roboto'),
-       local('Roboto-Regular'),
-       url('/fonts/roboto-regular.woff2') format('woff2'),
-       url('/fonts/roboto-regular.woff') format('woff')
-
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 700
-  src: local('Roboto Bold'),
-       local('Roboto-Bold'),
-       url('/fonts/roboto-bold.woff2') format('woff2'),
-       url('/fonts/roboto-bold.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 400
-  src: local('Poppins'),
-       local('Poppins-Regular'),
-       url('/fonts/poppins-regular.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 500
-  src: local('Poppins Medium'),
-       local('Poppins-Medium'),
-       url('/fonts/poppins-medium.woff') format('woff')
-
-@font-face
-  font-family: 'Poppins'
-  font-style: normal
-  font-weight: 700
-  src: local('Poppins Bold'),
-       local('Poppins-Bold'),
-       url('/fonts/poppins-bold.woff') format('woff')

client/components/main/globalSearch.css

@@ -0,0 +1,117 @@
+.global-search-board-wrapper {
+  border-radius: 8px;
+  min-width: 400px;
+  border-width: 8px;
+  border-color: #808080;
+  border-style: solid;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-board-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  background-color: #808080;
+  color: #fff;
+}
+.global-search-swimlane-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  padding-bottom: 0.4rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.global-search-list-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 0.7rem;
+}
+.global-search-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  padding: 1.5rem;
+  padding-top: 0.75rem;
+  display: inline-block;
+  min-width: 250px;
+  max-width: 350px;
+}
+.global-search-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.global-search-results-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-field-name {
+  font-weight: bold;
+}
+.global-search-context {
+  display: inline-block;
+}
+.global-search-context-separator {
+  font-weight: bold;
+}
+.global-search-context-list {
+  margin-bottom: 0.7rem;
+}
+.global-search-error-messages {
+  color: #8b0000;
+}
+.global-search-page {
+  width: 40%;
+  min-width: 400px;
+  margin-right: auto;
+  margin-left: auto;
+  line-height: 150%;
+}
+.global-search-page h1 {
+  margin-top: 2rem;
+}
+.global-search-page h2 {
+  margin-top: 1rem;
+}
+.global-search-query-input {
+  width: 90% !important;
+  margin-right: auto;
+  margin-left: auto;
+}
+.global-search-operator {
+  font-family: Courier;
+}
+.global-search-value {
+  font-family: Courier;
+  font-style: italic;
+}
+code {
+  color: #000;
+  background-color: #d3d3d3;
+  padding: 0.1rem !important;
+  font-size: 0.8rem !important;
+}
+.list-title {
+  background-color: #a9a9a9;
+}
+.global-search-footer {
+  border: none;
+  width: 100%;
+}
+.global-search-next-page {
+  border: none;
+  text-align: right;
+}
+.global-search-previous-page {
+  border: none;
+  text-align: left;
+}
+.global-search-instructions li {
+  margin-bottom: 0.3rem;
+}

client/components/main/globalSearch.js

@@ -1,3 +1,4 @@
+import { TAPi18n } from '/imports/i18n';
 import { CardSearchPagedComponent } from '../../lib/cardSearch';
 import Boards from '../../../models/boards';
 import { Query, QueryErrors } from '../../../config/query-classes';

client/components/main/globalSearch.styl

@@ -1,121 +0,0 @@
-.global-search-board-wrapper
-  border-radius: 8px
-  //padding: 0.5rem
-  min-width: 400px
-  border-width: 8px
-  border-color: grey
-  border-style: solid
-  margin-bottom: 2rem
-  margin-right: auto
-  margin-left: auto
-
-.global-search-board-title
-  font-size: 1.4rem
-  font-weight: bold
-  padding: 0.5rem
-  background-color: grey
-  color: white
-
-.global-search-swimlane-title
-  font-size: 1.1rem
-  font-weight: bold
-  padding: 0.5rem
-  padding-bottom: 0.4rem
-  margin-top: 0
-  margin-bottom: 0.5rem
-  //border-top: black 1px solid
-  //border-bottom: black 1px solid
-  text-align: center
-
-.swimlane-default-color
-  background-color: lightgrey
-
-.global-search-list-title
-  font-weight: bold
-  font-size: 1.1rem
-  //padding-bottom: 0
-  //margin-bottom: 0
-  text-align: center
-  margin-bottom: 0.7rem
-
-.global-search-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  padding: 1.5rem
-  padding-top: 0.75rem
-  display: inline-block
-  min-width: 250px
-  max-width: 350px
-
-.global-search-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.global-search-results-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto
-
-.global-search-field-name
-  font-weight: bold
-
-.global-search-context
-  display: inline-block
-
-.global-search-context-separator
-  font-weight: bold
-
-.global-search-context-list
-  margin-bottom: 0.7rem
-
-.global-search-error-messages
-  color: darkred
-
-.global-search-page
-  width: 40%
-  min-width: 400px
-  margin-right: auto
-  margin-left: auto
-  line-height: 150%
-
-.global-search-page h1
-  margin-top: 2rem;
-
-.global-search-page h2
-  margin-top: 1rem;
-
-.global-search-query-input
-  width: 90% !important
-  margin-right: auto
-  margin-left: auto
-
-.global-search-operator
-  font-family: Courier
-
-.global-search-value
-  font-family: Courier
-  font-style: italic
-
-code
-  color: black
-  background-color: lightgrey
-  padding: 0.1rem !important
-  font-size: 0.8rem !important
-
-.list-title
-  background-color: darkgray
-
-.global-search-footer
-  border: none
-  width: 100%
-
-.global-search-next-page
-  border: none
-  text-align: right;
-
-.global-search-previous-page
-  border: none
-  text-align: left;
-
-.global-search-instructions li
-  margin-bottom: 0.3rem

client/components/main/header.css

@@ -0,0 +1,266 @@
+#header {
+  color: #fff;
+  transition: background-color 0.4s;
+  background: #2980b9;
+  z-index: 17;
+}
+#header #header-main-bar {
+  height: 40px;
+  padding: 7px 10px 0;
+}
+#header #header-main-bar h1 {
+  font-size: 20px;
+  line-height: 1.7em;
+  padding: 0 10px;
+  margin: 0;
+  margin-right: 10px;
+  float: left;
+  border-radius: 3px;
+}
+#header #header-main-bar h1 .board-header-watch-icon {
+  padding-left: 7px;
+}
+#header #header-main-bar h1 a.fa,
+#header #header-main-bar h1 a i.fa {
+  color: #fff;
+}
+#header #header-main-bar h1 .back-btn {
+  font-size: 0.9em;
+  margin-right: 10px;
+}
+#header #header-main-bar .wekan-logo {
+  margin: 3px auto auto;
+  width: 97px;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+  float: right;
+}
+#header #header-main-bar .wekan-logo:hover {
+  opacity: 0.9;
+}
+#header #header-main-bar .board-header-btns {
+  display: block;
+  margin-top: 3px;
+  width: auto;
+}
+#header #header-main-bar .board-header-btns.left {
+  float: left;
+}
+#header #header-main-bar .board-header-btns.right {
+  float: right;
+}
+#header #header-main-bar .board-header-btn {
+  border-radius: 3px;
+  color: #f2f2f2;
+  padding: 0;
+  height: 28px;
+  font-size: 13px;
+  float: left;
+  overflow: hidden;
+  line-height: 28px;
+  margin: 0 2px;
+}
+#header #header-main-bar .board-header-btn i.fa {
+  float: left;
+  display: block;
+  line-height: 28px;
+  color: #f2f2f2;
+  margin: 0 10px;
+}
+#header #header-main-bar .board-header-btn i.fa + span {
+  display: inline-block;
+  margin-top: 1px;
+  margin-right: 10px;
+}
+#header #header-main-bar .board-header-btn .board-header-btn-close {
+  float: right;
+}
+#header #header-main-bar .board-header-btn .board-header-btn-close i.fa {
+  margin: 0 6px;
+}
+#header #header-main-bar .board-header-btn.is-active,
+#header #header-main-bar h1.is-clickable.is-active,
+#header #header-main-bar .board-header-btn:hover:not(.is-disabled),
+#header #header-main-bar h1.is-clickable:hover:not(.is-disabled) {
+  background: rgba(0,0,0,0.15);
+}
+#header #header-main-bar .separator {
+  margin: 2px 4px;
+  border-left: 1px solid rgba(255,255,255,0.3);
+  height: 24px;
+  float: left;
+}
+#header-quick-access {
+  color: #fff;
+  transition: background-color 0.4s;
+  background: #2573a7;
+  height: 28px;
+  font-size: 12px;
+  display: flex;
+  z-index: 1000;
+  padding: 10px 0px;
+}
+#header-quick-access .allBoards {
+  font-size: 14px;
+  padding: 4px 15px;
+}
+#header-quick-access a {
+  text-decoration: none;
+}
+#header-quick-access #header-user-bar,
+#header-quick-access #header-new-board-icon,
+#header-quick-access ul li {
+  color: #d4d4d4;
+}
+#header-quick-access #header-user-bar .fa,
+#header-quick-access #header-new-board-icon .fa,
+#header-quick-access ul li .fa {
+  color: inherit;
+}
+#header-quick-access #header-user-bar a:hover,
+#header-quick-access #header-new-board-icon a:hover,
+#header-quick-access ul li a:hover,
+#header-quick-access #header-user-bar a.is-active,
+#header-quick-access #header-new-board-icon a.is-active,
+#header-quick-access ul li a.is-active {
+  color: #fff;
+}
+#header-quick-access ul.header-quick-access-list {
+  transition: opacity 0.2s;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  padding: 10px;
+  margin: -10px;
+}
+#header-quick-access ul.header-quick-access-list li {
+  display: inline;
+  width: auto;
+  color: #d9d9d9;
+  padding: 12px 0px;
+  margin: -10px 0px;
+}
+#header-quick-access ul.header-quick-access-list li a {
+  padding: 12px 10px;
+  margin: -10px 0px;
+}
+#header-quick-access ul.header-quick-access-list li a .viewer {
+  display: inline;
+  white-space: nowrap;
+}
+#header-quick-access ul.header-quick-access-list li a .viewer p {
+  display: inline;
+  white-space: nowrap;
+}
+#header-quick-access ul.header-quick-access-list li.current {
+  color: #f2f2f2;
+}
+#header-quick-access ul.header-quick-access-list li.current.empty {
+  padding: 12px 10px 12px 10px;
+}
+#header-quick-access ul.header-quick-access-list li:first-child .fa-home,
+#header-quick-access ul.header-quick-access-list li:nth-child(3) .fa-globe {
+  margin-right: 5px;
+}
+#header-quick-access ul.header-quick-access-list li a.js-create-board {
+  margin-left: 5px;
+}
+#header-quick-access #header-user-bar,
+#header-quick-access #header-new-board-icon {
+  flex-shrink: 0;
+}
+#header-quick-access #header-user-bar {
+  margin: 2px 0;
+}
+#header-quick-access #header-user-bar .header-user-bar-avatar {
+  float: left;
+  position: relative;
+  top: -5px;
+  margin-right: 5px;
+}
+#header-quick-access #header-user-bar .header-user-bar-avatar .member {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  margin-top: 1px;
+}
+#header-quick-access #header-user-bar .header-user-bar-name {
+  margin: 4px 8px 0 0;
+  float: left;
+}
+#header-quick-access #header-user-bar .header-user-bar-name i.fa-chevron-down {
+  margin-right: 4px;
+}
+#header-quick-access #header-new-board-icon {
+  flex-grow: 1;
+  margin: 6px 5px 0;
+  width: 12px;
+}
+@media screen and (max-width: 800px) {
+  #header #header-main-bar {
+    height: 40px;
+  }
+  #header #header-main-bar .board-header-btns {
+    margin-top: 0px;
+  }
+  #header #header-main-bar .board-header-btn {
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+  }
+  #header #header-main-bar .board-header-btn i.fa {
+    line-height: 32px;
+  }
+  #header #header-main-bar .board-header-btn i.fa + span {
+    display: none;
+  }
+  #header-quick-access {
+    transition: background-color 0.4s;
+    width: 100%;
+    z-index: 30;
+  }
+  #header-quick-access ul {
+    width: calc(100% - 60px);
+    margin-right: 10px;
+  }
+  #header-quick-access ul li {
+    height: 100%;
+  }
+  #header-quick-access ul li a {
+    height: 100%;
+  }
+  #header-quick-access span .fa-home {
+    font-size: 26px;
+    margin-top: -2px;
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+  #header-quick-access #header-new-board-icon {
+    display: none;
+  }
+  #header-quick-access #header-user-bar {
+    right: 0px;
+    padding: 10px;
+    margin: -8px 0 -10px -10px;
+  }
+}
+.announcement .viewer {
+  display: inline-block;
+}
+.announcement,
+.offline-warning {
+  width: 100%;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  background: #f8ecbd;
+  clear: both;
+}
+.announcement p,
+.offline-warning p {
+  margin: 7px;
+  padding: 0;
+}
+#headerIsSettingDatabaseCallDone {
+  display: none;
+}

client/components/main/header.styl

@@ -1,258 +0,0 @@
-@import 'nib'
-
-#header
-  color: white
-  transition: background-color 0.4s
-  background: #2980B9
-  z-index: 17
-
-  #header-main-bar
-    height: 40px
-    padding: 7px 10px 0
-
-    h1
-      font-size: 20px
-      line-height: 1.7em
-      padding: 0 10px
-      margin: 0
-      margin-right: 10px
-      float: left
-      border-radius: 3px
-
-      .board-header-watch-icon
-        padding-left: 7px
-
-      a.fa, a i.fa
-        color: white
-
-      .back-btn
-        font-size: 0.9em
-        margin-right: 10px
-
-    .wekan-logo
-      margin: 3px auto auto
-      width: 97px
-      opacity: 0.6
-      transition: opacity 0.15s
-      float: right
-
-      &:hover
-        opacity: 0.9
-
-    .board-header-btns
-      display: block
-      margin-top: 3px
-      width: auto
-
-      // XXX Use a flexbox instead of floats?
-      &.left
-        float: left
-
-      &.right
-        float: right
-
-    .board-header-btn
-      border-radius: 3px
-      color: darken(white, 5%)
-      padding: 0
-      height: 28px
-      font-size: 13px
-      float: left
-      overflow: hidden
-      line-height: @height
-      margin: 0 2px
-
-      i.fa
-        float: left
-        display: block
-        line-height: 28px
-        color: darken(white, 5%)
-        margin: 0 10px
-
-        + span
-          display: inline-block
-          margin-top: 1px
-          margin-right: 10px
-
-      .board-header-btn-close
-        float: right
-
-        i.fa
-          margin: 0 6px
-
-    .board-header-btn,
-    h1.is-clickable
-      &.is-active,
-      &:hover:not(.is-disabled)
-        background: rgba(0, 0, 0, .15)
-
-    .separator
-      margin: 2px 4px
-      border-left: 1px solid rgba(255, 255, 255, .3)
-      height: 24px
-      float: left
-
-#header-quick-access
-  color: white
-  transition: background-color 0.4s
-  background: #2573a7
-  height: 28px
-  font-size: 12px
-  display: flex
-  z-index: 1000
-  padding: 10px 0px
-
-  .allBoards
-      font-size: 14px
-      padding:4px 15px
-    a
-      text-decoration: none;
-
-  #header-user-bar,
-  #header-new-board-icon,
-  ul li
-    color: darken(white, 17%)
-
-    .fa
-      color: inherit
-
-    a:hover, a.is-active
-      color: white
-
-  ul.header-quick-access-list
-    transition: opacity 0.2s
-    overflow-x: auto
-    overflow-y: hidden
-    white-space: nowrap
-    padding: 10px
-    margin: -10px
-
-    li
-      display: inline
-      width: auto
-      color: darken(white, 15%)
-      padding: 12px 0px
-      margin: -10px 0px
-
-      a
-        padding: 12px 10px
-        margin: -10px 0px
-
-        .viewer
-          display: inline
-          white-space: nowrap
-
-          p
-            display: inline
-            white-space: nowrap
-
-      &.current
-        color: darken(white, 5%)
-
-      &.current.empty
-        padding: 12px 10px 12px 10px
-
-      &:first-child .fa-home,&:nth-child(3) .fa-globe
-        margin-right: 5px
-
-      a.js-create-board
-        margin-left: 5px
-
-  #header-user-bar,
-  #header-new-board-icon
-    flex-shrink: 0
-
-  #header-user-bar
-    margin: 2px 0
-
-    .header-user-bar-avatar
-      float: left
-      position: relative
-      top: -5px
-      margin-right: 5px
-
-      .member
-        width: 24px
-        height: @width
-        margin: 0
-        margin-top: 1px
-
-    .header-user-bar-name
-      margin: 4px 8px 0 0
-      float: left
-
-      i.fa-chevron-down
-        margin-right: 4px
-
-  #header-new-board-icon
-    flex-grow: 1
-    margin: 6px 5px 0
-    width: 12px
-
-@media screen and (max-width: 800px)
-  #header
-    #header-main-bar
-      height: 40px
-
-      .board-header-btns
-        margin-top: 0px
-
-      .board-header-btn
-        height: 32px
-        line-height: @height
-        font-size: 15px
-
-        i.fa
-          line-height: 32px
-
-          + span
-            display: none
-
-  #header-quick-access
-    transition: background-color 0.4s
-    width: 100%
-    z-index: 30
-
-    ul
-      width: calc(100% - 60px)
-      margin-right: 10px
-
-      li
-        height: 100%
-
-        a
-          height: 100%
-
-    span
-      .fa-home
-          font-size: 26px
-          margin-top: -2px
-          margin-right: 10px
-          margin-left: 10px
-
-    #header-new-board-icon
-      display: none
-
-    #header-user-bar
-      right: 0px
-      padding: 10px
-      margin: -8px 0 -10px -10px
-
-.announcement .viewer
-  display: inline-block
-
-.announcement,
-.offline-warning
-  width: 100%
-  text-align: center
-  padding: 0
-  margin: 0
-  background: #F8ECBD
-  clear: both
-
-  p
-    margin: 7px
-    padding: 0
-
-#headerIsSettingDatabaseCallDone
-  display: none;

client/components/main/keyboardShortcuts.css

@@ -0,0 +1,20 @@
+.shortcuts-list .shortcuts-list-item {
+  border-bottom: 1px solid #bfbfbf;
+  padding: 10px 5px;
+}
+.shortcuts-list .shortcuts-list-item:last-child {
+  border-bottom: none;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys {
+  margin-top: 5px;
+  float: right;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys kbd {
+  padding: 5px 8px;
+  margin: 5px;
+  font-size: 18px;
+}
+.shortcuts-list .shortcuts-list-item .shortcuts-list-item-action {
+  font-size: 1.4em;
+  margin: 5px;
+}

client/components/main/keyboardShortcuts.styl

@@ -1,20 +0,0 @@
-.shortcuts-list
-  .shortcuts-list-item
-    border-bottom: 1px solid darken(white, 25%)
-    padding: 10px 5px
-
-    &:last-child
-      border-bottom: none
-
-    .shortcuts-list-item-keys
-      margin-top: 5px
-      float: right
-
-      kbd
-        padding: 5px 8px
-        margin: 5px
-        font-size: 18px
-
-    .shortcuts-list-item-action
-      font-size: 1.4em
-      margin: 5px

client/components/main/layouts.css

@@ -0,0 +1,683 @@
+/* Fixed missing 'import nib' stylesheet reset and extra li bullet points
+ * https://github.com/wekan/wekan/issues/4512#issuecomment-1129347536
+ * https://github.com/stylus/nib/blob/master/lib/nib/reset.styl
+ */
+a, abbr, acronym, address, applet, big, blockquote, body, caption, cite,
+code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5,
+h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre,
+q, s, samp, small, span, strike, strong, sub, sup,
+table, tbody, td, tfoot, th, thread, tr, tt, ul, var {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+ol, ul {
+  list-style: none;
+}
+a img {
+  border: none;
+}
+/* reset body */
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+/* reset table cell */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+caption, td, th {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+/* reset html5 */
+article, aside, canvas, details, figcaption,
+  figure, footer, header, hgroup, menu, nav,
+  section, summary, main {
+  display: block;
+}
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+audio:not([controls]),[hidden] {
+  display: none;
+}
+
+/* End of reset css */
+
+
+* {
+  -webkit-box-sizing: unset;
+  box-sizing: unset;
+}
+.note-popover .popover-content .note-color-palette div .note-color-btn,
+.panel-heading.note-toolbar .note-color-palette div .note-color-btn {
+  background: none;
+}
+a:focus {
+  outline: unset;
+  outline-offset: unset;
+}
+a:hover,
+a:focus {
+  color: unset;
+  text-decoration: unset;
+}
+.badge {
+  display: unset;
+  min-width: unset;
+  padding: unset;
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  color: unset;
+  text-align: unset;
+  white-space: unset;
+  vertical-align: unset;
+  background-color: unset;
+  border-radius: unset;
+}
+html,
+body,
+input,
+select,
+textarea,
+button {
+  font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  line-height: 18px;
+  color: #4d4d4d;
+}
+html {
+  font-size: 100%;
+  max-height: 100%;
+  user-select: none;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  background: #dedede;
+  margin: 0;
+  position: relative;
+  z-index: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+#content {
+  position: relative;
+  flex: 1;
+  overflow-x: hidden;
+}
+#content .sk-spinner {
+  margin-top: 30vh;
+}
+#content > .wrapper {
+  margin-top: 10px;
+  padding: 15px;
+}
+#modal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 100;
+  overflow-y: auto;
+}
+#modal .modal-content {
+  width: 500px;
+  min-height: 160px;
+  margin: 42px auto;
+  padding: 12px;
+  border-radius: 4px;
+  background: #dedede;
+  z-index: 110;
+}
+#modal .modal-content h2 {
+  margin-bottom: 25px;
+}
+#modal .modal-content .modal-close-btn {
+  display: block;
+  float: right;
+  font-size: 24px;
+}
+#modal .modal-content-wide {
+  width: 800px;
+  min-height: 0px;
+  margin: 42px auto;
+  padding: 12px;
+  border-radius: 4px;
+  background: #dedede;
+  z-index: 110;
+}
+#modal .modal-content-wide h2 {
+  margin-bottom: 25px;
+}
+#modal .modal-content-wide .modal-close-btn {
+  display: block;
+  float: right;
+  font-size: 24px;
+}
+h1 {
+  font-size: 22px;
+  line-height: 1.2em;
+  margin: 0 0 10px;
+}
+h2 {
+  font-size: 18px;
+  line-height: 1.2em;
+  margin: 0 0 9px;
+}
+h3,
+h4,
+h5,
+h6 {
+  font-size: 16px;
+  line-height: 1.25em;
+  margin: 0 0 6px;
+}
+.quiet,
+.quiet a {
+  color: #8c8c8c;
+}
+.error,
+.error a {
+  color: #eb3800;
+}
+.no-items-message {
+  color: #666;
+  margin: 30px 0;
+  text-align: center;
+}
+.warning {
+  background: #f0ecdb;
+  border-radius: 3px;
+  color: #aa8f09;
+  padding: 6px 8px;
+}
+.warning a {
+  color: #aa8f09;
+}
+.small {
+  font-size: 0.8em;
+}
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+a.is-disabled,
+a.is-disabled:hover {
+  cursor: default;
+  text-decoration: none;
+}
+span a {
+  text-decoration: underline;
+}
+strong {
+  font-weight: bold;
+}
+p {
+  user-select: text;
+}
+p a {
+  text-decoration: underline;
+  word-wrap: break-word;
+}
+table,
+p {
+  margin-bottom: 8px;
+}
+pre {
+  margin: 15px 0;
+  white-space: pre;
+  max-height: 516px;
+}
+pre,
+code,
+tt {
+  font-family: lucida console, monospace;
+  line-height: 1.25em;
+}
+blockquote {
+  margin: 8px 0 8px 8px;
+  border-left: 1px solid #ccc;
+  color: #666;
+  padding: 0 0 0 8px;
+}
+hr {
+  height: 1px;
+  border: 0;
+  border: none;
+  width: 100%;
+  background: #dbdbdb;
+  color: #dbdbdb;
+  margin: 15px 0;
+  padding: 0;
+}
+table,
+td,
+th {
+  vertical-align: top;
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+td,
+th {
+  padding: 5px;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+th {
+  font-weight: 700;
+}
+thead {
+  background: #fff;
+  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%);
+}
+tbody {
+  background-color: #fff;
+}
+dl,
+dt {
+  margin-bottom: 8px;
+}
+dd {
+  margin: 0 0 16px 24px;
+}
+kbd {
+  padding: 1px 3px;
+  margin: 3px;
+  font-weight: bold;
+  background: #fafafa;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  color: unset;
+  box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
+}
+.clear {
+  clear: both;
+}
+.hide {
+  display: none;
+}
+.show {
+  display: block;
+}
+.bold {
+  font-weight: 700;
+}
+.center {
+  text-align: center;
+}
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.first {
+  margin-left: 0;
+  padding-left: 0;
+}
+.last {
+  margin-right: 0;
+  padding-right: 0;
+}
+.top {
+  margin-top: 0;
+  padding-top: 0;
+}
+.bottom {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.wrapper {
+  width: calc(100% - 20px);
+  margin: 0 auto;
+}
+.relative {
+  position: relative;
+}
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+.pointer {
+  cursor: pointer;
+}
+.ellip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.underline {
+  text-decoration: underline;
+}
+.lowercase {
+  text-transform: lowercase;
+}
+.invisible {
+  visibility: hidden;
+}
+.wrapword {
+  word-wrap: break-word;
+}
+.grab {
+  cursor: grab;
+}
+.grabbing {
+  cursor: grabbing;
+}
+.textcomplete-dropdown {
+  z-index: 2000 !important;
+}
+.fa.fa-times-thin:before {
+  content: '\00d7';
+}
+.fa.fa-globe.colorful,
+.fa.fa-bell.colorful {
+  color: #4caf50;
+}
+.fa.fa-lock.colorful,
+.fa.fa-bell-slash.colorful {
+  color: #f44336;
+}
+.fa.fa-eye.colorful {
+  color: #4336f4;
+}
+.pop-over .pop-over-list li a:not(.disabled):hover .fa,
+.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful {
+  color: #fff;
+}
+.pop-over .pop-over-list li a:not(.disabled):hover .fa:hover,
+.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful:hover {
+  color: #fff;
+}
+a.fa,
+a i.fa {
+  color: #a6a6a6;
+}
+a:not(.disabled):hover.fa,
+a:not(.disabled).is-active.fa,
+a:not(.disabled):hover i.fa,
+a:not(.disabled).is-active i.fa {
+  color: #666;
+}
+.ui-draggable-dragging {
+  z-index: 200;
+}
+.atMention {
+  background: #dbdbdb;
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin: -1px 0;
+  display: inline-block;
+}
+.atMention.me {
+  background: #cfdfe8;
+}
+.big-message {
+  display: block;
+  margin: 75px auto;
+  text-align: center;
+  max-width: 600px;
+}
+.big-message h1 {
+  font-size: 26px;
+  margin-bottom: 24px;
+}
+.big-message p {
+  font-size: 18px;
+  line-height: 22px;
+}
+.gutter {
+  margin-left: 38px;
+}
+.viewer {
+  min-height: 18px;
+  display: block;
+  word-wrap: break-word;
+}
+.viewer table {
+  word-wrap: normal;
+  word-break: normal;
+}
+.viewer ol {
+  list-style-type: decimal;
+  padding-left: 20px;
+  padding-bottom: 10px;
+}
+.viewer ul {
+  list-style-type: initial;
+  padding-left: 20px;
+  padding-bottom: 10px;
+}
+.viewer em {
+  font-style: italic;
+}
+.viewer pre {
+  padding: 10px 12px 7px;
+  background: #dedede;
+  overflow-y: auto;
+}
+.viewer a {
+  text-decoration: underline;
+}
+.viewer a:hover {
+  color: #333;
+}
+.basicTabs-container .tabs-content-container {
+  padding: 0;
+  padding-top: 15px;
+}
+@media screen and (max-width: 800px) {
+  #content {
+    margin: 1px 0px 0px 0px;
+    height: calc(100% - 0px);
+  }
+  #content > .wrapper {
+    margin-top: 0px;
+  }
+  .wrapper {
+    height: calc(100% - 31px);
+    margin: 0px;
+  }
+  .panel-default {
+    width: 83vw;
+  }
+}
+.inline-input {
+  height: 37px;
+  margin: 8px 10px 0 0;
+  width: 50px;
+}
+.select-authentication {
+  width: 100%;
+}
+.auth-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.auth-layout .auth-dialog {
+  margin: 0 !important;
+}
+.loadingText {
+  text-align: center;
+}
+.lds-roller {
+  display: block;
+  margin: auto;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 32px 32px;
+}
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #dedede;
+  margin: -3px 0 0 -3px;
+}
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+  top: 50px;
+  left: 50px;
+}
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+  top: 54px;
+  left: 45px;
+}
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+  top: 57px;
+  left: 39px;
+}
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+.lds-roller div:nth-child(4):after {
+  top: 58px;
+  left: 32px;
+}
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+.lds-roller div:nth-child(5):after {
+  top: 57px;
+  left: 25px;
+}
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+  top: 54px;
+  left: 19px;
+}
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+  top: 50px;
+  left: 14px;
+}
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+  top: 45px;
+  left: 10px;
+}
+#isSettingDatabaseCallDone {
+  display: none;
+}
+.at-link {
+  color: #17683a;
+  text-decoration: underline;
+  text-decoration-color: #17683a;
+}
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-o-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+@-moz-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-webkit-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-o-keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@keyframes flexGrowIn {
+  from {
+    height: 100%;
+  }
+}
+@-moz-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

client/components/main/layouts.js

@@ -1,10 +1,6 @@
-BlazeLayout.setRoot('body');
+import { TAPi18n } from '/imports/i18n';
 
-const i18nTagToT9n = i18nTag => {
-  // t9n/i18n tags are same now, see: https://github.com/softwarerero/meteor-accounts-t9n/pull/129
-  // but we keep this conversion function here, to be aware that that they are different system.
-  return i18nTag;
-};
+BlazeLayout.setRoot('body');
 
 let alreadyCheck = 1;
 let isCheckDone = false;
@@ -73,11 +69,6 @@ Template.userFormsLayout.onRendered(() => {
     AccountsTemplates.state.form.keys,
     validator,
   );
-
-  const i18nTag = navigator.language;
-  if (i18nTag) {
-    T9n.setLanguage(i18nTagToT9n(i18nTag));
-  }
   EscapeActions.executeAll();
 });
 
@@ -102,11 +93,11 @@ Template.userFormsLayout.helpers({
   getLegalNoticeWithWritTraduction(){
     let spanLegalNoticeElt = $("#legalNoticeSpan");
     if(spanLegalNoticeElt != null && spanLegalNoticeElt != undefined){
-      spanLegalNoticeElt.html(TAPi18n.__('acceptance_of_our_legalNotice', {}, T9n.getLanguage() || 'en'));
+      spanLegalNoticeElt.html(TAPi18n.__('acceptance_of_our_legalNotice', {}));
     }
     let atLinkLegalNoticeElt = $("#legalNoticeAtLink");
     if(atLinkLegalNoticeElt != null && atLinkLegalNoticeElt != undefined){
-      atLinkLegalNoticeElt.html(TAPi18n.__('legalNotice', {}, T9n.getLanguage() || 'en'));
+      atLinkLegalNoticeElt.html(TAPi18n.__('legalNotice', {}));
     }
     return true;
   },
@@ -124,165 +115,27 @@ Template.userFormsLayout.helpers({
   },
 
   languages() {
-    return _.map(TAPi18n.getLanguages(), (lang, code) => {
-      const tag = code;
-      let name = lang.name;
-      if (lang.name === 'br') {
-        name = 'Brezhoneg';
-      } else if (lang.name === 'ar-EG') {
-        // ar-EG = Arabic (Egypt), simply Masri (مَصرى, [ˈmɑsˤɾi], Egyptian, Masr refers to Cairo)
-        name = 'مَصرى';
-      } else if (lang.name === 'cs-CZ') {
-        name = 'čeština (Česká republika)';
-      } else if (lang.name === 'de-CH') {
-        name = 'Deutsch (Schweiz)';
-      } else if (lang.name === 'de-AT') {
-        name = 'Deutsch (Österreich)';
-      } else if (lang.name === 'en-BR') {
-        name = 'English (Brazil)';
-      } else if (lang.name === 'en-DE') {
-        name = 'English (Germany)';
-      } else if (lang.name === 'en-IT') {
-        name = 'English (Italy)';
-      } else if (lang.name === 'en-YS') {
-        name = 'English (Yeshivish)';
-      } else if (lang.name === 'et-EE') {
-        name = 'eesti keel (Eesti)';
-      } else if (lang.name === 'fa-IR') {
-        // fa-IR = Persian (Iran)
-        name = 'فارسی/پارسی (ایران‎)';
-      } else if (lang.name === 'fr-BE') {
-        name = 'Français (Belgique)';
-      } else if (lang.name === 'fr-CA') {
-        name = 'Français (Canada)';
-      } else if (lang.name === 'fr-CH') {
-        name = 'Français (Schweiz)';
-      } else if (lang.name === 'gu-IN') {
-        // gu-IN = Gurajati (India)
-        name = 'ગુજરાતી';
-      } else if (lang.name === 'he-IL') {
-        // he-IL = Hebrew (Israel)
-        name = 'עברית (ישראל)';
-      } else if (lang.name === 'hi-IN') {
-        // hi-IN = Hindi (India)
-        name = 'हिंदी (भारत)';
-      } else if (lang.name === 'ig') {
-        name = 'Igbo';
-      } else if (lang.name === 'lv') {
-        name = 'Latviešu';
-      } else if (lang.name === 'latviešu valoda') {
-        name = 'Latviešu';
-      } else if (lang.name === 'ms-MY') {
-        // ms-MY = Malay (Malaysia)
-        name = 'بهاس ملايو';
-      } else if (lang.name === 'el-GR') {
-        // el-GR = Greek (Greece)
-        name = 'Ελληνικά (Ελλάδα)';
-      } else if (lang.name === 'Español') {
-        name = 'español';
-      } else if (lang.name === 'es_419') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'es-419') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'Español de América Latina') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'es-LA') {
-        name = 'español de América Latina';
-      } else if (lang.name === 'Español de Argentina') {
-        name = 'español de Argentina';
-      } else if (lang.name === 'Español de Chile') {
-        name = 'español de Chile';
-      } else if (lang.name === 'Español de Colombia') {
-        name = 'español de Colombia';
-      } else if (lang.name === 'Español de México') {
-        name = 'español de México';
-      } else if (lang.name === 'es-PY') {
-        name = 'español de Paraguayo';
-      } else if (lang.name === 'Español de Paraguayo') {
-        name = 'español de Paraguayo';
-      } else if (lang.name === 'Español de Perú') {
-        name = 'español de Perú';
-      } else if (lang.name === 'Español de Puerto Rico') {
-        name = 'español de Puerto Rico';
-      } else if (lang.name === 'gl-ES') {
-        name = 'Galego (España)';
-      } else if (lang.name === 'ko-KR') {
-        name = '한국어(한국)';
-      } else if (lang.name === 'nl-NL') {
-        name = 'Nederlands (Nederland)';
-      } else if (lang.name === 'oc') {
-        name = 'Occitan';
-      } else if (lang.name === 'pl-PL') {
-        name = 'polski (Polska)';
-      } else if (lang.name === 'ru-UA') {
-        name = 'Русский (Украина)';
-      } else if (lang.name === 'st') {
-        name = 'Sãotomense';
-      } else if (lang.name === 'uz-AR') {
-        name = "o'zbek (arab)";
-      } else if (lang.name === 'uz-LA') {
-        name = "o'zbek (lotin)";
-      } else if (lang.name === 'uz-UZ') {
-        name = "o'zbek (O'zbekiston)";
-      } else if (lang.name === 'uk-UA') {
-        name = 'українська (Україна)';
-      } else if (lang.name === 've-CC') {
-        name = 'vèneto';
-      } else if (lang.name === 've-PP') {
-        name = 'vepsän kelʹ';
-      } else if (lang.name === 've') {
-        name = 'Tshivenḓa';
-      } else if (lang.name === 'vi-VN') {
-        name = 'Tiếng Việt (Việt Nam)';
-      } else if (lang.name === 'vo') {
-        name = 'Volapük';
-      } else if (lang.name === 'vl-SS') {
-        name = 'Vlaams';
-      } else if (lang.name === 'wa') {
-        name = 'walon';
-      } else if (lang.name === 'wa-RR') {
-        name = 'Wáray-Wáray';
-      } else if (lang.name === 'wo') {
-        name = 'ولوفل';
-      } else if (lang.name === 'cy-GB') {
-        name = 'Welsh (UK)';
-      } else if (lang.name === 'fy-NL') {
-        name = 'Westerlauwersk Frysk';
-      } else if (lang.name === 'xh') {
-        name = 'isiXhosa';
-      } else if (lang.name === 'yi') {
-        name = 'ייִדיש, יידיש';
-      } else if (lang.name === 'yo') {
-        name = 'Èdè Yorùbá';
-      } else if (lang.name === 'zu-ZA') {
-        name = 'isiZulu (Ningizimu Afrika)';
-      } else if (lang.name === 'zu') {
-        name = 'isiZulu';
-      } else if (lang.name === '繁体中文（台湾）') {
-        // Traditional Chinese (Taiwan)
-        name = '繁體中文（台灣）';
-      }
-      return { tag, name };
-    }).sort(function(a, b) {
-      if (a.name === b.name) {
-        return 0;
-      } else {
-        return a.name > b.name ? 1 : -1;
-      }
-    });
+    return TAPi18n.getSupportedLanguages()
+      .map(({ tag, name }) => ({ tag: tag, name }))
+      .sort((a, b) => {
+        if (a.name === b.name) {
+          return 0;
+        } else {
+          return a.name > b.name ? 1 : -1;
+        }
+      });
   },
 
   isCurrentLanguage() {
-    const t9nTag = i18nTagToT9n(this.tag);
-    const curLang = T9n.getLanguage() || 'en';
-    return t9nTag === curLang;
+    const curLang = TAPi18n.getLanguage();
+    return this.tag === curLang;
   },
 });
 
 Template.userFormsLayout.events({
   'change .js-userform-set-language'(event) {
-    const i18nTag = $(event.currentTarget).val();
-    T9n.setLanguage(i18nTagToT9n(i18nTag));
+    const tag = $(event.currentTarget).val();
+    TAPi18n.setLanguage(tag);
     event.preventDefault();
   },
   'click #at-btn'(event, templateInstance) {

client/components/main/layouts.styl

@@ -1,552 +0,0 @@
-@import 'nib'
-
-global-reset()
-
-*
-  -webkit-box-sizing: unset
-  box-sizing: unset
-
-.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn
-  background: none
-
-a:focus
-  outline: unset
-  outline-offset: unset
-
-a:hover,a:focus
-  color: unset
-  text-decoration: unset
-
-.badge
-  display: unset
-  min-width: unset
-  padding: unset
-  font-size: unset
-  font-weight: unset
-  line-height: unset
-  color: unset
-  text-align: unset
-  white-space: unset
-  vertical-align: unset
-  background-color: unset
-  border-radius: unset
-
-html, body, input, select, textarea, button
-  font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif
-  line-height: 18px
-  color: #4d4d4d
-
-html
-  font-size: 100%
-  max-height: 100%
-  user-select: none
-  -webkit-text-size-adjust: 100%
-
-body
-  background: darken(white, 13%)
-  margin: 0
-  position: relative
-  z-index: 0
-  overflow-y: auto
-  display: flex
-  flex-direction: column
-  height: 100vh
-
-#content
-  position: relative
-  flex: 1
-  overflow-x: hidden
-
-  .sk-spinner
-    margin-top: 30vh
-
-  > .wrapper
-    margin-top: 10px
-    padding: 15px
-
-#modal
-  position: absolute
-  top: 0
-  bottom: 0
-  left: 0
-  right: 0
-  background: rgba(0, 0, 0, 0.6)
-  z-index: 100
-  overflow-y: auto
-
-  .modal-content
-    width: 500px
-    min-height: 160px
-    margin: 42px auto
-    padding: 12px
-    border-radius: 4px
-    background: darken(white, 13%)
-    z-index: 110
-
-    h2
-      margin-bottom: 25px
-
-    .modal-close-btn
-      display: block
-      float: right
-      font-size: 24px
-
-  .modal-content-wide
-    width: 800px
-    min-height: 0px
-    margin: 42px auto
-    padding: 12px
-    border-radius: 4px
-    background: darken(white, 13%)
-    z-index: 110
-
-    h2
-      margin-bottom: 25px
-
-    .modal-close-btn
-      display: block
-      float: right
-      font-size: 24px
-
-h1
-  font-size: 22px
-  line-height: 1.2em
-  margin: 0 0 10px
-
-h2
-  font-size: 18px
-  line-height: 1.2em
-  margin: 0 0 9px
-
-h3, h4, h5, h6
-  font-size: 16px
-  line-height: 1.25em
-  margin: 0 0 6px
-
-.quiet, .quiet a
-  color: #8c8c8c
-
-.error, .error a
-  color: #eb3800
-
-.no-items-message
-  color: darken(white, 60%)
-  margin: 30px 0
-  text-align: center
-
-.warning
-  background: #f0ecdb
-  border-radius: 3px
-  color: #aa8f09
-  padding: 6px 8px
-
-  a
-    color: #aa8f09
-
-.small
-  font-size: 0.8em
-
-a
-  color: inherit
-  cursor: pointer
-  text-decoration: none
-
-  &.is-disabled,
-  &.is-disabled:hover
-    cursor: default
-    text-decoration: none
-
-span a
-  text-decoration: underline
-
-strong
-  font-weight: bold
-
-p
-  user-select: text
-
-  a
-    text-decoration: underline
-    word-wrap: break-word
-
-table, p
-  margin-bottom: 8px
-
-pre
-  margin: 15px 0
-  white-space: pre
-  max-height: 516px
-
-pre,
-code,
-tt
-  font-family: lucida console, monospace
-  line-height: 1.25em
-
-blockquote
-  margin: 8px 0 8px 8px
-  border-left: 1px solid #ccc
-  color: #666
-  padding: 0 0 0 8px
-
-hr
-  height: 1px
-  border: 0
-  border: none
-  width: 100%
-  background: #dbdbdb
-  color: #dbdbdb
-  margin: 15px 0
-  padding: 0
-
-table, td, th
-  vertical-align: top
-  border-top: 1px solid #ccc
-  border-left: 1px solid #ccc
-
-td, th
-  padding: 5px
-  border-right: 1px solid #ccc
-  border-bottom: 1px solid #ccc
-
-th
-  font-weight: 700
-
-thead
-  background: #fff
-  background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
-
-tbody
-  background-color: #fff
-
-dl, dt
-  margin-bottom: 8px
-
-dd
-  margin: 0 0 16px 24px
-
-kbd
-  padding: 1px 3px
-  margin: 3px
-  font-weight: bold
-  background: darken(white, 2%)
-  border-radius: 3px
-  border: 1px solid darken(white, 10%)
-  color: unset
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
-
-.clear
-  clear: both
-
-.clearfix
-  clearfix()
-
-.hide
-  display: none
-
-.show
-  display: block
-
-.bold
-  font-weight: 700
-
-.center
-  text-align: center
-
-.left
-  float: left
-
-.right
-  float: right
-
-.first
-  margin-left: 0
-  padding-left: 0
-
-.last
-  margin-right: 0
-  padding-right: 0
-
-.top
-  margin-top: 0
-  padding-top: 0
-
-.bottom
-  margin-bottom: 0
-  padding-bottom: 0
-
-.wrapper
-  width: calc(100% - 20px)
-  margin: 0 auto
-
-.relative
-  position: relative
-
-.block
-  display: block
-
-.inline
-  display: inline
-
-.inline-block
-  display: inline-block
-
-.pointer
-  cursor: pointer
-
-.ellip
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-
-.underline
-  text-decoration: underline
-
-.lowercase
-  text-transform: lowercase
-
-.invisible
-  visibility: hidden
-
-.wrapword
-  word-wrap: break-word
-
-.grab
-  cursor: grab
-
-.grabbing
-  cursor: grabbing
-
-.textcomplete-dropdown
-  z-index: 2000 !important;
-
-// Implement a thiner close icon as suggested in
-// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
-.fa.fa-times-thin:before
-  content: '\00d7'
-
-.fa.fa-globe.colorful, .fa.fa-bell.colorful
-  color: #4caf50
-
-.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
-  color: #f44336
-
-.fa.fa-eye.colorful
-  color: #4336f4
-
-.pop-over .pop-over-list li a:not(.disabled):hover
-  .fa, .fa.colorful
-    color: white
-
-    &:hover
-      color: white
-
-a
-  &.fa, i.fa
-    color: darken(white, 35%)
-
-  &:not(.disabled):hover, &:not(.disabled).is-active
-    &.fa, i.fa
-      color: darken(white, 60%)
-
-.ui-draggable-dragging
-  z-index: 200
-
-.atMention
-  background: #dbdbdb
-  border-radius: 3px
-  padding: 1px 4px
-  margin: -1px 0
-  display: inline-block
-
-  &.me
-    background: #cfdfe8
-
-.big-message
-  display: block
-  margin: 75px auto
-  text-align: center
-  max-width: 600px
-
-  h1
-    font-size: 26px
-    margin-bottom: 24px
-
-  p
-    font-size: 18px
-    line-height: 22px
-
-.gutter
-  margin-left: 38px
-
-.viewer
-  min-height: 18px
-  display: block
-  word-wrap: break-word
-
-  table
-    word-wrap: normal
-    word-break: normal
-
-  ol
-    list-style-type: decimal
-    padding-left: 20px
-    padding-bottom: 10px
-
-  ul
-    list-style-type: initial
-    padding-left: 20px
-    padding-bottom: 10px
-
-  em
-    font-style : italic
-
-  pre
-    padding: 10px 12px 7px
-    background: darken(white, 13%)
-    overflow-y: auto
-
-  a
-    text-decoration: underline
-    &:hover
-      color: #333
-
-.basicTabs-container .tabs-content-container
-  padding: 0
-  padding-top: 15px
-
-@keyframes fadeIn
-  from
-    opacity: 0
-
-@keyframes flexGrowIn
-  from
-    // Support IE11 https://github.com/wekan/wekan/pull/646
-    height: 100%
-
-@media screen and (max-width: 800px)
-  #content
-    margin: 1px 0px 0px 0px
-    height: calc(100% - 0px)
-
-    > .wrapper
-      margin-top: 0px
-
-  .wrapper
-    height: calc(100% - 31px)
-    margin: 0px
-
-  .panel-default
-    width: 83vw
-
-.inline-input
-  height: 37px
-  margin: 8px 10px 0 0
-  width: 50px
-
-.select-authentication
-  width: 100%
-
-.auth-layout
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
-
-  .auth-dialog
-    margin: 0 !important
-
-.loadingText
-  text-align: center
-
-.lds-roller
-  display: block
-  margin: auto
-  position: relative
-  width: 64px
-  height: 64px
-
-  div
-    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
-    transform-origin: 32px 32px
-
-  div:after
-    content: " "
-    display: block
-    position: absolute
-    width: 6px
-    height: 6px
-    border-radius: 50%
-    background: #dedede
-    margin: -3px 0 0 -3px
-
-  div:nth-child(1)
-    animation-delay: -0.036s
-
-  div:nth-child(1):after
-    top: 50px
-    left: 50px
-
-  div:nth-child(2)
-    animation-delay: -0.072s
-
-  div:nth-child(2):after
-    top: 54px
-    left: 45px
-
-  div:nth-child(3)
-    animation-delay: -0.108s
-
-  div:nth-child(3):after
-    top: 57px
-    left: 39px
-
-  div:nth-child(4)
-    animation-delay: -0.144s
-
-  div:nth-child(4):after
-    top: 58px
-    left: 32px
-
-  div:nth-child(5)
-    animation-delay: -0.18s
-
-  div:nth-child(5):after
-    top: 57px
-    left: 25px
-
-  div:nth-child(6)
-    animation-delay: -0.216s
-
-  div:nth-child(6):after
-    top: 54px
-    left: 19px
-
-  div:nth-child(7)
-    animation-delay: -0.252s
-
-  div:nth-child(7):after
-    top: 50px
-    left: 14px
-
-  div:nth-child(8)
-    animation-delay: -0.288s
-
-  div:nth-child(8):after
-    top: 45px
-    left: 10px
-
-@keyframes lds-roller
-  0%
-    transform: rotate(0deg)
-
-  100%
-    transform: rotate(360deg)
-
-#isSettingDatabaseCallDone
-  display: none;
-
-.at-link
-  color: #17683a;
-  text-decoration: underline;
-  text-decoration-color: #17683a;

client/components/main/myCards.css

@@ -0,0 +1,73 @@
+.my-cards-board-wrapper {
+  border-radius: 0 0 4px 4px;
+  min-width: 400px;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a2a2a2;
+}
+.my-cards-board-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  background-color: #808080;
+  color: #fff;
+}
+.my-cards-swimlane-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  padding-bottom: 0.4rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.my-cards-list-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 0.7rem;
+}
+.my-cards-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  display: inline-grid;
+  min-width: 250px;
+  max-width: 350px;
+}
+.my-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.my-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.my-cards-board-table thead {
+  border-bottom: 3px solid #4d4d4d;
+  background-color: transparent;
+}
+.my-cards-board-table th,
+.my-cards-board-table td {
+  border: 0;
+}
+.my-cards-board-table tr {
+  border-bottom: 2px solid #a2a2a2;
+}
+.my-cards-card-title-table {
+  font-weight: bold;
+  padding-left: 2px;
+}
+.my-cards-board-badge {
+  width: 36px;
+  height: 24px;
+  float: left;
+  border-radius: 5px;
+  margin-right: 5px;
+}

client/components/main/myCards.jade

@@ -76,7 +76,7 @@ template(name="myCards")
                                 | {{list.title}}
                               td
                                 a(href=board.originRelativeUrl)
-                                  | {{board.title}}
+                                | {{board.title}}
                               td
                                 | {{swimlane.title}}
 

client/components/main/myCards.styl

@@ -1,77 +0,0 @@
-.my-cards-board-wrapper
-  border-radius: 0 0 4px 4px;
-  //padding: 0.5rem
-  min-width: 400px
-  margin-bottom: 2rem
-  margin-right: auto
-  margin-left: auto
-  border-width: 2px
-  border-style: solid
-  border-color: #a2a2a2
-
-.my-cards-board-title
-  font-size: 1.4rem
-  font-weight: bold
-  padding: 0.5rem
-  background-color: grey
-  color: white
-
-.my-cards-swimlane-title
-  font-size: 1.1rem
-  font-weight: bold
-  padding: 0.5rem
-  padding-bottom: 0.4rem
-  margin-top: 0
-  margin-bottom: 0.5rem
-  //border-top: black 1px solid
-  //border-bottom: black 1px solid
-  text-align: center
-
-.swimlane-default-color
-  background-color: lightgrey
-
-.my-cards-list-title
-  font-weight: bold
-  font-size: 1.1rem
-  //padding-bottom: 0
-  //margin-bottom: 0
-  text-align: center
-  margin-bottom: 0.7rem
-
-.my-cards-list-wrapper
-  margin: 1rem
-  border-radius: 5px
-  //padding: 1.5rem
-  //padding-top: 0.75rem
-  display: inline-grid
-  min-width: 250px
-  max-width: 350px
-
-.my-cards-card-wrapper
-  margin-top: 0
-  margin-bottom: 10px
-
-.my-cards-dueat-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto
-
-.my-cards-board-table
-  thead
-    border-bottom: 3px solid #4d4d4d
-    background-color: transparent
-  th, td
-    border: 0
-  tr
-    border-bottom: 2px solid #a2a2a2
-
-.my-cards-card-title-table
-  font-weight: bold
-  padding-left: 2px
-
-.my-cards-board-badge
-  width:36px
-  height:24px
-  float:left
-  border-radius:5px
-  margin-right: 5px

client/components/main/popup.css

@@ -0,0 +1,346 @@
+.pop-over {
+  background: #fff;
+  border-radius: 3px;
+  border: 1px solid #dbdbdb;
+  border-bottom-color: #c2c2c2;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
+  position: absolute;
+  width: 300px;
+  z-index: 99999;
+  margin-top: 5px;
+}
+.pop-over hr {
+  margin: 4px 0px;
+}
+.pop-over p,
+.pop-over textarea,
+.pop-over input[type="text"],
+.pop-over input[type="email"],
+.pop-over input[type="password"],
+.pop-over input[type="file"] {
+  width: 100%;
+}
+.pop-over select {
+  width: 100%;
+  margin-bottom: 14px;
+}
+.pop-over textarea {
+  height: 72px;
+}
+.pop-over form a span {
+  padding: 0 0.5rem;
+}
+.pop-over .header {
+  height: 36px;
+  position: relative;
+  margin-bottom: 8px;
+  background: #f7f7f7;
+  border-bottom: 1px solid #dcdcdc;
+  color: #666;
+}
+.pop-over .header .header-title {
+  display: block;
+  line-height: 32px;
+  padding-top: 4px;
+  margin: 0 10px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pop-over .header .back-btn {
+  float: left;
+  overflow: hidden;
+  width: 30px;
+  transition: width 0.2s;
+}
+.pop-over .header .back-btn i.fa {
+  margin: 10px;
+  margin-top: 12px;
+}
+.pop-over .header .back-btn.is-hidden {
+  width: 0;
+}
+.pop-over .header .close-btn {
+  padding: 10px 10px 10px 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.pop-over.no-title .header {
+  background: none;
+}
+.pop-over .content-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+.pop-over .content-container {
+  width: 5000px;
+  max-height: 550px;
+  transition: transform 0.2s;
+}
+.pop-over .content-container .content {
+  width: 280px;
+  padding: 0 10px 10px;
+  float: left;
+}
+.pop-over .content-container .content.no-height {
+  height: 20px;
+}
+.pop-over .quiet {
+  padding: 6px 6px 4px;
+}
+.pop-over.search-over {
+  background: #f0f0f0;
+  min-height: 114px;
+}
+.pop-over.search-over .header {
+  display: none;
+}
+.pop-over.search-over .content {
+  padding: 8px 4px 8px 10px;
+  margin-right: 8px;
+}
+.pop-over .at-form .at-error,
+.pop-over .at-form .at-result {
+  padding: 8px 12px;
+  margin: -8px -10px 10px;
+}
+.pop-over .at-form .at-error {
+  background: #ef9a9a;
+}
+.pop-over .at-form .at-result {
+  background: #b2dfdb;
+}
+.pop-over .sk-spinner {
+  margin: 40px auto;
+}
+.pop-over .popup-container-depth-1 {
+  transform: translateX(-300px);
+}
+.pop-over .popup-container-depth-2 {
+  transform: translateX(-600px);
+}
+.pop-over .popup-container-depth-3 {
+  transform: translateX(-900px);
+}
+.pop-over .popup-container-depth-4 {
+  transform: translateX(-1200px);
+}
+.pop-over .popup-container-depth-5 {
+  transform: translateX(-1500px);
+}
+.pop-over .popup-container-depth-6 {
+  transform: translateX(-1800px);
+}
+.select-members-list,
+.select-avatars-list {
+  margin-bottom: 8px;
+}
+.pop-over-list li {
+  display: block;
+  clear: both;
+}
+.pop-over-list li > a {
+  clear: both;
+  cursor: pointer;
+  display: block;
+  font-weight: 700;
+  padding: 1.5px 10px;
+  position: relative;
+  margin: 0 -10px;
+  text-decoration: none;
+  overflow: hidden;
+  line-height: 33px;
+}
+.pop-over-list li > a .item-name {
+  display: block;
+  width: auto;
+  padding-right: 22px;
+}
+.pop-over-list li > a:not(.disabled):hover {
+  background-color: #005377;
+  color: #fff;
+}
+.pop-over-list li > a:not(.disabled):hover .sub-name,
+.pop-over-list li > a:not(.disabled):hover .quiet {
+  color: #eee;
+}
+.pop-over-list li > a:not(.disabled):hover .unread-indicator {
+  background: #fff;
+}
+.pop-over-list li > a .sub-name {
+  color: #8c8c8c;
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 15px;
+}
+.pop-over-list li > a.current {
+  background-color: #e2e6e9;
+}
+.pop-over-list li > a:active {
+  background-color: #2e85b8;
+}
+.pop-over-list li > a.disabled {
+  color: #8c8c8c;
+  cursor: default;
+}
+.pop-over-list li > a.disabled .vis-icon {
+  opacity: 0.35;
+}
+.pop-over-list li > a.disabled:hover {
+  background: none;
+}
+.pop-over-list li > a.disabled:hover .sub-name,
+.pop-over-list li > a.disabled:hover .quiet {
+  color: #8c8c8c;
+}
+.pop-over-list li > a.disabled:active {
+  background: none;
+}
+.pop-over-list.inset li > a {
+  border-radius: 3px;
+  margin: 0;
+}
+.pop-over-list .pop-over-list.checkable .fa-check {
+  display: none;
+  position: absolute;
+  top: 6px;
+  right: 12px;
+}
+.pop-over-list .pop-over-list.checkable li.active a {
+  padding-right: 28px;
+}
+.pop-over-list .pop-over-list.checkable li.active a .fa-check {
+  display: block;
+}
+.pop-over.miniprofile .header {
+  border-bottom-color: transparent;
+  height: 30px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 60px;
+  z-index: 1;
+}
+.pop-over.miniprofile .header-title {
+  display: none;
+}
+.pop-over.miniprofile .pop-over-list {
+  padding-top: 8px;
+}
+.pop-over.miniprofile .miniprofile-header {
+  margin-top: 8px;
+  min-height: 56px;
+  position: relative;
+}
+.pop-over.miniprofile .miniprofile-header .member,
+.pop-over.miniprofile .miniprofile-header .avatar {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 50px;
+  width: 50px;
+}
+.pop-over.miniprofile .miniprofile-header .info {
+  margin: 0 0 0 64px;
+  word-wrap: break-word;
+}
+.pop-over.miniprofile .miniprofile-header .info h3 a {
+  text-decoration: none;
+}
+.pop-over.miniprofile .miniprofile-header .info h3 a:hover {
+  text-decoration: underline;
+}
+@media screen and (max-width: 800px) {
+  .pop-over {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    margin-top: 0px;
+    border: 0px solid #dbdbdb;
+  }
+  .pop-over .header {
+    color: #fff;
+    background: #2980b9;
+    height: 48px;
+    padding: 0px 0px;
+    border: 0px;
+    margin: 0px 0px;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+  }
+  .pop-over .header .header-title {
+    font-size: 20px;
+    font-weight: normal;
+    padding-top: 8px;
+  }
+  .pop-over .header .back-btn {
+    width: 30px;
+    padding: 8px 12px 8px 12px;
+  }
+  .pop-over .header .back-btn i.fa {
+    color: #fff;
+  }
+  .pop-over .header .close-btn {
+    padding: 10px 12px;
+  }
+  .pop-over .header .close-btn i.fa {
+    font-size: 24px;
+    color: #fff;
+  }
+  .pop-over .content-wrapper {
+    width: 100%;
+    height: calc(100% - 48px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin: 48px 0px 0px 0px;
+  }
+  .pop-over .content-container {
+    width: 1000%;
+    height: 100%;
+    max-height: 100%;
+  }
+  .pop-over .content-container .content {
+    width: calc(10% - 20px);
+    height: calc(100% - 20px);
+    padding: 10px;
+  }
+  .pop-over .content-container .content form {
+    margin: 10px 10px;
+    width: calc(100% - 20px);
+  }
+  .pop-over .content-container .content p,
+  .pop-over .content-container .content textarea,
+  .pop-over .content-container .content input[type="text"],
+  .pop-over .content-container .content input[type="email"],
+  .pop-over .content-container .content input[type="password"],
+  .pop-over .content-container .content input[type="file"] {
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .pop-over .pop-over-list li > a {
+    width: calc(100% - 20px);
+    margin: 0px 0px;
+  }
+  .pop-over .popup-container-depth-1 {
+    transform: translateX(-10%);
+  }
+  .pop-over .popup-container-depth-2 {
+    transform: translateX(-20%);
+  }
+  .pop-over .popup-container-depth-3 {
+    transform: translateX(-30%);
+  }
+  .pop-over .popup-container-depth-4 {
+    transform: translateX(-40%);
+  }
+  .pop-over .popup-container-depth-5 {
+    transform: translateX(-50%);
+  }
+  .pop-over .popup-container-depth-6 {
+    transform: translateX(-60%);
+  }
+}

client/components/main/popup.styl

@@ -1,324 +0,0 @@
-@import 'nib'
-
-$popupWidth = 300px
-
-.pop-over
-  background: #fff
-  border-radius: 3px
-  border: 1px solid #dbdbdb
-  border-bottom-color: #c2c2c2
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
-  position: absolute
-  width: $popupWidth
-  z-index: 99999
-  margin-top: 5px
-
-  hr
-    margin: 4px 0px
-
-  p,
-  textarea,
-  input[type="text"],
-  input[type="email"],
-  input[type="password"],
-  input[type="file"]
-    width: 100%
-
-  select
-    width: 100%
-    margin-bottom: 14px
-
-  textarea
-    height: 72px
-
-  form a span
-    padding: 0 0.5rem
-
-  .header
-    height: 36px
-    position: relative
-    margin-bottom: 8px
-    background: #F7F7F7
-    border-bottom: 1px solid #dcdcdc
-    color: darken(white, 60%)
-
-    .header-title
-      display: block
-      line-height: 32px
-      padding-top: 4px
-      margin: 0 10px
-      font-weight: bold
-      overflow: hidden
-      text-overflow: ellipsis
-      white-space: nowrap
-
-    .back-btn
-      float: left
-      overflow: hidden
-      width: 30px
-      transition: width 0.2s
-
-      i.fa
-        margin: 10px
-        margin-top: 12px
-
-      &.is-hidden
-        width: 0
-
-    .close-btn
-      padding: 10px 10px 10px 4px
-      position: absolute
-      top: 0
-      right: 0
-
-  &.no-title .header
-    background: none
-
-  .content-wrapper
-    width: 100%
-    overflow: hidden
-
-  .content-container
-    width: 5000px
-    max-height: 550px
-    transition: transform 0.2s
-
-    .content
-      width: $popupWidth - 20px
-      padding: 0 10px 10px
-      float: left
-
-      &.no-height
-        height: 20px
-
-  .quiet
-    padding: 6px 6px 4px
-
-  &.search-over
-    background: #f0f0f0
-    min-height: 114px
-
-    .header
-      display: none
-
-    .content
-      padding: 8px 4px 8px 10px
-      margin-right: 8px
-
-  .at-form
-    .at-error, .at-result
-      padding: 8px 12px
-      margin: -8px -10px 10px
-
-    .at-error
-      background: #ef9a9a
-
-    .at-result
-      background: #b2dfdb
-
-  .sk-spinner
-    margin: 40px auto
-
-  for depth in (1..6)
-    .popup-container-depth-{depth}
-      transform: translateX(- depth * $popupWidth)
-
-.select-members-list,
-.select-avatars-list
-  margin-bottom: 8px
-
-.pop-over-list
-  li
-    display: block
-    clear: both
-
-  li > a
-    clear: both
-    cursor: pointer
-    display: block
-    font-weight: 700
-    padding: 1.5px 10px
-    position: relative
-    margin: 0 -10px
-    text-decoration: none
-    overflow:hidden
-    line-height:33px
-
-    .item-name
-      display: block
-      width: auto
-      padding-right: 22px
-
-    &:not(.disabled):hover
-      background-color: #005377
-      color: #fff
-
-      .sub-name,
-      .quiet
-        color: #eee
-
-      .unread-indicator
-        background: #fff
-
-    .sub-name
-      color: #8c8c8c
-      display: block
-      font-size: 12px
-      font-weight: 400
-      line-height: 15px
-
-    &.current
-      background-color: #e2e6e9
-
-    &:active
-      background-color: #2e85b8
-
-    &.disabled
-      color: #8c8c8c
-      cursor: default
-
-      .vis-icon
-        opacity: .35
-
-      &:hover
-        background: none
-
-        .sub-name,
-        .quiet
-          color: #8c8c8c
-
-      &:active
-        background: none
-
-  &.inset li > a
-    border-radius: 3px
-    margin: 0
-
-  .pop-over-list.checkable
-    .fa-check
-      display: none
-      position: absolute
-      top: 6px
-      right: 12px
-
-    li.active a
-      padding-right: 28px
-
-      .fa-check
-        display: block
-
-.pop-over.miniprofile
-  .header
-    border-bottom-color: transparent
-    height: 30px
-    position: absolute
-    right: 0
-    top: 0
-    width: 60px
-    z-index: 1
-
-  .header-title
-    display: none
-
-  .pop-over-list
-    padding-top: 8px
-
-  .miniprofile-header
-    margin-top: 8px
-    min-height: 56px
-    position: relative
-
-    .member,
-    .avatar
-      position: absolute
-      top: 2px
-      left: 2px
-      height: 50px
-      width: @height
-
-    .info
-      margin: 0 0 0 64px
-      word-wrap: break-word
-
-      h3 a
-        text-decoration: none
-
-        &:hover
-          text-decoration: underline
-
-@media screen and (max-width: 800px)
-  .pop-over
-    width: 100%
-    height: 100%
-    overflow: hidden
-    margin-top: 0px
-    border: 0px solid #dbdbdb
-
-    .header
-      color: white
-      background: #2980B9
-      height: 48px
-      padding: 0px 0px
-      border: 0px
-      margin: 0px 0px
-      width: 100%
-      position: absolute
-      top: 0px
-
-      .header-title
-        font-size: 20px
-        font-weight: normal
-        padding-top: 8px
-
-      .back-btn
-        width: 30px
-        padding: 8px 12px 8px 12px
-
-        i.fa
-          color: white
-
-      .close-btn
-        padding: 10px 12px
-
-        i.fa
-          font-size: 24px
-          color: white
-
-    .content-wrapper
-      width: 100%
-      height: calc(100% - 48px)
-      overflow-y: scroll
-      overflow-x: hidden
-      margin: 48px 0px 0px 0px
-
-    .content-container
-      width: 1000%
-      height: 100%
-      max-height: 100%
-
-      .content
-        width: calc(10% - 20px)
-        height: calc(100% - 20px)
-        padding: 10px
-
-        form
-          margin: 10px 10px
-          width: calc(100% - 20px)
-
-        p,
-        textarea,
-        input[type="text"],
-        input[type="email"],
-        input[type="password"],
-        input[type="file"]
-          width: 100%
-          box-sizing: border-box
-
-    .pop-over-list
-      li > a
-        width: calc(100% - 20px)
-        margin: 0px 0px
-
-    for depth in (1..6)
-      .popup-container-depth-{depth}
-        transform: translateX(- depth * 10%)

client/components/main/spinner_bounce.css

@@ -0,0 +1,70 @@
+.sk-spinner-bounce {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+}
+.sk-spinner-bounce div {
+  width: 18px;
+  height: 18px;
+  background-color: #333;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+.sk-spinner-bounce .sk-bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.sk-spinner-bounce .sk-bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+@-moz-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-o-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

client/components/main/spinner_bounce.styl

@@ -1,44 +0,0 @@
-@import 'nib'
-
-// From https://github.com/tobiasahlin/SpinKit
-.sk-spinner-bounce {
-  margin: 100px auto 0;
-  width: 70px;
-  text-align: center;
-
-  div {
-    width: 18px;
-    height: 18px;
-    background-color: #333;
-
-    border-radius: 100%;
-    display: inline-block;
-    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-
-  .sk-bounce1 {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  .sk-bounce2 {
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-}
-
-@-webkit-keyframes sk-bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0) }
-  40% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes sk-bouncedelay {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  } 40% {
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
-  }
-}

client/components/main/spinner_cube.css

@@ -0,0 +1,123 @@
+.sk-spinner-cube {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+.sk-cube1,
+.sk-cube2 {
+  background-color: #333;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
+  animation: sk-cubemove 1.8s infinite ease-in-out;
+}
+.sk-cube2 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+@-webkit-keyframes sk-cubemove {
+  25% {
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  }
+  75% {
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    -webkit-transform: rotate(-360deg);
+  }
+}
+@-moz-keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}
+@-o-keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}
+@keyframes sk-cubemove {
+  25% {
+    transform: translateX(35px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(35px) translateY(35px) rotate(-179deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(35px) translateY(35px) rotate(-180deg);
+    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+}

client/components/main/spinner_cube.styl

@@ -1,52 +0,0 @@
-@import 'nib'
-
-// From https://github.com/tobiasahlin/SpinKit
-.sk-spinner-cube {
-  margin: 100px auto;
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-.sk-cube1, .sk-cube2 {
-  background-color: #333;
-  width: 15px;
-  height: 15px;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
-  animation: sk-cubemove 1.8s infinite ease-in-out;
-}
-
-.sk-cube2 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-@-webkit-keyframes sk-cubemove {
-  25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
-  50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
-  75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
-  100% { -webkit-transform: rotate(-360deg) }
-}
-
-@keyframes sk-cubemove {
-  25% {
-    transform: translateX(35px) rotate(-90deg) scale(0.5);
-    -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
-  } 50% {
-    transform: translateX(35px) translateY(35px) rotate(-179deg);
-    -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
-  } 50.1% {
-    transform: translateX(35px) translateY(35px) rotate(-180deg);
-    -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
-  } 75% {
-    transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-    -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-  } 100% {
-    transform: rotate(-360deg);
-    -webkit-transform: rotate(-360deg);
-  }
-}

client/components/main/spinner_cube_grid.css

@@ -1,64 +1,99 @@
-@import 'nib'
-
-// From https://github.com/tobiasahlin/SpinKit
 .sk-spinner-cube-grid {
   width: 40px;
   height: 40px;
   margin: 100px auto;
 }
-
 .sk-spinner-cube-grid .sk-cube-grid {
   width: 33%;
   height: 33%;
   background-color: #333;
   float: left;
   -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
 }
 .sk-spinner-cube-grid .sk-cube-grid1 {
   -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+  animation-delay: 0.2s;
+}
 .sk-spinner-cube-grid .sk-cube-grid2 {
   -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+  animation-delay: 0.3s;
+}
 .sk-spinner-cube-grid .sk-cube-grid3 {
   -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s; }
+  animation-delay: 0.4s;
+}
 .sk-spinner-cube-grid .sk-cube-grid4 {
   -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+  animation-delay: 0.1s;
+}
 .sk-spinner-cube-grid .sk-cube-grid5 {
   -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+  animation-delay: 0.2s;
+}
 .sk-spinner-cube-grid .sk-cube-grid6 {
   -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+  animation-delay: 0.3s;
+}
 .sk-spinner-cube-grid .sk-cube-grid7 {
   -webkit-animation-delay: 0s;
-          animation-delay: 0s; }
+  animation-delay: 0s;
+}
 .sk-spinner-cube-grid .sk-cube-grid8 {
   -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+  animation-delay: 0.1s;
+}
 .sk-spinner-cube-grid .sk-cube-grid9 {
   -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
-
+  animation-delay: 0.2s;
+}
 @-webkit-keyframes sk-cubeGridScaleDelay {
   0%, 70%, 100% {
     -webkit-transform: scale3D(1, 1, 1);
-            transform: scale3D(1, 1, 1);
-  } 35% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
     -webkit-transform: scale3D(0, 0, 1);
-            transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
+  }
+}
+@-moz-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    -webkit-transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
+  }
+}
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    -webkit-transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
+  }
+}
+@-o-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
+    -webkit-transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
   }
 }
-
 @keyframes sk-cubeGridScaleDelay {
   0%, 70%, 100% {
     -webkit-transform: scale3D(1, 1, 1);
-            transform: scale3D(1, 1, 1);
-  } 35% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
     -webkit-transform: scale3D(0, 0, 1);
-            transform: scale3D(0, 0, 1);
+    transform: scale3D(0, 0, 1);
   }
 }

client/components/main/spinner_dot.css

@@ -0,0 +1,104 @@
+.sk-spinner-dot {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  text-align: center;
+  -webkit-animation: sk-rotate 2s infinite linear;
+  animation: sk-rotate 2s infinite linear;
+}
+.sk-dot1,
+.sk-dot2 {
+  width: 40%;
+  height: 40%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+.sk-dot2 {
+  top: auto;
+  bottom: 0;
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+@-webkit-keyframes sk-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes sk-bounce {
+  0%, 100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+@-moz-keyframes sk-rotate {
+  100% {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes sk-rotate {
+  100% {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-o-keyframes sk-rotate {
+  100% {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes sk-rotate {
+  100% {
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+@-webkit-keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+@-o-keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}

client/components/main/spinner_dot.styl

@@ -1,51 +0,0 @@
-@import 'nib'
-
-// From https://github.com/tobiasahlin/SpinKit
-.sk-spinner-dot {
-  margin: 100px auto;
-  width: 40px;
-  height: 40px;
-  position: relative;
-  text-align: center;
-
-  -webkit-animation: sk-rotate 2.0s infinite linear;
-  animation: sk-rotate 2.0s infinite linear;
-}
-
-.sk-dot1, .sk-dot2 {
-  width: 40%;
-  height: 40%;
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  background-color: #333;
-  border-radius: 100%;
-
-  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
-  animation: sk-bounce 2.0s infinite ease-in-out;
-}
-
-.sk-dot2 {
-  top: auto;
-  bottom: 0;
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
-@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
-
-@-webkit-keyframes sk-bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
-  50% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes sk-bounce {
-  0%, 100% {
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 50% {
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
-  }
-}