Iphone test

application.coffee

@PosterCtrl = ($scope) ->

  $scope.posters = [
    title: "Blade Runner"
    url: "http://cf2.imgobject.com/t/p/w342/keDKC1r2SyA6uDkEzzVyH8xUzW8.jpg"
  ,
    title: "Labyrinth"
    url: "http://cf2.imgobject.com/t/p/w342/40D6CVNGYbIgg7Sdt1jAYkFA08d.jpg"
  ,
    title: "Jaws"
    url: "http://cf2.imgobject.com/t/p/w342/l1yltvzILaZcx2jYvc5sEMkM7Eh.jpg"
  ,
    title: "Rear Window"
    url: "http://cf2.imgobject.com/t/p/w342/hgHLIpB7wPS2buqjge5edKJKZyR.jpg"
  ]

  $scope.selectedIndex = 0

  $scope.didFlick = ->
    console.log "flicked to position #{$scope.selectedIndex}!"

angular.module("flickable-demo", [])
  .directive "ngFlickable", ->
    (scope, element, attrs) ->
      $(element[0]).flickable {
        segments: 4,
        onStart: -> #scope.$apply('flicking = true'),
        onEnd: -> #scope.$apply('flicking = false')
        onScroll: (eventData, selectedIndex) ->
          scope.selectedIndex = selectedIndex
          scope.didFlick()
          #scope.$apply()
      }

index.haml

!!! 5
%html(ng-app="flickable-demo")
  %head
    %meta(name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width')
    %meta(name="apple-mobile-web-app-capable" content="yes")
    %meta(name="apple-mobile-web-app-status-bar-style" content="black-translucent")
    %title Iphone Test
    %script(src='http://code.angularjs.org/angular-1.0.0rc10.min.js')
    %script(src='http://zeptojs.com/zepto.min.js')
    %script(src='https://raw.github.com/tomlongo/Flickable.js/master/src/zepto.flickable.min.js')
    %script(src='/application.js')
    %link(href='https://raw.github.com/necolas/normalize.css/master/normalize.css' rel='stylesheet')
    %link(href='/screen.css' rel='stylesheet')
  %body(ng-controller="PosterCtrl")
    #stage
      #posters(ng-flickable)
        .poster(ng-repeat="poster in posters")
          %h2 {{poster.title}}
          %img(ng-src="{{poster.url}}")

screen.scss

body {
  margin: 0;
}

#stage {
  width: 320px;
  height: 416px;
  overflow: hidden;
}

#posters {
  width: 4*250px;
  //overflow: hidden;
  margin-left: 35px;
  margin-top: (416px - 375) / 2;
}

.poster {
  img::after {
    content: '';
    display: block;
    width: 100%;
    height: 10%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
  }

  width: 250px;
  height: 375px;
  float: left;
  position: relative;
  >* {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}