mirror of
https://github.com/loot/loot.github.io.git
synced 2026-07-27 14:13:30 -07:00
Material Design updates
Just about everything except inputs and dropdowns has been updated to follow the spec, including: * All typography * Sidebar item spacing * Sidebar separator styling * Buttons * Contributor cards * Progress indicators Minor spec deviations in the font sizes used for two-line list items were necessary for both lines to fit.
This commit is contained in:
Oliver Hamlet
+5
-6
@@ -14,14 +14,13 @@
|
||||
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet" type="text/css">
|
||||
|
||||
<body unresolved fullbleed>
|
||||
<core-drawer-panel>
|
||||
<core-drawer-panel drawerWidth="276px">
|
||||
<div drawer layout vertical>
|
||||
<core-toolbar>
|
||||
<img alt="LOOT" src="/icon.png">
|
||||
<h1>LOOT</h1>
|
||||
<h1 class="display1 dark">LOOT</h1>
|
||||
</core-toolbar>
|
||||
<nav flex>
|
||||
<div class="subheading">On This Site</div>
|
||||
<paper-item><a href="/">
|
||||
<core-icon icon="home"></core-icon>Home
|
||||
</a></paper-item>
|
||||
@@ -34,14 +33,14 @@
|
||||
<paper-item><a href="/credits/">
|
||||
<core-icon icon="social:people"></core-icon>Credits
|
||||
</a></paper-item>
|
||||
<div class="subheading">On GitHub</div>
|
||||
<div class="subheader">On GitHub</div>
|
||||
<paper-item><a href="https://github.com/loot">
|
||||
<core-icon icon="social:post-github"></core-icon>Code
|
||||
</a></paper-item>
|
||||
<paper-item><a href="https://github.com/loot/loot.github.io/wiki">
|
||||
<core-icon icon="subject"></core-icon>Wiki
|
||||
</a></paper-item>
|
||||
<div class="subheading">Help, Support & Discussion</div>
|
||||
<div class="subheader">Help, Support & Discussion</div>
|
||||
<paper-item><a href="http://forums.bethsoft.com/topic/1511411-rel-loot-thread-15/">
|
||||
<core-icon icon="communication:forum"></core-icon>Forum Thread
|
||||
</a></paper-item>
|
||||
@@ -57,7 +56,7 @@
|
||||
|
||||
<core-toolbar>
|
||||
<paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<h1 class="headline dark">{{ page.title }}</h1>
|
||||
</core-toolbar>
|
||||
|
||||
<div id="content" flex>
|
||||
|
||||
+2
-18
@@ -15,36 +15,20 @@ permalink: /credits/
|
||||
margin: 4px;
|
||||
width: 280px;
|
||||
}
|
||||
#contrib > paper-item a > :first-child {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
#contrib > paper-item a > div {
|
||||
display: inline-block;
|
||||
padding-left: 16px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
#contrib > paper-item.admin {
|
||||
box-shadow: rgba(121, 134, 203, 1) 0px 2px 4px, rgba(121, 134, 203, 1) 0px 0px 3px;
|
||||
}
|
||||
#contrib > paper-item.member {
|
||||
box-shadow: rgba(100, 181, 246, 0.0980392) 0px 2px 4px, rgba(100, 181, 246, 1) 0px 0px 3px;
|
||||
}
|
||||
.secondary {
|
||||
font-size: 14pt;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
#contrib paper-spinner {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</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 shadows respectively.
|
||||
<div id="contrib">
|
||||
<li layout horizontal center>
|
||||
<div id="progress" layout horizontal center>
|
||||
<paper-spinner active></paper-spinner><div>Fetching contributors...</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/github/lib/underscore-min.js"></script>
|
||||
|
||||
+1
-1
@@ -9,6 +9,6 @@ title: Home
|
||||
|
||||
<p>While sorting, LOOT checks for load order errors (such as incompatibilities and missing requirements) and notifies you of any issues that it detects. It also provides thousands of plugin-specific messages, such as usage notes and bug warnings, to help keep your game healthy.</p>
|
||||
|
||||
<paper-button raised id="bigbutton"><a href="https://github.com/loot/loot/releases/tag/v0.6.0">Download LOOT</a></paper-button>
|
||||
<paper-button raised id="download-button"><a href="https://github.com/loot/loot/releases/tag/v0.6.0">Download LOOT</a></paper-button>
|
||||
|
||||
<p>While we welcome user feedback, please check the <a href="https://github.com/loot/loot.github.io/wiki/LOOT-FAQs">FAQs</a> in case you have a question that has already been answered.</p>
|
||||
|
||||
+11
-6
@@ -20,10 +20,15 @@ function addToList(listElement, person) {
|
||||
var primarySpan = document.createElement('span');
|
||||
var secondarySpan = document.createElement('span');
|
||||
|
||||
li.setAttribute('layout', '');
|
||||
li.setAttribute('horizontal', '');
|
||||
li.setAttribute('center', '');
|
||||
li.classList.add('two-line');
|
||||
|
||||
a.setAttribute('layout', '');
|
||||
a.setAttribute('horizontal', '');
|
||||
a.setAttribute('center', '');
|
||||
|
||||
img.className = 'avatar';
|
||||
div.className = 'text';
|
||||
primarySpan.className = 'primary';
|
||||
secondarySpan.className = 'secondary';
|
||||
|
||||
a.href = person.html_url;
|
||||
@@ -32,9 +37,9 @@ function addToList(listElement, person) {
|
||||
secondarySpan.textContent = person.contributions + ' contributions';
|
||||
|
||||
if (admins.indexOf(person.login) !== -1) {
|
||||
li.className = 'admin';
|
||||
li.classList.add('admin');
|
||||
} else if (team.indexOf(person.login) !== -1) {
|
||||
li.className = 'member';
|
||||
li.classList.add('member');
|
||||
}
|
||||
li.appendChild(a);
|
||||
a.appendChild(img);
|
||||
@@ -132,7 +137,7 @@ function storeTeamMembers(err, data) {
|
||||
console.log(err);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
team.push(data[i].login);
|
||||
}
|
||||
|
||||
+2
-2
@@ -43,7 +43,7 @@ function readMasterlist(err, data) {
|
||||
}
|
||||
|
||||
var masterlist = jsyaml.safeLoad(data);
|
||||
document.getElementById('progress').classList.remove('show');
|
||||
document.getElementById('progress').classList.add('hidden');
|
||||
|
||||
/* Do search here. */
|
||||
console.log("Starting search.");
|
||||
@@ -86,7 +86,7 @@ function onSearchInit(evt) {
|
||||
}
|
||||
|
||||
console.log("Loading masterlist...");
|
||||
progress.classList.add('show');
|
||||
progress.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Startup Code
|
||||
|
||||
+71
-5
@@ -1,12 +1,78 @@
|
||||
/* paper-button */
|
||||
paper-button {
|
||||
min-width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin: 6px 4px;
|
||||
}
|
||||
paper-button::shadow .button-content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
paper-button::shadow .button-content ::content a {
|
||||
margin: -0.7em -0.57em;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 -8px;
|
||||
padding: 0 8px;
|
||||
-ms-flex: 1 1 auto;
|
||||
}
|
||||
/* paper-item */
|
||||
nav > paper-item {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
nav > paper-item:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
paper-item core-icon {
|
||||
margin-right: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
paper-item .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
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 {
|
||||
padding: 16px 16px 20px;
|
||||
margin: -16px -16px -20px;
|
||||
flex: 1 1 auto;
|
||||
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-input-decorator */
|
||||
paper-input-decorator {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
+4
-19
@@ -5,34 +5,19 @@ permalink: /search/
|
||||
---
|
||||
|
||||
<style>
|
||||
#searchButton {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#results {
|
||||
background: white;
|
||||
}
|
||||
#progress {
|
||||
#progress.hidden {
|
||||
display: none;
|
||||
padding: 16px;
|
||||
}
|
||||
#progress.show {
|
||||
display: block;
|
||||
}
|
||||
#progress paper-spinner {
|
||||
margin-right: 0.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#progress paper-spinner + div {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#results code {
|
||||
white-space:pre;
|
||||
display:block;
|
||||
overflow-x:auto;
|
||||
font-family: monospace;
|
||||
font-size: 12pt;
|
||||
padding: 0.75em;
|
||||
font-size: 1rem;
|
||||
padding: 16px;
|
||||
border-top: 1px rgba(0, 0, 0, 0.12) solid;
|
||||
}
|
||||
#results code:first-of-type {
|
||||
@@ -61,7 +46,7 @@ permalink: /search/
|
||||
|
||||
|
||||
<paper-shadow id="results" flex Z="1">
|
||||
<div id="progress">
|
||||
<div id="progress" class="hidden" layout horizontal center>
|
||||
<paper-spinner active></paper-spinner><div>Loading masterlist...</div>
|
||||
</div>
|
||||
</paper-shadow>
|
||||
|
||||
@@ -1,3 +1,88 @@
|
||||
/* Typography
|
||||
The font sizes and line heights have been calculated assuming a body font
|
||||
size of 14sp and a subhead font size of 16sp, which are the MD values for
|
||||
devices. The desktop sizes are 13sp and 15sp respectively.
|
||||
Letter spacing (tracking) values in the spec are assumed to be in units of
|
||||
1/1000 em. They are commented out as the results don't match the image in
|
||||
the spec.
|
||||
*/
|
||||
html {
|
||||
font:13pt/20pt RobotoDraft, sans-serif;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.display4 {
|
||||
font-weight: 300;
|
||||
font-size: 8rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: -0.01em;*/
|
||||
}
|
||||
.display3 {
|
||||
font-weight: 400;
|
||||
font-size: 4rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: -0.005em;*/
|
||||
}
|
||||
.display2 {
|
||||
font-weight: 400;
|
||||
font-size: 3.214rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
line-height: 1.067;
|
||||
}
|
||||
.display1 {
|
||||
font-weight: 400;
|
||||
font-size: 2.429rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
line-height: 1.176;
|
||||
}
|
||||
.headline {
|
||||
font-weight: 400;
|
||||
font-size: 1.714rem;
|
||||
line-height: 1.333;
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 1.429rem;
|
||||
/*letter-spacing: 0.005em;*/
|
||||
}
|
||||
.subhead, h2 {
|
||||
font-weight: 400;
|
||||
font-size: 1.143rem;
|
||||
line-height: 1.75;
|
||||
/* Alternate line height: */
|
||||
/* line-height: 1.5; */
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.body2, .subheader, nav > paper-item {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.714;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.body1 {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.429;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.caption {
|
||||
font-weight: 400;
|
||||
font-size: 0.857rem;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
/*letter-spacing: 0.02em;*/
|
||||
}
|
||||
.button, paper-button {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.display4.dark, .display3.dark, .display2.dark, .display1.dark, .caption.dark {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: #64B5F6;
|
||||
@@ -14,27 +99,12 @@ paper-item a:hover, paper-button a:hover {
|
||||
body {
|
||||
background: white;
|
||||
margin:0 auto;
|
||||
font:13pt/20pt RobotoDraft, sans-serif;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
core-toolbar {
|
||||
background: #3F51B5;
|
||||
color: white;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
core-icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 24pt;
|
||||
line-height: 32pt;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 15pt;
|
||||
line-height: 24pt;
|
||||
}
|
||||
div[drawer] {
|
||||
background: white;
|
||||
}
|
||||
@@ -44,36 +114,60 @@ div[drawer] nav {
|
||||
}
|
||||
div[drawer] > core-toolbar {
|
||||
border-right: 1px rgba(0, 0, 0, 0.12) solid;
|
||||
box-shadow: none;
|
||||
}
|
||||
div[drawer] > core-toolbar img {
|
||||
height: 48px;
|
||||
}
|
||||
div[drawer] > core-toolbar h1 {
|
||||
font-weight: 400;
|
||||
font-size: 34pt;
|
||||
}
|
||||
#content {
|
||||
padding: 16px;
|
||||
padding: 0 16px;
|
||||
overflow-y: auto;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
paper-button {
|
||||
background: #64B5F6;
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#bigbutton {
|
||||
#download-button {
|
||||
display: table;
|
||||
font-size: 24pt;
|
||||
line-height: 32pt;
|
||||
margin: 1em auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#bigbutton a {
|
||||
color:white;
|
||||
/* Progress indication for search and contributor listing. */
|
||||
#progress {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
}
|
||||
.subheading {
|
||||
font-size: 15px;
|
||||
line-height: 48px;
|
||||
#progress paper-spinner {
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
/* For MD subheaders suitable for lists, menus and grids. */
|
||||
.subheader {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
padding-left: 16px;
|
||||
height: 48px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
line-height: 48px;
|
||||
}
|
||||
/* For MD navigation drawer subheaders. */
|
||||
nav > .subheader {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin-top: 8px;
|
||||
}
|
||||
nav > .subheader.dark {
|
||||
border-top-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* For MD generic dividers. */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.divider.dark {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
/* For MD navigation drawer dividers. */
|
||||
nav > .divider {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user