Browse Source

W1.7: Added bootstrap fixed navbar at top.

Frederic G. MARAND 8 years ago
parent
commit
7e1ce17f03
4 changed files with 55 additions and 20 deletions
  1. 40 0
      public/bootstrap_cheat.txt
  2. 7 3
      textcircle.css
  3. 8 7
      textcircle.html
  4. 0 10
      textcircle.js

+ 40 - 0
public/bootstrap_cheat.txt

@@ -0,0 +1,40 @@
+================================================================================
+Navbar fixed at top
+-------------------
+
+  HTML
+  ----
+
+  <nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container">
+      ...
+    </div>
+  </nav>
+
+  CSS
+  ---
+
+  body {
+    padding-top: 70px; /* Default navbar height: 50px */
+  }
+
+================================================================================
+
+Navbar fixed at bottom
+----------------------
+
+  HTML
+  ----
+
+  <nav class="navbar navbar-default navbar-fixed-bottom">
+    <div class="container">
+      ...
+    </div>
+  </nav>
+
+  CSS
+  ---
+
+  body {
+    padding-bottom: 70px;  /* Default navbar height: 50px */
+  }

+ 7 - 3
textcircle.css

@@ -1,5 +1,9 @@
-/* CSS declarations go here */
+/* Workaround BS3 fixed navbar height
+body {
+	padding-top: 70px;
+}
+*/
 
 .top-margin{
-	margin-top:50px;
-}
+	margin-top: 50px;
+}

+ 8 - 7
textcircle.html

@@ -3,16 +3,17 @@
 </head>
 
 <body>
-  <h1>Welcome to TextCircle!</h1>
-  <p>{{> date_display }}</p>
+  <nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container">
+      <a class="navbar-brand" href="#">TextCircle</a><!-- nav title -->
+    </div><!-- /nav container -->
+  </nav><!-- /nav -->
 
-  {{> editor}}
+  <div class="container top-margin">
+    {{> editor}}
+  </div>
 </body>
 
-<template name="date_display">
-  {{ current_date }}
-</template>
-
 <template name="editor">
 <h2>doc id: {{ docid }}</h2>
   {{> sharejsCM docid=docid id="editor" }}

+ 0 - 10
textcircle.js

@@ -2,16 +2,6 @@
 this.Documents = new Mongo.Collection("documents");
 
 if (Meteor.isClient) {
-  Meteor.setInterval(function () {
-    Session.set("current_date", new Date());
-  }, 1000);
-
-  Template.date_display.helpers({
-    current_date: function () {
-      return Session.get("current_date");
-    }
-  });
-
   Template.editor.helpers({
     docid: function () {
       let doc = Documents.findOne();