mirror of
https://github.com/loot/loot.github.io.git
synced 2026-07-27 14:13:30 -07:00
Replaced paper-items in credits page.
With a CSS-only implementation.
This commit is contained in:
Oliver Hamlet
+1
-27
@@ -4,35 +4,9 @@ title: Credits
|
||||
permalink: /credits/
|
||||
---
|
||||
|
||||
<style>
|
||||
#contrib {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#contrib > paper-item {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
width: 280px;
|
||||
}
|
||||
#contrib > paper-item a {
|
||||
background: #E8EAF6;
|
||||
color: inherit;
|
||||
}
|
||||
#contrib > paper-item.admin a {
|
||||
background: #303F9F;
|
||||
color: white;
|
||||
}
|
||||
#contrib > paper-item.member a {
|
||||
background: #64B5F6;
|
||||
color: white;
|
||||
}
|
||||
.two-line.admin .secondary, .two-line.member .secondary {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>LOOT relies on the submission of information by users to improve. We can't list everyone who has posted in LOOT's forum threads, but the people who have contributed on GitHub are listed below.
|
||||
<p>Team members and admins have blue and purple backgrounds respectively.
|
||||
<div id="contrib" layout horizontal wrap>
|
||||
<div id="contrib">
|
||||
<div id="progress" layout horizontal center>
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
<div>Fetching contributors...</div>
|
||||
|
||||
@@ -50,58 +50,6 @@ core-menu > paper-item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
paper-item core-icon {
|
||||
margin-right: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
paper-item .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
paper-item::shadow .button-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
paper-item::shadow .button-content ::content * {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
paper-item::shadow .button-content ::content a {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
-ms-flex: 1 1 auto;
|
||||
}
|
||||
/* paper-item (two-line) */
|
||||
paper-item.two-line {
|
||||
height: 72px;
|
||||
}
|
||||
paper-item.two-line::shadow .button-content {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
paper-item.two-line::shadow .button-content ::content a {
|
||||
margin: -16px -16px;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
paper-item.two-line .text {
|
||||
/* Padding is disabled as otherwise text won't fit in correctly. */
|
||||
/*padding: 4px 0;*/
|
||||
line-height: normal;
|
||||
}
|
||||
paper-item.two-line .primary {
|
||||
/* MD spec says 16sp, but that doesn't fit, so use 14sp. */
|
||||
/*font-size: 1.143rem;*/
|
||||
font-size: 1rem;
|
||||
}
|
||||
paper-item.two-line .secondary {
|
||||
/* MD spec says 14sp, but that doesn't fit, so use 12sp. */
|
||||
/*font-size: 1rem; */
|
||||
font-size: 0.857rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
/* paper-dropdown-menu */
|
||||
paper-dropdown-menu {
|
||||
margin-left: 4px;
|
||||
|
||||
@@ -66,3 +66,47 @@ nav > .subheader {
|
||||
nav > .divider {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Custom two-line Material Design item with avatar. */
|
||||
.loot-contributor {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 192px;
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
background: #E8EAF6;
|
||||
color: inherit;
|
||||
}
|
||||
.loot-contributor__avatar,
|
||||
.loot-contributor__text {
|
||||
display: inline-block;
|
||||
}
|
||||
.loot-contributor__avatar > * {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.loot-contributor__avatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
.loot-contributor__avatar > .material-icons {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.loot-contributor.loot-admin {
|
||||
background: #303F9F;
|
||||
color: white;
|
||||
}
|
||||
.loot-contributor.loot-member {
|
||||
background: #64B5F6;
|
||||
color: white;
|
||||
}
|
||||
.loot-contributor__contributions {
|
||||
font-size: 0.857rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.loot-admin .loot-contributor__contributions,
|
||||
.loot-member .loot-contributor__contributions {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
+28
-31
@@ -13,47 +13,44 @@ var admins = [];
|
||||
var members = [];
|
||||
|
||||
function addToList(listElement, person) {
|
||||
var li = document.createElement('paper-item');
|
||||
var a = document.createElement('a');
|
||||
var avatar;
|
||||
if (person.avatar_url) {
|
||||
avatar = document.createElement('img');
|
||||
avatar.src = person.avatar_url;
|
||||
} else {
|
||||
avatar = document.createElement('core-icon');
|
||||
avatar.setAttribute('icon', 'face');
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
var primarySpan = document.createElement('span');
|
||||
var secondarySpan = document.createElement('span');
|
||||
var avatar = document.createElement('div');
|
||||
var text = document.createElement('div');
|
||||
var name = document.createElement('div');
|
||||
var contributions = document.createElement('div');
|
||||
|
||||
li.classList.add('two-line');
|
||||
a.classList.add('loot-contributor');
|
||||
|
||||
a.setAttribute('layout', '');
|
||||
a.setAttribute('horizontal', '');
|
||||
a.setAttribute('center', '');
|
||||
|
||||
avatar.className = 'avatar';
|
||||
div.className = 'text';
|
||||
primarySpan.className = 'primary';
|
||||
secondarySpan.className = 'secondary';
|
||||
avatar.className = 'loot-contributor__avatar';
|
||||
text.className = 'loot-contributor__text';
|
||||
name.className = 'loot-contributor__name';
|
||||
contributions.className = 'loot-contributor__contributions';
|
||||
|
||||
a.href = person.html_url;
|
||||
primarySpan.textContent = person.name;
|
||||
secondarySpan.textContent = person.contributions + ' contributions';
|
||||
name.textContent = person.name;
|
||||
contributions.textContent = person.contributions + ' contributions';
|
||||
|
||||
if (admins.indexOf(person.name) !== -1) {
|
||||
li.classList.add('admin');
|
||||
a.classList.add('loot-admin');
|
||||
} else if (members.indexOf(person.name) !== -1) {
|
||||
li.classList.add('member');
|
||||
a.classList.add('loot-member');
|
||||
}
|
||||
li.appendChild(a);
|
||||
if (person.avatar_url) {
|
||||
var img = document.createElement('img');
|
||||
img.src = person.avatar_url;
|
||||
avatar.appendChild(img);
|
||||
} else {
|
||||
var icon = document.createElement('i');
|
||||
icon.className = 'material-icons';
|
||||
icon.textContent = 'face';
|
||||
avatar.appendChild(icon);
|
||||
}
|
||||
|
||||
a.appendChild(avatar);
|
||||
a.appendChild(div);
|
||||
div.appendChild(primarySpan);
|
||||
div.appendChild(document.createElement('br'));
|
||||
div.appendChild(secondarySpan);
|
||||
listElement.appendChild(li);
|
||||
a.appendChild(text);
|
||||
text.appendChild(name);
|
||||
text.appendChild(contributions);
|
||||
listElement.appendChild(a);
|
||||
}
|
||||
|
||||
function sortContributors(a,b) {
|
||||
|
||||
Reference in New Issue
Block a user