-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (112 loc) · 5.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Reddit "Clone"</title>
<meta name="description" content="Galvanize Full Stack self-paced Angular. Part 7: Angular Reddit Clone">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/lumen/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="partSevenApp" ng-controller="RedditClone">
<header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<div class="navbar-brand">Reddit Clone</div>
</div>
<ul class="nav navbar-nav">
<li><p class="navbar-text" ng-click="showPostForm()"><span class="glyphicon glyphicon-plus"></span> Submit Post</p></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" ng-model="searchText" placeholder="Search">
</div>
</form>
<div class="input-group">
<p class="navbar-text">Sort By</p>
<select class="navbar-form form-inline" id="sort" ng-model="sortChoice">
<option value="-votes">Votes</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
</div>
</nav>
</header>
<div class="container">
<form ng-show="postForm" class="form-horizontal" name="formPost">
<div class="form-group">
<label for="title">Title</label>
<input type="text" ng-model="post.title" name="title" class="form-control" placeholder="Title of Post" required>
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" ng-model="post.author" name="author" class="form-control" placeholder="Author of Post" required>
</div>
<div class="form-group">
<label for="image">Image URL</label>
<input type="text" ng-model="post.image" name="image" class="form-control" placeholder="URL of Image" required>
</div>
<div class="form-group">
<label for="desc">Description</label>
<input type="text" ng-model="post.desc" name="desc" class="form-control" placeholder="Description" required>
</div>
<button class="btn btn-default" type="submit" ng-click="addPost()">Submit Post</button>
</form>
<div class="clearfix"></div>
<div ng-repeat="post in posts | filter:searchText | orderBy:sortChoice" class="animate">
<div class="row postBox">
<div class="col-md-3">
<img ng-src="{{post.image}}" alt="photo of {{post.title}}" class="img-responsive" id="postImg"/>
</div>
<div class="col-md-9">
<div class="row">
<p>{{post.title}} |
<span class="glyphicon glyphicon-arrow-up" ng-click="post.votes = post.votes + 1"></span>
<span class="glyphicon glyphicon-arrow-down" ng-click="post.votes = post.votes - 1"></span>
<span ng-class="{upvotes: post.votes>0, downvotes: post.votes<0}"> {{post.votes}}</span></p>
</div>
<div class="row">
<p class="text-right">By {{post.author}}</p>
</div>
<div class="row">
<p id="description">{{post.desc}}</p>
</div>
<div class="row">
<p><span class="glyphicon glyphicon-calendar"> </span>
<time title="{{ post.date | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}">{{post.date | amCalendar}}</time> |
<span class="glyphicon glyphicon-comment"></span>
<span ng-click="toggleComments(post); $event.stopPropagation()">
<ng-pluralize count="post.comments.length" when="{
'1': '{{post.comments.length}} comment',
'other': '{{post.comments.length}} comments'}"></ng-pluralize>
</span> |
<span class="glyphicon glyphicon-pencil"></span>
<span ng-click="showCommentForm(post)">Add Comment</span></p>
<div ng-show="commentsView" ng-repeat="comment in post.comments" class="animate">
<p><strong>{{comment.author}}</strong> - {{comment.text}}</p>
</div>
<form ng-show="commentForm">
<div>
<label for="author">Author</label>
<input type="text" ng-model="comment.author" name="author" placeholder="username">
<label for="text">Text</label>
<input type="text" ng-model="comment.text" name="text" placeholder="comment text">
<button class="btn btn-default" type="submit" ng-click="addComment(post)">Add Comment</button>
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
</div> <!-- closing div for ng-repeat -->
</div> <!-- closing div for entire app container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="ui-bootstrap-tpls-0.13.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="app.js"></script>
</body>
</html>