Github Commit List

github-commit-list.markdown

Github Commit List

Big fan of @github and @mdo, love the updates

A Pen by Pongstr on CodePen.

License.

index.html

  <div class="main-container">
    <div class="group-list-container">
      <div class="group-list-title">
        <span class="octicon octicon-git-commit"></span> &nbsp; <span>Commits on Sep 09, 2014</span>
      </div>
      <ol class="group-list">
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars1.githubusercontent.com/u/962502?v=2&amp;s=72" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand="true">
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&amp;s=120" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand>
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars1.githubusercontent.com/u/962502?v=2&amp;s=72" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand="true">
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&amp;s=120" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand>
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
      </ol>

      <div class="group-list-title">
        <span class="octicon octicon-git-commit"></span> &nbsp; <span>Commits on Sep 09, 2014</span>
      </div>
      <ol class="group-list">
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars1.githubusercontent.com/u/962502?v=2&amp;s=72" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand="true">
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&amp;s=120" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand>
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars1.githubusercontent.com/u/962502?v=2&amp;s=72" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand="true">
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
        <li class="group-list-item">
          <div class="group-list-avatar">
            <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&amp;s=120" alt="">
          </div>
          <div class="group-list-body">
            <h5 class="group-list-body-title">
              <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a>
              <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span>
            </h5>
            <p class="group-list-body-meta">
              <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span>
            </p>
            <p class="group-list-body-desc" data-expand>
               Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper
            </p>
          </div>
          <div class="group-list-links">
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-clippy"></i>
              </a>
              <a href="#">
                <i class="sha-icon octicon octicon-diff"></i>
              </a>
            </div>
            <div class="group-list-btn-group">
              <a href="#">
                <i class="octicon octicon-code"></i>
              </a>
            </div>
          </div>
        </li>
      </ol>
    </div>

    <div class="text-center">
      <div class="group-list-btn-group group-list-btn-group-large">
        <a href="#">
          <span class="octicon octicon-arrow-left"></span>
        </a>
        <a href="#">
          <span class="octicon octicon-arrow-right"></span>
        </a>
      </div>
    </div>
  </div>

script.js

+function ($) { 'use strict';
               
  function Expander (element, options) {
    var toggle = element ? element: '[data-toggle=expander]',
        option = options ? options: null;

    $(toggle).on('click', function (e) {
      $(this).parents('li')
        .find('[data-expand]')
        .toggleClass('active');
      e.preventDefault();
    });
  };

  $(document).on('load', Expander());
               
}(window.jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

$container-width:         980px;
$container-gutter-width:  30px;

// Colors
$brand-linkBlue:  #4183c4;
$brand-lightGrey: #999;
$brand-medGrey:   #666;
$brand-darkGrey:  #333;
$brand-green:     #6cc644;
$brand-red:       #bd2c00;
$brand-orange:    #f93;

// Default Box Sizing
*,
*:before,
*:after { @include box-sizing(border-box); }

// Clearfix

@mixin clearfix() {
  &:before,
  &:after {
    display: table;
    content: " ";
  }

  &:after {
    clear: both;
  }
};

// Default Styles
html,
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: $brand-lightGrey;
}

a,
a:visited,
a:focus {
  color: $brand-linkBlue;
  text-decoration: none;
}

a:hover {
  color: lighten($brand-linkBlue, 2.5%);
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

// Main Container Styles
// -------------------------

.main-container {
  @include clearfix();
  padding: 0;

  @media (min-width: 992px),
         (max-width: 1200px) {
    // width: 740px;
    margin-left:  ($container-gutter-width / 2);
    margin-right: ($container-gutter-width / 2);
    padding: (($container-gutter-width / 2) - 5);
  }

  @media (min-width: 1000px),
         (min-width: 1200px) {
    width: $container-width;
    margin-left: auto;
    margin-right: auto;
  }
}

// Group List
// -------------------------

// Group List Container

.group-list-container {
  @include clearfix();
  position: relative;
  margin-left: ($container-gutter-width / -2);
  margin-right: ($container-gutter-width / -2);
  margin-bottom: ($container-gutter-width - 10);
  padding-left: $container-gutter-width;

  &:before {
    position: absolute;
    top: 0;
    left: 6px;
    z-index: -1;
    content: " ";
    display: block;
    width: 2px;
    height: 98.5%;
    background-color: rgba($brand-lightGrey, .15);
  }

  @media (max-width: 480px) {
    padding-left: ($container-gutter-width / 2);

    &:before {
      left: 2px;
    }
  }
}

// Group List Title

.group-list-title {
  @include clearfix();
  display: block;
  margin-top: ($container-gutter-width / 2);
  margin-left: -$container-gutter-width;
  margin-bottom: 0;
  font-size: 13px;
  color: $brand-medGrey;
  line-height: 1;
  background-color: #fff;

  .octicon {
    color: lighten($brand-medGrey, 40%);
  }

  @media (max-width: 480px) {
    margin-left:  -($container-gutter-width - 11)
  }
}

// The List

.group-list {
  position: relative;
  width: 100%;
  padding: 0;
}


// List Items

.group-list-item {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: -1px;
  border: 1px solid lighten($brand-lightGrey, 32%);

  &:hover {
    z-index: 2;
    background-color: rgba($brand-linkBlue, .05);
  }
}

// List Sections

.group-list-avatar,
.group-list-body,
.group-list-links {
  display: table-cell;
  vertical-align: top;
  padding: 10px 10px 5px;

  @media (max-width: 480px) {
    display: block;
    float: left;
    padding: 5px;
  }
}

// List Avatar

.group-list-avatar {
  @media (max-width: 480px) { width: 18%; }

  @media (min-width: 768px)  { width: 6%; }
  @media (min-width: 992px)  { width: 5%; }
  @media (min-width: 1200px) { width: 5%; }

  img {
    width: 36px;
    height: 36px;
  }
}

// List Body

.group-list-body {
  width: 60%;

  .group-list-body-title,
  .group-list-body-meta,
  .group-list-body-desc {
    margin-top: 0;
  }

  @media (max-width: 480px) {
    width: 82%;
  }

  // Group List: Body Title

  .group-list-body-title {
    margin-bottom: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: $brand-medGrey;

    a:hover {
      text-decoration: underline;
    }

    @media (max-width: 480px) {
      font-size: 13px;
      line-height: 1;
    }

    // Text Helpers

    .message-link {
      color: lighten($brand-darkGrey, 15%);
    }

    .text-expander {
      position: relative;
      top: -1px;
      display: inline-block;
      margin-left: 5px;
      line-height: 0;
    }

    .text-expander a {
      display: inline-block;
      height: 12px;
      padding: 0 5px;
      font-size: 12px;
      font-weight: bold;
      line-height: 6px;
      color: #555;
      text-decoration: none;
      vertical-align: middle;
      background: #ddd;
      border-radius: 1px;
    }

    .text-expander a:hover {
      background-color: lighten($brand-lightGrey, 10%);
    }
  }

  // Group List: Body Meta

  .group-list-body-meta {
    margin-bottom: 5px;
    font-size: 12px;

    a:hover {
      text-decoration: underline;
    }

    // Text Helpers

    .author-link {
      color: lighten($brand-medGrey, 5%);
    }
  }

  // Group List: Body Description

  .group-list-body-desc {
    margin: 0;
    padding-left: (($container-gutter-width / 2) - 5);
    font-size: 12px;
    border-left: 1px solid rgba($brand-lightGrey, .55);
  }
}

[data-expand] {
  display: none;

  &.active {
    display: block;
  }
}

// List Links

.group-list-links {
  width: 30%;
  text-align: right;
  vertical-align: middle;
}

// Group List Button Group

.group-list-btn-group {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;

  a, button {
    position: relative;
    display: inline-block;
    height: 29px;
    margin-left: -3px;
    margin-right: -2px;
    padding: 5px 8px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    border: 1px solid lighten($brand-lightGrey, 25%);
    background-color: #fff;

    &:hover {
      z-index: 2;
      color: #fff;
      border-color: darken($brand-linkBlue, 5%);
      background-color: $brand-linkBlue;
    }

    &:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    &:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    span {
      font-size: 12px;
      font-weight: bold;
    }
  }

  &.group-list-btn-group-large a,
  &.group-list-btn-group-large button {
    height: 40px;
    padding: 10px 16px;

    span {
      font-size: 18px;
    }
  }

  @media (max-width: 480px) {
    display: none;
  }
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.css" rel="stylesheet" />