1
0

Fix desing and item/feed interafce

This commit is contained in:
Siroco 2019-05-14 20:36:00 +02:00
parent 4fc93f9a97
commit 9770e1b8f9
4 changed files with 149 additions and 68 deletions

View File

@ -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 { 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 {text-decoration:none;color:#000;}
ul li a:hover {opacity:0.8;} 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 {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;} 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 }
}

View File

@ -1,22 +1,33 @@
<ul> <ul class="feeds" style="display:none;">
<li *ngFor="let feed of feeds"> <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> </li>
</ul> </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"> <ul *ngIf="showCategories">
<li *ngFor="let term of terms"><div [id]="term.id" class="term" (click)="filterByTerm(term.id)">{{term.name}}</div></li> <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> <ul>
<li *ngIf="items.length<=0">Loading</li> <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"> <a [href]="item.link" target="_blank">
<img *ngIf="item.thumbnail" [title]="item.title" style="max-width:100px" [src]="item.thumbnail"/> <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> </a>
</li> </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> </ul>

View File

@ -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.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", 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:"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 = [ // feedsCategories = [
// {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/categories",name:"Bambun",status:0}, // {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}) (cat)=> this.terms.push({name:cat.name,id:feed.slug+":"+cat.id})
) )
this.terms.sort( (a,b) => { this.terms.sort( (a,b) => {
console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
return 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}) (tag) => this.terms.push({name:tag.name,id:feed.slug+":"+tag.id})
) )
this.terms.sort( (a,b) => { this.terms.sort( (a,b) => {
console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
return a.name.toUpperCase().localeCompare(b.name.toUpperCase()) return a.name.toUpperCase().localeCompare(b.name.toUpperCase())
}); });
} }
@ -84,65 +82,99 @@ export class GridComponent implements OnInit {
) )
} }
loadFeeds(){ showMore() {
// nextpage
this.feeds.map( this.feeds.map(
(feed) => { (feed) => {
if (feed.type==="wordpress") { if (feed.page<=feed.total_pages) {
this.wService.getPosts(feed) feed.page++;
.subscribe( this.loadFeed(feed)
(res)=> {
console.log(res.headers.keys())
let numItems = +res.headers.get('X-WP-Total')
let totalPages = res.headers.get('X-WP-TotalPages')
feed.total_pages = +totalPages
this.countItems+=numItems
feed.status = 1
res.body.map(
(i) => {
let item:Item = {
id:feed.slug+"_"+i['id'],
title:i.title.rendered,
description:i.content.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));
}
)
}
/** omeka **/
else if (feed.type==="omeka") {
this.oService.getItems(feed)
.subscribe(
(res)=> {
let numItems = +res.headers.get('Omeka-Total-Results')
let pages = numItems/feed.per_page
if (pages%1!=0) pages=Math.floor(pages)+1;
feed.total_pages = pages
this.countItems+=numItems
feed.status = 1
res.body.map(
(i)=> {
let item:Item = {
id:feed.slug+"_"+i['id'],
title:i['element_texts'][0]['text'],
description:'none',
link:feed.url+"items/show/"+i['id'],
thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
}
this.items.push(item)
}
)
}
)
} }
} }
)
}
loadFeeds(){
this.feeds.map(
(feed) => { this.loadFeed(feed) }
); );
} }
loadFeed(feed) {
feed.status=0;
if (feed.type==="wordpress") {
this.wService.getPosts(feed)
.subscribe(
(res)=> {
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.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));
}
)
}
/** omeka **/
else if (feed.type==="omeka") {
this.oService.getItems(feed)
.subscribe(
(res)=> {
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:subjects.toString(),
link:feed.url+"items/show/"+i['id'],
thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
}
this.items.push(item)
}
)
}
)
}
}
getOmekaSubjects(i:any) {
let subjects = []
i['element_texts'].map(
(e) => {
if (e['element']['name'] === "Subject") subjects.push(e['text'])
}
)
return subjects
}
filterByTerm(term:number) { filterByTerm(term:number) {
this.items = this.items.filter( (item)=> {if (item['_embedded']['wp:term']) {item['_embedded']['wp:term'][0].map( (cat)=> {return cat.id==term} )} }) this.items = this.items.filter( (item)=> {if (item['_embedded']['wp:term']) {item['_embedded']['wp:term'][0].map( (cat)=> {return cat.id==term} )} })
} }

View File

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