Demos Back to Demos

Nobel Prize Winners in 2018

25 of 25
A card mode only grid that shows a unique use of custom templating and paging.
Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">
  </head>
  <body>
    <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>
        <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>
      </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>

CSS

/* Viewport */
html,body { margin:0; padding:0; width:100%; height:100%; box-sizing:border-box; }
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 */
.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 */
.nobel-block { position:absolute; top:0; right:0; width:100%; height:100%; display:flex; }
[nobel-block] { position:relative; height:100%; background-position:50% 0; background-size:cover; background-color:#ecebe6; }
[nobel-block="1"] { width:27%; opacity:.05; background-color:#8e691f; background-blend-mode:luminosity; }
[nobel-block="2"] { width:33%; opacity:.5; background-color:#8e691f; background-blend-mode:luminosity; }
[nobel-block="3"] { width:40%; background-color:#8e691f; background-blend-mode:overlay; }
[viewport="mobile"] [nobel-block],
[viewport="tablet-portrait"] [nobel-block] { display:none; }

/* Laureate Image/Pic Wrapper */
.nobel-bio { z-index:2; position:absolute; top:85px; left:2%; width:30%; display:flex; align-items:flex-end; }
.nobel-bio h2 { margin:0 0 0 15px; font-size:2rem; font-weight:300; }
[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%; }
}
.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; }
.nobel-img:after { content:''; display:block; clear:both; }
.nobel-img img { width:100%; float:left; }

/* Reasons for award */
.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; }
.nobel-motivation:before { content:'“'; display:inline; color:#fff; text-shadow:0 0 2px #783b00; font-size:2rem; font-family:cursive; }
.nobel-motivation:after { content:'”'; display:inline; color:#fff; text-shadow:0 0 2px #783b00; font-size:2rem; font-family:cursive; }
[viewport="mobile"] .nobel-motivation,
[viewport="tablet-portrait"] .nobel-motivation { display:none; }

/* Text Columns */
[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; }
[nobel-col="life"] { left:0; width:27%; background:linear-gradient(transparent, rgba(255,255,255,.4) 20%, rgba(255,255,255,.7) 40%, #fff); }
[nobel-col="work"] { left:27%; width:33%; background:linear-gradient(transparent, rgba(255,241,212,.4) 20%, rgba(255,241,212,.7) 40%, #fff1d4); }
[nobel-col="work"] p { background:rgba(255,241,212,.7); }
[nobel-col] h3 { margin:0; display:inline-flex; text-transform:uppercase; font-size:.9rem; }
[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; }
[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; }
[viewport="mobile"] [nobel-col] p, [viewport="tablet-portrait"] [nobel-col] p { padding:0; }
[viewport="mobile"] [nobel-col="work"], [viewport="tablet-portrait"] [nobel-col="work"] { background:#fff1d4; }

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

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

/* 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); }
}
[nobel-ring] { z-index:1; position:absolute; border-radius:50%; }
[nobel-ring="1"] { top:14%; left:6%; width:270px; height:270px; opacity:.2; border:20px solid #f3ad48; animation:2s PULSE infinite; }
[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; }
[viewport="mobile"] [nobel-ring],
[viewport="tablet-portrait"] [nobel-ring] { display:none; }

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

JS

// 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 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