Grid optimizations (#88)

Assembly-WebCrew · Sep 4, 2020 · 95aa844 · 95aa844
1 parent a48f299
commit 95aa844
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 26 deletions.
diff --git a/src/app/content-blocks/block-grid/block-grid.component.html b/src/app/content-blocks/block-grid/block-grid.component.html
@@ -7,7 +7,8 @@
   </li>
 </ul>
 <div class="grid-items">
-  <div class="grid-item" *ngFor="let page of pages" style.background-image="url({{page.featuredImage?.url}})">
+  <div class="grid-item" *ngFor="let page of pages; trackBy: trackItem"
+    [style.background-image]="getPageBackground(page)">
     <a [routerLink]="getUrl(page.slug)">
       <div class="mask"></div>
       <div class="content">

diff --git a/src/app/content-blocks/block-grid/block-grid.component.scss b/src/app/content-blocks/block-grid/block-grid.component.scss
@@ -132,7 +132,6 @@
       font-family: $font-title;
       font-size: $font-size-h4;
       background: $color-accent-dark;
-      border-radius: 0;
       cursor: pointer;
       color: $white;
       outline: none;

diff --git a/src/app/content-blocks/block-grid/block-grid.component.ts b/src/app/content-blocks/block-grid/block-grid.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ContentfulService } from '../../core/contentful.service';
+import { Page } from '../../core/interfaces/page.interface';
 
 @Component({
   selector: 'asm-block-grid',
@@ -58,6 +59,13 @@ export class BlockGridComponent implements OnInit {
     return icon;
   }
 
+  getPageBackground(page: Partial<Page>) {
+    if (page.featuredImage && page.featuredImage.url) {
+      return 'url(' + page.featuredImage.url + '?h=345)';
+    }
+    return undefined;
+  }
+
   onToggleFilter(filter: string) {
     if (this.activeFilters.has(filter)) {
       this.activeFilters.delete(filter);
@@ -68,4 +76,8 @@ export class BlockGridComponent implements OnInit {
       return this.activeFilters.size === 0 || (page.tags && page.tags.some(tag => this.activeFilters.has(tag.title)));
     });
   }
+
+  trackItem(index: number, item: Partial<Page>): number | string {
+    return item.slug || index;
+  }
 }
diff --git a/src/app/content.resolve.ts b/src/app/content.resolve.ts
@@ -129,6 +129,19 @@ export class ContentResolve implements Resolve<any> {
                       }
                     }
                   }
+                  ... on BlockGrid {
+                    pages {
+                      slug
+                      title
+                      tags {
+                        title
+                      }
+                      featuredImage{
+                        title
+                        url
+                      }
+                    }
+                  }
                 }
                 featuredImage{
                   title

diff --git a/src/index.html b/src/index.html
@@ -1,22 +1,25 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Assembly</title>
   <base href="/">
 
-  <meta name="description" content="Assembly is a bi-annual computer festival, esports event, demoscene and lan party in Helsinki, Finland.">
+  <meta name="description"
+    content="Assembly is a bi-annual computer festival, esports event, demoscene and lan party in Helsinki, Finland.">
   <meta name="keywords" content="assembly, lan, lan party, festival, esports, demoscene, gaming" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <meta name="theme-color" content="#000b19" />
   <!-- Open Graph for Facebook etc. -->
   <meta property="og:url" content="https://www.assembly.org" />
   <meta property="og:type" content="website" />
-  <meta property="og:title" content="Assembly Party" />
+  <meta property="og:title" content="ASSEMBLY Party" />
   <meta property="og:site_name" content="Assembly" />
   <meta property="og:rich_attachment" content="true" />
-  <meta property="og:description" content="Assembly is a bi-annual computer festival, esports event, demoscene and lan party in Helsinki, Finland." />
+  <meta property="og:description"
+    content="Assembly is a bi-annual computer festival, esports event, demoscene and lan party in Helsinki, Finland." />
   <meta id="og-image" property="og:image" content="/assets/images/some-image.jpg" />
   <meta property="og:locale" content="en_US" />
   <!--<meta property="og:locale:alternate" content="fi_FI" />-->
@@ -29,11 +32,14 @@
     <meta property="article:publisher" content="https://www.facebook.com/asmorg"/>
   -->
   <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-57BCQ4Z');</script>
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-57BCQ4Z');</script>
   <!-- End Google Tag Manager -->
   <script type="application/ld+json">
     {
@@ -51,34 +57,25 @@
       ]
     }
   </script>
-  <script type="application/ld+json">
-    {
-      "@context": "http://schema.org",
-      "@type": "Event",
-      "name": "ASSEMBLY Summer 2018",
-      "description": "Assembly is a bi-annual computer festival, esports event, demoscene and lan party in Helsinki, Finland.",
-      "startdate": "2018-08-02",
-      "endDate": "2018-08-05",
-      "image": [
-        "https://www.assembly.org/assets/images/assembly-generic-image-1.jpg"
-      ]
+  <style type="text/css">
+    html {
+      background: #000b19;
     }
-  </script>
-  <style type="text/css">html {background: #000b19;}</style>
+  </style>
 
 </head>
 
 <body>
   <asm-root>
     <div style="background: #000b19; color: white; font-size: 3rem; font-family: monospace; position: absolute;
     margin: auto; top: 0; right: 0; bottom: 0; left: 0; height: 4rem; text-align: center;">
-    Assembling...
+      Assembling...
     </div>
   </asm-root>
 
   <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-57BCQ4Z"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-57BCQ4Z" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
 </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -129,6 +129,19 @@ export class ContentResolve implements Resolve<any> { @@
                           }
                         }
                       }
+                      ... on BlockGrid {
+                        pages {
+                          slug
+                          title
+                          tags {
+                            title
+                          }
+                          featuredImage{
+                            title
+                            url
+                          }
+                        }
+                      }
                     }
                     featuredImage{
                       title
@@ Expand Down @@