add distraction free mode

css/notes.css

@@ -134,6 +134,10 @@
     z-index: 5;
 }
 
+#app-content .note-meta-right {
+	float: right;
+}
+
 #app-content .saving {
     background: url('../img/loading.gif') no-repeat right 15px top 15px / 24px !important;
     /* Overrides the snap.js animation making the loading icon to fly in app-content. */
@@ -205,6 +209,24 @@
 }
 
 
+/* distraction free styles */
+.distraction-free #header,
+.distraction-free #navigation,
+.distraction-free #app-navigation,
+.distraction-free #app-navigation-toggle {
+	display: none;
+}
+
+.distraction-free #content-wrapper {
+	padding-top: 0;
+}
+
+.distraction-free #app-content-container {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+
 /* larger screen sizes */
 @media only screen and (min-width: 769px) {
     /* use slightly more space on the left so all # signs of h3–h6 show */

js/app/controllers/notecontroller.js

@@ -27,4 +27,9 @@ app.controller('NoteController', function($routeParams, $scope, NotesModel,
         SaveQueue.add(note);
     }, 300);
 
-});
+    $scope.toggleDistractionFree = function() {
+        var body = angular.element(document).find('body')[0];
+        body.classList.toggle('distraction-free');
+    };
+
+});

templates/note.php

@@ -1,2 +1,2 @@
 	<textarea editor notes-timeout-change="save()" name="editor"></textarea>
-	<div class="note-meta">{{note.content | wordCount}}</div>
+	<div class="note-meta">{{note.content | wordCount}}</div><div class="note-meta">{{note.content | wordCount}}<span class="note-meta-right"><button class="icon-fullscreen" ng-click="toggleDistractionFree()"></button></span></div>