فهرست منبع

Step 6: Users can move to a detail page for a website (using routing).

- they can also come back to the home page using top left link or breadcrumb.
Frederic G. MARAND 10 سال پیش
والد
کامیت
dd9026206a
10فایلهای تغییر یافته به همراه72 افزوده شده و 14 حذف شده
  1. 1 0
      .meteor/packages
  2. 8 0
      .meteor/versions
  3. 20 0
      client/client.js
  4. 4 5
      client/layout.html
  5. 1 1
      client/navbar.html
  6. 8 0
      client/page_home.html
  7. 11 0
      client/page_site.html
  8. 16 5
      client/website_item.html
  9. 2 2
      client/website_item.js
  10. 1 1
      client/website_list.html

+ 1 - 0
.meteor/packages

@@ -21,3 +21,4 @@ twbs:bootstrap
 accounts-ui
 accounts-password
 check
+iron:router

+ 8 - 0
.meteor/versions

@@ -35,6 +35,14 @@ html-tools@1.0.5
 htmljs@1.0.5
 http@1.1.1
 id-map@1.0.4
+iron:controller@1.0.12
+iron:core@1.0.11
+iron:dynamic-template@1.0.12
+iron:layout@1.0.12
+iron:location@1.0.11
+iron:middleware-stack@1.0.11
+iron:router@1.0.12
+iron:url@1.0.11
 jquery@1.11.4
 launch-screen@1.0.4
 less@2.5.1

+ 20 - 0
client/client.js

@@ -4,3 +4,23 @@
 Accounts.ui.config({
   passwordSignupFields: "USERNAME_ONLY"
 });
+
+// Routing.
+Router.configure({
+  layoutTemplate: "layout"
+});
+
+Router.route("/", function () {
+  this.render("page_home", { to: "contents" });
+});
+
+Router.route("/site/:id", function () {
+  this.render("page_site", {
+    to: "contents",
+    data: function () {
+      const id = this.params.id;
+      const doc = _.extend({ onPage: true }, Websites.findOne({ _id: id }));
+      return doc;
+    }
+  });
+});

+ 4 - 5
client/layout.html

@@ -1,12 +1,11 @@
 <head>
-  <title>siteace</title>
+  <title>Siteace</title>
 </head>
 
-<body>
+<template name="layout">
   {{> navbar }}
 
   <div class="container">
-    {{> website_form}}
-    {{> website_list}}
+    {{> yield "contents" }}
   </div>
-</body>
+</template>

+ 1 - 1
client/navbar.html

@@ -3,7 +3,7 @@
   <nav class="navbar navbar-default">
     <div class="container-fluid">
       <div class="navbar-header">
-        <a class="navbar-brand" href="#">
+        <a class="navbar-brand" href="/">
           Site Ace
         </a>
       </div>

+ 8 - 0
client/page_home.html

@@ -0,0 +1,8 @@
+<template name="page_home">
+  <div class="container">
+    <ol class="breadcrumb">
+      <li class="active">Home</li>
+    </ol>
+  </div>
+  {{> website_list }}
+</template>

+ 11 - 0
client/page_site.html

@@ -0,0 +1,11 @@
+<template name="page_site">
+  <div class="container">
+    <ol class="breadcrumb">
+      <li><a href="/">Home</a></li>
+      <li class="active">{{ title }}</li>
+    </ol>
+  </div>
+  <ul>
+    {{> website_item }}
+  </ul>
+</template>

+ 16 - 5
client/website_item.html

@@ -1,11 +1,21 @@
 <!-- template that displays individual website entries -->
 <template name="website_item">
-  <li>
-    <a href="{{url}}">{{title}}</a>
-    <p>
+  <li class="list-group-item row">
+    <div class="col-md-3">
+    {{! Do not display the details link if this is already the details page. }}
+    {{#unless onPage }}
+        <a href="/site/{{ _id }}"><span class="glyphicon glyphicon-list-alt"></span></a>
+      {{/unless}}
+      <a href="{{url}}">{{title}}</a>
+    </div>
+    <div class="col-md-4">
       {{description}}
-    </p>
-    <p>Added on {{ postDate }}. Votes: Plus = {{ plusVotes }} / Minus = {{ minusVotes }} /  Score = {{ score }}.</p>
+    </div>
+    <div class="col-md-3">
+      <p>Added on {{ postDate }}.</p>
+      <p>Votes: + {{ plusVotes }} - {{ minusVotes }} &rArr; {{ score }}</p>
+    </div>
+    <div class="col-md-2">
     {{#if isLoggedIn }}
       <a href="#" class="btn btn-default js-upvote {{ upVoted }}">
         <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
@@ -15,5 +25,6 @@
       </a>
       <!-- you will be putting your up and down vote buttons in here! -->
     {{/if}}
+    </div>
   </li>
 </template>

+ 2 - 2
client/website_item.js

@@ -15,7 +15,7 @@ Template.website_item.events({
     // Put the code in here to add a vote to a website!
     const userId = Meteor.userId();
     let modifiers = {};
-    let increments = {}
+    let increments = {};
     if (!_.contains(this.plus, userId)) {
       modifiers.$addToSet = { plus: userId };
       increments.plusScore = 1;
@@ -44,7 +44,7 @@ Template.website_item.events({
     // Put the code in here to remove a vote from a website!
     const userId = Meteor.userId();
     let modifiers = {};
-    let increments = {}
+    let increments = {};
     if (!_.contains(this.minus, userId)) {
       modifiers.$addToSet = { minus: userId };
       increments.minusScore = 1;

+ 1 - 1
client/website_list.html

@@ -1,6 +1,6 @@
 <!-- template that displays several website items -->
 <template name="website_list">
-	<ol>
+	<ol class="list-group">
 	{{#each websites}}
   	{{>website_item}}
 	{{/each}}