RSS

Tag Archives: bootstrap

Navbar template (Bootstrap / Jade)

The navbar template translated into Jade.

Here it is

nav.navbar.navbar-default.navbar-fixed-top.navbar-inverse
  div.container
    div.navbar-header
      button.navbar-toggle.collapsed(type="button", data-toggle="collapse", data-target="#navbar-full", aria-expanded="false")
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand(href="#")
        img(alt="Logo", src="...")

    div.navbar-collapse.collapse(id="navbar-full")
      ul.nav.navbar-nav.navbar-right
        li
          a(href="#")
            span.glyphicon.glyphicon-asterisk(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline One
        li.dropdown
          a.dropdown-toggle(href="#", data-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false")
            span.glyphicon.glyphicon-heart(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline Two
            span.caret 
          ul.dropdown-menu
            li: a(href="#") Two / One
            li: a(href="#") Two / Two
            li.divider(role="separator")
            li: a(href="#") Two / Three
        li
          a(href="#")
            span.glyphicon.glyphicon-music(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline Three
 
Leave a comment

Posted by on 2015/06/29 in dev

 

Tags: , ,

Angular datepick(er) template

It is just wrapper for this datepicker. It is a good example of a custom directive and an easy way to have all your datepickers initialization in one point.
One note: the “Angular directives for Bootstrap” requires Angular 1.2.x, but I successfully -with a fix- decided to use 1.3.x for my needs.

Prepare the template

I created a jade file, named datepick.jade.
You can use plain HTML, if preferred.

p.input-group
  input.form-control(type="text", is-open="opened", datepicker-popup="{{format}}", ng-model="dt", show-button-bar="false")
  span.input-group-btn
    button.btn.btn-default(type="button", ng-click="open($event)")
      i.glyphicon.glyphicon-calendar

Inject the directive in Angular

The interesting part here is the (isolated) scope and the controller directive.
The scope renames the given “value” into a “dt” scope variable, mainly for readability.
The controller does all the initialization for the component.

angular.module("myapp").directive("datepick", function() {
  return {
    restrict: 'E'
    , templateUrl: 'datepick.jade'
    , replace: true
    , scope: {
      dt: '=?value'
      , format: '@'
    }
    , controller: function($scope, $filter) {
      $scope.format = ($scope.format || 'dd-MMMM-yyyy');
      $scope.dt = $filter('date')($scope.dt, $scope.format); // this fix is needed by angular >= 1.3.0
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = !$scope.opened;
      };
    }
  }
});

Use it!

Again it is jade syntax:

datepick(value="user.birthDate")
 
1 Comment

Posted by on 2015/03/10 in dev

 

Tags: ,