https://github.com/mediapop/ember-viewport

Accurate vh units on mobile.
https://github.com/mediapop/ember-viewport

addon ember ember-addon

Last synced: about 2 months ago
JSON representation

Accurate vh units on mobile.

• Host: GitHub
• URL: https://github.com/mediapop/ember-viewport
• Owner: mediapop
• License: mit
• Created: 2018-11-07T12:14:21.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:36:47.000Z (about 2 years ago)
• Last Synced: 2024-04-26T01:42:47.149Z (8 months ago)
• Topics: addon, ember, ember-addon
• Language: JavaScript
• Size: 4.49 MB
• Stars: 0
• Watchers: 7
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
@mediapop/ember-viewport

==============================================================================

*This ember addon is maintained by [Media Pop](https://www.mediapop.co), a software consultancy. Hire us to solve your web application challenges.*

[![Build Status](https://travis-ci.org/mediapop/ember-viewport.svg?branch=master)](https://travis-ci.org/mediapop/ember-viewport)

[![Ember Observer Score](https://emberobserver.com/badges/-mediapop-ember-viewport.svg)](https://emberobserver.com/addons/@mediapop/ember-viewport)



[![dependencies](https://david-dm.org/mediapop/ember-viewport/status.svg)](https://david-dm.org/mediapop/ember-viewport)

[![devDependencies](https://david-dm.org/mediapop/ember-viewport/dev-status.svg)](https://david-dm.org/mediapop/ember-viewport?type=dev)

Provides a `viewport` service and inserts accurate faux-viewport units into CSS variable `--vh`. View the [demo app](https://mediapop.github.io/ember-viewport/) on mobile.

```css

/* Before */

.full-height {

  height: 100vh; /* Inaccurate on mobile */

}

/* After */

.full-height {

  height: calc(var(--vh) * 100);

}

```

It can also be used as a service:

```js

export default Component.create({

  viewport: service(),

  someProperty: computed('viewport.height', function(){

    return this.viewport.height / 2;

  })

});

```

Installation

------------------------------------------------------------------------------

```

ember install @mediapop/ember-viewport

```

Compatibility

------------------------------------------------------------------------------

* Ember.js v3.16 or above

* Ember CLI v2.13 or above

* Node.js v10 or above

Contributing

------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.

License

------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).