Widget: DCTList: Difference between revisions
From LINKS Community Center
Eschmidt (talk | contribs) No edit summary |
Eschmidt (talk | contribs) No edit summary |
||
| Line 6: | Line 6: | ||
<style> | <style> | ||
#dct-list-wrapper { font-family: 'Open Sans'; } | #dct-list-wrapper { font-family: 'Open Sans'; } | ||
#dct-list-wrapper h1 { | #dct-list-wrapper h1, #dct-list-wrapper h2 { | ||
font-family: 'Raleway'; | font-family: 'Raleway'; | ||
font-weight: 300; | font-weight: 300; | ||
| Line 13: | Line 13: | ||
color: var(--links-blue); | color: var(--links-blue); | ||
} | } | ||
# | #data-source-filter { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
margin-bottom: | margin-bottom: 4em; | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); | ||
gap: 1em 1em; | gap: 1em 1em; | ||
} | } | ||
# | #data-source-filter img { width: 2em; height: 2em; margin: 0 .5em; } | ||
#dct-tabulator.tabulator { border: 0 none; background-color: transparent; font-size: 1.2em; } | #dct-tabulator.tabulator { border: 0 none; background-color: transparent; font-size: 1.2em; } | ||
#dct-tabulator.tabulator .tabulator-header { border-color: var(--links-blue); background-color: transparent; color: var(--links-blue); } | #dct-tabulator.tabulator .tabulator-header { border-color: var(--links-blue); background-color: transparent; color: var(--links-blue); } | ||
| Line 90: | Line 90: | ||
const filterHtml = dataSources.reduce((prev, curr) => { | const filterHtml = dataSources.reduce((prev, curr) => { | ||
return prev + '<div><input type="checkbox" id="filter-' + curr.name + '" value="' + curr.name + '">' + | return prev + '<div><input type="checkbox" id="filter-' + curr.name + '" value="' + curr.name + '" checked >' + | ||
'<label for="filter-' + curr.name + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>' | '<label for="filter-' + curr.name + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>' | ||
}, ''); | }, ''); | ||
document.getElementById(' | document.getElementById('data-source-filter').innerHTML = filterHtml; | ||
console.log(data) | console.log(data) | ||
| Line 130: | Line 130: | ||
<div id="dct-list-wrapper"> | <div id="dct-list-wrapper"> | ||
<h1>Social Media and Crowdsourcing Technologies</h1> | <h1>Social Media and Crowdsourcing Technologies</h1> | ||
<div id=" | <h2>Filters</h2> | ||
<div id="data-source-filter"></div> | |||
<div id="dct-tabulator"></div> | <div id="dct-tabulator"></div> | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
Revision as of 16:09, 7 June 2022
Development verstion of the DCT List.
Not ready for production!