Skip to content

Commit

Permalink
Merge pull request #153 from /issues/4
Browse files Browse the repository at this point in the history 
Make index page cards clickable, and use Open Graph Protocol
  • Loading branch information
@WKHAllen
WKHAllen authored Aug 2, 2020
2 parents 874d99b + 804626a commit c9496cb
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 55 deletions.
1 change: 1 addition & 0 deletions src/routes/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@ export function adminAuth (req: Request, res: Response, next: NextFunction) {
// Render a page
export function renderPage(req: Request, res: Response, page: string, options: any) {
options = options || {};
options.url = req.originalUrl;
services.MetaService.getMeta('Version', (version) => {
options.version = version;
if (!req.session || !req.session.sessionId) {
Expand Down
4 changes: 4 additions & 0 deletions src/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ footer .footer-list-link {
padding: 0px 20px;
}

#index .card-link {
text-decoration: none;
}

#index .thumbnail {
width: 250px;
height: 250px;
Expand Down
109 changes: 57 additions & 52 deletions src/static/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,62 +14,67 @@ function deleteLastBook() {
function addBook(book) {
var courseNumber = book.coursenumber ? ' ' + book.coursenumber : '';
// <div class="card-container col-12 col-md-6 col-lg-4 mb-4">
var newBook = document.createElement('div');
newBook.classList.add('card-container', 'col-12', 'col-md-6', 'col-lg-4', 'mb-4');
// <div class="card" style="width: 18rem;">
var newCard = document.createElement('div');
newCard.classList.add('card');
newCard.style = 'width: 18rem;';
var imgLink = document.createElement('a');
imgLink.href = `/book/${book.bookid}`
newCard.appendChild(imgLink)
// <img src="${book.imageurl}" class="card-img-top thumbnail" alt="...">
var newImg = document.createElement('img');
newImg.src = book.imageurl;
newImg.classList.add('card-img-top', 'thumbnail', 'p-1', 'pt-3');
newImg.alt = '...';
imgLink.appendChild(newImg);
// <div class="card-body">
var cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// <div class="space-between">
var spaceBetween = document.createElement('div');
spaceBetween.classList.add('space-between');
// <a href="/book/${book.bookid}">
var bookLink = document.createElement('a');
bookLink.href = `/book/${book.bookid}`;
// <span class="title">${book.title}
var bookTitle = document.createElement('span');
bookTitle.classList.add('title');
bookTitle.innerText = book.title;
var newBookLink = document.createElement('a');
newBookLink.classList.add('card-link');
newBookLink.href = `/book/${book.bookid}`;
var newBook = document.createElement('div');
newBook.classList.add('card-container', 'col-12', 'col-md-6', 'col-lg-4', 'mb-4');
// <div class="card" style="width: 18rem;">
var newCard = document.createElement('div');
newCard.classList.add('card');
newCard.style = 'width: 18rem;';
var imgLink = document.createElement('a');
imgLink.href = `/book/${book.bookid}`;
newCard.appendChild(imgLink);
// <img src="${book.imageurl}" class="card-img-top thumbnail" alt="...">
var newImg = document.createElement('img');
newImg.src = book.imageurl;
newImg.classList.add('card-img-top', 'thumbnail', 'p-1', 'pt-3');
newImg.alt = '...';
imgLink.appendChild(newImg);
// <div class="card-body">
var cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// <div class="space-between">
var spaceBetween = document.createElement('div');
spaceBetween.classList.add('space-between');
// <a href="/book/${book.bookid}">
var bookLink = document.createElement('a');
bookLink.href = `/book/${book.bookid}`;
// <span class="title">${book.title}
var bookTitle = document.createElement('span');
bookTitle.classList.add('title');
bookTitle.innerText = book.title;
// </span>
bookLink.appendChild(bookTitle);
// </a>
spaceBetween.appendChild(bookLink);
// <span class="card-price">$${book.price}
var cardPrice = document.createElement('span');
cardPrice.classList.add('card-price');
cardPrice.innerText = `$${book.price}`;
// </span>
bookLink.appendChild(bookTitle);
// </a>
spaceBetween.appendChild(bookLink);
// <span class="card-price">$${book.price}
var cardPrice = document.createElement('span');
cardPrice.classList.add('card-price');
cardPrice.innerText = `$${book.price}`;
// </span>
spaceBetween.appendChild(cardPrice);
spaceBetween.appendChild(cardPrice);
// </div>
cardBody.appendChild(spaceBetween);
// <div>By: ${book.author}
var authorDiv = document.createElement('div');
authorDiv.innerText = `By: ${book.author}`;
// </div>
cardBody.appendChild(authorDiv);
// <div>${book.department}${courseNumber}
var departmentDiv = document.createElement('div');
departmentDiv.innerText = book.department + courseNumber;
// </div>
cardBody.appendChild(departmentDiv);
// </div>
cardBody.appendChild(spaceBetween);
// <div>By: ${book.author}
var authorDiv = document.createElement('div');
authorDiv.innerText = `By: ${book.author}`;
// </div>
cardBody.appendChild(authorDiv);
// <div>${book.department}${courseNumber}
var departmentDiv = document.createElement('div');
departmentDiv.innerText = book.department + courseNumber;
// </div>
cardBody.appendChild(departmentDiv);
newCard.appendChild(cardBody);
// </div>
newCard.appendChild(cardBody);
newBook.appendChild(newCard);
// </div>
newBook.appendChild(newCard);
// </div>
document.getElementById('index').appendChild(newBook);
newBookLink.appendChild(newBook);
// </a>
document.getElementById('index').appendChild(newBookLink);
}

// Load more books using AJAX
Expand Down
13 changes: 10 additions & 3 deletions src/views/layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,21 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="NorseBooks is a place for Luther College students to resell textbooks">
<meta name="description" content="NorseBooks is a place for Luther College students to buy and sell textbooks">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/img/favicon-192.png">
<link rel="manifest" href="/manifest.json">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.norsebooks.com{{url}}">
<meta property="og:image" content="/img/favicon.png">
<meta property="og:site_name" content="NorseBooks">
<meta property="og:description" content="NorseBooks is a place for Luther College students to buy and sell textbooks">
{{#if title}}
<title>{{title}} - Norse Books</title>
<meta property="og:title" content="{{title}} - NorseBooks">
<title>{{title}} - NorseBooks</title>
{{else}}
<title>Norse Books</title>
<meta property="og:title" content="NorseBooks">
<title>NorseBooks</title>
{{/if}}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/main.css">
Expand Down

0 comments on commit c9496cb

Please sign in to comment.