finish up rewrite

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({
   </span>`;
 }
 
-function TableRowTemplate({ name, coverURL }) {
+function TableRowTemplate({ name, coverURL, discogsURL }) {
   return `<div class="record">
     <img class="cover" src="${coverURL}"/>
     <span class="name">${name}</span>
+    <a 
+      target="_blank"
+      href="${discogsURL}"
+      class="discogsLink"
+    >
+      Data provided by Discogs.
+    </a>
   </div>`;
 }
 

frontend/files/records/index.html

@@ -30,6 +30,7 @@
           >git</a
         >
         <div id="searchBox">
+          <span id="recordCount" class="recordCount">_ records</span>
           <input
             id="search"
             type="text"
@@ -39,6 +40,10 @@
         </div>
       </div>
       <div id="records"></div>
+      <footer>
+        This application uses Discogs’ API but is not affiliated with, sponsored
+        or endorsed by Discogs. ‘Discogs’ is a trademark of Zink Media, LLC.
+      </footer>
       <!-- Table goes here -->
     </div>
   </body>

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;
+}