Compare commits

...

2 Commits

Author SHA1 Message Date
8bdf848cbf finish up rewrite
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2023-02-11 23:00:38 -05:00
3b2e8cc79b unleashing flexbox upon thee 2023-02-11 22:31:46 -05:00
3 changed files with 73 additions and 112 deletions

View File

@ -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,34 +147,22 @@ function RecordTemplate({
</span>`;
}
function TableRowTemplate({
artists,
identifier,
label,
rowNumber,
name,
year,
}) {
return `<tr class="tRow" id="${rowNumber}">
<td class="name">
${name}
</td>
<td class="artist">${artists.join(", ")}</td>
<td class="label">${label}</td>
<td class="identifier">${identifier}</td>
<td class="year">${year}</td>
</tr>`;
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>`;
}
function TableTemplate(records) {
return `<table class="recordTable">
<tr>
<th data-sort-by="sortName" class="tHeader name">Name</th>
<th data-sort-by="sortArtist" class="tHeader artist">Artist(s)</th>
<th data-sort-by="label" class="tHeader label">Label</th>
<th data-sort-by="identifier" class="tHeader identifier">Identifier</th>
<th data-sort-by="year" class="tHeader year">Year</th>
</tr>${records.reduce((acc, record) => {
return `<div class="flow">${records.reduce((acc, record) => {
return acc.concat(TableRowTemplate(record));
}, "")} </table>`;
}, "")} </div>`;
}

View File

@ -30,6 +30,7 @@
>git</a
>
<div id="searchBox">
<span id="recordCount" class="recordCount">_ records</span>
<input
id="search"
type="text"
@ -38,8 +39,11 @@
/>
</div>
</div>
<div id="current">No Record Selected</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>

View File

@ -147,6 +147,11 @@ body {
display: inline;
}
#header .recordCount {
font-size: small;
color: #a29c77;
}
#searchBox {
position: absolute;
right: 10px;
@ -174,99 +179,60 @@ body {
color: #d8d0a0;
}
#current {
background-color: #f7f3dc;
width: calc(40vw - 40px);
height: calc(100vh - 80px);
padding: 20px;
#records .flow {
height: calc(100vh - 35px - 15px - 20px);
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
flex-wrap: wrap;
overflow: auto;
float: left;
}
#records {
width: calc(60vw - 40px);
height: calc(100vh - 80px);
padding: 20px;
overflow: auto;
float: left;
#records .flow .record {
display: inline-block;
width: 250px;
padding: 15px;
border-radius: 3px;
}
.recordTable th {
font-weight: bold;
text-align: left;
font-family: "Libre Baskerville", sans-serif;
}
.recordTable th[data-sort-by] {
cursor: pointer;
}
.recordTable th[data-sort-by]::after {
content: "\f0dc";
font-family: FontAwesome;
font-size: x-small;
position: relative;
left: 4px;
bottom: 2px;
}
.recordTable th.asc::after {
content: "\f0de";
font-family: FontAwesome;
font-size: x-small;
position: relative;
left: 4px;
bottom: 2px;
}
.recordTable th.desc::after {
content: "\f0dd";
font-family: FontAwesome;
font-size: x-small;
position: relative;
left: 4px;
bottom: 2px;
}
.recordTable td,
.recordTable th {
padding: 5px;
min-width: 50px;
}
.tRow:nth-child(odd) {
#records .flow .record:nth-child(odd) {
background: #f9f8ed;
border-bottom: 1px solid #d8d0a0;
}
.recordTable .tRow {
cursor: pointer;
}
.recordTable .tRow .name {
font-style: italic;
max-width: 600px;
}
#current h1 {
font-size: x-large;
font-weight: bold;
font-style: italic;
padding: 10px 0;
}
#current h2 {
font-size: large;
padding: 7px 0;
}
#current img {
max-height: 400px;
max-width: 100%;
#records .flow .record .cover {
border-radius: 3px;
max-width: 250px;
display: block;
margin: 0 auto;
margin: 0 auto 3px;
overflow: unset;
}
#current .description p {
padding: 20px 0;
#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;
}