Cambio par ala visualización de la imagen background en portada y las secciones oportunas.

Cambios para la lectura de PDF en la plantilla de Pages a través del
item libro_publitas

package-lock.json

@@ -296,6 +296,11 @@
       "integrity": "sha512-HnekQWq9t3Gl5aBYYi8sGyOWm85M5ub2llMrpQkRY94eJEUhsUr8qYNaeefv22cxxm+D67a+5zIzpl+dpFxdjQ==",
       "dev": true
     },
+    "@types/pdfjs-dist": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@types/pdfjs-dist/-/pdfjs-dist-0.1.1.tgz",
+      "integrity": "sha512-sPKxvP9QTdMAhYQWkT9Yl0VfGzvHkau1Lc5evRHl0kQv1wVcdJz1MrD7yPP4jTS6+D+KB19ho1vFIOwVUezVvw=="
+    },
     "@types/q": {
       "version": "0.0.32",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
@@ -391,7 +396,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.0.tgz",
       "integrity": "sha512-VDUX1oSajablmiyFyED9L1DFndg0P9h7p1F+NO8FkIzei6EPrR6Zu1n18rd5P8PqaSRd/FrWv3G1TVBqpM83gA==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "2.0.1",
         "fast-json-stable-stringify": "2.0.0",
@@ -402,16 +406,14 @@
         "fast-deep-equal": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-          "dev": true
         }
       }
     },
     "ajv-keywords": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
-      "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
+      "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo="
-      "dev": true
     },
     "align-text": {
       "version": "0.1.4",
@@ -1029,8 +1031,7 @@
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
-      "dev": true
     },
     "binary-extensions": {
       "version": "1.11.0",
@@ -1189,6 +1190,11 @@
         "hoek": "2.16.3"
       }
     },
+    "bootstrap": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
+      "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2605,8 +2611,7 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
-      "dev": true
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -3212,8 +3217,7 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
-      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -5471,8 +5475,7 @@
     "json-schema-traverse": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
-      "dev": true
     },
     "json-stable-stringify": {
       "version": "1.0.1",
@@ -5498,8 +5501,7 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
-      "dev": true
     },
     "jsonfile": {
       "version": "4.0.0",
@@ -5787,7 +5789,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
       "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
-      "dev": true,
       "requires": {
         "big.js": "3.2.0",
         "emojis-list": "2.1.0",
@@ -6485,6 +6486,11 @@
         "lower-case": "1.1.4"
       }
     },
+    "node-ensure": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
+      "integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc="
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -7344,6 +7350,15 @@
         "sha.js": "2.4.11"
       }
     },
+    "pdfjs-dist": {
+      "version": "1.10.88",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-1.10.88.tgz",
+      "integrity": "sha1-Aw8Ud/QziiKD2wsR7DSUbF/c0qU=",
+      "requires": {
+        "node-ensure": "0.0.0",
+        "worker-loader": "1.1.1"
+      }
+    },
     "performance-now": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -7790,8 +7805,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-      "dev": true
     },
     "q": {
       "version": "1.4.1",
@@ -8435,7 +8449,6 @@
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
       "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
-      "dev": true,
       "requires": {
         "ajv": "6.5.0",
         "ajv-keywords": "3.2.0"
@@ -8694,6 +8707,16 @@
         "debug": "2.6.9"
       }
     },
+    "simple-pdf-viewer": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/simple-pdf-viewer/-/simple-pdf-viewer-2.0.2.tgz",
+      "integrity": "sha512-/siKUMDqugwHvFSqpgLmB6T8wfqxXArU6uoZ/vL/f7gCgqZ2O95oyYBHDLDRqtvvc8gSP1+t6z//2NEQ0fn3rA==",
+      "requires": {
+        "@types/pdfjs-dist": "0.1.1",
+        "pdfjs-dist": "1.10.88",
+        "tslib": "1.9.2"
+      }
+    },
     "slack-node": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/slack-node/-/slack-node-0.2.0.tgz",
@@ -10032,7 +10055,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "2.1.1"
       }
@@ -11543,6 +11565,15 @@
         "errno": "0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-1.1.1.tgz",
+      "integrity": "sha512-qJZLVS/jMCBITDzPo/RuweYSIG8VJP5P67mP/71alGyTZRe1LYJFdwLjLalY3T5ifx0bMDRD3OB6P2p1escvlg==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

package.json

@@ -21,8 +21,10 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "bootstrap": "^4.1.1",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.6",
+    "simple-pdf-viewer": "^2.0.2",
     "zone.js": "^0.8.19"
   },
   "devDependencies": {

src/app/app-routing.module.ts

@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PageComponent } from './page/page.component';
 import { HomeComponent } from './home/home.component';
+import { InterviewComponent } from './interview/interview.component';
 
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full'},
   { path: 'home', component: HomeComponent },
+  { path: 'entrevista', component: InterviewComponent },
+  { path: 'entrevista/:id', component: InterviewComponent },
   { path: ':id', component: PageComponent },
   { path: ':parent/intro', redirectTo:':parent'},
   { path: ':parent/:id', component: PageComponent},

src/app/app.module.ts

@@ -1,6 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
+import { SimplePdfViewerModule } from 'simple-pdf-viewer';
 
 import { PageService } from './page.service';
 import { AppComponent } from './app.component';
@@ -12,6 +14,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { PageComponent } from './page/page.component';
 import { HomeComponent } from './home/home.component';
 import { MenuChildsComponent } from './menu-childs/menu-childs.component';
+import { InterviewComponent } from './interview/interview.component';
+import { InterviewGridComponent } from './interview-grid/interview-grid.component';
+import { DedaloService } from './dedalo.service';
 
 
 @NgModule({
@@ -23,15 +28,20 @@ import { MenuChildsComponent } from './menu-childs/menu-childs.component';
     FooterComponent,
     PageComponent,
     HomeComponent,
-    MenuChildsComponent
+    MenuChildsComponent,
+    InterviewComponent,
+    InterviewGridComponent
   ],
   imports: [
     BrowserModule,
     HttpModule,
     AppRoutingModule,
+    FormsModule,
+    SimplePdfViewerModule
   ],
   providers: [
-    PageService
+    PageService,
+    DedaloService,
   ],
   bootstrap: [AppComponent]
 })

src/app/dedalo.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DedaloService } from './dedalo.service';
+
+describe('DedaloService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DedaloService]
+    });
+  });
+
+  it('should be created', inject([DedaloService], (service: DedaloService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/dedalo.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map';
+import { InterviewItem } from './interview';
+
+@Injectable()
+export class DedaloService {
+
+  apiUrl : string = "https://localhost:3000/interview"
+
+  constructor(
+    private http: Http
+  ) { }
+
+  getInterviews() : Observable<InterviewItem> {
+    return this.http.get(this.apiUrl);
+  }
+
+}

src/app/interview-grid/interview-grid.component.html

@@ -0,0 +1,11 @@
+<div class="row item-container-wrapper">
+  <div class="item-container">
+         <h3>Trabajo</h3>
+         <div class="thumbnail-image">
+                 <a href="item.html"><h2>Juan Garcia</h2></a>
+         </div>
+         <div class="content">
+           <p>Breve intro de la entrevista aquí disponible.</p>
+         </div>
+  </div>
+ </div>

src/app/interview-grid/interview-grid.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InterviewGridComponent } from './interview-grid.component';
+
+describe('InterviewGridComponent', () => {
+  let component: InterviewGridComponent;
+  let fixture: ComponentFixture<InterviewGridComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InterviewGridComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InterviewGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/interview-grid/interview-grid.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input} from '@angular/core';
+import { InterviewItem } from '../interview';
+
+@Component({
+  selector: 'app-interview-grid',
+  templateUrl: './interview-grid.component.html',
+  styleUrls: ['./interview-grid.component.css']
+})
+export class InterviewGridComponent implements OnInit {
+
+  @Input() interviews : InterviewItem[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/interview.ts

@@ -0,0 +1,5 @@
+export class InterviewItem {
+	constructor(
+		id: string
+	) {}
+}

src/app/interview/interview.component.html

@@ -0,0 +1,20 @@
+<app-header [pages]=pages></app-header>
+
+<div class="more" id="more"></div>
+  <article>
+		<div class="row">
+      <!--colmenu-->
+			<div class="col-md-3 offset-md-1 info">
+				<ul class="filters">
+					<li class="active">All</li>
+					<li>Trabajo</li>
+					<li>Familia</li>
+					<li>Otra Materia</li>
+				</ul>
+			</div>
+      <!--colcontent-->
+			<div class="col-md-7">
+        <app-interview-grid [interviews]=interviews></app-interview-grid>
+			</div>
+		</div>
+</article>

src/app/interview/interview.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InterviewComponent } from './interview.component';
+
+describe('InterviewComponent', () => {
+  let component: InterviewComponent;
+  let fixture: ComponentFixture<InterviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InterviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InterviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/interview/interview.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { PageItem } from '../page';
+import { InterviewItem } from '../interview';
+import { DedaloService } from '../dedalo.service';
+
+@Component({
+  selector: 'app-interview',
+  templateUrl: './interview.component.html',
+  styleUrls: ['./interview.component.css']
+})
+export class InterviewComponent implements OnInit {
+
+  pages : PageItem[];
+  interviews : InterviewItem[];
+
+  constructor(
+    private dedaloService : DedaloService
+  ) {
+    let p = new PageItem(
+      '0',
+      'Entrevistas',
+      'Una colección de entrevistas',
+      '',
+      'entrevistas',
+      '0'
+    );
+    this.pages = [p];
+  }
+
+  ngOnInit() {
+  }
+
+  getInterviews() : void {
+    this.interviews = [];
+  }
+
+}

src/app/page.service.ts

@@ -3,6 +3,8 @@ import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angul
 import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import { PageItem } from './page';
+import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';
+
 
 // @Injectable({providedIn : 'root'}) {}
 @Injectable()
@@ -12,7 +14,8 @@ export class PageService {
   apiUrl : string = "https://backend.industriapaisaia.eus/wp-json/wp/v2"
 
   constructor(
-    private http: Http
+    private http: Http,
+    public  sanitizer: DomSanitizer
   ) { }
 
   getItems() : void {
@@ -21,6 +24,7 @@ export class PageService {
     let search = new URLSearchParams();
     search.set('foo', 'moo');
     search.set('limit', "25");
+    search.set('_embed','');
     this.http.get(url,{search:search})
       .toPromise()
       .then(res => console.log(res.json()));
@@ -47,6 +51,7 @@ export class PageService {
 
   getPages(searchParams) : Observable<PageItem[]> {
     searchParams.set('orderby','menu_order');
+    searchParams.set('_embed','');
     //searchParams.set('context','embed');
     let url = `${this.apiUrl}/pages`;
     return this.http.get(url,{search:searchParams})
@@ -61,8 +66,27 @@ export class PageService {
             item.slug,
             item.parent
           );
-          if (item.acf.background_image) { page['background_image'] = item.acf.background_image.sizes.large; }
+
-          else  { page['background_image'] = ''; }
+          /* featured images */
+          if ( item["_embedded"]["wp:featuredmedia"] ) {
+            page["featuredmedia"] = item["_embedded"]["wp:featuredmedia"];
+
+            if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]) {
+              // page['background_image'] = item.acf.background_image.sizes.large;
+              page['background_image'] = item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]["source_url"]
+            } else if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]) {
+              if ( item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"] == 'undefined' ) { page['background_image']=''}
+              else { page['background_image'] = item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"] }
+            } else  {
+              page['background_image'] = '';
+            }
+          }
+
+          /* Publitas */
+          if (item["acf"] && item["acf"]["libro_publitas"]) {
+            page["publitas_link"] = this.sanitizer.bypassSecurityTrustUrl(item["acf"]["libro_publitas"]);
+            //this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
+          }
 
           let link = document.createElement('a');
           link.href = item.link;

src/app/page.ts

@@ -1,3 +1,5 @@
+import {SafeUrl} from '@angular/platform-browser';
+
 export class PageItem {
   constructor(
     public id : string,
@@ -7,7 +9,9 @@ export class PageItem {
     public slug : string,
     public parent? : string,
     public background_image? : string,
-    public link?: string
+    public link?: string,
+    public publitas_link?: SafeUrl,
+    public featuredmedia ? : any[]
   ) {}
 
   // public set (key,attr) {

src/app/page/page.component.html

@@ -16,6 +16,25 @@
         <app-menu-childs *ngIf="page.parent>0" [parent_id]="page.parent" [parent_link]="page.link"></app-menu-childs>
         <!-- imagenes en lista-->
       </div>
-			<div class="col-md-7" [innerHTML]="page.content"><!--content--></div>
+			<div class="col-md-7">
+				<div class="row" *ngIf="page.content">
+					<div class="col-md-12" [innerHTML]="page.content"></div>
+				</div>
+				<div class="row" *ngIf="page.publitas_link">
+					<div class="col-md-12">
+						<simple-pdf-viewer #pdfViewer [src]="'../assets/test.pdf#zoom=1.01'" [removePageBorders]="true"></simple-pdf-viewer>
+						<div class="pdf-buttons" *ngIf="!pdfViewer.isDocumentLoaded()">
+							<button>Cargando documento</button>
+						</div>
+						<div class="pdf-buttons" style="" *ngIf="pdfViewer.isDocumentLoaded()">
+							<button (click)="pdfViewer.firstPage()">First Page</button>
+							<button (click)="pdfViewer.prevPage()">Previous Page</button>
+							<button (click)="pdfViewer.nextPage()">Next Page</button>
+							<button (click)="pdfViewer.lastPage()">Last Page</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- <div class="col-md-7">{{page.content}}</div> -->
 		</div>
   </article>

src/app/page/page.component.ts

@@ -16,7 +16,7 @@ export class PageComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private pageService: PageService
+    private pageService: PageService,
   )
   {
         this.route.params.subscribe( params => {
@@ -24,6 +24,8 @@ export class PageComponent implements OnInit {
           this.parent = params.parent;
           this.getPage();
         } );
+
+        
   }
 
   ngOnInit() {}
@@ -33,7 +35,7 @@ export class PageComponent implements OnInit {
     this.pageService.getPage(this.slug)
       .subscribe(data => {
         this.pages = data;
-        console.log(data);
+        //console.log(data);
       });
   }
 

src/app/section/section.component.html

@@ -1,9 +1,10 @@
+<!-- {{diagnostic}} -->
 <div *ngFor="let page of pages" class="ia-section bg1" id="{{page.slug}}">
-	<section>
+	<section class="ia-section">
 	<a href="/{{page.slug}}">
-	<div class="row section-content">
+	<div class="row section-content" >
 		<div class="col-md-1 ia-select"></div>
-		<div class="col-md-5"><h1><span>{{page.title}}</span></h1></div>
+		<div class="col-md-5" [ngStyle]="{'background-size':'cover', 'background-repeat':'no-repeat','background-image':'url(\''+page.background_image+'\')'}"><h1><span>{{page.title}}</span></h1></div>
 		<div class="col-md-6" [innerHTML]="page.excerpt"></div>
 	</div>
 	</a>

src/app/section/section.component.ts

@@ -12,7 +12,10 @@ export class SectionComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit() {
+  ngOnInit() {  }
+
+  get diagnostic() {
+    return JSON.stringify(this.pages);
   }
 
 }

src/styles.css

@@ -7,14 +7,14 @@
         font-family: "Manteka";
         font-style: normal;
         font-weight: normal;
-        src: url('./assets/manteka.woff');
+        src: url('./assets/vision-webfont.woff');
 }
 
 /* main */
 * { transition:0.2s;}
 
 body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;}
-h1,h2 { font-family: "Manteka", sans-serif;}
+h1,h2 { font-family: "Manteka", sans-serif;text-transform:uppercase;font-weight:bold;}
 
 header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;}
 
@@ -49,7 +49,7 @@ div.stick-menu { z-index:200;position:fixed;width:100%;top:0;}
 
 /* section */
 div.ia-section { min-height:300px;width:100%;background-size:contain; background-repeat:no-repeat; }
-div.ia-section div.row div {text-align:center;}
+div.ia-section div.row div {text-align:center;min-height:300px;}
 div.ia-section h1,
 div.ia-section p  {margin-top:50px;padding:20px;}
 div.ia-section p { font-size:1.2em;}
@@ -64,11 +64,12 @@ div.ia-section div.col-md-6  { padding:20px;}
 /*article*/
 
 article {padding-top:80px;}
-article img {border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);}
+article img {max-width:100%; height:auto; border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);}
 article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);cursor:pointer;}
 article p {font-size:0.9em;}
 article h2 span {background:#d2e8eb;padding:10px;}
 article h2 {margin-bottom:20px;}
+article video {max-width:100%;}
 
 /* footer */
 footer { min-height:300px; height:100%; background-color:#d2e8eb; padding:20px; color:#000;}
@@ -130,3 +131,8 @@ header.item { margin-top:50px;height:0;}
 
 /* imagen */
 img.fullwidth {width:100%;}
+
+/* pdf buttons */
+div.pdf-buttons { width:100%;min-height:50px;text-align:center;float:right;position:absolute;top:0; }
+div.pdf-buttons button {border:0;background:#d2e8eb; font-size:1em;cursor:pointer;}
+div.pdf-buttons button:hover {background:#f7886c; }