| 04 03 2016 16:34:52.983:WARN [karma]: No captured browser, open http://localhost:9876/ | |
| 04 03 2016 16:34:52.994:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/ | |
| 04 03 2016 16:34:53.000:INFO [launcher]: Starting browser PhantomJS | |
| 04 03 2016 16:34:53.106:ERROR [launcher]: Cannot start PhantomJS | |
| 04 03 2016 16:34:53.110:ERROR [phantomjs.launcher]: /Users/ncoden/Documents/Documents/Projects/Programmation/Web/2015/CaliOpen/repo/web-client-ng/node_modules/phantomjs/lib/phantom/bin/phantomjs: /Users/ncoden/Documents/Documents/Projects/Programmation/Web/2015/CaliOpen/repo/web-client-ng/node_modules/phantomjs/lib/phantom/bin/phantomjs: cannot execute binary file | |
| 04 03 2016 16:34:53.127:INFO [launcher]: Trying to start PhantomJS again (1/2). | |
| 04 03 2016 16:34:53.139:ERROR [phantomjs.launcher]: /Users/ncoden/Documents/Documents/Projects/Programmation/Web/2015/CaliOpen/repo/web-client-ng/node_modules/phantomjs/lib/phantom/bin/phantomjs: /Users/ncoden/Documents/Documents/Projects/Programmation/Web/2015 |
| ➜ bin git:(master) ✗ docker-compose run web-client-ng npm test | |
| npm info it worked if it ends with ok | |
| npm info using [email protected] | |
| npm info using [email protected] | |
| npm info pretest [email protected] | |
| npm info test [email protected] | |
| > [email protected] test /usr/share/caliopen/web-client-ng | |
| > karma start test/unit/karma.conf.js |
| npm info it worked if it ends with ok | |
| npm info using [email protected] | |
| npm info using [email protected] | |
| npm info pretest [email protected] | |
| npm info test [email protected] | |
| > [email protected] test /usr/share/caliopen/web-client-ng | |
| > karma start test/unit/karma.conf.js | |
| 04 03 2016 23:14:13.236:WARN [karma]: No captured browser, open http://localhost:9876/ |
| ERROR: 'Caught an exception!', Error{message: 'Reducer "selected" returned undefined handling "SELECT_TAB". To ignore an action, you must explicitly return the previous state.', line: 59058, sourceId: 140662261215680, sourceURL: 'http://localhost:9876/absolute/usr/share/caliopen/web-client-ng/src/js/app.js?621349bebc5b6d6ac0ac1352dcf3f74e701182e8', stack: 'Error: Reducer "selected" returned undefined handling "SELECT_TAB". To ignore an action, you must explicitly return the previous state. | |
| at http://localhost:9876/absolute/usr/share/caliopen/web-client-ng/src/js/app.js?621349bebc5b6d6ac0ac1352dcf3f74e701182e8:59058 | |
| at http://localhost:9876/absolute/usr/share/caliopen/web-client-ng/src/js/app.js?621349bebc5b6d6ac0ac1352dcf3f74e701182e8:59096', stackArray: [Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}]} | |
| PhantomJS 1.9.8 (Linux 0.0.0) Directive Layout TabList constructor has tabs FAILED | |
| Error: Reducer "selected" returned undefined handling "SELECT_TAB". To ignore an action, you m |
| // base | |
| @import "base/base"; | |
| @import "base/fonts"; | |
| @import "base/theme/dark"; | |
| // vendors | |
| @import "extension/bootstrap/custom"; | |
| @import "bootstrap"; | |
| @import "extension/bootstrap/grid"; | |
| @import "extension/bootstrap/scaffolding"; |
| api_1 | 2016-03-11 17:10:56,923 DEBUG [caliopen.api.user.authentication][waitress] Authentication via Access Token | |
| api_1 | 2016-03-11 17:10:57,048 ERROR [waitress][waitress] Exception when serving /api/v1/contacts/cc5f1e5d-2523-4d6f-a226-81e8134261f9 | |
| api_1 | Traceback (most recent call last): | |
| api_1 | File "/usr/local/lib/python2.7/dist-packages/waitress-0.8.10-py2.7.egg/waitress/channel.py", line 336, in service | |
| api_1 | task.service() | |
| api_1 | File "/usr/local/lib/python2.7/dist-packages/waitress-0.8.10-py2.7.egg/waitress/task.py", line 169, in service | |
| api_1 | self.execute() | |
| api_1 | File "/usr/local/lib/python2.7/dist-packages/waitress-0.8.10-py2.7.egg/waitress/task.py", line 388, in execute | |
| api_1 | app_iter = self.channel.server.application(env, start_response) | |
| api_1 | File "/usr/local/lib/python2.7/dist-packages/pyramid-1.5.8-py2.7.egg/pyramid/router.py", line 242, in __call__ |
| .co-random-page { | |
| .co-avatar { | |
| @media (max-width: $screen-xs-max) { | |
| @extend .co-avatar--medium; | |
| } | |
| } | |
| } |
#Objectif
L'objectif est d'avoir une structure CSS modulaire et sémantique. On utilise un ensemble de composants BEM. Le layout n'est composé que d'eux, vidé de tout "utilitaires".
#Composants
En plus d'adopter une approche BEM, l'ensemble des composants doivent:
A CSS architecture is subject to two opposing interests. For one hand, we want a set of generic and modular components we can use freely and easily maintain. On the other hand, we want an ergonomic interface and a semantic code, so specific to each task or showed information.
An unorganized CSS will tend to have across all components a high specificity. The presented architecture aims to enable a complex interface to have a modular, a generic, and therefore a maintainable code.
| @include breakpoint(medium) { | |
| .medium-float-left { float: left; } | |
| .medium-float-right { float: right; } | |
| .medium-no-float { float: none; } | |
| } | |
| @include breakpoint(large) { | |
| .large-float-left { float: left; } | |
| .large-float-right { float: right; } | |
| .large-no-float { float: none; } | |
| } |