Demos Back to Docs

Popular Premier League Players

56 of 124
This stylistic demo shows off some of the top footballers in the world.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Popular Premier League Players</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-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;
      opacity: 1;
      -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-option-list-color: black;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    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;
    }

    .zg-body img {
      max-width: 250px;
    }

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

    .zg-body .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;
    }

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

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

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

    zing-grid[loading] {
      height: 942px;
    }
  </style>
</head>

<body class="zg-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" class="loading">
    <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>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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 `<span class="flag">${emoji} </span> ${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();
        });
    });
    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-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 class="zg-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"
      class="loading"
    >
			<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>
.zg-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;
  opacity: 1;
  -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-option-list-color: black;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

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;
}

.zg-body img { 
  max-width: 250px; 
}

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

.zg-body .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;
}

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

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

.zg-body [layout="card"] .player-photo:before {
	display: none;
}
// 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 `<span class="flag">${emoji} </span> ${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();
    });
});
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
    setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

Related Docs

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

Edit in Studio

Related Docs

Demo Gallery