Summary Section - Demo

by Bunlong Heng

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,900"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<hr style="height:100pt; visibility:hidden;" />
<div class="container summary">
    <div class="row">
        <div class="col-xs-1 section">
            <br>
            <p>Section
                <br> <span class="section-num">2.2</span>

                <br>Exercise</p>
        </div>
        <div class="col-xs-3">
            <br>
            <div class="row cb-btns-row " style="background-color:white;">
                <div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
                    <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span class="summary-texts">Group A </span>

                        <ul class="dropdown">
                            <li><a class="group" id="group-a">Group A </a>

                            </li>
                            <li><a class="group" id="group-b">Group B </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="text-align: left;" class="summary-texts">
                <br>Problem set: Same
                <br>Start: 4/10/2015 2:00 pm</p>
        </div>
        <div class="col-xs-5">
            <br>
            <br>
            <br>
            <p style="text-align: left;" class="summary-texts">Students: 9/25
                <br>Due: 4/10/2015 3:00 pm</p>
        </div>
        <div class="col-xs-1 student-submit">
            <br> <span class="student-submit-num">9/9</span>

            <br>STUDENTS
            <br>SUBMITTED</div>
        <div class="col-xs-1 avg-score">
            <br> <span class="avg-score-num">71 <small>% </small> </span>

            <br>AVG SCORE</div>
        <div class="col-xs-1 hide-details">
            <br>
            <img...

CSS

.section-num {
  color: #293644;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}
.section p {
  color: #273645;
  font-weight: bold;
  font-size: 11.8px;
  font-style: normal;
  text-align: left;
  text-transform: uppercase;
  font-family: "adelle-sans", sans-serif;
}
.section {
  border-right: 2px solid #c9cacb;
}
.summary {
  border: 1px solid #c9cacb;
  background-color: #F9F9F9;
}
.cb-btns-row {
  background-color: #F9F9F9!important;
}
.student-submit-num,
.avg-score-num {
  color: #293644;
  font-size: 27.5px;
  text-align: center;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}
.student-submit,
.avg-score,
.hide-details {
  font-size: 9.8px;
  color: #293644;
  font-style: normal;
  font-weight: bold;
  font-family: "adelle-sans", sans-serif;
  text-align:center;
}
.summary-texts {
  font-size: 16px;
  font-weight: 400;
  font-family: "jaf-facitweb", sans-serif;
}











  /* GLOBALS */
  *, *:after, *:before {
      -webkit-box-sizing : border-box;
      -moz-box-sizing : border-box;
      box-sizing : border-box;
      padding : 0;
      margin : 0;
  }
  ::selection {
      background: transparent;
  }
  ::-moz-selection {
      background: transparent;
  }
  #dd {
      font-size: 12px;
  }
  .wrapper-dropdown-1 {
      position : relative;
      padding : 3px;
      background : white;
      color : black;
      outline : none;
      cursor : pointer;
      border-top : 1px solid black;
      border-right : 1px solid black;
      border-bottom : 1px solid black;
      border-left : 1px solid black;
      border-radius : 0;
      width : 200px;
      z-index : 99;
  }
  .wrapper-dropdown-1:after {
      font-family : FontAwesome;
      content :"\f054";
      width : 0;
      height : 0;
      position : absolute;
      right : 16px;
      top : 50%;
      margin-top : -8px;
  }
  .wrapper-dropdown-1 .dropdown {
      position : absolute;
      top :...

JavaScript

"use strict";

  // dropDown Menu
  function dropDown(el) {

      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();
  }

  dropDown.prototype = {

      initEvents: function () {
          var obj = this;

          obj.dd.on('click', function (event) {
              $(this).toggleClass('active');
              return false;
          });

          obj.opts.on('click', function () {
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
          });
      },
      getValue: function () {
          return this.val;
      },
      getIndex: function () {
          return this.index;
      }
  }


  $(function () {

      var dd = new dropDown($('#dd'));

      $(document).click(function () {

          $('.wrapper-dropdown-1').removeClass('active');

      });


  });