Browse Source

grid/ui stuff (wip)

canon
Hazel Levine 2 years ago
parent
commit
ddc17279b5
4 changed files with 58 additions and 9 deletions
  1. +5
    -0
      README.md
  2. +25
    -0
      public/index.css
  3. +16
    -4
      public/index.ejs
  4. +12
    -5
      src/imagefile.js

+ 5
- 0
README.md View File

@ -0,0 +1,5 @@
# Bunny DB
a database of bunnies (wip)
no hosted instance yet

+ 25
- 0
public/index.css View File

@ -0,0 +1,25 @@
/* .bun-card-image.mdl-card {
width: 256px;
height: 256px;
}
.bun-card-image > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.bun-card-image__filename {
color: #fff;
font-size: 14px;
font-weight: 500;
} */
.mdl-card__media {
margin: 0;
}
.mdl-card__media > img {
width: 100%;
height: auto;
}

+ 16
- 4
public/index.ejs View File

@ -1,6 +1,7 @@
<html>
<head>
<title>test db</title>
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
@ -21,12 +22,23 @@
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content">
<!-- <img src="uploads/9160d961-3d9b-4dea-a39c-f79b86647408.jpg" /> -->
<span>
<div class="mdl-grid">
<% files.forEach((bun) => { %>
<img src=<%= bun %> />
<!-- <style>
.<%= stripBun(bun.path) %>-card-image.mdl-card {
background: url(<%= bun.path.replace("public/", "") %>) center / cover;
}
</style> -->
<div class="mdl-card mdl-cell mdl-shadow--2dp">
<figure class="mdl-card__media">
<img src=<%= bun.path.replace("public/", "") %> alt="" />
</figure>
<div class="mdl-card__title">
<h6 class="mdl-card__title"><%= bun.originalname %></h6>
</div>
</div>
<% }); %>
</span>
</div>
</div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">


+ 12
- 5
src/imagefile.js View File

@ -3,6 +3,7 @@ const multer = require('multer');
const mongoose = require('mongoose');
const uuid = require('uuid/v4');
const path = require('path');
const fs = require('fs');
let router = express.Router();
const imageSchema = mongoose.Schema({
@ -23,14 +24,19 @@ function getAllFiles(collection, cb) {
let files = [];
collection.find({}, (err, buns) => {
buns.forEach((bun) => {
let fin = bun.path.replace("public/", "");
files.push(fin);
});
files = buns;
/* buns.forEach((bun) => {
// let fin = bun.path.replace("public/", "");
files.push(bun);
}); */
cb(files);
});
}
function stripPath(dir) {
return path.basename(dir).split('.').slice(0, -1).join('.');
}
router.getImages = (callback, limit) => {
Image.find(callback).limit(limit);
}
@ -67,7 +73,8 @@ let upload = multer({
router.get('/', (req, res, next) => {
getAllFiles(Image, (filesOut) => {
res.render('../public/index.ejs', {
files: filesOut
files: filesOut,
stripBun: stripPath
});
});
});


Loading…
Cancel
Save