Skip to content

Instantly share code, notes, and snippets.

@ix4

ix4/codepenchallenge-responsive-tables.markdown

Created July 26, 2018 21:34
Show Gist options
  • Save ix4/a7d28d60e7f74834c025075c5a80fb9b to your computer and use it in GitHub Desktop.
Save ix4/a7d28d60e7f74834c025075c5a80fb9b to your computer and use it in GitHub Desktop.
Download ZIP
CodePenChallenge || Responsive Tables
Raw
codepenchallenge-responsive-tables.markdown

CodePenChallenge || Responsive Tables

This is an example of responsive tables. It was a demonstration originally created for a Bank of America interview.

A Pen by Brian Orr on CodePen.

License.

Raw
index.html
<html lang="en" class="no-js main">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/bonsaiUI-custombuild.css" />
</head>
<body>
<header class="navbar fixed-top" role="navigation">
<div class="brand"> <a target='_blank' href="https://github.com/DrkDevil/bankoa">Responsive Tables</a> </div>
<ul>
<li><a href='https://codepen.io/challenges/2018/july'/>CodePen Challenge</a></li>
</ul>
<ul class="flt-right">
<li><a class="btn-outlined hidden-md" target="_blank" href="https://github.com/DrkDevil/bankoa">View Github</a></li>
</ul>
</header>
<section>
<h1>Grocery List</h1>
<div class="box">
<table>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Item</th>
<th scope="col">Type</th>
<th scope="col">Brand</th>
<th scope="col">Quantiy</th>
</tr>
</thead>
<tbody id="groceryList"></tbody>
</table>
</div>
</section>
<footer class="fixed-bottom">
<div class="flt-left">Copyright, MIT License</div>
<div class="flt-right">Created by: <a target='_blank' href="http://dev.digitalreligion.net">Digital Religion</a></div>
</footer>
<!-- Jquery Library files -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</body>
</html>
Raw
script.js
//Json Object
var groceryList = [
{
Category: "fruit",
Item: "apples",
Type: "Honey Crisp",
Brand: "Little cuties",
Qty: 10
},
{
Category: "beverage",
Item: "milk",
Type: "2%",
Brand: "generic",
Qty: "1 gallon"
},
{ Category: "pasta", Item: "Pasta", Type: "Penne", Brand: "Barilla", Qty: 3 },
{
Category: "dessert",
Item: "Gelatin dessert",
Type: "Green",
Brand: "Jello",
Qty: 3
},
{
Category: "dairy",
Item: "Yogurt",
Type: "Assorted flavors",
Brand: "Chobani",
Qty: 12
},
{
Category: "pasta",
Item: "Pasta",
Type: "Linguini",
Brand: "Barilla",
Qty: 3
},
{
Category: "beverage",
Item: "Apple juice",
Type: "regular",
Brand: "Happy Farms",
Qty: 2
},
{
Category: "beverage",
Item: "Vodka",
Type: "Tangerine",
Brand: "Grey Goose",
Qty: 1
}
];
// loop through the array and get each item
for (i = 0; i < groceryList.length; i++) {
// Create variables for Json Values
var Category = groceryList[i].Category;
var Item = groceryList[i].Item;
var Type = groceryList[i].Type;
var Brand = groceryList[i].Brand;
var Qty = groceryList[i].Qty;
// Create HTML Output
$("#groceryList").append(
"<tr>" +
'<td data-label="Category"><div class="' +
Category +
'"></div>' +
Category +
"</td>" +
'<td data-label="Item">' +
Item +
"</td>" +
'<td data-label="Type">' +
Type +
"</td>" +
'<td data-label="Brand">' +
Brand +
"</td>" +
'<td data-label="Quantity">' +
Qty +
"</td>" +
"</tr>"
);
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
Raw
style.scss
@mixin icon {
display: block;
float: left;
text-indent: -9999px;
margin-right: 15px;
width: 42px;
height: 38px;
background-size: 42px 42px;
}
@mixin icon2 {
width: 62px;
height: 62px;
background-size: 62px 72px;
position: absolute;
background-color: #f8f8f8;
border-radius: 4px;
margin: -35px auto;
left: 0;
right: 0;
}
body {
padding-top: 75px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/Supermarket-shopping-cart-1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
h1 {
text-align: center;
font-weight: 600;
color: white; }
table {
border: 0;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed; }
tr {
background: #f8f8f8;
border-bottom: 1px solid #ddd;
padding: 35px;
cursor: pointer; }
tr:hover, tr:nth-child(2n+0):hover {
background: #f8fbeb;
cursor: pointer; }
tr:nth-child(2n+0) {
background: white; }
td {
padding: .625em;
line-height: 2.8; }
th {
padding: .625em;
background-color: #142029;
color: white;
padding: 1.35em .68rem;
font-size: 1.0em;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-align: left; }
@media screen and (max-width: 768px) {
h1 {
margin: 40px 0; }
body {
padding-top: 95px !important; }
table {
border: 0; }
tr {
border-bottom: 3px solid #142029;
display: block;
margin-bottom: .625em;
margin: 10px 10px 45px 10px; }
tr:last-of-type {
margin-bottom: 45px; }
td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .9em;
text-align: right; }
td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase; }
td:last-child {
border-bottom: 0; }
thead {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.box {
background: transparent !important;
-webkit-box-shadow: 0px 0px 8px 3px transparent !important;
-moz-box-shadow: 0px 0px 8px 3px transparent !important;
box-shadow: 0px 0px 8px 3px transparent !important; } }
.box {
max-width: 800px;
margin: 0 auto;
color: #142029;
background: white;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.25); }
.fruit {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/fruit.svg");
@include icon;
}
.beverage {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/beverage.svg');
@include icon;
}
.pasta {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/pasta.svg');
@include icon;
}
.dessert {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/dessert.svg');
@include icon;
}
.dairy {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/dairy.svg');
@include icon;
}
@media only screen and (max-width: 768px) {
.fruit {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/fruit.svg');
@include icon2;
}
.beverage {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/beverage.svg');
@include icon2;
}
.pasta {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/pasta.svg');
@include icon2;
}
.dessert {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/dessert.svg');
@include icon2;
}
.dairy {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/905237/dairy.svg');
@include icon2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment