Fix desing and item/feed interafce

src/app/grid/grid.component.css

@@ -1,12 +1,48 @@
-* {font-family:Montserrat,sans-serif;transition: opacity 1s ease-in-out;}
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+
+* {font-family:"Nunito",sans-serif;transition: opacity 1s ease-in-out;}
 
 ul { display:flex; flex-wrap:wrap; list-style:none;padding:0;margin:0;width:720px;margin:auto;clear:both;min-height:100px;}
-ul li {padding:0;margin:0; width:10vw;float:left;}
+ul li {padding:0;margin:0; width:100vw;float:left;margin-bottom:20px;}
+ul.feeds li {width:10vw;}
 ul li a {text-decoration:none;color:#000;}
 ul li a:hover {opacity:0.8;}
+ul li a img {max-width:100px;float:left;}
+ul li a div.content-right {width:550px;padding:0 20px;float:left;}
+ul li a div.content-right p {margin-top:0;}
+ul li.more {border:2px solid transparent; font-weight:bold;width:100%;text-align:center;background-color:#000;color:#fff;padding:5px 0;cursor:pointer;}
+ul li.more:hover { opacity:0.8;}
 
-span.big-number {font-size:20vmin;transition:1s;font-weight:bold;color:#000;}
+span.active {animation:none; text-decoration:none !important;opacity:1 !important;}
-span.active {color:#000 !important;text-decoration:none !important;}
+span.feeder {font-weight:bold;font-size:0.8em;padding:10px 5px;opacity:0.3;}
-span.feeder {font-weight:bold;font-size:0.8em;color:#ccc;text-decoration:line-through;padding:10px 5px;}
 div.term {transition:0.5s; padding:5px 5px;margin:5px;text-transform:lowercase;background:#000;color:#fff;font-size:0.8em;}
 div.term:hover {font-weight:bold;background-color:#333;cursor:pointer;}
+
+ul.counter {position:fixed;top:0;left:0;background:#ccc;z-index:-100;padding:30px;}
+span.big-number {font-size:10vmin;transition:1s;font-weight:bold;color:#fff;}
+
+ul.footer {position:fixed;bottom:0;right:0;background:#ccc;z-index:-100;padding:30px;}
+
+ul li.item {border:2px solid transparent;background:#fff;padding:10px;transition:1s;}
+ul li.item:hover {border:2px solid #000;background:#fefefe;}
+
+.oralitatgasconha {color:#F29A14 !important;}
+.oralitatgasconha:hover {border-color:#F29A14 !important;}
+.bambun {color:#FA2D49 !important;}
+.bambun:hover {border-color:#FA2D49 !important;}
+.binauralnodar {color:#559D30 !important;}
+.binauralnodar:hover {border-color:#559D30 !important;}
+
+.blink {
+	animation: opacityLoading 2s 2s infinite linear;
+}
+
+@keyframes opacityLoading {
+	0% { opacity:0 }
+	10% { opacity:0 }
+	25% { opacity:0.5 }
+	75% { opacity:0.5 }
+	90% { opacity:0 }
+	100% { opacity:0 }
+}

src/app/grid/grid.component.html

@@ -1,22 +1,33 @@
-<ul>
+<ul class="feeds" style="display:none;">
   <li *ngFor="let feed of feeds">
-    <span class="feeder" [ngClass]="{'active':feed.status}">{{feed.name}} [{{feed.page}}/{{feed.total_pages}}]</span>
+    <span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:none">[{{feed.page}}/{{feed.total_pages}}]</span></span>
   </li>
 </ul>
 
-<ul><p><span class="big-number">{{countItems}}</span></p></ul>
+<ul class="counter">
+  <p><span class="big-number">{{items.length}}/{{countItems}}</span></p>
+</ul>
 
-<ul><h2 style="cursor:pointer;" (click)="showCategories=!showCategories">Categories</h2></ul>
+<!-- <ul><h2 style="cursor:pointer;" (click)="showCategories=!showCategories">Categories</h2></ul>
 <ul *ngIf="showCategories">
   <li *ngFor="let term of terms"><div [id]="term.id" class="term" (click)="filterByTerm(term.id)">{{term.name}}</div></li>
-</ul>
+</ul> -->
-<ul><h2>Items</h2></ul>
 <ul>
   <li *ngIf="items.length<=0">Loading</li>
-  <li *ngFor="let item of items" style="cursor:pointer;" [id]="item.id">
+  <li class="item" *ngFor="let item of items" style="cursor:pointer;" [id]="item.id" [ngClass]="item.repositorySlug" [title]="item.title">
     <a [href]="item.link" target="_blank">
       <img *ngIf="item.thumbnail" [title]="item.title" style="max-width:100px" [src]="item.thumbnail"/>
-      <strong [innerHTML]="item.title"></strong>
+      <div class="content-right">
+        <p [ngClass]="item.repositorySlug"><i [innerHTML]="item.repository"></i></p>
+        <p><strong [innerHTML]="item.title"></strong></p>
+        <p [innerHTML]="item.description"></p>
+      </div>
     </a>
   </li>
+  <li class="more" (click)="showMore()">Show mores</li>
+</ul>
+
+<ul class="footer">
+  <ul><li *ngFor="let feed of feeds" style="text-align:right;font-size:2em;" [ngClass]="feed.slug"><span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:none">[{{feed.page}}/{{feed.total_pages}}]</span></span></li></ul>
+  <p style="text-align:right;width:100%;font-size:0.8em;font-weight:bold;">Tramontana Archive - <a href="https://git.audio-lab.org/">Fork me</a></p>
 </ul>

src/app/grid/grid.component.ts

@@ -21,7 +21,7 @@ export class GridComponent implements OnInit {
     {type:"wordpress", categories:"https://www.gransassolagaich.it/wp-json/wp/v2/categories", url:"https://www.gransassolagaich.it/wp-json/wp/v2/posts?_embed",slug:'bambun',name:"Bambun",status:0,per_page:10,page:1,total_pages:0},
     {type:"wordpress", categories:"https://www.archive.binauralmedia.org/wp-json/wp/v2/categories", url:"https://www.archive.binauralmedia.org/wp-json/wp/v2/avada_portfolio?_embed",slug:'binauralnodar',name:"Binaural",status:0,per_page:10,page:1,total_pages:0},
     // {type:"wordpress", url:"http://backend.industriapaisaia.eus/wp-json/wp/v2/posts?_embed",name:"Local",status:0},
-    {type:"omeka", categories:"http://oralitat", url:"http://oralitat/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:0,per_page:10,page:1,total_pages:0}
+    {type:"omeka", categories:"http://oralitat", url:"https://tramontana.audio-lab.org/oralitatdegasconha/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:0,per_page:10,page:1,total_pages:0}
   ]
   // feedsCategories = [
   //   {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/categories",name:"Bambun",status:0},
@@ -59,7 +59,6 @@ export class GridComponent implements OnInit {
                 (cat)=> this.terms.push({name:cat.name,id:feed.slug+":"+cat.id})
               )
               this.terms.sort( (a,b) => {
-                console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
                 return a.name.toUpperCase().localeCompare(b.name.toUpperCase())
               });
             }
@@ -74,7 +73,6 @@ export class GridComponent implements OnInit {
                 (tag) => this.terms.push({name:tag.name,id:feed.slug+":"+tag.id})
               )
               this.terms.sort( (a,b) => {
-                console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
                 return a.name.toUpperCase().localeCompare(b.name.toUpperCase())
               });
             }
@@ -84,32 +82,53 @@ export class GridComponent implements OnInit {
     )
   }
 
-  loadFeeds(){
+  showMore() {
+    // nextpage
     this.feeds.map(
       (feed) => {
+        if (feed.page<=feed.total_pages) {
+          feed.page++;
+          this.loadFeed(feed)
+        }
+      }
+
+    )
+  }
+
+  loadFeeds(){
+    this.feeds.map(
+      (feed) => { this.loadFeed(feed) }
+    );
+  }
+
+  loadFeed(feed) {
+    feed.status=0;
     if (feed.type==="wordpress") {
       this.wService.getPosts(feed)
         .subscribe(
           (res)=> {
-                console.log(res.headers.keys())
             let numItems = +res.headers.get('X-WP-Total')
             let totalPages = res.headers.get('X-WP-TotalPages')
+            if (feed.total_pages==0) {
               feed.total_pages = +totalPages
               this.countItems+=numItems
+            }
             feed.status = 1
             res.body.map(
               (i) => {
                 let item:Item = {
                   id:feed.slug+"_"+i['id'],
+                  repository:feed.name,
+                  repositorySlug:feed.slug,
                   title:i.title.rendered,
-                      description:i.content.rendered,
+                  description:i.excerpt.rendered,
                   link:i.link,
                   thumbnail:i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
                 }
                 this.items.push(item)
               }
             );
-                this.items.sort( (a,b) => a.title.localeCompare(b.title));
+            //this.items.sort( (a,b) => a.title.localeCompare(b.title));
           }
         )
     }
@@ -121,15 +140,20 @@ export class GridComponent implements OnInit {
             let numItems = +res.headers.get('Omeka-Total-Results')
             let pages = numItems/feed.per_page
             if (pages%1!=0) pages=Math.floor(pages)+1;
+            if (feed.total_pages==0) {
               feed.total_pages = pages
               this.countItems+=numItems
+            }
             feed.status = 1
             res.body.map(
               (i)=> {
+                let subjects = this.getOmekaSubjects(i);
                 let item:Item = {
                   id:feed.slug+"_"+i['id'],
+                  repository:feed.name,
+                  repositorySlug:feed.slug,
                   title:i['element_texts'][0]['text'],
-                      description:'none',
+                  description:subjects.toString(),
                   link:feed.url+"items/show/"+i['id'],
                   thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
                 }
@@ -140,7 +164,15 @@ export class GridComponent implements OnInit {
         )
     }
   }
-    );
+
+  getOmekaSubjects(i:any) {
+    let subjects = []
+    i['element_texts'].map(
+      (e) => {
+        if (e['element']['name'] === "Subject")  subjects.push(e['text'])
+      }
+    )
+    return subjects
   }
 
     filterByTerm(term:number) {

src/app/item.ts

@@ -1,5 +1,7 @@
 export interface Item {
   id:string;
+  repository:string;
+  repositorySlug:string;
   title: string;
   description: string;
   link: string;