Fix linting issues table

Also fixed severity icon alignment
This commit is contained in:
Rob Garrison 2017-08-20 14:35:29 -05:00
parent 80ed34f3e7
commit 75deeddc0e
2 changed files with 7 additions and 14 deletions

View File

@ -24,10 +24,6 @@ body {
margin-top: 1rem; margin-top: 1rem;
margin-left: 1.7rem; margin-left: 1.7rem;
} }
section {
box-sizing: border-box;
width: 100%;
}
.aligned { .aligned {
display: table-row; display: table-row;
} }
@ -459,7 +455,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
#lint td[role="severity"] { #lint td[role="severity"] {
font-size: 0; font-size: 0;
width: 16px; width: 16px;
padding-right: 0.25rem;
} }
#lint td[role="line"], #lint td[role="sep"] { #lint td[role="line"], #lint td[role="sep"] {
text-align: right; text-align: right;
@ -471,9 +466,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
} }
#lint td[role="message"] { #lint td[role="message"] {
text-align: left; text-align: left;
max-width: 140px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: pre;
overflow: hidden; overflow: hidden;
} }

View File

@ -93,23 +93,23 @@ function updateLintReport(cm, delay) {
const pos = isActiveLine ? 'cursor' : (info.from.line + ',' + info.from.ch); const pos = isActiveLine ? 'cursor' : (info.from.line + ',' + info.from.ch);
// stylelint rule added in parentheses at the end // stylelint rule added in parentheses at the end
const rule = linter === 'stylelint' ? const rule = linter === 'stylelint' ?
info.message.substring(info.message.lastIndexOf('('), info.message.length) : info.message.substring(info.message.lastIndexOf('('), info.message.length).replace(/[()]/g, '') :
/ at line \d.+$/; / at line \d.+$/;
// csslint // csslint
const message = escapeHtml(info.message.replace(rule, '')); const title = escapeHtml(info.message);
const message = title.length > 100 ? title.substr(0, 100) + '...' : title;
if (isActiveLine || oldMarkers[pos] === message) { if (isActiveLine || oldMarkers[pos] === message) {
delete oldMarkers[pos]; delete oldMarkers[pos];
} }
newMarkers[pos] = message; newMarkers[pos] = message;
return `<tr class="${info.severity}"> return `<tr class="${info.severity}">
<td role="severity" class="CodeMirror-lint-marker-${info.severity}" <td role="severity" ${linter === 'stylelint' ? 'data-rule="' + rule + '"' : ''}>
${linter === 'stylelint' ? 'title="Rule: ' + rule + '"' : ''}> <div class="CodeMirror-lint-marker-${info.severity}">${info.severity}</div>
${info.severity}
</td> </td>
<td role="line">${info.from.line + 1}</td> <td role="line">${info.from.line + 1}</td>
<td role="sep">:</td> <td role="sep">:</td>
<td role="col">${info.from.ch + 1}</td> <td role="col">${info.from.ch + 1}</td>
<td role="message" title="${message}">${message}</td> <td role="message" title="${title}">${message}</td>
</tr>`; </tr>`;
}).join('') + '</tbody>'; }).join('') + '</tbody>';
scopedState.markedLast = newMarkers; scopedState.markedLast = newMarkers;
@ -211,7 +211,7 @@ function showLintHelp() {
header = t('issuesHelp', `<a href="${url}" target="_blank">stylelint</a>`); header = t('issuesHelp', `<a href="${url}" target="_blank">stylelint</a>`);
// to-do: change this to a generator // to-do: change this to a generator
$$('#lint td[role="severity"]').forEach(el => { $$('#lint td[role="severity"]').forEach(el => {
const rule = el.title.replace('Rule: (', '').replace(/[()]/g, '').trim(); const rule = el.dataset.rule;
if (!rules.includes(rule)) { if (!rules.includes(rule)) {
list += `<li><a target="_blank" href="${url}${rule}/">${rule}</a></li>`; list += `<li><a target="_blank" href="${url}${rule}/">${rule}</a></li>`;
rules.push(rule); rules.push(rule);