Fix desing and item/feed interafce
This commit is contained in:
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 { 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 }
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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,32 +82,53 @@ export class GridComponent implements OnInit {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
loadFeeds(){
|
showMore() {
|
||||||
|
// nextpage
|
||||||
this.feeds.map(
|
this.feeds.map(
|
||||||
(feed) => {
|
(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") {
|
if (feed.type==="wordpress") {
|
||||||
this.wService.getPosts(feed)
|
this.wService.getPosts(feed)
|
||||||
.subscribe(
|
.subscribe(
|
||||||
(res)=> {
|
(res)=> {
|
||||||
console.log(res.headers.keys())
|
|
||||||
let numItems = +res.headers.get('X-WP-Total')
|
let numItems = +res.headers.get('X-WP-Total')
|
||||||
let totalPages = res.headers.get('X-WP-TotalPages')
|
let totalPages = res.headers.get('X-WP-TotalPages')
|
||||||
|
if (feed.total_pages==0) {
|
||||||
feed.total_pages = +totalPages
|
feed.total_pages = +totalPages
|
||||||
this.countItems+=numItems
|
this.countItems+=numItems
|
||||||
|
}
|
||||||
feed.status = 1
|
feed.status = 1
|
||||||
res.body.map(
|
res.body.map(
|
||||||
(i) => {
|
(i) => {
|
||||||
let item:Item = {
|
let item:Item = {
|
||||||
id:feed.slug+"_"+i['id'],
|
id:feed.slug+"_"+i['id'],
|
||||||
|
repository:feed.name,
|
||||||
|
repositorySlug:feed.slug,
|
||||||
title:i.title.rendered,
|
title:i.title.rendered,
|
||||||
description:i.content.rendered,
|
description:i.excerpt.rendered,
|
||||||
link:i.link,
|
link:i.link,
|
||||||
thumbnail:i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
|
thumbnail:i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
|
||||||
}
|
}
|
||||||
this.items.push(item)
|
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 numItems = +res.headers.get('Omeka-Total-Results')
|
||||||
let pages = numItems/feed.per_page
|
let pages = numItems/feed.per_page
|
||||||
if (pages%1!=0) pages=Math.floor(pages)+1;
|
if (pages%1!=0) pages=Math.floor(pages)+1;
|
||||||
|
if (feed.total_pages==0) {
|
||||||
feed.total_pages = pages
|
feed.total_pages = pages
|
||||||
this.countItems+=numItems
|
this.countItems+=numItems
|
||||||
|
}
|
||||||
feed.status = 1
|
feed.status = 1
|
||||||
res.body.map(
|
res.body.map(
|
||||||
(i)=> {
|
(i)=> {
|
||||||
|
let subjects = this.getOmekaSubjects(i);
|
||||||
let item:Item = {
|
let item:Item = {
|
||||||
id:feed.slug+"_"+i['id'],
|
id:feed.slug+"_"+i['id'],
|
||||||
|
repository:feed.name,
|
||||||
|
repositorySlug:feed.slug,
|
||||||
title:i['element_texts'][0]['text'],
|
title:i['element_texts'][0]['text'],
|
||||||
description:'none',
|
description:subjects.toString(),
|
||||||
link:feed.url+"items/show/"+i['id'],
|
link:feed.url+"items/show/"+i['id'],
|
||||||
thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
|
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) {
|
filterByTerm(term:number) {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user