Demos Back to Docs

Nobel Prize Winners in 2018

48 of 124

This sample is a card mode only grid that shows a unique use of custom templating and paging.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/RSQWKMZ5

Result Full HTML CSS JS

Edit Download

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    /* Viewport */
    .zg-html,
    .zg-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    .zg-body {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(-45deg, #491708, #642600, #c97b00, #ffbc00, #ffe893);
      background-size: 400% 400%;
      animation: GRAD 25s ease infinite;
    }

    /* Grid Overrides */
    zing-grid {
      max-width: 1400px;
      border: 0;
      --theme-color-primary: #F0C555;
    }

    zg-body {
      padding: 0;
      min-height: 649px;
      display: flex;
      border: 0;
    }

    zg-row {
      padding: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    zg-cell {
      padding: 0;
    }

    [data-field-label] {
      display: none;
    }

    [data-field-index] {
      padding: 0;
      width: 100%;
      height: 100%;
    }

    /* Custom Pager */
    zg-pager {
      background: linear-gradient(90deg, #642600, #491708);
      border: 0;
    }

    zg-pager zg-icon,
    zg-pager svg {
      width: 40px;
      height: 40px;
    }

    zg-pager path {
      fill: #fff;
    }

    zg-pager zg-input {
      height: 0;
      visibility: hidden;
      pointer-events: none;
    }

    [action="nextpage"][slot="left"] {
      display: none;
    }

    [viewport="mobile"] [action="nextpage"][slot="left"],
    [viewport="tablet-portrait"] [action="nextpage"][slot="left"] {
      display: flex;
    }

    [viewport="mobile"] [action="nextpage"][slot="right"],
    [viewport="tablet-portrait"] [action="nextpage"][slot="right"] {
      display: none;
    }

    /* Custom Card View */
    zg-card {
      position: relative;
      padding: 0;
      height: 100%;
      display: flex;
      font-family: 'Open Sans', sans-serif;
    }

    /* Card Wrap */
    .zg-body .nobel-wrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: none;
    }

    zing-grid[loaded] .nobel-wrap {
      display: block;
    }

    [viewport="mobile"] .nobel-wrap,
    [viewport="tablet-portrait"] .nobel-wrap {
      min-height: 700px;
      display: flex;
      flex-direction: column;
    }

    /* Vertical Sections */
    .zg-body .nobel-block {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      display: flex;
    }

    .zg-body [nobel-block] {
      position: relative;
      height: 100%;
      background-position: 50% 0;
      background-size: cover;
      background-color: #ecebe6;
    }

    .zg-body [nobel-block="1"] {
      width: 27%;
      opacity: .05;
      background-color: #8e691f;
      background-blend-mode: luminosity;
    }

    .zg-body [nobel-block="2"] {
      width: 33%;
      opacity: .5;
      background-color: #8e691f;
      background-blend-mode: luminosity;
    }

    .zg-body [nobel-block="3"] {
      width: 40%;
      background-color: #8e691f;
      background-blend-mode: overlay;
    }

    .zg-body [viewport="mobile"] [nobel-block],
    .zg-body [viewport="tablet-portrait"] [nobel-block] {
      display: none;
    }

    /* Laureate Image/Pic Wrapper */
    .zg-body .nobel-bio {
      z-index: 2;
      position: absolute;
      top: 85px;
      left: 2%;
      width: 30%;
      display: flex;
      align-items: flex-end;
    }

    .zg-body .nobel-bio h2 {
      margin: 0 0 0 15px;
      font-size: 2rem;
      font-weight: 300;
    }

    .zg-body [viewport="mobile"] .nobel-bio,
    [viewport="tablet-portrait"] .nobel-bio {
      position: relative;
      top: auto;
      left: auto;
      padding: 15px 2%;
      width: 100%;
      flex: 1;
    }

    /* Image */
    @keyframes GRAD {
      0% {
        background-position: 0 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0 50%;
      }
    }

    .zg-body .nobel-img {
      padding: 5px;
      width: 130px;
      min-height: 195px;
      background: linear-gradient(-45deg, #491708, #642600, #c97b00, #ffbc00, #ffe893, #fff6d3);
      background-size: 400% 400%;
      animation: GRAD 15s ease infinite;
    }

    .zg-body .nobel-img:after {
      content: '';
      display: block;
      clear: both;
    }

    .zg-body .nobel-img img {
      width: 100%;
      float: left;
    }

    /* Reasons for award */
    .zg-body .nobel-motivation {
      z-index: 1;
      position: absolute;
      top: 46%;
      left: 180px;
      color: #fff;
      text-shadow: 0 0 2px #783b00;
      font-size: 1.8rem;
      font-family: 'Sedgwick Ave', cursive;
    }

    .zg-body .nobel-motivation:before {
      content: '“';
      display: inline;
      color: #fff;
      text-shadow: 0 0 2px #783b00;
      font-size: 2rem;
      font-family: cursive;
    }

    .zg-body .nobel-motivation:after {
      content: '”';
      display: inline;
      color: #fff;
      text-shadow: 0 0 2px #783b00;
      font-size: 2rem;
      font-family: cursive;
    }

    .zg-body [viewport="mobile"] .nobel-motivation,
    .zg-body [viewport="tablet-portrait"] .nobel-motivation {
      display: none;
    }

    /* Text Columns */
    .zg-body [nobel-col] {
      z-index: 1;
      position: absolute;
      top: 379px;
      padding: 0 1% 0 2%;
      height: 270px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .zg-body [nobel-col="life"] {
      left: 0;
      width: 27%;
      background: linear-gradient(transparent, rgba(255, 255, 255, .4) 20%, rgba(255, 255, 255, .7) 40%, #fff);
    }

    .zg-body [nobel-col="work"] {
      left: 27%;
      width: 33%;
      background: linear-gradient(transparent, rgba(255, 241, 212, .4) 20%, rgba(255, 241, 212, .7) 40%, #fff1d4);
    }

    .zg-body [nobel-col="work"] p {
      background: rgba(255, 241, 212, .7);
    }

    .zg-body [nobel-col] h3 {
      margin: 0;
      display: inline-flex;
      text-transform: uppercase;
      font-size: .9rem;
    }

    .zg-body [nobel-col] p {
      margin: 10px 0 0;
      padding: 3px 13px 5px 0;
      flex: 1;
      overflow: auto;
      font-weight: 300;
      font-size: .85rem;
      line-height: 1.4;
      word-break: break-word;
    }

    .zg-body [viewport="mobile"] [nobel-col],
    [viewport="tablet-portrait"] [nobel-col] {
      position: relative;
      top: auto;
      left: auto !important;
      padding: 25px 2%;
      width: 100% !important;
      height: auto;
      min-height: 250px;
      overflow: auto;
    }

    .zg-body [viewport="mobile"] [nobel-col] p,
    [viewport="tablet-portrait"] [nobel-col] p {
      padding: 0;
    }

    .zg-body [viewport="mobile"] [nobel-col="work"],
    [viewport="tablet-portrait"] [nobel-col="work"] {
      background: #fff1d4;
    }

    /* Current Award Field */
    .zg-body .nobel-field {
      z-index: 1;
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px 0 10px 15px;
      width: 250px;
      background: #fff;
      box-sizing: border-box;
      word-break: break-word;
    }

    .zg-body [viewport="mobile"] .nobel-field,
    [viewport="tablet-portrait"] .nobel-field {
      padding: 10px 15px;
      width: auto;
    }

    .zg-body .nobel-fields {
      z-index: 1;
      position: absolute;
      top: 0;
      right: 250px;
      display: flex;
      box-sizing: border-box;
    }

    .zg-body .nobel-fields span {
      padding: 10px;
      cursor: pointer;
      color: #fff;
      background: #c1530f;
    }

    .zg-body .nobel-fields span:last-of-type {
      padding-right: 11px;
      padding-left: 11px;
    }

    .zg-body .nobel-fields span.physics[field-type="Physics"],
    .zg-body .nobel-fields span.chemistry[field-type="Chemistry"],
    .zg-body .nobel-fields span.medicine[field-type="Medicine"],
    .zg-body .nobel-fields span.peace[field-type="Peace"],
    .zg-body .nobel-fields span.economics[field-type="Economics"] {
      background: #642600;
    }

    .zg-body [viewport="mobile"] .nobel-fields,
    [viewport="tablet-portrait"] .nobel-fields {
      display: none;
    }

    /* Citation */
    .zg-body .nobel-source {
      position: absolute;
      top: 35px;
      right: 0;
      padding: 6px;
      font-size: 10px;
      word-break: break-word;
    }

    .zg-body .nobel-source a {
      opacity: .3;
      text-decoration: none;
      color: #7d2700;
      width: 30%
    }

    .zg-body [viewport="mobile"] .nobel-field,
    .zg-body [viewport="tablet-portrait"] .nobel-field,
    .zg-body [viewport="mobile"] .nobel-source,
    .zg-body [viewport="tablet-portrait"] .nobel-source {
      max-width: calc(100vw - 170px);
    }

    .zg-body [viewport="mobile"] .nobel-source,
    .zg-body [viewport="tablet-portrait"] .nobel-source {
      top: 45px;
    }

    /* All Fields Buttons */
    @keyframes PULSE {
      0% {
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
      }

      70% {
        box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
      }
    }

    .zg-body [nobel-ring] {
      z-index: 1;
      position: absolute;
      border-radius: 50%;
    }

    .zg-body [nobel-ring="1"] {
      top: 14%;
      left: 6%;
      width: 270px;
      height: 270px;
      opacity: .2;
      border: 20px solid #f3ad48;
      animation: 2s PULSE infinite;
    }

    .zg-body [nobel-ring="2"] {
      top: 60%;
      left: 40%;
      width: 870px;
      height: 870px;
      opacity: .4;
      border: 30px solid rgba(173, 103, 3, .2);
      animation: 2s PULSE 1s infinite;
    }

    .zg-body [viewport="mobile"] [nobel-ring],
    .zg-body [viewport="tablet-portrait"] [nobel-ring] {
      display: none;
    }

    zg-watermark {
      background: #B45927;
      border-top: none;
    }

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

<body class="zg-body">

  <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">

  <zing-grid layout="card" layout-controls="disabled" page-size-card="1">
    <zg-data src="https://zinggrid-examples.firebaseio.com/nobel-prize-2018"></zg-data>
    <zg-colgroup>
      <zg-column index="name"></zg-column>
    </zg-colgroup>

    <zg-card>
      <template>
        <div class="nobel-wrap">
          <div class="nobel-bio">
            <div class="nobel-img"><img src="[[record.imageFull]]"></div>
            <h2>[[record.name]]<br>[[record.surname]]</h2>
          </div>
          <div class="nobel-motivation">
            [[record.motivation]]
          </div>
          <div nobel-col="life">
            <h3>Life</h3>
            <p>[[record.life]]</p>
          </div>
          <div nobel-col="work">
            <h3>Work</h3>
            <p>[[record.work]]</p>
          </div>
          <div class="nobel-block">
            <div nobel-block="1"></div>
            <div nobel-block="2" style="background-image:url([[record.image]]);"></div>
            <div nobel-block="3" style="background-image:url([[record.image]]);"></div>
          </div>
          <div class="nobel-field">
            Nobel Prize 2018 - [[record.field]]
          </div>
          <div class="nobel-fields">
            <span class="physics" field-type="[[record.field]]">Physics</span>
            <span class="chemistry" field-type="[[record.field]]">Chemistry</span>
            <span class="medicine" field-type="[[record.field]]">Medicine</span>
            <span class="peace" field-type="[[record.field]]">Peace</span>
            <span class="economics" field-type="[[record.field]]">Economics</span>
          </div>
          <div class="nobel-source">
            <a href="[[record.source.url]]" target="_blank">[[record.source.text]]</a>
          </div>
          <div nobel-ring="1"></div>
          <div nobel-ring="2"></div>
        </div>
      </template>
    </zg-card>

    <zg-pager>
      <zg-button action="prevpage" slot="left"></zg-button>
      <zg-button action="nextpage" slot="left"></zg-button>
      <zg-button action="nextpage" slot="right"></zg-button>
      <zg-input action="currpage"></zg-input>
    </zg-pager>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Store <zing-grid>
    const zgRef = document.querySelector('zing-grid');
    // When grid ready, add attribute to stop lightdom flickering
    zgRef.addEventListener('grid:ready', function(e) {
      zgRef.setAttribute('loaded', '');
    });
    // 'All Fields' Button Click
    var matches = [{
        label: 'Physics',
        page: 1
      },
      {
        label: 'Chemistry',
        page: 4
      },
      {
        label: 'Medicine',
        page: 7
      },
      {
        label: 'Peace',
        page: 9
      },
      {
        label: 'Economics',
        page: 11
      }
    ];
    zgRef.addEventListener('click', e => setPage(e.target));
    // HELPER METHODS
    // ----------------------------------
    function setPage(target) {
      const fieldTypeAttr = 'field-type';
      // Early Exit
      if (!target.hasAttribute(fieldTypeAttr))
        return;
      // Store target pager input
      const pageInput = document.querySelector('zg-pager zg-input input');
      // Get clicked item's css class value for comparison
      const val = target.classList[0];
      // Get correct match from matches array
      const match = matches.filter(m => m.label.toLowerCase() === val);
      // Set input to matching value
      pageInput.value = match[0].page;
      // Focus the input
      pageInput.focus();
      // Simulate an enter-key press to jump to new page
      const ke = new KeyboardEvent("keydown", {
        bubbles: true,
        cancelable: true,
        keyCode: 13
      });
      pageInput.dispatchEvent(ke);
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">

    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">

    <zing-grid
      layout="card"
      layout-controls="disabled"
      page-size-card="1">
      <zg-data src="https://zinggrid-examples.firebaseio.com/nobel-prize-2018"></zg-data>
      <zg-colgroup>
        <zg-column index="name"></zg-column>
      </zg-colgroup>

      <zg-card>
        <template>
          <div class="nobel-wrap">
            <div class="nobel-bio">
              <div class="nobel-img"><img src="[[record.imageFull]]"></div>
              <h2>[[record.name]]<br>[[record.surname]]</h2>
            </div>
            <div class="nobel-motivation">
              [[record.motivation]]
            </div>
            <div nobel-col="life">
              <h3>Life</h3>
              <p>[[record.life]]</p>
            </div>
            <div nobel-col="work">
              <h3>Work</h3>
              <p>[[record.work]]</p>
            </div>
            <div class="nobel-block">
              <div nobel-block="1"></div>
              <div nobel-block="2" style="background-image:url([[record.image]]);"></div>
              <div nobel-block="3" style="background-image:url([[record.image]]);"></div>
            </div>
            <div class="nobel-field">
              Nobel Prize 2018 - [[record.field]]
            </div>
            <div class="nobel-fields">
              <span class="physics" field-type="[[record.field]]">Physics</span>
              <span class="chemistry" field-type="[[record.field]]">Chemistry</span>
              <span class="medicine" field-type="[[record.field]]">Medicine</span>
              <span class="peace" field-type="[[record.field]]">Peace</span>
              <span class="economics" field-type="[[record.field]]">Economics</span>
            </div>
            <div class="nobel-source">
              <a href="[[record.source.url]]" target="_blank">[[record.source.text]]</a>
            </div>
            <div nobel-ring="1"></div>
            <div nobel-ring="2"></div>
          </div>
        </template>
      </zg-card>

      <zg-pager>
        <zg-button action="prevpage" slot="left"></zg-button>
        <zg-button action="nextpage" slot="left"></zg-button>
        <zg-button action="nextpage" slot="right"></zg-button>
        <zg-input action="currpage"></zg-input>
      </zg-pager>
    </zing-grid>
    
  </body>
</html>

/* Viewport */
.zg-html, .zg-body { margin:0; padding:0; width:100%; height:100%; box-sizing:border-box; }
.zg-body { display:flex; align-items:center; justify-content:center; background:linear-gradient(-45deg,#491708, #642600,#c97b00,#ffbc00, #ffe893); background-size: 400% 400%; animation:GRAD 25s ease infinite; }

/* Grid Overrides */
zing-grid { max-width:1400px; border:0; --theme-color-primary: #F0C555;}
zg-body { padding:0; min-height:649px; display:flex; border:0; }
zg-row { padding:0; width:100%; height:100%; border:0; }
zg-cell { padding:0; }
[data-field-label] { display:none; }
[data-field-index] { padding:0; width:100%; height:100%; }

/* Custom Pager */
zg-pager { background:linear-gradient(90deg, #642600, #491708); border:0; }
zg-pager zg-icon, zg-pager svg { width:40px; height:40px; }
zg-pager path { fill:#fff; }
zg-pager zg-input { height:0; visibility:hidden; pointer-events:none; }
[action="nextpage"][slot="left"] { display:none; }
[viewport="mobile"] [action="nextpage"][slot="left"],
[viewport="tablet-portrait"] [action="nextpage"][slot="left"] { display:flex; }
[viewport="mobile"] [action="nextpage"][slot="right"],
[viewport="tablet-portrait"] [action="nextpage"][slot="right"] { display:none; }

/* Custom Card View */
zg-card { position:relative; padding:0; height:100%; display:flex; font-family: 'Open Sans', sans-serif; }

/* Card Wrap */
.zg-body .nobel-wrap { width:100%; height:100%; overflow:hidden; display:none; }
zing-grid[loaded] .nobel-wrap { display:block; }
[viewport="mobile"] .nobel-wrap, [viewport="tablet-portrait"] .nobel-wrap { min-height:700px; display:flex; flex-direction:column; }

/* Vertical Sections */
.zg-body .nobel-block { position:absolute; top:0; right:0; width:100%; height:100%; display:flex; }
.zg-body [nobel-block] { position:relative; height:100%; background-position:50% 0; background-size:cover; background-color:#ecebe6; }
.zg-body [nobel-block="1"] { width:27%; opacity:.05; background-color:#8e691f; background-blend-mode:luminosity; }
.zg-body [nobel-block="2"] { width:33%; opacity:.5; background-color:#8e691f; background-blend-mode:luminosity; }
.zg-body [nobel-block="3"] { width:40%; background-color:#8e691f; background-blend-mode:overlay; }
.zg-body [viewport="mobile"] [nobel-block],
.zg-body [viewport="tablet-portrait"] [nobel-block] { display:none; }

/* Laureate Image/Pic Wrapper */
.zg-body .nobel-bio { z-index:2; position:absolute; top:85px; left:2%; width:30%; display:flex; align-items:flex-end; }
.zg-body .nobel-bio h2 { margin:0 0 0 15px; font-size:2rem; font-weight:300; }
.zg-body [viewport="mobile"] .nobel-bio, [viewport="tablet-portrait"] .nobel-bio { position:relative; top:auto; left:auto; padding:15px 2%; width:100%; flex:1; }
/* Image */
@keyframes GRAD {
  0% { background-position:0 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0 50%; }
}
.zg-body .nobel-img { padding:5px; width:130px; min-height:195px; background:linear-gradient(-45deg,#491708, #642600,#c97b00,#ffbc00, #ffe893, #fff6d3); background-size: 400% 400%; animation:GRAD 15s ease infinite; }
.zg-body .nobel-img:after { content:''; display:block; clear:both; }
.zg-body .nobel-img img { width:100%; float:left; }

/* Reasons for award */
.zg-body .nobel-motivation { z-index:1; position:absolute; top:46%; left:180px; color:#fff; text-shadow:0 0 2px #783b00; font-size:1.8rem; font-family: 'Sedgwick Ave', cursive; }
.zg-body .nobel-motivation:before { content:'“'; display:inline; color:#fff; text-shadow:0 0 2px #783b00; font-size:2rem; font-family:cursive; }
.zg-body .nobel-motivation:after { content:'”'; display:inline; color:#fff; text-shadow:0 0 2px #783b00; font-size:2rem; font-family:cursive; }
.zg-body [viewport="mobile"] .nobel-motivation,
.zg-body [viewport="tablet-portrait"] .nobel-motivation { display:none; }

/* Text Columns */
.zg-body [nobel-col] { z-index:1; position:absolute; top:379px; padding:0 1% 0 2%; height:270px; display:flex; flex-direction:column; box-sizing:border-box; }
.zg-body [nobel-col="life"] { left:0; width:27%; background:linear-gradient(transparent, rgba(255,255,255,.4) 20%, rgba(255,255,255,.7) 40%, #fff); }
.zg-body [nobel-col="work"] { left:27%; width:33%; background:linear-gradient(transparent, rgba(255,241,212,.4) 20%, rgba(255,241,212,.7) 40%, #fff1d4); }
.zg-body [nobel-col="work"] p { background:rgba(255,241,212,.7); }
.zg-body [nobel-col] h3 { margin:0; display:inline-flex; text-transform:uppercase; font-size:.9rem; }
.zg-body [nobel-col] p { margin:10px 0 0; padding:3px 13px 5px 0; flex:1; overflow:auto; font-weight:300; font-size:.85rem; line-height:1.4; word-break:break-word; }
.zg-body [viewport="mobile"] [nobel-col], [viewport="tablet-portrait"] [nobel-col] { position:relative; top:auto; left:auto !important; padding:25px 2%; width:100% !important; height:auto; min-height:250px; overflow:auto; }
.zg-body [viewport="mobile"] [nobel-col] p, [viewport="tablet-portrait"] [nobel-col] p { padding:0; }
.zg-body [viewport="mobile"] [nobel-col="work"], [viewport="tablet-portrait"] [nobel-col="work"] { background:#fff1d4; }

/* Current Award Field */
.zg-body .nobel-field { z-index:1; position:absolute; top:0; right:0; padding:10px 0 10px 15px; width:250px; background:#fff; box-sizing:border-box; word-break:break-word; }
.zg-body [viewport="mobile"] .nobel-field, [viewport="tablet-portrait"] .nobel-field { padding:10px 15px; width:auto; }
.zg-body .nobel-fields { z-index:1; position:absolute; top:0; right:250px; display:flex; box-sizing:border-box; }
.zg-body .nobel-fields span { padding:10px; cursor:pointer; color:#fff; background:#c1530f; }
.zg-body .nobel-fields span:last-of-type { padding-right:11px; padding-left:11px; }
.zg-body .nobel-fields span.physics[field-type="Physics"],
.zg-body .nobel-fields span.chemistry[field-type="Chemistry"],
.zg-body .nobel-fields span.medicine[field-type="Medicine"],
.zg-body .nobel-fields span.peace[field-type="Peace"],
.zg-body .nobel-fields span.economics[field-type="Economics"] { background:#642600; }
.zg-body [viewport="mobile"] .nobel-fields, [viewport="tablet-portrait"] .nobel-fields { display:none; }

/* Citation */
.zg-body .nobel-source { position:absolute; top:35px; right:0; padding:6px; font-size:10px; word-break: break-word;}
.zg-body .nobel-source a { opacity:.3; text-decoration:none; color:#7d2700;  width: 30%}

.zg-body [viewport="mobile"] .nobel-field,
.zg-body [viewport="tablet-portrait"] .nobel-field,
.zg-body [viewport="mobile"] .nobel-source,
.zg-body [viewport="tablet-portrait"] .nobel-source { max-width: calc(100vw - 170px); }
.zg-body [viewport="mobile"] .nobel-source,
.zg-body [viewport="tablet-portrait"] .nobel-source { top: 45px; }

/* All Fields Buttons */
@keyframes PULSE {
  0% { box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); }
  70% { box-shadow: 0 0 0 30px rgba(204,169,44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0); }
}
.zg-body [nobel-ring] { z-index:1; position:absolute; border-radius:50%; }
.zg-body [nobel-ring="1"] { top:14%; left:6%; width:270px; height:270px; opacity:.2; border:20px solid #f3ad48; animation:2s PULSE infinite; }
.zg-body [nobel-ring="2"] { top:60%; left:40%; width:870px; height:870px; opacity:.4; border:30px solid rgba(173,103,3,.2); animation:2s PULSE 1s infinite; }
.zg-body [viewport="mobile"] [nobel-ring],
.zg-body [viewport="tablet-portrait"] [nobel-ring] { display:none; }

zg-watermark {
  background: #B45927;
  border-top: none;
}

// Store <zing-grid>
const zgRef = document.querySelector('zing-grid');
// When grid ready, add attribute to stop lightdom flickering
zgRef.addEventListener('grid:ready', function(e) {
  zgRef.setAttribute('loaded', '');
});
// 'All Fields' Button Click
var matches = [{
    label: 'Physics',
    page: 1
  },
  {
    label: 'Chemistry',
    page: 4
  },
  {
    label: 'Medicine',
    page: 7
  },
  {
    label: 'Peace',
    page: 9
  },
  {
    label: 'Economics',
    page: 11
  }
];
zgRef.addEventListener('click', e => setPage(e.target));
// HELPER METHODS
// ----------------------------------
function setPage(target) {
  const fieldTypeAttr = 'field-type';
  // Early Exit
  if (!target.hasAttribute(fieldTypeAttr))
    return;
  // Store target pager input
  const pageInput = document.querySelector('zg-pager zg-input input');
  // Get clicked item's css class value for comparison
  const val = target.classList[0];
  // Get correct match from matches array
  const match = matches.filter(m => m.label.toLowerCase() === val);
  // Set input to matching value
  pageInput.value = match[0].page;
  // Focus the input
  pageInput.focus();
  // Simulate an enter-key press to jump to new page
  const ke = new KeyboardEvent("keydown", {
    bubbles: true,
    cancelable: true,
    keyCode: 13
  });
  pageInput.dispatchEvent(ke);
}

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

Nobel Prize Winners in 2018

[[record.name]]
[[record.surname]]

Life

Work

Full Code

Demo Gallery

Nobel Prize Winners in 2018

[[record.name]][[record.surname]]

Life

Work

Full Code

Related Docs

Related Docs

Demo Gallery

[[record.name]]
[[record.surname]]