Skip to content

Commit

Permalink
Improve CSS on catalog page (#124)
Browse files Browse the repository at this point in the history 
* change color for card header to make it more homogenous with color scheme of the rest of the site

* changed css in catalog and html elements in JS script for catalog to make the aspect a bit smoother
so far it is only a visual fix, nothing in done on the content of the page
  • Loading branch information
@alix-tz
alix-tz authored Jul 25, 2024
1 parent d94a8ac commit 156c43a
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 36 deletions.
56 changes: 31 additions & 25 deletions static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

body {
background-color: #fefefe;
font-family: Montserrat, sans-serif;
}

header {
Expand Down Expand Up @@ -91,45 +92,49 @@ footer {

.badge-sm {
height: .9em;
font-weight: normal!important;
font-size: .7em;
font-weight: normal !important;
/*font-size: .7em;*/
}

.bg-language {
background: #9A031E;
background: #FFD4E5;
color: #7F6472;
}

.bg-script {
background: #E36414;
}

.bg-script-type {
background: #FF8500;
.bg-script, .bg-script-type {
background: #FFDFBA;
color: #6A5D4E;
}

.bg-hands {
background: #7B287B;
background: #DBDCFF;
color: #575866;
}

.bg-flags {
background: #333333;
background: #F9A7A7;
color: white;
}


.bg-software {
background: #134213;
background: #C0F4B8;
color: #607A5C;
}

.bg-volumes {
background: #0D3B66;
background: #D5E9FF;
color: #638BB9;
}

.bg-license {
background: #000814;
background: #CAFEFF;
color: #5A8B8F;
}

.bg-link {
background: #3f88c5;
background: #78abd6;
color: white;
}

/**
Expand Down Expand Up @@ -167,35 +172,35 @@ footer {
}

.card .secondary-header {
border-top: 1px solid rgba(0,0,0,.125);
padding: .4em .2em ;
/*border-top: 1px solid rgba(0,0,0,.125);*/
padding: .8em 1rem .4em;
}

.card hr {
margin: .5em 0;
}
.card h6 {
color: #6c757d;
font-family: "Oswald";
color: #616b39;
/*font-family: "Oswald";*/
font-size: 1em;
text-align: right;
display: block;
padding-bottom: 0;
}
.card h7 {
font-weight: bold;
/*font-weight: bold;*/
color: #6c757d;
font-family: "Oswald";
/*font-family: "Oswald";*/
font-size: .9em;
text-align: right;
display: block;
padding-bottom: 0;
}
.card em, .card b {
color: #363a3e;
font-family: "Oswald";
/*font-family: "Oswald";*/
font-stretch: 120%;
font-weight: 500;
/*font-weight: 500;*/
}

.card h8 {
Expand All @@ -211,8 +216,9 @@ footer {
font-weight: 500;
}
.card-header {
background-color: #333B41!important;
color: white;
background-color: #dce8ae !important;
color: #616b39;
font-weight: bold;
/*padding: 1rem;*/
}

Expand Down
22 changes: 11 additions & 11 deletions static/js/catalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,14 @@ function slugify(str) {

function getVolumes(listOfValue) {
/* Produces a HTML sequence of volume badges based on a the Volume Catalog Entry list */
return listOfValue.map((val) => `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-volumes rounded-start text-white border border-secondary border-end-0 py-1 px-2"><span class="fas fa-database"></span> Volume</span><span class="rounded-end text-dark border border-secondary py-1 px-2">${val.count.toLocaleString()} ${val.metric}</span></span>`).join(" ")
return listOfValue.map((val) => `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-volumes rounded-start border border-end-0 py-1 px-2"><span class="fas fa-database"></span> Volume</span><span class="rounded-end text-dark border py-1 px-2">${val.count.toLocaleString()} ${val.metric}</span></span>`).join(" ")
}

function getImages(listOfValue, label, color) {
/* Produces a HTML sequence of volume badges based on a list of string
* (label is used as the left label, color as the css color class)
* */
return listOfValue.map((val) => `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-${color} rounded-start text-white border border-secondary border-end-0 py-1 px-2">${label}</span><span class="rounded-end text-dark border border-secondary py-1 px-2">${val}</span></span>`).join(" ")
return listOfValue.map((val) => `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-${color} rounded-start border border-end-0 py-1 px-2">${label}</span><span class="rounded-end text-dark border py-1 px-2">${val}</span></span>`).join(" ")
}

function getTypeBadge(scriptType) {
Expand All @@ -141,7 +141,7 @@ function getTypeBadge(scriptType) {
badge = "fa-print";
}
return `<span class="badge badge-sm p-0 m-1 mb-3">
<span class="bg-script-type rounded-start text-white border border-secondary border-end-0 py-1 px-2">Script Type</span><span class="rounded-end border border-secondary text-dark py-1 px-2"><span class="fas ${badge}"></span> ${scriptType}</span>
<span class="bg-script-type rounded-start border border-end-0 py-1 px-2">Script Type</span><span class="rounded-end border text-dark py-1 px-2"><span class="fas ${badge}"></span> ${scriptType}</span>
</span>`
}
function getCharactersBadge(catalogEntry) {
Expand All @@ -151,21 +151,21 @@ function getCharactersBadge(catalogEntry) {
normalization = ` (${catalogEntry.characters.mode})`
}
return `<span class="badge badge-sm p-0 m-1 mb-3">
<span class="bg-volumes rounded-start text-white border border-secondary border-end-0 py-1 px-2"><span class="fas fa-spell-check"></span> Known characters${normalization}</span><span class="rounded-end text-dark border border-secondary py-1 px-2">${catalogEntry.characters.members.length.toLocaleString()}</span></span>`;
<span class="bg-volumes rounded-start border border-end-0 py-1 px-2"><span class="fas fa-spell-check"></span> Known characters${normalization}</span><span class="rounded-end text-dark border py-1 px-2">${catalogEntry.characters.members.length.toLocaleString()}</span></span>`;
}
return ``;
}
function getSoftwareBadge(catalogEntry) {
if (catalogEntry["production-software"] === undefined) { return ``; }
return `<p class="my-0">
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-software rounded-start text-white border border-secondary border-end-0 py-1 px-2"><span class="fas fa-desktop"></span> <span vanilla-i18n="cat.software">Software</span></span><span class="rounded-end border border-secondary text-dark py-1 px-2">${catalogEntry['production-software']}</span></span>
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-software rounded-start border border-end-0 py-1 px-2"><span class="fas fa-desktop"></span> <span vanilla-i18n="cat.software">Software</span></span><span class="rounded-end border text-dark py-1 px-2">${catalogEntry['production-software']}</span></span>
</p>`;
}

function citationCFF(link) {
/** Creates a citation link if the entry is given */
if (link) {
return `<a href="${link}"><span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-link rounded-start text-white border border-secondary border-end-0 py-1 px-2"><span class="fa fa-link"></span> <span vanilla-i18n="cat.link">Link</span></span><span class="rounded-end border border-secondary text-dark py-1 px-2" vanilla-i18n="cat.citationFile">Citation File</span></span>
return `<a href="${link}"><span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-link rounded-start border border-end-0 py-1 px-2"><span class="fa fa-link"></span> <span vanilla-i18n="cat.link">Link</span></span><span class="rounded-end border text-dark py-1 px-2" vanilla-i18n="cat.citationFile">Citation File</span></span>
</a>`;
} else {
return "";
Expand Down Expand Up @@ -274,7 +274,7 @@ function coins(catalogEntry) {
function getFlags(catalogEntry) {
text = ""
if(catalogEntry["automatically-aligned"]) {
text += `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-flags rounded-start text-white border border-secondary border-end-0 py-1 px-2"><i class="fas fa-exchange-alt"></i></span><span class="rounded-end border border-secondary text-dark py-1 px-2" vanilla-i18n="form.field.flags.automaticallyAligned.label">Automatically aligned</span></span>`;
text += `<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-flags rounded-start border border-end-0 py-1 px-2"><i class="fas fa-exchange-alt"></i></span><span class="rounded-end border text-dark py-1 px-2" vanilla-i18n="form.field.flags.automaticallyAligned.label">Automatically aligned</span></span>`;
}
if (text) {
return "<br />" + text;
Expand All @@ -295,20 +295,20 @@ function template(catalogEntry, key, isLong) {
</div>
<div class="card-body pt-1">
<p class="my-0">
<a href="${catalogEntry.url}"><span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-link rounded-start text-white border border-secondary border-end-0 py-1 px-2"><span class="fa fa-link"></span> <span vanilla-i18n="cat.link">Link</span></span><span class="rounded-end border border-secondary text-dark py-1 px-2" vanilla-i18n="cat.repository">Data repository</span></span></a>
<a href="${catalogEntry.url}"><span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-link rounded-start border border-end-0 py-1 px-2"><span class="fa fa-link"></span> <span vanilla-i18n="cat.link">Link</span></span><span class="rounded-end border text-dark py-1 px-2" vanilla-i18n="cat.repository">Data repository</span></span></a>
${citationCFF(catalogEntry['citation-file-link'])}
</p>
<hr />
<p class="my-0">
${getImages(catalogEntry.language, "Language", "language")}
${getImages(catalogEntry.script_simplified, "Script", "script")}
${getTypeBadge(catalogEntry['script-type'])}
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-hands rounded-start text-white border border-secondary border-end-0 py-1 px-2">Hands</span><span class="rounded-end border border-secondary text-dark py-1 px-2">${catalogEntry.hands.count}</span></span>
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-hands rounded-start border border-end-0 py-1 px-2">Hands</span><span class="rounded-end border text-dark py-1 px-2">${catalogEntry.hands.count}</span></span>
${getFlags(catalogEntry)}
</p>
<p class="my-0">${getVolumes(catalogEntry.volume)} ${getCharactersBadge(catalogEntry)}</p>
<p class="my-0">
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-license rounded-start text-white border border-secondary border-end-0 py-1 px-2">License</span><span class="rounded-end border border-secondary text-dark py-1 px-2">${(Array.isArray(catalogEntry.license) ? catalogEntry.license[0] : catalogEntry.license).name}</span></span>
<span class="badge badge-sm p-0 m-1 mb-3"><span class="bg-license rounded-start border border-end-0 py-1 px-2">License</span><span class="rounded-end border text-dark py-1 px-2">${(Array.isArray(catalogEntry.license) ? catalogEntry.license[0] : catalogEntry.license).name}</span></span>
</p>
${getSoftwareBadge(catalogEntry)}
</div>
Expand All @@ -325,7 +325,7 @@ function template(catalogEntry, key, isLong) {
</div>
<div class="card-body shares">
<a class="btn btn-sm btn-primary" href="share.html?uri=${catalogEntry._pid}"><i class="fas fa-share"></i> <span vanilla-i18n="cat.full_record">Full-size record</a></a>
<a class="btn btn-sm btn-secondary" href="https://twitter.com/intent/tweet?text=${encodeURI(catalogEntry.title)}&url=${encodeURI('https://htr-united.github.io/share.html?uri='+catalogEntry._pid)}&hashtags=HTR_United"><i class="fas fa-hashtag"></i> <span vanilla-i18n="cat.tweet">Tweet</a></a>
<a class="btn btn-sm btn-outline-info" href="https://twitter.com/intent/tweet?text=${encodeURI(catalogEntry.title)}&url=${encodeURI('https://htr-united.github.io/share.html?uri='+catalogEntry._pid)}&hashtags=HTR_United"><i class="fas fa-hashtag"></i> <span vanilla-i18n="cat.tweet">Tweet</a></a>
</div>
</div>`);
}
Expand Down

0 comments on commit 156c43a

Please sign in to comment.