This example showcases the support for keyboard navigation in DataViews.
The bottom view is navigable and is used to page through the detail cards in the top view.
The top view uses the DataViews card layout engine, which is described in the "Card Layout Engine" demo.
Keys to this demo:
The example uses arrow up/down and page up/down keys to navigate the bottom grid view and fires an event to load data in the top view when focus changes.
The allowFocus option is set to true. This allows you to handle the focusRowChanged event when focus changes.
The updateData function loads the data into the detail view.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Rows/KeyboardNavigation/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, keyboard" />
<meta name="description" content="This example showcases the support for keyboard navigation in DataViews." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keyboard Navigation | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.cardlayout.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="carInfo" style="display: none">
<div class="info-container">
<div data-column="Photo" class="photoInfo"></div>
<table class="carInfo">
<tbody>
<tr>
<td>Displacement</td>
<td data-column="Displacement"></td>
</tr>
<tr>
<td>Horsepower</td>
<td data-column="Horsepower"></td>
</tr>
<tr>
<td>Weight/lbs</td>
<td data-column="Weight_in_lbs"></td>
</tr>
<tr>
<td>Acceleration</td>
<td data-column="Acceleration"></td>
</tr>
</tbody>
</table>
</div>
</template>
<div class="main-container">
<div class="section">
<p style="margin: 5px">Focus row information</p>
<div id="grid2" style="height: 167px; margin-top: 5px"></div>
<p style="margin: 5px">Use row up/down or page up/down to navigate the focus row</p>
</div>
<div id="grid" style="height: 250px"></div>
</div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
var cols1 = [
{
id: 'Name',
caption: 'CarName',
dataField: 'Name',
},
{
id: 'Year',
caption: 'Year',
dataField: 'Year',
},
{
id: 'Miles_per_Gallon',
caption: 'Miles/Gallon',
dataField: 'Miles_per_Gallon',
},
{
id: 'Cylinders',
caption: 'Cylinders',
dataField: 'Cylinders',
},
];
var dataView1 = new GC.DataViews.DataView(
document.getElementById('grid'),
data,
cols1,
new GC.DataViews.GridLayout({
rowHeight: 36,
selectionMode: 'none',
colMinWidth: 120,
})
); // focus data.view by default
document.getElementById('grid').focus();
var photoPresenter = '<img class="photo" src={{=it.Photo}} />';
var cols2 = [
{
id: 'Displacement',
caption: 'Displacement',
dataField: 'Displacement',
width: '*',
},
{
id: 'Horsepower',
caption: 'Horsepower',
dataField: 'Horsepower',
width: '*',
},
{
id: 'Weight_in_lbs',
caption: 'Weight',
dataField: 'Weight_in_lbs',
format: '#,##',
width: '*',
},
{
id: 'Acceleration',
caption: 'Weight',
dataField: 'Acceleration',
width: '*',
},
{
id: 'Origin',
caption: 'Origin',
dataField: 'Origin',
width: '*',
},
{
id: 'Photo',
dataField: 'Photo',
presenter: photoPresenter,
},
];
var data2 = [data[0]];
var dataView2 = new GC.DataViews.DataView(
document.getElementById('grid2'),
data2,
cols2,
new GC.DataViews.CardLayout({
cardHeight: 165,
rowTemplate: '#carInfo',
direction: 'horizontal',
})
);
dataView1.focusChanged.addHandler(function (e) {
var sourceIndex = e.sourceRow;
if (sourceIndex >= 0) {
dataView2.data.updateItem(0, data[sourceIndex]);
}
});
// cars
var SITE_ROOT = window.process.env.SITE_ROOT;
var data = [{
Name: 'chevrolet chevelle malibu',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 307,
Horsepower: 130,
Weight_in_lbs: 3504,
Acceleration: 12,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg'
}, {
Name: 'buick skylark 320',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 3693,
Acceleration: 11.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/buickskylark320.jpg'
}, {
Name: 'plymouth satellite',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 318,
Horsepower: 150,
Weight_in_lbs: 3436,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellite.jpg'
}, {
Name: 'amc rebel sst',
Miles_per_Gallon: 16,
Cylinders: 8,
Displacement: 304,
Horsepower: 150,
Weight_in_lbs: 3433,
Acceleration: 12,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcrebelsst.jpg'
}, {
Name: 'ford torino',
Miles_per_Gallon: 17,
Cylinders: 8,
Displacement: 302,
Horsepower: 140,
Weight_in_lbs: 3449,
Acceleration: 10.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino.jpg'
}, {
Name: 'ford galaxie 500',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 429,
Horsepower: 198,
Weight_in_lbs: 4341,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordgalaxie500.jpg'
}, {
Name: 'chevrolet impala',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 454,
Horsepower: 220,
Weight_in_lbs: 4354,
Acceleration: 9,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletimpala.jpg'
}, {
Name: 'plymouth fury iii',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 440,
Horsepower: 215,
Weight_in_lbs: 4312,
Acceleration: 8.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthfuryiii.jpg'
}, {
Name: 'pontiac catalina',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 455,
Horsepower: 225,
Weight_in_lbs: 4425,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/pontiaccatalina.jpg'
}, {
Name: 'amc ambassador dpl',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 390,
Horsepower: 190,
Weight_in_lbs: 3850,
Acceleration: 8.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcambassadordpl.jpg'
}, {
Name: 'citroen ds-21 pallas',
Miles_per_Gallon: 14,
Cylinders: 4,
Displacement: 133,
Horsepower: 115,
Weight_in_lbs: 3090,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/citroends-21pallas.jpg'
}, {
Name: 'chevrolet chevelle concours (sw)',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 4142,
Acceleration: 11.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevelleconcours(sw).jpg'
}, {
Name: 'ford torino (sw)',
Miles_per_Gallon: 16,
Cylinders: 8,
Displacement: 351,
Horsepower: 153,
Weight_in_lbs: 4034,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino(sw).jpg'
}, {
Name: 'plymouth satellite (sw)',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 383,
Horsepower: 175,
Weight_in_lbs: 4166,
Acceleration: 10.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellite(sw).jpg'
}, {
Name: 'amc rebel sst (sw)',
Miles_per_Gallon: 18,
Cylinders: 8,
Displacement: 360,
Horsepower: 175,
Weight_in_lbs: 3850,
Acceleration: 11,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcrebelsst(sw).jpg'
}, {
Name: 'dodge challenger se',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 383,
Horsepower: 170,
Weight_in_lbs: 3563,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/dodgechallengerse.jpg'
}, {
Name: "plymouth 'cuda 340",
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 340,
Horsepower: 160,
Weight_in_lbs: 3609,
Acceleration: 8,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthcuda340.jpg'
}, {
Name: 'ford mustang boss 302',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 302,
Horsepower: 140,
Weight_in_lbs: 3353,
Acceleration: 8,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordmustangboss302.jpg'
}, {
Name: 'chevrolet monte carlo',
Miles_per_Gallon: 15,
Cylinders: 8,
Displacement: 400,
Horsepower: 150,
Weight_in_lbs: 3761,
Acceleration: 9.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletmontecarlo.jpg'
}, {
Name: 'buick estate wagon (sw)',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 455,
Horsepower: 225,
Weight_in_lbs: 3086,
Acceleration: 10,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/buickestatewagon(sw).jpg'
}, {
Name: 'toyota corona mark ii',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 113,
Horsepower: 95,
Weight_in_lbs: 2372,
Acceleration: 15,
Year: 1970,
Origin: 'C',
Photo: SITE_ROOT + '/images/toyotacoronamarkii.jpg'
}, {
Name: 'plymouth duster',
Miles_per_Gallon: 22,
Cylinders: 6,
Displacement: 198,
Horsepower: 95,
Weight_in_lbs: 2833,
Acceleration: 15.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthduster.jpg'
}, {
Name: 'amc hornet',
Miles_per_Gallon: 18,
Cylinders: 6,
Displacement: 199,
Horsepower: 97,
Weight_in_lbs: 2774,
Acceleration: 15.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amchornet.jpg'
}, {
Name: 'ford maverick',
Miles_per_Gallon: 21,
Cylinders: 6,
Displacement: 200,
Horsepower: 85,
Weight_in_lbs: 2587,
Acceleration: 16,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordmaverick.jpg'
}, {
Name: 'datsun pl510',
Miles_per_Gallon: 27,
Cylinders: 4,
Displacement: 97,
Horsepower: 88,
Weight_in_lbs: 2130,
Acceleration: 14.5,
Year: 1970,
Origin: 'C',
Photo: SITE_ROOT + '/images/datsunpl510.jpg'
}, {
Name: 'volkswagen 1131 deluxe sedan',
Miles_per_Gallon: 26,
Cylinders: 4,
Displacement: 97,
Horsepower: 46,
Weight_in_lbs: 1835,
Acceleration: 20.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg'
}, {
Name: 'peugeot 504',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 110,
Horsepower: 87,
Weight_in_lbs: 2672,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/peugeot504.jpg'
}, {
Name: 'audi 100 ls',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 107,
Horsepower: 90,
Weight_in_lbs: 2430,
Acceleration: 14.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/audi100ls.jpg'
}, {
Name: 'saab 99e',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 104,
Horsepower: 95,
Weight_in_lbs: 2375,
Acceleration: 17.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/saab99e.jpg'
}, {
Name: 'bmw 2002',
Miles_per_Gallon: 26,
Cylinders: 4,
Displacement: 121,
Horsepower: 113,
Weight_in_lbs: 2234,
Acceleration: 12.5,
Year: 1970,
Origin: 'B',
Photo: SITE_ROOT + '/images/bmw2002.jpg'
}, {
Name: 'amc gremlin',
Miles_per_Gallon: 21,
Cylinders: 6,
Displacement: 199,
Horsepower: 90,
Weight_in_lbs: 2648,
Acceleration: 15,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcgremlin.jpg'
}, {
Name: 'ford f250',
Miles_per_Gallon: 10,
Cylinders: 8,
Displacement: 360,
Horsepower: 215,
Weight_in_lbs: 4615,
Acceleration: 14,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordf250.jpg'
}, {
Name: 'chevy c20',
Miles_per_Gallon: 10,
Cylinders: 8,
Displacement: 307,
Horsepower: 200,
Weight_in_lbs: 4376,
Acceleration: 15,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevyc20.jpg'
}, {
Name: 'dodge d200',
Miles_per_Gallon: 11,
Cylinders: 8,
Displacement: 318,
Horsepower: 210,
Weight_in_lbs: 4382,
Acceleration: 13.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/dodged200.jpg'
}, {
Name: 'hi 1200d',
Miles_per_Gallon: 9,
Cylinders: 8,
Displacement: 304,
Horsepower: 193,
Weight_in_lbs: 4732,
Acceleration: 18.5,
Year: 1970,
Origin: 'A',
Photo: SITE_ROOT + '/images/hi1200d.jpg'
}, {
Name: 'datsun pl510',
Miles_per_Gallon: 27,
Cylinders: 4,
Displacement: 97,
Horsepower: 88,
Weight_in_lbs: 2130,
Acceleration: 14.5,
Year: 1971,
Origin: 'C',
Photo: SITE_ROOT + '/images/datsunpl510.jpg'
}, {
Name: 'chevrolet vega 2300',
Miles_per_Gallon: 28,
Cylinders: 4,
Displacement: 140,
Horsepower: 90,
Weight_in_lbs: 2264,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletvega2300.jpg'
}, {
Name: 'toyota corona',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 113,
Horsepower: 95,
Weight_in_lbs: 2228,
Acceleration: 14,
Year: 1971,
Origin: 'C',
Photo: SITE_ROOT + '/images/toyotacorona.jpg'
}, {
Name: 'ford pinto',
Miles_per_Gallon: 25,
Cylinders: 4,
Displacement: 98,
Horsepower: null,
Weight_in_lbs: 2046,
Acceleration: 19,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordpinto.jpg'
}, {
Name: 'volkswagen super beetle 117',
Miles_per_Gallon: 24,
Cylinders: 4,
Displacement: 97,
Horsepower: 48,
Weight_in_lbs: 1978,
Acceleration: 20,
Year: 1971,
Origin: 'B',
Photo: SITE_ROOT + '/images/volkswagen1131deluxesedan.jpg'
}, {
Name: 'amc gremlin',
Miles_per_Gallon: 19,
Cylinders: 6,
Displacement: 232,
Horsepower: 100,
Weight_in_lbs: 2634,
Acceleration: 13,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcgremlin.jpg'
}, {
Name: 'plymouth satellite custom',
Miles_per_Gallon: 16,
Cylinders: 6,
Displacement: 225,
Horsepower: 105,
Weight_in_lbs: 3439,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/plymouthsatellitecustom.jpg'
}, {
Name: 'chevrolet chevelle malibu',
Miles_per_Gallon: 17,
Cylinders: 6,
Displacement: 250,
Horsepower: 100,
Weight_in_lbs: 3329,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletchevellemalibu.jpg'
}, {
Name: 'ford torino 500',
Miles_per_Gallon: 19,
Cylinders: 6,
Displacement: 250,
Horsepower: 88,
Weight_in_lbs: 3302,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/fordtorino500.jpg'
}, {
Name: 'amc matador',
Miles_per_Gallon: 18,
Cylinders: 6,
Displacement: 232,
Horsepower: 100,
Weight_in_lbs: 3288,
Acceleration: 15.5,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/amcmatador.jpg'
}, {
Name: 'chevrolet impala',
Miles_per_Gallon: 14,
Cylinders: 8,
Displacement: 350,
Horsepower: 165,
Weight_in_lbs: 4209,
Acceleration: 12,
Year: 1971,
Origin: 'A',
Photo: SITE_ROOT + '/images/chevroletimpala.jpg'
}];
.main-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.main-container p.tip {
margin: 5px;
}
.section {
flex: 0 1 auto;
}
#grid {
flex: 1 1 auto;
}
#grid2 {
height: 167px;
margin-top: 5px;
width: 400px;
}
#grid2 .gc-grid {
background: #333;
border-color: #333;
border-radius: 4px;
}
.info-container {
display: flex;
flex-direction: row;
}
.photoInfo {
display: inline-block;
height: 165px;
line-height: 165px;
margin: 0;
margin-right: 10px;
padding: 0;
position: relative;
vertical-align: middle;
width: 230px;
}
.photoInfo:before {
border-color: transparent transparent #333 transparent;
border-style: solid;
border-width: 0 0 165px 50px;
content: " ";
height: 0;
left: 180px;
position: absolute;
top: 0;
width: 0;
}
.carInfo {
display: inline-block;
vertical-align: middle;
flex: 1 1 auto;
padding: 0.4em;
}
.carInfo tr {
vertical-align: baseline;
}
.carInfo td {
border-bottom: solid 1px #666;
color: #fff;
padding: 0.4em;
height: 1.25rem;
}
.carInfo td:last-child {
text-align: right;
padding-left: 1em;
}
@media only screen and (max-width: 768px) {
#grid2 {
width: 375px;
}
.photoInfo {
width: 170px;
}
.photoInfo:before {
left: 120px;
}
.carInfo td {
width: auto;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0Esc0JBQUE7QUNDRjtBRENFO0VBQ0UsV0FBQTtBQ0NKOztBREdBO0VBQ0UsY0FBQTtBQ0FGOztBREdBO0VBQ0UsY0FBQTtBQ0FGOztBREdBO0VBQ0UsYUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0FDQUY7O0FER0E7RUFDRSxnQkFBQTtFQUNBLGtCQUFBO0VBQ0Esa0JBQUE7QUNBRjs7QURHQTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtBQ0FGOztBREdBO0VBQ0UscUJBQUE7RUFDQSxhQUFBO0VBQ0Esa0JBQUE7RUFDQSxTQUFBO0VBQ0Esa0JBQUE7RUFDQSxVQUFBO0VBQ0Esa0JBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7QUNBRjs7QURHQTtFQUNFLHNEQUFBO0VBQ0EsbUJBQUE7RUFDQSw0QkFBQTtFQUNBLFlBQUE7RUFDQSxTQUFBO0VBQ0EsV0FBQTtFQUNBLGtCQUFBO0VBQ0EsTUFBQTtFQUNBLFFBQUE7QUNBRjs7QURHQTtFQUNFLHFCQUFBO0VBQ0Esc0JBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtBQ0FGOztBREdBO0VBQ0Usd0JBQUE7QUNBRjs7QURHQTtFQUNFLDZCQUFBO0VBQ0EsV0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDQUY7O0FER0E7RUFDRSxpQkFBQTtFQUNBLGlCQUFBO0FDQUY7O0FER0E7RUFDRTtJQUNFLFlBQUE7RUNBRjs7RURHQTtJQUNFLFlBQUE7RUNBRjs7RURHQTtJQUNFLFdBQUE7RUNBRjs7RURHQTtJQUNFLFdBQUE7RUNBRjtBQUNGIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd3MvS2V5Ym9hcmROYXZpZ2F0aW9uL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuICBwLnRpcCB7XG4gICAgbWFyZ2luOiA1cHg7XG4gIH1cbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6ICcgJztcbiAgaGVpZ2h0OiAwO1xuICBsZWZ0OiAxODBweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAwO1xufVxuXG4uY2FySW5mbyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZmxleDogMSAxIGF1dG87XG4gIHBhZGRpbmc6IDAuNGVtO1xufVxuXG4uY2FySW5mbyB0ciB7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbn1cblxuLmNhckluZm8gdGQge1xuICBib3JkZXItYm90dG9tOiBzb2xpZCAxcHggIzY2NjtcbiAgY29sb3I6ICNmZmY7XG4gIHBhZGRpbmc6IDAuNGVtO1xuICBoZWlnaHQ6IDEuMjVyZW07XG59XG5cbi5jYXJJbmZvIHRkOmxhc3QtY2hpbGQge1xuICB0ZXh0LWFsaWduOiByaWdodDtcbiAgcGFkZGluZy1sZWZ0OiAxZW07XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgI2dyaWQyIHtcbiAgICB3aWR0aDogMzc1cHg7XG4gIH1cblxuICAucGhvdG9JbmZvIHtcbiAgICB3aWR0aDogMTcwcHg7XG4gIH1cblxuICAucGhvdG9JbmZvOmJlZm9yZSB7XG4gICAgbGVmdDogMTIwcHg7XG4gIH1cblxuICAuY2FySW5mbyB0ZCB7XG4gICAgd2lkdGg6IGF1dG87XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG59XG4ubWFpbi1jb250YWluZXIgcC50aXAge1xuICBtYXJnaW46IDVweDtcbn1cblxuLnNlY3Rpb24ge1xuICBmbGV4OiAwIDEgYXV0bztcbn1cblxuI2dyaWQge1xuICBmbGV4OiAxIDEgYXV0bztcbn1cblxuI2dyaWQyIHtcbiAgaGVpZ2h0OiAxNjdweDtcbiAgbWFyZ2luLXRvcDogNXB4O1xuICB3aWR0aDogNDAwcHg7XG59XG5cbiNncmlkMiAuZ2MtZ3JpZCB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGJvcmRlci1jb2xvcjogIzMzMztcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xufVxuXG4uaW5mby1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xufVxuXG4ucGhvdG9JbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBoZWlnaHQ6IDE2NXB4O1xuICBsaW5lLWhlaWdodDogMTY1cHg7XG4gIG1hcmdpbjogMDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHdpZHRoOiAyMzBweDtcbn1cblxuLnBob3RvSW5mbzpiZWZvcmUge1xuICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50ICMzMzMgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogMCAwIDE2NXB4IDUwcHg7XG4gIGNvbnRlbnQ6IFwiIFwiO1xuICBoZWlnaHQ6IDA7XG4gIGxlZnQ6IDE4MHB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgd2lkdGg6IDA7XG59XG5cbi5jYXJJbmZvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICBmbGV4OiAxIDEgYXV0bztcbiAgcGFkZGluZzogMC40ZW07XG59XG5cbi5jYXJJbmZvIHRyIHtcbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xufVxuXG4uY2FySW5mbyB0ZCB7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIDFweCAjNjY2O1xuICBjb2xvcjogI2ZmZjtcbiAgcGFkZGluZzogMC40ZW07XG4gIGhlaWdodDogMS4yNXJlbTtcbn1cblxuLmNhckluZm8gdGQ6bGFzdC1jaGlsZCB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuICBwYWRkaW5nLWxlZnQ6IDFlbTtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAjZ3JpZDIge1xuICAgIHdpZHRoOiAzNzVweDtcbiAgfVxuXG4gIC5waG90b0luZm8ge1xuICAgIHdpZHRoOiAxNzBweDtcbiAgfVxuXG4gIC5waG90b0luZm86YmVmb3JlIHtcbiAgICBsZWZ0OiAxMjBweDtcbiAgfVxuXG4gIC5jYXJJbmZvIHRkIHtcbiAgICB3aWR0aDogYXV0bztcbiAgfVxufSJdfQ== */
