2.0.4 • Published 9 years ago
yoso-browsehappy v2.0.4
Yoso Browsehappy
An angular js directive for detect browser capabilities and show warning on missed app requirements.
If the browser missed required capabilities the user get a link to outdatedbrowser where he can update.
The browser capabilities are detected using Modernirz, which must be already implemented inside the project.
All browser capabilities Modernitz detect can be used inside yoso browsehappy. To enable detetection add the required feature as parameter inside the directive tag.
Install
$ npm install --save yoso-browsehappyUsage
Inject directive to your model:
angular.module('app.common.directives', [])
.directive('yosoBrowsehappy', require('yoso-browsehappy'));Insert into your template:
<yoso-browsehappy rgba svg touch></yoso-browsehappy>Add required feature as parameter inside the directive tag to enable detection for it.
Customize design
The colors are specified as SCSS variables, which can be simple overwritten/redefined. Following variables are available:
| Variable | description | default value |
|---|---|---|
| $browsehappy--font-color | The block font color | rgb(0, 0, 0) |
| $browsehappy--background-color | The block background color. The block goes over the full viewport. | rgb(255, 255, 255) |
| $browsehappy__message--font-color | Paragraph font color. Is used for the message description. | rgba(0, 0, 0, 0.6) |
| $browsehappy__signal--background-color | The signal (opps) background color. Is also used as link font color and invalid list item background color. | rgb(211, 61, 57) |
| $browsehappy__signal--font-color | The signal (opps) font color. Is also used as list item font color. | rgb(255, 255, 255) |
| $browsehappy__success--background-color | Is used for list success item background color. | rgb(145, 205, 0) |
| $browsehappy__success--font-color | Is used for list success item font color. | rgb(255, 255, 255) |