Home Explore Help
Sign In
fgm
/
meteor__microscope
1
0
Fork 0
Files Pull Requests 0
Browse Source

Chapter 3: Templates.

Frederic G. MARAND 9 years ago
parent
440f4fe7cf
commit
39b42691c9
10 changed files with 298 additions and 38 deletions
Split View Show Diff Stats
  1. 18 0
      client/main.html
  2. 0 0
      client/main.js
  3. 223 0
      client/stylesheets/style.css
  4. 7 0
      client/templates/posts/post_item.html
  5. 16 0
      client/templates/posts/post_item.js
  6. 7 0
      client/templates/posts/posts_list.html
  7. 27 0
      client/templates/posts/posts_list.js
  8. 0 1
      microscope.css
  9. 0 14
      microscope.html
  10. 0 23
      microscope.js

+ 18 - 0
client/main.html
View File 

@@ -0,0 +1,18 @@
 
+<head>
 
+  <title>Microscope</title>
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <header class="navbar navbar-default" role="navigation">
 
+    <div class="navbar-header">
 
+      <a class="navbar-brand" href="/">Microscope</a>
 
+    </div>
 
+  </header>
 
+
 
+  <div id="main">
 
+    {{! postsLists est le nom du template dans posts_list.html }}
 
+    {{> postsList}}
 
+  </div>
 
+</div>
 
+</body>

+ 0 - 0
client/main.js
View File


+ 223 - 0
client/stylesheets/style.css
View File 

@@ -0,0 +1,223 @@
 
+.grid-block, .main, .post, .comments li, .comment-form {
 
+  background: #ffffff;
 
+  border-radius: 3px;
 
+  padding: 10px;
 
+  margin-bottom: 10px;
 
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 
+}
 
+
 
+body {
 
+  background: #eeeeee;
 
+  color: #666666;
 
+}
 
+
 
+#main {
 
+  position: relative;
 
+}
 
+
 
+.page {
 
+  position: absolute;
 
+  top: 0px;
 
+  width: 100%;
 
+}
 
+
 
+.navbar {
 
+  margin-bottom: 10px;
 
+}
 
+
 
+/* line 32, ../sass/style.scss */
 
+.navbar .navbar-inner {
 
+  border-radius: 0px 0px 3px 3px;
 
+}
 
+
 
+#spinner {
 
+  height: 300px;
 
+}
 
+
 
+.post {
 
+  /* For modern browsers */
 
+  /* For IE 6/7 (trigger hasLayout) */
 
+  *zoom: 1;
 
+  position: relative;
 
+  opacity: 1;
 
+}
 
+
 
+.post:before, .post:after {
 
+  content: "";
 
+  display: table;
 
+}
 
+
 
+.post:after {
 
+  clear: both;
 
+}
 
+
 
+.post.invisible {
 
+  opacity: 0;
 
+}
 
+
 
+.post.instant {
 
+  -webkit-transition: none;
 
+  -moz-transition: none;
 
+  -o-transition: none;
 
+  transition: none;
 
+}
 
+
 
+.post.animate {
 
+  -webkit-transition: all 300ms 0ms;
 
+  -moz-transition: all 300ms 0ms ease-in;
 
+  -o-transition: all 300ms 0ms ease-in;
 
+  transition: all 300ms 0ms ease-in;
 
+}
 
+
 
+.post .upvote {
 
+  display: block;
 
+  margin: 7px 12px 0 0;
 
+  float: left;
 
+}
 
+
 
+.post .post-content {
 
+  float: left;
 
+}
 
+
 
+.post .post-content h3 {
 
+  margin: 0;
 
+  line-height: 1.4;
 
+  font-size: 18px;
 
+}
 
+
 
+.post .post-content h3 a {
 
+  display: inline-block;
 
+  margin-right: 5px;
 
+}
 
+
 
+.post .post-content h3 span {
 
+  font-weight: normal;
 
+  font-size: 14px;
 
+  display: inline-block;
 
+  color: #aaaaaa;
 
+}
 
+
 
+.post .post-content p {
 
+  margin: 0;
 
+}
 
+
 
+.post .discuss {
 
+  display: block;
 
+  float: right;
 
+  margin-top: 7px;
 
+}
 
+
 
+.comments {
 
+  list-style-type: none;
 
+  margin: 0;
 
+}
 
+
 
+.comments li h4 {
 
+  font-size: 16px;
 
+  margin: 0;
 
+}
 
+
 
+.comments li h4 .date {
 
+  font-size: 12px;
 
+  font-weight: normal;
 
+}
 
+
 
+.comments li h4 a {
 
+  font-size: 12px;
 
+}
 
+
 
+.comments li p:last-child {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.dropdown-menu span {
 
+  display: block;
 
+  padding: 3px 20px;
 
+  clear: both;
 
+  line-height: 20px;
 
+  color: #bbbbbb;
 
+  white-space: nowrap;
 
+}
 
+
 
+.load-more {
 
+  display: block;
 
+  border-radius: 3px;
 
+  background: rgba(0, 0, 0, 0.05);
 
+  text-align: center;
 
+  height: 60px;
 
+  line-height: 60px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.load-more:hover {
 
+  text-decoration: none;
 
+  background: rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.posts .spinner-container {
 
+  position: relative;
 
+  height: 100px;
 
+}
 
+
 
+.jumbotron {
 
+  text-align: center;
 
+}
 
+
 
+.jumbotron h2 {
 
+  font-size: 60px;
 
+  font-weight: 100;
 
+}
 
+
 
+@-webkit-keyframes fadeOut {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  10% {
 
+    opacity: 1;
 
+  }
 
+  90% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+@keyframes fadeOut {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  10% {
 
+    opacity: 1;
 
+  }
 
+  90% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+.errors {
 
+  position: fixed;
 
+  z-index: 10000;
 
+  padding: 10px;
 
+  top: 0px;
 
+  left: 0px;
 
+  right: 0px;
 
+  bottom: 0px;
 
+  pointer-events: none;
 
+}
 
+
 
+.alert {
 
+  animation: fadeOut 2700ms ease-in 0s 1 forwards;
 
+  -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
 
+  -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
 
+  width: 250px;
 
+  float: right;
 
+  clear: both;
 
+  margin-bottom: 5px;
 
+  pointer-events: auto;
 
+}

+ 7 - 0
client/templates/posts/post_item.html
View File 

@@ -0,0 +1,7 @@
 
+<template name="postItem">
 
+  <div class="post">
 
+    <div class="post-content">
 
+      <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
 
+    </div>
 
+  </div>
 
+</template>

+ 16 - 0
client/templates/posts/post_item.js
View File 

@@ -0,0 +1,16 @@
 
+/**
 
+ * @file
 
+ *
 
+ *
 
+ * User: marand
 
+ * Date: 30/08/15
 
+ * Time: 10:15
 
+ */
 
+
 
+Template.postItem.helpers({
 
+  domain: function () {
 
+    var a = document.createElement('a');
 
+    a.href = this.url;
 
+    return a.hostname;
 
+  }
 
+});

+ 7 - 0
client/templates/posts/posts_list.html
View File 

@@ -0,0 +1,7 @@
 
+<template name="postsList">
 
+  <div class="posts">
 
+    {{#each posts}}
 
+      {{> postItem}}
 
+    {{/each}}
 
+  </div>
 
+</template>

+ 27 - 0
client/templates/posts/posts_list.js
View File 

@@ -0,0 +1,27 @@
 
+/**
 
+ * @file
 
+ *
 
+ *
 
+ * User: marand
 
+ * Date: 30/08/15
 
+ * Time: 10:07
 
+ */
 
+var postsData = [
 
+  {
 
+    title: "Introducing Telescope",
 
+    url: "http://sachagreif.com/introducing-telescope"
 
+  },
 
+  {
 
+    title: "Meteor",
 
+    url: "http://meteor.com"
 
+  },
 
+  {
 
+    title: "The Meteor book",
 
+    url: "http://themeteorbook.com"
 
+  }
 
+];
 
+
 
+Template.postsList.helpers({
 
+  posts: postsData
 
+});
 
+

+ 0 - 1
microscope.css
View File 

@@ -1 +0,0 @@
 
-/* CSS declarations go here */

+ 0 - 14
microscope.html
View File 

@@ -1,14 +0,0 @@
 
-<head>
 
-  <title>microscope</title>
 
-</head>
 
-
 
-<body>
 
-  <h1>Welcome to Meteor!</h1>
 
-
 
-  {{> hello}}
 
-</body>
 
-
 
-<template name="hello">
 
-  <button>Click Me</button>
 
-  <p>You've pressed the button {{counter}} times.</p>
 
-</template>

+ 0 - 23
microscope.js
View File 

@@ -1,23 +0,0 @@
 
-if (Meteor.isClient) {
 
-  // counter starts at 0
 
-  Session.setDefault('counter', 0);
 
-
 
-  Template.hello.helpers({
 
-    counter: function () {
 
-      return Session.get('counter');
 
-    }
 
-  });
 
-
 
-  Template.hello.events({
 
-    'click button': function () {
 
-      // increment the counter when button is clicked
 
-      Session.set('counter', Session.get('counter') + 1);
 
-    }
 
-  });
 
-}
 
-
 
-if (Meteor.isServer) {
 
-  Meteor.startup(function () {
 
-    // code to run on server at startup
 
-  });
 
-}