Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Commit

Permalink
Add sensible defaults for viewports configuration
Browse files Browse the repository at this point in the history
These will probably be enough for 95% of all cases, and it makes sense
to provide those as default sizes. I got the small height
from http://stackoverflow.com/questions/12463643/mobile-safari-on-iphone-5-visible-area-size
and inferred the medium height from that.
  • Loading branch information
Henric Trotzig committed Jul 29, 2015
1 parent 2945aa9 commit 208623e
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 7 deletions.
11 changes: 5 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,16 @@ By default, Likadan renders examples in a 1024 wide window. If you have
components that render differently depending on available screen size you can
use the `viewports` option in the object passed in as the second argument to
`likadan.define`. These need to correspond to configured `viewports` in the
`.likadan.yaml` file. If you leave this out, the default viewport will be used,
which is either `'desktop'` (if you haven't configured any viewports), or the
first configured viewport that you have in your `.likadan.yaml` file
`.likadan.yaml` file. Likadan comes pre-configured with three default sizes:
`large` (1024x768), `medium` (640x888), and `small` (320x444).

```javascript
likadan.define('responsive component', function() {
var elem = document.createElement('div');
elem.setAttribute('class', '.responsive-component');
document.body.appendChild(elem);
return elem;
}, { viewports: ['desktop', 'mobile'] });
}, { viewports: ['large', 'small'] });
```

### Controlling the snapshot
Expand Down Expand Up @@ -93,10 +92,10 @@ stylesheets:
- application.css
snapshots_folder: ./snapshots
viewports:
desktop:
large:
width: 1024
height: 768
mobile:
small:
width: 320
height: 444
s3_access_key_id: <your acccess key id>
Expand Down
10 changes: 9 additions & 1 deletion lib/likadan_utils.rb
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@ def self.config
'port' => 4567,
'driver' => :firefox,
'viewports' => {
'desktop' => {
'large' => {
'width' => 1024,
'height' => 768
},
'medium' => {
'width' => 640,
'height' => 888
},
'small' => {
'width' => 320,
'height' => 444
}
}
}.merge(YAML.load(ERB.new(File.read(
Expand Down

0 comments on commit 208623e

Please sign in to comment.