search

anhskohbo / jekyll-for-frontend

Jekyll, Gulp, BrowserSync... kickstarter for frontend development.
http://anhskohbo.github.io/jekyll-for-frontend/
MIT License
3 stars 0 forks source link

component: Comments #7

Open NautHnil opened 8 years ago

NautHnil commented 8 years ago

FILE src/include/components/comments.html

src/_sass/layouts/_components/_comments.scss

HTML

<div class="comments">
    <h3 class="comments__title h4 text-uppercase">Customer reviews <small>(4 Reviews)</small></h3>
    <ul class="comments__container">
        <li class="comment">
            <article class="comment__body">
                <div class="comment__avatar">
                    <img src="img-demo/avatars/1.png" alt="Comment Image">
                </div>
                <div class="comment__info">
                    <div class="comment__meta">
                        <h5 class="comment__author">
                            <a href="#" title="">John Doe</a>
                        </h5>
                        <div class="comment__metadata">
                            <span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
                        </div>
                    </div>
                    <div class="comment__content">
                        <h4>Like it!</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus luctus enim ut mattis. Morbi pulvinar ligula sed velit congue placerat molestie in tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vel magna ac tellus ultricies gravida. Duis at diam a nunc egestas viverra nec eu eros.</p>
                    </div>
                </div>
                <div class="comment__actions clearfix">
                    <p class="pull-right">
                        <a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
                        <a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
                    </p>
                </div>
            </article>
        </li>
        <!-- /.comment -->
        <li class="comment">
            <article class="comment__body">
                <div class="comment__avatar">
                    <img src="img-demo/avatars/2.png" alt="Comment Image">
                </div>
                <div class="comment__info">
                    <div class="comment__meta">
                        <h5 class="comment__author">
                            <a href="#" title="">John Doe</a>
                        </h5>
                        <div class="comment__metadata">
                            <span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
                        </div>
                    </div>
                    <div class="comment__content">
                        <h4>Like it!</h4>
                        <p>Etiam quis velit ac quam elementum blandit sed et neque. Aliquam at velit quis metus feugiat ullamcorper. Fusce id augue enim. Morbi lacus justo, tempus nec mauris at, tristique tincidunt elit. Pellentesque tortor risus, posuere vitae sem nec, hendrerit ornare felis. Ut eget risus a urna aliquet ultricies.</p>
                    </div>
                </div>
                <div class="comment__actions clearfix">
                    <p class="pull-right">
                        <a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
                        <a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
                    </p>
                </div>
            </article>
            <ul class="children">
                <li class="comment">
                    <article class="comment__body">
                        <div class="comment__avatar">
                            <img src="img-demo/avatars/3.png" alt="Comment Image">
                        </div>
                        <div class="comment__info">
                            <div class="comment__meta">
                                <h5 class="comment__author">
                                    <a href="#" title="">John Doe</a>
                                </h5>
                                <div class="comment__metadata">
                                    <span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
                                </div>
                            </div>
                            <div class="comment__content">
                                <h4>Like it!</h4>
                                <p>In eu ipsum vel elit pharetra malesuada eu a mi. Nunc fermentum mattis metus, at commodo mi maximus id. Mauris purus elit, cursus eget lobortis eget, mattis a massa. In viverra bibendum ex. Morbi id neque id dolor commodo rhoncus ut eu mi. Suspendisse at augue arcu.</p>
                            </div>
                        </div>
                        <div class="comment__actions clearfix">
                            <p class="pull-right">
                                <a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
                                <a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
                            </p>
                        </div>
                    </article>
                </li>
                <!-- /.comment -->
                <li class="comment">
                    <article class="comment__body">
                        <div class="comment__avatar">
                            <img src="img-demo/avatars/4.png" alt="Comment Image">
                        </div>
                        <div class="comment__info">
                            <div class="comment__meta">
                                <h5 class="comment__author">
                                    <a href="#" title="">John Doe</a>
                                </h5>
                                <div class="comment__metadata">
                                    <span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
                                </div>
                            </div>
                            <div class="comment__content">
                                <h4>Like it!</h4>
                                <p>In eu ipsum vel elit pharetra malesuada eu a mi. Nunc fermentum mattis metus, at commodo mi maximus id. Mauris purus elit, cursus eget lobortis eget, mattis a massa. In viverra bibendum ex. Morbi id neque id dolor commodo rhoncus ut eu mi. Suspendisse at augue arcu.</p>
                            </div>
                        </div>
                        <div class="comment__actions clearfix">
                            <p class="pull-right">
                                <a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
                                <a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
                            </p>
                        </div>
                    </article>
                </li>
                <!-- /.comment -->
            </ul>
            <!-- /.children -->
        </li>
        <!-- /.comment -->
    </ul>
    <!-- /.comments__container -->
    <div class="comments__respond">
        <h3 class="comments__title h4 text-uppercase">Leave a reply</h3>
        <form action="/" method="post" class="commnet__form">
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <p>
                        <label class="sr-only">Name</label>
                        <input type="text" id="author" class="form-control" name="Author" placeholder="Name">
                    </p>
                </div>
                <div class="col-sm-4 col-md-4">
                    <p>
                        <label class="sr-only">Email</label>
                        <input type="email" id="email" class="form-control" name="Email" placeholder="Email">
                    </p>
                </div>
                <div class="col-sm-4 col-md-4">
                    <p>
                        <label class="sr-only">Title</label>
                        <input type="text" id="title" class="form-control" name="Title" placeholder="Title">
                    </p>
                </div>
            </div>
            <p>
                <textarea id="comment" class="form-control" name="Comment" rows="10" placeholder="Comment"></textarea>
            </p>
            <p>
                <button type="button" class="btn btn-primary text-uppercase">
                    <i class="fa fa-paper-plane"></i>
                    <span>Submit</span>
                </button>
            </p>
        </form>
    </div>
    <!-- /.comments__respond -->
</div>
<!-- /.comments -->

SCSS

/*
 * COMMENTS
 * ========================================
 */
.comments {
  margin-bottom: 50px;
}

.comments__title {
  margin-bottom: 40px;

  small {
    font-size: 18px;
    text-transform: capitalize;
    display: block;
    margin: 10px 0 0 0;

    @include media(">=xs") {
      display: inline-block;
      margin: 0 0 0 15px;
    }
  }
}

.comments__container,
.comments__container .children {
  list-style: none;
  padding: 0;
}

.comments__container > .comment {
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

.comments__container {
  margin-bottom: 0;

  .children {
    padding-left: 20px;

    @include media(">=xs") {
      padding-left: 50px;
    }

    > .comment {
      border-top: 1px solid #e3e3e3;
      margin-top: 25px;
      padding-top: 25px;
    }
  }
}

.comment__avatar,
.comment__info {
  display: table-cell;
  vertical-align: top;
}

.comment__avatar {
  padding-right: 15px;

  @include media(">=xs") {
    padding-right: 30px;
  }

  img {
    width: 40px;
    height: 40px;
    border-radius: 100%;

    @include media(">=xs") {
      width: 60px;
      height: 60px;
    }
  }
}

.comment__meta {
  margin-bottom: 10px;
}

.comment__author,
.comment__metadata {
  display: inline-block;
  margin-bottom: 0;
}

.comment__author {
  margin-right: 5px;
}

.comment__metadata {
  display: block;
  font-size: 12px;
  color: lighten(black, 50%);

  @include media(">=xs") {
    display: inline-block;
  }
}

.comment__content {
  margin-left: -55px;

  @include media(">=xs") {
    margin-left: 0;
  }
}

.comment__actions {
  p {
    margin-bottom: 0;
  }

  a {
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
  }
}

.comments__respond {
  padding-top: 15px;

  .btn {
    padding: 6px 25px;

    .fa {
      margin-right: 5px;
    }
  }
}