Home Esplora Aiuto
Accedi
fgm
/
meteor__coursera-meteor-1
1
0
Forka 0
File Problemi 0 Pull Requests 0
Sfoglia il codice sorgente

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 9 anni fa
parent
195d217103
commit
dd9026206a
10 ha cambiato i file con 72 aggiunte e 14 eliminazioni
Visualizzazione separata Mostra Diff Stats
  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
Vedi File 

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

+ 8 - 0
.meteor/versions
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

@@ -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
Vedi File 

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