diff --git a/static/main.css b/static/main.css
index 269850accff..078f1924d3b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -50,6 +50,10 @@ a, a:hover {
color: #fff;
}
+hr {
+ color: inherit;
+}
+
summary {
font-size: 1.5rem;
font-weight: 800;
@@ -452,6 +456,35 @@ header.topic {
background: #00264d;
border-radius: 5px;
padding: 2em;
+ padding-bottom: calc(2em - 29px / 2); /* 29px is the height of the button excluding content */
+}
+
+.infobox .additional-info.collapsed {
+ max-height: 0;
+ overflow: hidden;
+}
+
+.infobox .additional-info {
+ max-height: 1000px;
+ transition: max-height .8s;
+}
+
+.infobox button {
+ appearance: none;
+ border: 0;
+ background: transparent;
+ color: inherit;
+ padding: 0;
+ margin: auto;
+ display: block;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.infobox button:hover {
+ /* bounce the icon slightly */
+ transform: translateY(2px);
+ transition: transform 0.2s;
}
.btn-list .btn {
diff --git a/templates/org.html b/templates/org.html
index 23061dba3c9..61c1f7536e3 100644
--- a/templates/org.html
+++ b/templates/org.html
@@ -92,6 +92,20 @@
@@ -199,6 +213,16 @@
Platforms and accounts
downloadElm.href = window.URL.createObjectURL(new Blob([tsv], { type: 'text/tsv' }));
}
+const expandInfoBoxBtn = document.querySelector('#expandInfoBoxBtn');
+expandInfoBoxBtn.addEventListener('click', () => {
+ const additionalInfo = document.querySelector('.additional-info');
+ if (additionalInfo.classList.contains('collapsed')) {
+ additionalInfo.classList.remove('collapsed');
+ expandInfoBoxBtn.style.display = 'none';
+ document.querySelector('.infobox').style.paddingBottom = '2em';
+ }
+});
+
const pageQID = window.location.toString().match(/(Q\d+)\/$/g)[0].slice(0, -1);
const wikidataEndpoint = 'https://www.wikidata.org/w/api.php?action=wbgetentities&origin=*&format=json&props=claims&ids=';
const recentAccountsElm = document.querySelector('#recent-accounts');
@@ -210,7 +234,12 @@
Platforms and accounts
existingTableText = document.querySelector('table.container').innerHTML;
}
-const props = {
+const additionalLinks = {
+ P10311: 'additional-link-jobs',
+ P1581: 'additional-link-blog',
+};
+
+const socialProps = {
P2397: ['YouTube', 'https://www.youtube.com/channel/'],
P4264: ['LinkedIn', 'https://www.linkedin.com/company/'],
P2013: ['Facebook', 'https://www.facebook.com/'],
@@ -220,7 +249,7 @@
Platforms and accounts
P4015: ['Vimeo', 'https://vimeo.com/'],
P3267: ['Flickr', 'https://www.flickr.com/photos/'],
};
-const propKeys = Object.keys(props);
+const propKeys = Object.keys(socialProps);
if (pageQID) {
fetch(wikidataEndpoint + pageQID)
@@ -229,7 +258,7 @@
Platforms and accounts
const claims = Object.keys(data.entities[pageQID].claims);
let updatedAny = false;
claims.forEach(claim => {
- const isOldClaim = claim
+ const isOldClaim = claim;
if (propKeys.includes(claim) && !(existingTableText && existingTableText.includes(claim))) {
// check if the claim is old because it has a P582 qualifier
if (data.entities[pageQID].claims[claim][0].qualifiers && data.entities[pageQID].claims[claim][0].qualifiers.P582) {
@@ -238,18 +267,25 @@
Platforms and accounts
const trElm = document.createElement('TR');
const tdNameElm = document.createElement('TD');
- tdNameElm.innerText = props[claim][0];
+ tdNameElm.innerText = socialProps[claim][0];
const account = data.entities[pageQID].claims[claim][0].mainsnak.datavalue.value;
const tdLinkElm = document.createElement('TD');
const aElm = document.createElement('A');
aElm.innerText = account;
- aElm.href = props[claim][1] + account;
+ aElm.href = socialProps[claim][1] + account;
aElm.rel = 'nofollow';
tdLinkElm.appendChild(aElm);
trElm.appendChild(tdNameElm);
trElm.appendChild(tdLinkElm);
recentAccountsElm.after(trElm);
updatedAny = true;
+ } else if (Object.keys(additionalLinks).includes(claim)) {
+ const additionalLinkElm = document.getElementById(additionalLinks[claim]);
+ if (additionalLinkElm) {
+ const url = data.entities[pageQID].claims[claim][0].mainsnak.datavalue.value;
+ const displayText = url.replace('http://', '').replace('https://', '').replace(/\/$/, '');
+ additionalLinkElm.innerHTML = `
${displayText}`;
+ }
}
});
if (updatedAny) {