unleashing flexbox upon thee

This commit is contained in:
David 2022-04-03 20:26:16 -04:00
parent 727e4e7867
commit 3b2e8cc79b
3 changed files with 30 additions and 112 deletions

View File

@ -144,34 +144,15 @@ 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 }) {
return `<div class="record">
<img class="cover" src="${coverURL}"/>
<span class="name">${name}</span>
</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 acc.concat(TableRowTemplate(record));
}, "")} </table>`;
return `<div class="flow">${records.reduce((acc, record) => {
return acc.concat(TableRowTemplate(record));
}, "")} </div>`;
}

View File

@ -38,7 +38,6 @@
/>
</div>
</div>
<div id="current">No Record Selected</div>
<div id="records"></div>
<!-- Table goes here -->
</div>

View File

@ -174,99 +174,37 @@ body {
color: #d8d0a0;
}
#current {
background-color: #f7f3dc;
width: calc(40vw - 40px);
height: calc(100vh - 80px);
padding: 20px;
#records .flow {
height: calc(100vh - 35px - 15px);
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;
}