testing card view
This commit is contained in:
Martin Donnelly
parent
5d2a8c9c60
commit
2ad3cf0733
129
html/css/cards.css
Normal file
129
html/css/cards.css
Normal file
@ -0,0 +1,129 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);
|
||||
|
||||
* { font-family: 'Roboto', sans-serif; line-height:1.2; vertical-align:middle; }
|
||||
|
||||
body { background:#222; }
|
||||
|
||||
|
||||
main {
|
||||
display:block;
|
||||
position:relative;
|
||||
width:30rem;
|
||||
margin:3vh auto;
|
||||
padding:1.5rem 0 0;
|
||||
background:#d5d5d5;
|
||||
outline
|
||||
border-radius:.25rem;
|
||||
overflow:hidden;
|
||||
transform:scale(.75);
|
||||
transform-origin:center 3rem;
|
||||
transition:transform .3s;
|
||||
}
|
||||
body:hover main {
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
header {
|
||||
position:absolute;
|
||||
z-index:0;
|
||||
top:0; left:0; right:0;
|
||||
height:10rem;
|
||||
transition:transform .5s, opacity .3s;
|
||||
/*background:url(http://www.droid-life.com/wp-content/uploads/2013/01/googlenownewyork.png) center center;*/
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
input, .card {
|
||||
position:relative;
|
||||
z-index:2;
|
||||
}
|
||||
input {
|
||||
display:block;
|
||||
width:26rem;
|
||||
margin:4.5rem 1rem 2rem;
|
||||
border:0;
|
||||
font-size:1.2rem;
|
||||
padding:.75rem 1rem;
|
||||
border-radius:3px;
|
||||
box-shadow:0 1px 2px #aaa;
|
||||
transition:.5s, margin-bottom .15s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
margin:0 1rem 1rem;
|
||||
outline:0;
|
||||
}
|
||||
|
||||
input:focus + header {
|
||||
transform:translate3d(0,-10rem,0);
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding:1.5rem;
|
||||
box-shadow:0 1px 2px #aaa;
|
||||
background:white;
|
||||
margin:0 1rem 1rem;
|
||||
border-radius:3px;
|
||||
user-select:none;
|
||||
animation:fly-in-from-left .5s 1s ease both;
|
||||
transform-origin:top left;
|
||||
}
|
||||
.card:nth-child(even){
|
||||
animation-name:fly-in-from-right;
|
||||
animation-delay:1.1s;
|
||||
transform-origin:top right;
|
||||
}
|
||||
|
||||
@keyframes fly-in-from-left {
|
||||
from {
|
||||
transform:translateY(15rem) rotate(15deg);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fly-in-from-right {
|
||||
from {
|
||||
transform:translateY(15rem) rotate(-15deg);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
.card:after {
|
||||
position:absolute;
|
||||
font-size:.9rem;
|
||||
top:1.5rem;
|
||||
right:1rem;
|
||||
content:"i";
|
||||
border:thin solid gray;
|
||||
color:gray;
|
||||
width:1rem;
|
||||
line-height:1rem;
|
||||
text-align:center;
|
||||
border-radius:50%;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2rem;
|
||||
font-weight:200;
|
||||
}
|
||||
strong {
|
||||
font-weight:300;
|
||||
color:#539D00;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:.9rem;
|
||||
line-height:2.5;
|
||||
color:gray;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.map {
|
||||
height:12rem;
|
||||
background:whitesmoke;
|
||||
margin:.5rem 0 0 -1.5rem;
|
||||
width:28rem;
|
||||
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
<% list.forEach(function (item) { %>
|
||||
<button id="<%=item.name%>" class="mui-btn mui-btn-primary"><%=item.name%></button>
|
||||
<button id="<%=item.name%>" class="mui-btn mui-btn-raised"><%=item.name%></button>
|
||||
<% }) %>
|
||||
|
||||
15
html/ejs/testcards.ejs
Normal file
15
html/ejs/testcards.ejs
Normal file
@ -0,0 +1,15 @@
|
||||
<h1><%= d.title %></h1>
|
||||
<% d.items.forEach(function (item) { %>
|
||||
<section class="card">
|
||||
<h1><a href='<%=item.url%>'><%=item.title %></a></h1>
|
||||
<div class=' content' style='overflow:hidden;'>
|
||||
<%=item.description%>
|
||||
</div>
|
||||
<div class='info' style='font-size:75%;color:#bbbbbb;'>
|
||||
<span class='author'><%=item.author%></span>
|
||||
<span class='date'><%=item.date%></span>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<% }) %>
|
||||
|
||||
0
html/feeds2.html
Normal file
0
html/feeds2.html
Normal file
@ -14,7 +14,7 @@ var APP = {
|
||||
preCache: function() {
|
||||
this._list = new EJS({url: 'ejs/list.ejs'});
|
||||
this._feed = new EJS({
|
||||
url: 'ejs/test.ejs'
|
||||
url: 'ejs/testcards.ejs'
|
||||
});
|
||||
},
|
||||
init: function() {
|
||||
|
||||
8
node_modules/rss-braider/lib/RssBraider.js
generated
vendored
8
node_modules/rss-braider/lib/RssBraider.js
generated
vendored
@ -79,7 +79,7 @@ RssBraider.prototype.processFeed = function(feed_name, format, callback)
|
||||
// Then process each item/article through rss-braider and any plugins
|
||||
async.each(feed.sources, function(source, callback) {
|
||||
self.feedCount.push(source.feed_url);
|
||||
console.log('## FEED COUNT: ' + self.feedCount.length);
|
||||
// console.log('## FEED COUNT: ' + self.feedCount.length);
|
||||
var count = source.count || feed.default_count || 10, // Number of articles per source
|
||||
url = source.feed_url || null,
|
||||
file_path = source.file_path || null,
|
||||
@ -142,8 +142,8 @@ RssBraider.prototype.processFeed = function(feed_name, format, callback)
|
||||
if (p > -1) {
|
||||
self.feedCount.splice(p, 1);
|
||||
}
|
||||
console.log('~~ FEED COUNT: ' + self.feedCount.length);
|
||||
console.log(self.feedCount);
|
||||
//console.log('~~ FEED COUNT: ' + self.feedCount.length);
|
||||
//console.log(self.feedCount);
|
||||
callback();
|
||||
});
|
||||
},
|
||||
@ -303,4 +303,4 @@ RssBraider.prototype.date_sort = function(articles_arr) {
|
||||
return sorted_articles;
|
||||
};
|
||||
|
||||
module.exports = RssBraider;
|
||||
module.exports = RssBraider;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user