Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the infobox expandable #102 #467

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Make the infobox expandable #102 #467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ a, a:hover {
color: #fff;
}

hr {
color: inherit;
}

summary {
font-size: 1.5rem;
font-weight: 800;
Expand Down Expand Up @@ -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 {
Expand Down
46 changes: 41 additions & 5 deletions templates/org.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,20 @@ <h1 lang="{{ .orgLabel.Lang }}">{{ .orgLabel }}</h1>
</ul>

{{ if $details.wikipedia }}<p><a href="{{ $details.wikipedia }}">Read more on Wikipedia.</a></p>{{ end }}

<div class="additional-info collapsed">
<hr>
<ul>
<li>Official jobs page: <span class="text-grey" id="additional-link-jobs">[missing data]</span></li>
<li>Official blog: <span class="text-grey" id="additional-link-blog">[missing data]</span></li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: omit the [missing data] from these 2. Because it is not very common those links and if there is something “missing” even if there is none does not come across very well in my opinion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't agree. This is an invitation to help add the data. And these are just the first few things we add, just with all open issues there may be 3-4 more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a huge fan of this pattern either as a user can see the expand button just to get disappointed. However, people looking to contribute might not even know what they can contribute if we do not indicate this, this is for example a known problem with the call to action buttons. For example if you go to an agency missing an email address there is no way to know from that page that adding an email address will add a button.

For the future I imagine these "missing data" sections(both here and in the existing dialog) to be either accompanied with or replaced by "add"/"+" buttons which would open a modal and let people authenticate with OAuth and paste a new link.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I get the idea, but if there is no data to add. Then there is missing data everywhere, but in reality there is none.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, that's indeed an issue and possibly rather common is certain regions. We should probably get rid of all our [missing data] section and add a new general call-to-action about adding new data, such a call-to-action could then go on to tell the potential contributor of all the data we can display. That would also solve the issues with the buttons without us introducing some new UI-pattern.

Regarding this PR; I will change it so that no button is rendered if there is no data in the expandable section.

</ul>
</div>

<button title="expand" id="expandInfoBoxBtn">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden width="37" height="37" fill="currentColor" class="bi bi-chevron-compact-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67"/>
</svg>
</button>
</div>

<div class="center-text action-boxes">
Expand Down Expand Up @@ -199,6 +213,16 @@ <h2 class="m0">Platforms and accounts</h2>
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');
Expand All @@ -210,7 +234,12 @@ <h2 class="m0">Platforms and accounts</h2>
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/'],
Expand All @@ -220,7 +249,7 @@ <h2 class="m0">Platforms and accounts</h2>
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)
Expand All @@ -229,7 +258,7 @@ <h2 class="m0">Platforms and accounts</h2>
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) {
Expand All @@ -238,18 +267,25 @@ <h2 class="m0">Platforms and accounts</h2>

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 = `<a href="${url}">${displayText}</a>`;
}
}
});
if (updatedAny) {
Expand Down
Loading