Item: Dashboard
Rating: 3.4
Author: Drew Vosburg

0 Downloads
6 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="table">
  <div class="table-cell">
    <div class="screen">
<div class="list-view">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>

      </div>

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  </div>
  

      <div class="category-list">
        <h3>Communication</h3>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
          <div class="summary">This is my custom summary</div>
          <div class="url"></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
      </div>
      <div class="category-list">
        <h3>Communication</h3>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
      </div>
      </div>
    <div id="modal">
      <div class="table">
        <div class="table-cell">
            <div class="card">
              <div class="metadata">
                <div class="participants">Together</div>
                <div class="time">4 min</div>
              </div>
              <h2 class="card-title">Exercise title</h2>
              <p class="summary">Lorem ipsum</p>
     <a href="" class="button">Start</a>
            </div>
      </div>
    </div>
  </div>
</div>
    
  </div>
      </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/drewvosburg/dashboard-oqxewo */
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body, html {
  min-height: 100vh;
  background: #28334A;
}

.table {
  display: table;
  width: 100%;
  position: absolute;
  height: 100%;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: auto;
  background: #1377FF;
  overflow: hidden;
}

.list-view {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.button {
  width: 200px;
  background: #1DDEB6;
  color: #fff;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  outline: none;
  line-height: 44px;
  text-transform: uppercase;
  position: absolute;
  display: block;
  text-align: center;
  text-decoration: none;
  bottom: 0;
  margin-bottom: 3rem;
  left: 50%;
  margin-left: -100px;
}

.swiper-container {
  width: calc(100% - 2rem);
  margin: 1rem;
  position: relative;
  overflow: visible;
}
.swiper-container img {
  width: 375px;
  display: block;
}
.swiper-container .swiper-pagination-bullet {
  background: #fff;
  border: 1px solid #fff;
  margin: 0 12px;
}
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-container .swiper-slide {
  padding: 0.5rem;
}

#modal {
  position: absolute;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
}
#modal.visible {
  display: block;
}
#modal .table-cell {
  padding: 1rem;
}

.card {
  position: relative;
  width: 100%;
  color: #000;
  height: 400px;
  background: #fff;
  padding: 1rem;
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.card .metadata .time {
  float: right;
}
.card .metadata .participants {
  float: left;
}
.card .metadata:after {
  clear: both;
  content: '';
  display: block;
}

.category-list {
  padding: 1rem;
}
.category-list .list-card {
  padding: 1rem;
  background: #fff;
  padding-left: 5rem;
  margin-bottom: 1rem;
}
.category-list .list-card h4 {
  margin: 0;
  margin-bottom: 0.5rem;
}
.category-list .summary {
  display: none;
}

@media only screen and (min-width: 48rem) {
  .screen {
    width: 375px;
    height: 667px;
  }
}


/*Downloaded from https://www.codeseek.co/drewvosburg/dashboard-oqxewo */
// ----- On render -----
$(function(){
  var mySwiper = new Swiper ('.swiper-container');
  
  
  var showModal = function(title, participants, time, summary, url) {
    if (title) {
      $('#modal .card-title').text(title);
    } else {
      $('#modal .card-title').text('--');
    }
    if (participants) {
    $('#modal .participants').text(participants);
    } else {
      $('#modal .participants').text('--');
    }
    if (time) {
    $('#modal .time').text(time);
    } else {
      $('#modal .time').text('--');
    }
    if (summary) {
    $('#modal .summary').text(summary);
    } else {
      $('#modal .summary').text('--');
    }
    if (url) {
      $('#modal a').attr("href", url);
    } else {
      $('#modal a').attr("href", '');
    }
  }
  
  $('.list-card').click(function(){
    var title = $(this).find('h4').text();
    var participants = $(this).find('.participants').text();
    var time = $(this).find('.time').text();
    var summary = $(this).find('.summary').text();
    var url = $(this).find('.url').text();
    
    showModal(title, participants, time, summary, url);
    
    $('#modal').addClass('visible')
  })
  $('#modal .card').click(function(e){
    e.preventDefault();
  })
  $('#modal').click(function(){
    $('#modal').removeClass('visible');
  })
});

Comments

More from Drew Vosburg

Dashboard

In this example below you will see how to do a Dashboard with some HTML / CSS and Javascript

Technologies

Comments

More from Drew Vosburg

PayOnDelivery Design System

A Pen by Drew Vosburg

Dropdown - Day 027

Dashboard

You Might Also Like

Paint with CSS Grid: Luna Lovegood

A Pen by Muhammad Mahbubur Rahman

Transition Easing

Background transition

A Pen by Curso Iot

I forgot how .addClass() works in jQuery

SCSS Pixel art mixin

Test JSON