reddit-clone/index.html at master · kctiley/reddit-clone · GitHub

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
<!doctype html>
<html lang="en" ng-app='redditClone'>
<head>
  <title>redditClone</title>
  <base href="/">
  <meta charset="UTF-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js" type="text/javascript"></script>
  <!-- load momentJS (required for angular-moment) -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
  <!-- load angular-moment -->
  <script src="//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.4/angular-route.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="./css/main.css" rel="stylesheet" media="screen">
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="./js/app.js" type="text/javascript"></script>
  <script src="./js/controllers.js" type="text/javascript"></script>
  <script src="./js/directives.js" type="text/javascript"></script>
  <script src="./js/filters.js" type="text/javascript"></script>
  <script src="./js/services.js" type="text/javascript"></script>
</head>
  <body ng-controller="myController">
      <div><p id="top-border"></p></div>
      <nav class="navbar navbar-default main-nav">
        <img id="logo" ng-src="images.png">
        <h2 class="inline main-title">redditClone</h2>
        <h7> By Klint Tiley </h7>
        <div class="inline submit-post hover" ng-click="showForm()">
          <h4><span class="glyphicon glyphicon-plus"></span>Submit Post</h4>
        </div>
        <input class="inline search-input" ng-model="search" placeholder="Search">
        <div class="dropdown inline">
          <button class="btn sort-by dropdown-toggle" type="button" data-toggle="dropdown">Sort By
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#" ng-click="order('numberOfVotes')">Votes</a></li>
            <li><a href="#" ng-click="order('postDate')">Date</a><li>
            <li><a href="#" ng-click="order('title')">Title</a></li>
          </ul>
        </div>
      </nav>
    <div class="col-md-12">
      <div class="col-md-1">
      </div>
      <div ng-show="displayForm" class="col-md-10 submit-post-form hover">
        <form name="postform" ng-submit="submit()">
          <p>Add a Post</p>
          <label>Title</label>
          <input class="form-control" type="text" placeholder="Title" ng-model="title" required>
          <label>Author</label>
          <input class="form-control" type="text" placeholder="Author" ng-model="author" required>
          <label>Image URL</label>
          <input class="form-control" type="text" placeholder="Image URL" ng-model="imageURL" required>
          <label>Description</label>
          <input class="form-control" type="text" placeholder="Description" ng-model="description" required>
          <p ng-show="notValid" ng-class="{red: true}">All Fields Required</p>
          <br>
          <input type="submit" value="Submit Post" class="submit">
        </form>
      </div>
      <div class="col-md-1">
      </div>
    </div>
    <div id="all-posts" ng-repeat="post in posts | orderBy:predicate:reverse | filter: search" class="col-md-12">
      <div class="col-md-1">
      </div>
      <div class="each-post col-md-10">

          <div class="col-md-3 inline">
            <img ng-src="{{post.imageURL}}" >
          </div>
          <div class="col-md-9 inline" >
            <div>
              <h4 class="title inline">{{post.title | uppercase}}</h4>
              <!-- <h5 class="inline myUpArrow"></h5> -->
              <h6 class=" upDownContainer inline"><span class="glyphicon glyphicon-thumbs-down upDownArrows" ng-click="downVote( this.post)"></span><span class="glyphicon glyphicon-thumbs-up upDownArrows" ng-click="upVote(this.post)" ></span></h6>
              <h5 class="inline"><span ng-class="{'positive': post.numberOfVotes  > 0, 'negative': this.post.numberOfVotes < 0}">{{post.numberOfVotes}}</span>
              </h5>
            </div>
            <p class="right">by {{post.author}}</p>
            <p>{{post.description}}</p>
            <div>
              <ul>
                <li class="inline">Posted: <span am-time-ago="post.postDate"></span> | </li>
                <li class="inline hover" ng-click="clickComments(this.post)"><span class="fa fa-comments comment-icon"></span> Comments | </li>
                <li class="inline hover" ng-click="clickAddComment(this.post)"><span class="glyphicon glyphicon-pencil"></span> Add Comment</li>
              </ul>
            </div>
            <div ng-show="showAddComment">
              <ul>
                <li class="inline">Author</li>
                <input class="inline" placeholder="username" ng-model="commentUserName">
                <li class="inline">Text</li>
                <input class="inline" placeholder="comment text" ng-model="commentText">
                <button class="inline" ng-click="addComment(this.post)">Add Comment</button>
              </ul>
            </div>
            <div class="comments" ng-show="showComments" ng-repeat="comment in this.post.comments">
              <p><strong>{{comment.author}}</strong>: <span class="comment-text"> {{comment.text}}  </span></p>
            </div>
          </div>

      </div>
    </div>
    <div class="col-md-1">
    </div>


  </body>
</html>