making pocket style page
This commit is contained in:
Martin Donnelly
parent
6b17dbdfa1
commit
e42f2e2d46
BIN
app/gfx/fm.png
Normal file
BIN
app/gfx/fm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
133
app/pocket.html
133
app/pocket.html
@ -40,105 +40,70 @@
|
||||
<title>Keeper Silvtree</title>
|
||||
<style>
|
||||
.item_content {
|
||||
height:80px;
|
||||
border:1px solid grey;
|
||||
display:block;
|
||||
height:auto;
|
||||
max-width:74em;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
min-height:80px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
padding:0;
|
||||
height: 100px;
|
||||
/* border: 1px solid grey;*/
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.item_content a.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.item_content .thumbnail {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
.item_content div.body, .item_content div.site, .item_content div.tags {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
width:100px; height:80px;background-size: cover, auto;background-position:50% 50%, 50% 50%;
|
||||
}
|
||||
.item_content div.site {
|
||||
font-size: 90%;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.item_content a.title {
|
||||
padding:1em 11em 0.1em 7.35em;
|
||||
font-size: 1.38em;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
.item_content div.tags {
|
||||
color:blue;
|
||||
}
|
||||
|
||||
display:block;
|
||||
color:#313131;
|
||||
font-weight:600;
|
||||
line-height: 1.2;
|
||||
.mui-panel {
|
||||
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content" class="mui-container">
|
||||
<div class="mui-row">
|
||||
<p>Image is 100 x 80</p>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
<div class="mui-panel">
|
||||
<div class="mui-row">
|
||||
<div class="mui-col-xs-4 mui-col-md-2"><img src="gfx/100.png"></div>
|
||||
<div class="mui-col-xs-8 mui-col-md-10 item_content" style="border:1px solid red;">
|
||||
<div class="mui-row">
|
||||
<div class="mui--text-title "><a class='title'
|
||||
href="#">Something long and text like which should fit ok</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-row">
|
||||
<div class="mui--text-body1 body">
|
||||
[13/Apr/2016:10:04:45 +0000] "GET / HTTP/1.1" 200 7784 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
|
||||
</div>
|
||||
<div class="mui--text-body1 site">
|
||||
[13/Apr/2016:10:04:45 +0000] "GET / HTTP/1.1" 200 7784 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
|
||||
</div>
|
||||
<div class="mui--text-body1 tags">
|
||||
[13/Apr/2016:10:04:45 +0000] "GET / HTTP/1.1" 200 7784 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="item_content">
|
||||
<a href="link" class="title">I am the title</a>
|
||||
<span class='thumbnail' style="background-image:url('http://image.silvrtree.co.uk/100x80/http://pipes.silvrtree.co.uk/assets/fm.png');"></span>
|
||||
<ul><li>I'm tags</li></ul>
|
||||
<ul><li>I'm buttons</li></ul>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -17,7 +17,7 @@ app.use(logger('dev'));
|
||||
app.use(bodyParser.json());
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, 'dist')));
|
||||
app.use(express.static(path.join(__dirname, 'app')));
|
||||
|
||||
app.use('/', keeper);
|
||||
|
||||
|
||||
@ -557,6 +557,43 @@ function genericGrab(obj, res) {
|
||||
});
|
||||
}
|
||||
|
||||
router.get('/pocket', function (req, res) {
|
||||
logger.debug('list..');
|
||||
|
||||
|
||||
dbCouch.view('pocketList', 'pocketList', function (err, body) {
|
||||
if (!err) {
|
||||
|
||||
var outJSON = [];
|
||||
body.rows.forEach(function (doc) {
|
||||
var obj = {id: doc.id, entry: doc.value};
|
||||
console.log(typeof obj.entry.tn);
|
||||
if (typeof obj.entry.tn === 'string') {
|
||||
console.log('its a string:', typeof obj.entry.tn)
|
||||
obj.entry.tn = 'http://image.silvrtree.co.uk/100,fit,q80/' + obj.entry.tn;
|
||||
}
|
||||
else {
|
||||
obj.entry.tn = 'gfx/fm.png';
|
||||
}
|
||||
|
||||
outJSON.push(obj);
|
||||
|
||||
|
||||
});
|
||||
|
||||
logger.debug(util.inspect(body));
|
||||
logger.info(util.inspect(outJSON));
|
||||
res.render('pocket', {data: outJSON});
|
||||
}
|
||||
else {
|
||||
res.writeHead(500, {"ContentType": "application/json"});
|
||||
res.end(JSON.stringify({}));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
router.get('/list', function (req, res) {
|
||||
logger.debug('list..');
|
||||
|
||||
|
||||
@ -46,6 +46,7 @@ nano.db.destroy('keeper', function () {
|
||||
* Created by Martin on 02/03/2016.
|
||||
*/
|
||||
|
||||
/*
|
||||
|
||||
{
|
||||
"getTagByKey": {
|
||||
@ -58,3 +59,4 @@ nano.db.destroy('keeper', function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@ -22,34 +22,46 @@ var tableList = [
|
||||
}, {
|
||||
name: '_design/taglist', view: {
|
||||
"taglist": {
|
||||
"map": function(doc) { if (doc.type == 1) { emit(null, doc); } }
|
||||
}
|
||||
}}, {
|
||||
name: '_design/getAllTags', view: {
|
||||
"getAllTags": {
|
||||
"map": function(doc) {
|
||||
if (doc.tags.list.length > 0) {
|
||||
emit(null, doc.tags.list);
|
||||
}
|
||||
}
|
||||
}
|
||||
"map": function(doc) { if (doc.type == 1) { emit(null, doc); } }
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '_design/getTagByKey', view:{
|
||||
name: '_design/getAllTags', view: {
|
||||
"getAllTags": {
|
||||
"map": function(doc) {
|
||||
if (doc.tags.list.length > 0) {
|
||||
emit(null, doc.tags.list);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '_design/getTagByKey', view: {
|
||||
"getTagByKey": {
|
||||
"map": function(doc) {
|
||||
if (doc.tags.list.length > 0) {
|
||||
for (var t = 0; t < doc.tags.list.length; t++) {
|
||||
emit(doc._id, [doc.tags.list[t], doc.title]);
|
||||
}
|
||||
}
|
||||
"map": function(doc) {
|
||||
if (doc.tags.list.length > 0) {
|
||||
for (var t = 0; t < doc.tags.list.length; t++) {
|
||||
emit(doc._id, [doc.tags.list[t], doc.title]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: '_design/pocketList', view: {
|
||||
"pocketList": {
|
||||
"map":function (doc) { emit(doc._id, {'host':doc.host, 'tn':doc.thumbnail, 'title':doc.title, 'nib':doc.nib, 'tags':doc.tags}); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
];
|
||||
var killTable = (table) =>
|
||||
{
|
||||
var killTable = (table) => {
|
||||
|
||||
console.log(table.name);
|
||||
keeper.get(table.name, {revs_info: true}, function(err, body) {
|
||||
@ -72,8 +84,7 @@ var killTable = (table) =>
|
||||
});
|
||||
};
|
||||
|
||||
var updateTable = (table) =>
|
||||
{
|
||||
var updateTable = (table) => {
|
||||
|
||||
logger.info(table.name);
|
||||
keeper.get(table.name, {revs_info: true}, function(err, body) {
|
||||
@ -84,16 +95,16 @@ var updateTable = (table) =>
|
||||
|
||||
logger.debug(body);
|
||||
keeper.insert({_id: body._id, _rev: body._rev, views: table.view},
|
||||
function(_err, _body) {
|
||||
if (err) {
|
||||
logger.error(_err);
|
||||
}
|
||||
else {
|
||||
logger.info(table.name + ' updated');
|
||||
logger.info(_body);
|
||||
function(_err, _body) {
|
||||
if (err) {
|
||||
logger.error(_err);
|
||||
}
|
||||
else {
|
||||
logger.info(table.name + ' updated');
|
||||
logger.info(_body);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
140
views/pocket.ejs
Normal file
140
views/pocket.ejs
Normal file
@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
|
||||
<link href="//cdn.muicss.com/mui-0.4.6/css/mui.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- build:css -->
|
||||
|
||||
|
||||
<!-- endbuild -->
|
||||
<script src="libs/microevent.js"></script>
|
||||
<script src="//cdn.muicss.com/mui-0.4.6/js/mui.min.js"></script>
|
||||
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<!-- build:vendor -->
|
||||
<script src="libs/ejs.js"></script>
|
||||
<script src="libs/view.js"></script>
|
||||
<!-- endbuild -->
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="fav/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="fav/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="fav/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="fav/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="fav/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="fav/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="fav/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="fav/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="fav/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="fav/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="fav/manifest.json">
|
||||
<link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#ffc40d">
|
||||
<meta name="msapplication-TileImage" content="fav/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#ffc40d">
|
||||
<title>Keeper Silvtree</title>
|
||||
<style>
|
||||
.item_content {
|
||||
height: 100px;
|
||||
/* border: 1px solid grey;*/
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item_content a.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.item_content div.body, .item_content div.site, .item_content div.tags {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.item_content div.site {
|
||||
font-size: 90%;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.item_content div.tags {
|
||||
color:blue;
|
||||
}
|
||||
|
||||
.img100 {
|
||||
width:100px;
|
||||
border:1px solid grey;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.mui-panel {
|
||||
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="content" class="mui-container">
|
||||
|
||||
<% for(var i=0; i<data.length; i++) {%>
|
||||
|
||||
<div class="mui-panel">
|
||||
<div class="mui-row">
|
||||
<div class="mui-col-xs-4 mui-col-md-2"><img src="<%= data[i].entry.tn %>" class="img100"></div>
|
||||
<div class="mui-col-xs-8 mui-col-md-10 item_content">
|
||||
<div class="mui-row">
|
||||
<div class="mui--text-title "><a class='title'
|
||||
href="<%= data[i].id %>"><%= data[i].entry.title %></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-row">
|
||||
<div class="mui--text-body1 body">
|
||||
<%= data[i].entry.nib %>
|
||||
</div>
|
||||
<div class="mui--text-body1 site">
|
||||
<%= data[i].entry.host %>
|
||||
</div>
|
||||
<div class="mui--text-body1 tags">
|
||||
<%= data[i].entry.tags %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<% } %>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user