Fix desing and item/feed interafce
This commit is contained in:
Siroco
parent
4fc93f9a97
commit
9770e1b8f9
@ -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 {color:#000 !important;text-decoration:none !important;}
|
||||
span.feeder {font-weight:bold;font-size:0.8em;color:#ccc;text-decoration:line-through;padding:10px 5px;}
|
||||
span.active {animation:none; text-decoration:none !important;opacity:1 !important;}
|
||||
span.feeder {font-weight:bold;font-size:0.8em;padding:10px 5px;opacity:0.3;}
|
||||
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 }
|
||||
}
|
||||
|
||||
@ -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><h2>Items</h2></ul>
|
||||
</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>
|
||||
|
||||
@ -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,65 +82,99 @@ export class GridComponent implements OnInit {
|
||||
)
|
||||
}
|
||||
|
||||
loadFeeds(){
|
||||
showMore() {
|
||||
// nextpage
|
||||
this.feeds.map(
|
||||
(feed) => {
|
||||
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')
|
||||
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)
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
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)=> {
|
||||
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) {
|
||||
this.items = this.items.filter( (item)=> {if (item['_embedded']['wp:term']) {item['_embedded']['wp:term'][0].map( (cat)=> {return cat.id==term} )} })
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
export interface Item {
|
||||
id:string;
|
||||
repository:string;
|
||||
repositorySlug:string;
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user