Demos Back to Demos

Popular Premier League Players

17 of 25
A stylistic demo showing off some of the top footballers in the world.
Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Popular Premier League Players</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body>
    <zing-grid 
      caption="Popular 2018 Premier League Players" 
      src="https://zinggrid-examples.firebaseio.com/premier-players" 
      pager 
      page-size="6" 
      page-size-options="3,6,9,12,15" 
      layout="card" 
      layout-controls="disabled"
    >
			<zg-colgroup>
        <zg-column index="playerName"></zg-column>				
        <zg-column index="nationality" renderer="renderNationality"></zg-column>
        <zg-column index="team">
          <template>
            <img src="[[index.team.0.teamImage]]" alt="Team N/A" class="team--logo" />
            <span>[[index.team.0.teamName]]</span>
          </template>
        </zg-column>
        <zg-column index="playerPosition" type="date"></zg-column>
        <zg-column index="appearances" type="date"></zg-column>
        <zg-column index="goals"></zg-column>
        <zg-column index="assists"></zg-column>
        <zg-column index="photo" type="image" cell-class="player-photo"></zg-column>
		    </zg-colgroup>
		</zing-grid>
  </body>
</html>

CSS

body {
  background:#e6e6e6;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}	

zing-grid {
  max-width: 1000px;
  background-image: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/premier-league-players%2Fdave-shaft-72647-unsplash.jpg?alt=media&token=9b88b629-561c-45f7-8cb8-f3d36ca15738');
  background-size: cover;
  margin: 30px auto 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;	
  font-weight: bold;		
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  --zg-head-cell-color: #E83B52;
  --zg-head-cell-font-size: 11px;
  --theme-color-primary: #E83B52;
  --zg-row-card-padding: 0;
  --zg-select-arrow-color: #ffffff;
}

zg-caption {
  border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
}

zg-caption,
zg-pager,
zg-watermark {
  font-weight: 900;
  background: #232323;
  color: white;
}

zg-control-bar {
  background: #232323;
  border-top: 1px solid #7f7f7f;
}

zg-body[layout="card"] {
  align-items: flex-start;
  background: transparent;
  min-height:744px;
  /*grid-template-columns: repeat(auto-fill, minmax(calc(var(--zg-card-columns, 33.3%) - var(--card-gap)), 1fr));*/
}

[viewport="tablet-portrait"] zg-body[layout="card"] {
  --zg-card-columns: 33.33%;
}

zg-row[layout="card"] {
  --zg-row-body-background: #fff;
  --zg-row-body-background_hover: #fff;
  margin: 5px;	
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 1px solid #E83B52;
  min-height: 355px;
}

zg-body zg-cell {
 	padding-bottom: 0; 
}

zg-body zg-cell[text="Team"] {
  max-width: 170px;
}

zg-body zg-cell:nth-child(1) {
  background: #E83B52;
  color: white;
  font-weight: 900;
  font-size: 20px;
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: 15px;
}

zg-body zg-cell:before:nth-child(1) {
  background: #E83B52;
  color: white;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 15px;
}

zg-body zg-cell:nth-child(7) {
  padding-bottom: 20px;
}

img { 
max-width: 250px; 
}

.flag { 
  margin-right:2px; 
  font-size:130%; 
}

.team--logo { 
  width:20px; 
  margin-right: 7px;
}

zg-pager {
  border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
}

[layout="card"] .player-photo {
  position: absolute;
  right: 0;
  bottom: -4px;
  /*top: 80px;*/
  display: block;
  max-height: 80%;
  transform: translateX(80px);
}

[viewport="mobile"][layout="card"] .player-photo {
  transform: translateX(70px);
}

[layout="card"] .player-photo:before {
	display: none;
}

JS

// Store vars
let emojis = null;

// Register nationality renderer method
ZingGrid.registerMethod(renderNationality, 'renderNationality');
function renderNationality(nationality, $cell) {
  const emoji = renderEmojis(nationality[0].countryFlag, $cell);
  return `${emoji}  ${nationality[0].country}`;
}

// Register emoji renderers
ZingGrid.registerMethod(renderEmojis, 'renderEmojis');
function renderEmojis (shortcode, cellRef, $cell) {
  let returnText = shortcode;
  if (emojis) {
    for (let emoji in emojis) {
      if (shortcode === emojis[emoji].shortname) {
        returnText = emojis[emoji].emoji;
        cellRef.children[0].classList.add('loaded');
        break;
      }
    }
  }
  return returnText;
}

// Javascript code to execute after DOM content
// Store grid ref
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
  const ENDPOINT = 'https://gist.githubusercontent.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb/raw/ac8dde8a374066bcbcf44a8296fc0522c7392244/emojis.json';
  fetch(ENDPOINT)
    .then(r => r.json())
    .then(r => {
      emojis = r.emojis;
      // Refresh the grid to render the emoji
      if (zgRef) zgRef.refresh();
    });
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio