alazyreader/library
1
0
Fork 0
Code Issues 1 Pull Requests 2 Releases Wiki Activity

unleashing flexbox upon thee

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/files/records/app.js
View File

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

1
frontend/files/records/index.html
View File

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

106
frontend/files/records/style.css
View File

@ -174,99 +174,37 @@ body {
color: #d8d0a0; color: #d8d0a0;
} }
#current { #records .flow {
background-color: #f7f3dc; height: calc(100vh - 35px - 15px);
width: calc(40vw - 40px); padding-top: 5px;
height: calc(100vh - 80px); padding-left: 20px;
padding: 20px; padding-right: 20px;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
flex-wrap: wrap;
overflow: auto; overflow: auto;
float: left;
} }
#records { #records .flow .record {
width: calc(60vw - 40px); display: inline-block;
height: calc(100vh - 80px); width: 250px;
padding: 20px; padding: 15px;
overflow: auto; border-radius: 3px;
float: left;
} }
.recordTable th { #records .flow .record:nth-child(odd) {
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) {
background: #f9f8ed; background: #f9f8ed;
border-bottom: 1px solid #d8d0a0;
} }
.recordTable .tRow { #records .flow .record .cover {
cursor: pointer; border-radius: 3px;
} max-width: 250px;
.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%;
display: block; display: block;
margin: 0 auto; margin: 0 auto 3px;
overflow: unset;
} }
#current .description p { #records .flow .record .name {
padding: 20px 0; font-style: italic;
} }