From 1cafce23fb3a0a40d0e3ac34ec7f7bb0e5eed61e Mon Sep 17 00:00:00 2001
From: Siroco <siroco@piperrak.cc>
Date: Tue, 2 Apr 2019 20:09:26 +0200
Subject: [PATCH] Fix per_page=100 for items results.

---
 src/app/app.component.css              |  8 ++++++--
 src/app/app.component.html             |  2 +-
 src/app/map-box/map-box.component.css  |  4 +++-
 src/app/map-box/map-box.component.html |  1 +
 src/app/map-box/map-box.component.ts   |  4 ++++
 src/app/pages/pages.component.css      |  6 +++---
 src/app/wordpress.service.ts           |  2 +-
 src/styles.css                         | 17 +++++++++++++++--
 8 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 5989f0f..92f022b 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -14,6 +14,10 @@ div.title h3 span.tablet-term b {font-weight:bold;cursor:pointer;}
 div.title h3 span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
 
 @media screen and (max-device-width: 720px) {
-  div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;}
-  div.title h2 span {float:left;width:40%;margin:5px 5px;text-align:center;}
+  div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;padding-bottom:30px;}
+  div.title h2 {display:inline-block;}
+  div.title h2 span {float:left;width:100%;text-align:center;margin:auto;background:none;}
+  div.title h2 span a {background:transparent;}
+  div.title h1 {width:100%;display:flex;flex-wrap:wrap;font-size:3rem;text-align:center;}
+  div.title h1 span {width:100%;}
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 34cd7ff..12987c2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="title">
-  <h3 style="color:#000;" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
+  <h3  class="title-filter" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
   <h1><span>Ticino</span> <span>Soundmap</span></h1>
   <h2><span *ngFor="let page of pages" style="" (click)="goToAnchor(page.slug)"><a style="color:#fff;" [innerHTML]="page.title.rendered"></a></span></h2>
   <!-- <p><span>Welcome to SOINUMAPA.NET Basque country Sound Map open archive project. Based on phonography or the art of recording environmental sounds, our aim is to show, share and exchange field recordings made in the Basque Country. Right now, you will find more than 1500 sound recordings: city noises, natural ambiences, animals, celebrations and parties, places, happenings, cultural events… including images and texts that behind their apparent silence, keep many sounds (see ABOUT) inside.
diff --git a/src/app/map-box/map-box.component.css b/src/app/map-box/map-box.component.css
index 3523015..09a5ba5 100644
--- a/src/app/map-box/map-box.component.css
+++ b/src/app/map-box/map-box.component.css
@@ -1,5 +1,7 @@
 div.map {z-index:1;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; }
+h3.map-title-filter {display:none;width:100%;}
 
 @media screen and (max-device-width: 720px) {
-  div.map {position:relative;}
+  div.map {position:relative;height:80vh;}
+  h3.map-title-filter {display:block;top:0;z-index:19;width:100%;width:80vw;position:absolute;margin-top:20px;margin-left:20px;}
 }
diff --git a/src/app/map-box/map-box.component.html b/src/app/map-box/map-box.component.html
index 77ab13a..2f63f98 100644
--- a/src/app/map-box/map-box.component.html
+++ b/src/app/map-box/map-box.component.html
@@ -1 +1,2 @@
 <div class="map" id="map"></div>
+<h3  class="map-title-filter" *ngIf="filter"><span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts
index dd69d79..c6bf660 100644
--- a/src/app/map-box/map-box.component.ts
+++ b/src/app/map-box/map-box.component.ts
@@ -182,6 +182,10 @@ export class MapBoxComponent implements OnInit {
     //this.source.setData(this.mapService.getSource(term))
   }
 
+  delFilter(filter) {
+    this.mapService.delFilter(filter);
+  }
+
 
 
 }
diff --git a/src/app/pages/pages.component.css b/src/app/pages/pages.component.css
index 46ce356..f020feb 100644
--- a/src/app/pages/pages.component.css
+++ b/src/app/pages/pages.component.css
@@ -20,9 +20,9 @@ footer div.info-footer {max-width:1000px;font-size:0.8rem;text-align:center;marg
 
 /* media query */
 @media screen and (max-device-width: 720px) {
-  div.page-container div.col-left  {margin:auto; width:100%;width:100%; min-height:0;clear:both;}
-  div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;width:80vw;clear:both;}
+  div.page-container div.col-left  {margin:auto; width:100%;width:100%; min-height:0;clear:both;min-width:0;}
+  div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;clear:both;min-width:0;}
   div.page-container h1 {min-width:0;width:100%;height:80%;margin:auto;padding:0;text-align:center;}
   div.page-container {padding:0 20px;}
-  div.container-map-pages {background-color:#d52b1e;}
+  div.container-map-pages {background-color:#d52b1e;padding-top:0;}
 }
diff --git a/src/app/wordpress.service.ts b/src/app/wordpress.service.ts
index cc9705d..6e84ab0 100644
--- a/src/app/wordpress.service.ts
+++ b/src/app/wordpress.service.ts
@@ -30,7 +30,7 @@ export class WordpressService {
   }
 
   public getMarker(slug:string = "", term:any = ''):Observable<PageItem[]> {
-    let params = "?_embed";
+    let params = "?_embed&per_page=100";
     if (slug!="") params = params+"&slug="+slug;
     if (term!="") {
       let collection = term["_links"]['collection'][0]['href']
diff --git a/src/styles.css b/src/styles.css
index 6dc8d84..9b7ddda 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,12 +5,14 @@ html {  scroll-behavior: smooth;}
 body {padding:0;font-size:12pt;overflow-x:hidden;font-family:'Raleway',sans-serif;margin:0}
 a {color:#fff;padding:0 5px;background-color:#333;font-weight:bold;text-decoration:none;}
 h1,h2,h3,h4,h5,h6 {font-family:'Oswald';}
-div.modal {z-index:20;display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
+div.modal {z-index:20;display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
 div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:2vh;margin-bottom:10vh;}
 div.col-left-70 {position:relative;float:right;width:66%;padding-left:1%;padding-right:1%;}
 div.col-right-30 {border-right:1px solid #ccc;position:relative;float:right;width:28%;padding-left:1%;padding-right:1%;}
-div.content h1 span {font-size:3em;padding:0 20px;}
+div.content h1 span {font-size:3em;padding:0;}
+
 div.title h2 span { background:#ccc; color:#fff; padding:0 20px;}
+div.title h3 {color:#000; }
 div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#d52b1e;}
 div.content div.content-col > * {margin:0 20px;height:100%;display:block;}
 div.content div.col-right-30 > * {margin-bottom:20px;}
@@ -31,6 +33,11 @@ div.content div.audio-box {clear:both;}
 div.content-metadata {top:20px;position:relative;}
 div.content div.audio-box ul li {padding:3px 0;font-size:0.8em;}
 
+/*filter */
+span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;}
+span.tablet-term b {font-weight:bold;cursor:pointer;}
+span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
+
 
 /* pages */
 app-pages div.container-map-pages {padding-top:100vh;background-color:#d52b1e;}
@@ -41,4 +48,10 @@ div.mapboxgl-ctrl-bottom-left { display:none;}
 
 @media screen and (max-device-width: 720px) {
     body { background-color:#d52b1e}
+    div.col-right-30 {width:100%; border:0;}
+    div.col-left-70 {width:100%;}
+    div.title h3 {display:none;}
+    map-box {position:relative;height:80vh;}
+    div.content h1 span {font-size:2em;}
+
 }