jaseflow

"use strict";

describe("ListController", function() {
    beforeEach(module("dashboard"));

    var $controller;

    beforeEach(inject(function(_$controller_) {
        $controller = _$controller_; 
    }));

jaseflow

"use strict";

app.controller("ListCtrl", function($scope, $stateParams, $firebaseObject) {
    var ref = new Firebase("https://psi-dashboard.firebaseio.com/lists"),
        activeList = $stateParams.listName;

    $scope.lists = $firebaseObject(ref);
    $scope.results = $firebaseObject(ref.child(activeList));
    $scope.activeList = activeList;
    $scope.dataLoaded = false;

jaseflow

<style>
  .flex {
    display: flex;
  }
  div div:nth-child(3) {
    order: 2; /* Move third flex item to second spot */
  }
</style>
<div class="flex">
  <div>1</div>

jaseflow

<style>
  .flex {display: flex;}
  .grow {flex-grow: 1;}
  /* Assume there are more styles here to make the boxes blue */
</style>

<div class="flex">
  <div></div>
  <div class="grow"></div>
  <div></div>

jaseflow

<style>
  .flip-me-and-space-me-evenly {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  /* Assume there are more styles here to make the boxes blue */
</style>

<div class="flip-me-and-space-me-evenly">

jaseflow

.stack-it {
  display: flex;
  flex-direction: column;
}

jaseflow

<style>
  .horizontal-center {
    display: flex;
    justify-content: center;
  }
  /* Assume there are more styles here to make the boxes blue */
</style>

<div class="horizontal-center">
  <div></div>

jaseflow

<style>
  .space-around {
    display: flex;
    justify-content: space-around;
  }
  /* Assume there are more styles here to make the boxes blue */
</style>

<div class="space-around">
  <div></div>

jaseflow

<style>
  .space-between {
    display: flex;
    justify-content: space-between;
  }
  /* Assume there are more styles here to make the boxes blue */
</style>

<div class="space-between">
  <div></div>

jaseflow

.dead-center {
  display: flex;
  justify-content: center; /* main axis (horizontal) */
  align-items: center; /* cross axis (vertical) */
}