diff --git a/frontend/files/records/app.js b/frontend/files/records/app.js index 272390a..ec9ba60 100644 --- a/frontend/files/records/app.js +++ b/frontend/files/records/app.js @@ -39,6 +39,9 @@ function renderTable(records, sortField) { var recordElement = document.getElementById("records"); recordElement.innerHTML = TableTemplate(records); + var recordCount = document.getElementById("recordCount"); + recordCount.innerHTML = `${records.length} records`; + // add listeners for selecting record to view Array.from(recordElement.querySelectorAll("tbody tr")) .slice(1) // remove header from Array @@ -144,10 +147,17 @@ function RecordTemplate({ `; } -function TableRowTemplate({ name, coverURL }) { +function TableRowTemplate({ name, coverURL, discogsURL }) { return `
${name} + + Data provided by Discogs. +
`; } diff --git a/frontend/files/records/index.html b/frontend/files/records/index.html index 4fe32e4..f9db216 100644 --- a/frontend/files/records/index.html +++ b/frontend/files/records/index.html @@ -30,6 +30,7 @@ >git
+ diff --git a/frontend/files/records/style.css b/frontend/files/records/style.css index 07c0ff6..bbfafd7 100644 --- a/frontend/files/records/style.css +++ b/frontend/files/records/style.css @@ -147,6 +147,11 @@ body { display: inline; } +#header .recordCount { + font-size: small; + color: #a29c77; +} + #searchBox { position: absolute; right: 10px; @@ -175,7 +180,7 @@ body { } #records .flow { - height: calc(100vh - 35px - 15px); + height: calc(100vh - 35px - 15px - 20px); padding-top: 5px; padding-left: 20px; padding-right: 20px; @@ -208,3 +213,26 @@ body { #records .flow .record .name { font-style: italic; } + +#records .flow .record a.discogsLink { + display: block; + text-align: right; + font-size: smaller; + padding-top: 10px; + color: #a29c77; +} + +footer { + background-color: #f7f3dc; + font-size: smaller; + text-align: center; + vertical-align: bottom; + padding: 5px 0px; + position: absolute; + bottom: 0; + padding-left: 20px; + padding-right: 20px; + width: calc(100% - 40px); + color: #a29c77; + border-top: 2px solid #d8d0a0; +} \ No newline at end of file