flexbox less mixins

Works for android, windows phone, ios, internet explorer, safari, chrome, firefox.

.flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flexbox-center() {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.flex(@values) {
    -webkit-box-flex: @values;
    -moz-box-flex:  @values;
    -ms-box-flex: @values;
    box-flex: @values;
    -webkit-flex:  @values;
    -ms-flex:  @values;
    flex:  @values;
}
.flex-direction-column {
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -ms-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}

Et alternativ til nasjonalbibliotekets egen webleser

Nasjonalbiblioteket har en leser i både HTML og Flash, men begge er for dårlige etter mitt syn. Her er noen av de tingene som jeg mener ikke fungerer optimalt:

  • Kræsjer ofte – ubrukelig på iPad
  • Dårlige muligheter for zoom
  • Dårlig kontroll over kvalitet
  • Ikke tilpasset fullscreen for iPad
  • Vanskelig å gå til bestemt side (liten scroller)
  • Vilkår i popup – unødvendig påtrengende

Dette kan du se demonstrert her: http://youtu.be/zvQaJ54-P4s

Så jeg utviklet meg en egen leser i AngularJS. Den er ikke ferdig enda, og mangler blant annet:

  • Søk etter bok – går bare til første treff
  • Søk etter tekst i bok

Men likevel er leseren fullt brukende! :-) Du finner den her: http://nbleser.herokuapp.com/

angular vertical align directive

angular.module('myApp', ['ngRoute', ...])
.directive('verticalCenter', function($window){
  // vertical center element on page
  return function(scope, element){
    var pixels;
    var w = angular.element($window);
    function setPixels(){
      var h = $window.innerHeight;
      var eh = element[0].clientHeight;
      pixels = (h - eh)/2 - 30;
      if (pixels < 50) { pixels = 50 + 'px'; }
      else             { pixels = pixels + 'px'; }
      element.css('margin-top', pixels);
    }
    setPixels();
    w.bind('resize', function(){
      setPixels();
    });
  }
});